From ad006bb932ffdc03b993111719f0813e76116977 Mon Sep 17 00:00:00 2001
From: Abdelrahman Awad <logaretm1@gmail.com>
Date: Mon, 12 Aug 2024 01:17:24 +0300
Subject: [PATCH] chore: add zod and yup build configs

---
 packages/playground/package.json |  6 +++-
 packages/playground/src/App.vue  | 47 +++++++-------------------------
 pnpm-lock.yaml                   | 24 ++++++++++++++++
 scripts/config.ts                |  6 +++-
 4 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/packages/playground/package.json b/packages/playground/package.json
index b2c7034f..a299cb5e 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -9,8 +9,12 @@
   },
   "dependencies": {
     "@formwerk/core": "workspace:*",
+    "@formwerk/schema-yup": "workspace:*",
+    "@formwerk/schema-zod": "workspace:*",
     "tailwindcss": "^3.4.9",
-    "vue": "^3.5.0-alpha.4"
+    "vue": "^3.5.0-alpha.4",
+    "yup": "^1.3.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.2",
diff --git a/packages/playground/src/App.vue b/packages/playground/src/App.vue
index b221d205..f2e31281 100644
--- a/packages/playground/src/App.vue
+++ b/packages/playground/src/App.vue
@@ -1,52 +1,25 @@
 <template>
-  <div class="flex gap-4 relative">
-    <form class="w-full" @submit="onSubmit" novalidate>
-      <div v-for="(field, idx) in fields" :key="field.id" class="flex items-center">
-        <InputText :name="`field.${idx}`" :label="`Field ${idx}`" required />
+  <div class="flex flex-col">
+    <InputText label="Test" name="test" />
 
-        <button type="button" class="bg-red-500 rounded text-white p-2" @click="fields.splice(idx, 1)">X</button>
-      </div>
-
-      <button class="bg-zinc-700 text-white rounded p-1" type="button" @click="add">+ Add Field</button>
-      <button class="bg-zinc-700 text-white rounded p-1" type="button" @click="swap">Swap</button>
-      <button class="bg-zinc-700 text-white rounded p-1" type="button" @click="reverse">Reverse</button>
-
-      {{ isValid }}
-      <!-- <InputSearch name="search" label="Search" :min-length="10" @submit="onSearchSubmit" /> -->
-
-      <button type="submit" class="bg-blue-700 text-white rounded p-1">Submit</button>
-    </form>
-
-    <div class="w-1/3 relative">
-      <pre class="max-h-[95vh] overflow-y-auto bg-gray-200 rounded-lg p-4 sticky top-4">{{ values }}</pre>
-    </div>
+    <pre>{{ isValid }}</pre>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
 import InputText from '@/components/InputText.vue';
 import { useForm } from '@formwerk/core';
+import { defineSchema } from '@formwerk/schema-yup';
+import * as yup from 'yup';
 
 const { values, isValid, handleSubmit } = useForm({
-  // initialValues: getInitials,
+  schema: defineSchema(
+    yup.object({
+      test: yup.string().required(),
+    }),
+  ),
 });
 
-const fields = ref([{ type: 'text', id: Date.now() }]);
-
-function add() {
-  fields.value.unshift({ type: 'text', id: Date.now() });
-}
-
-function swap() {
-  const [f1, f2, f3] = fields.value;
-  fields.value = [f2, f1, f3];
-}
-
-function reverse() {
-  fields.value = [...fields.value].reverse();
-}
-
 const onSubmit = handleSubmit(values => {
   console.log(values);
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 47ff4467..d31650a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,12 +149,24 @@ importers:
       '@formwerk/core':
         specifier: workspace:*
         version: link:../core
+      '@formwerk/schema-yup':
+        specifier: workspace:*
+        version: link:../schema-yup
+      '@formwerk/schema-zod':
+        specifier: workspace:*
+        version: link:../schema-zod
       tailwindcss:
         specifier: ^3.4.9
         version: 3.4.9
       vue:
         specifier: ^3.5.0-alpha.4
         version: 3.5.0-alpha.4(typescript@5.5.4)
+      yup:
+        specifier: ^1.3.2
+        version: 1.4.0
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.1.2
@@ -181,6 +193,18 @@ importers:
         specifier: ^1.3.2
         version: 1.4.0
 
+  packages/schema-zod:
+    dependencies:
+      '@formwerk/core':
+        specifier: workspace:*
+        version: link:../core
+      type-fest:
+        specifier: ^4.24.0
+        version: 4.24.0
+      zod:
+        specifier: ^3.23.8
+        version: 3.23.8
+
   packages/test-utils: {}
 
 packages:
diff --git a/scripts/config.ts b/scripts/config.ts
index c48dda5e..b890e6b6 100644
--- a/scripts/config.ts
+++ b/scripts/config.ts
@@ -11,10 +11,14 @@ const __dirname = dirname(__filename);
 
 const formatNameMap = {
   core: 'FormwerkCore',
+  'schema-yup': 'FWSchemaYup',
+  'schema-zod': 'FWSchemaZod',
 };
 
 const pkgNameMap = {
   core: 'core',
+  'schema-yup': 'schema-yup',
+  'schema-zod': 'schema-zod',
 };
 
 const formatMap = {
@@ -60,7 +64,7 @@ async function createConfig(pkg, format) {
     bundleName: `${pkgNameMap[pkg]}${formatMap[format] ? '.' + formatMap[format] : ''}.js`,
     input: {
       input: slashes(path.resolve(__dirname, `../packages/${pkg}/src/index.ts`)),
-      external: ['vue', isEsm ? '@vue/devtools-api' : undefined].filter(Boolean) as string[],
+      external: ['vue', isEsm ? '@vue/devtools-api' : undefined, 'yup', 'zod'].filter(Boolean) as string[],
       plugins: createPlugins({ version, pkg, format }),
     },
     output: {