chore: add zod and yup build configs

formwerkjs · Aug 11, 2024 · ad006bb · ad006bb
1 parent 849932b
commit ad006bb
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 39 deletions.
diff --git 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
@@ -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
diff --git 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: {