Change Zod schemas to Valibot in website

Author: fabian-hiller

playgrounds/qwik/package.json

@@ -25,7 +25,8 @@
   },
   "dependencies": {
     "@modular-forms/qwik": "workspace:*",
-    "clsx": "^1.2.1"
+    "clsx": "^1.2.1",
+    "valibot": "^0.1.0"
   },
   "devDependencies": {
     "@builder.io/qwik": "1.1.5",

playgrounds/qwik/src/routes/actions/login/index.tsx

@@ -2,29 +2,29 @@ import { component$ } from '@builder.io/qwik';
 import {
   globalAction$,
   routeLoader$,
-  z,
   type DocumentHead,
 } from '@builder.io/qwik-city';
 import {
   formAction$,
   type InitialValues,
   useForm,
-  zodForm$,
+  valiForm$,
 } from '@modular-forms/qwik';
+import { email, type Input, minLength, object, string } from 'valibot';
 import { FormHeader, TextInput, FormFooter, Response } from '~/components';
 
-const loginSchema = z.object({
-  email: z
-    .string()
-    .min(1, 'Please enter your email.')
-    .email('The email address is badly formatted.'),
-  password: z
-    .string()
-    .min(1, 'Please enter your password.')
-    .min(8, 'You password must have 8 characters or more.'),
+const LoginSchema = object({
+  email: string([
+    minLength(1, 'Please enter your email.'),
+    email('The email address is badly formatted.'),
+  ]),
+  password: string([
+    minLength(1, 'Please enter your password.'),
+    minLength(8, 'You password must have 8 characters or more.'),
+  ]),
 });
 
-type LoginForm = z.input<typeof loginSchema>;
+type LoginForm = Input<typeof LoginSchema>;
 
 const getInitFormValues = (): InitialValues<LoginForm> => ({
   email: '',
@@ -45,14 +45,14 @@ export const useResetFormAction = globalAction$(() => {
 export const useFormAction = formAction$<LoginForm>((values) => {
   // Runs on server
   console.log(values);
-}, zodForm$(loginSchema));
+}, valiForm$(LoginSchema));
 
 export default component$(() => {
   // Use login form
   const [loginForm, { Form, Field }] = useForm<LoginForm>({
     loader: useFormLoader(),
     action: useFormAction(),
-    validate: zodForm$(loginSchema),
+    validate: valiForm$(LoginSchema),
   });
 
   // Use reset form action

playgrounds/qwik/src/routes/actions/special/index.tsx

@@ -1,16 +1,25 @@
-import { component$, noSerialize, type NoSerialize } from '@builder.io/qwik';
+import { component$, type NoSerialize } from '@builder.io/qwik';
 import {
   type DocumentHead,
   routeLoader$,
-  z,
   globalAction$,
 } from '@builder.io/qwik-city';
 import {
   type InitialValues,
   useForm,
-  zodForm$,
+  valiForm$,
   formAction$,
 } from '@modular-forms/qwik';
+import {
+  array,
+  boolean,
+  type Input,
+  number,
+  object,
+  optional,
+  special,
+  string,
+} from 'valibot';
 import {
   FormHeader,
   TextInput,
@@ -22,30 +31,26 @@ import {
   Response,
 } from '~/components';
 
-const isBlob = (value: unknown) =>
-  !!value && typeof value === 'object' && 'size' in value && 'type' in value;
-
-const isBlobArray = (value: unknown) =>
-  Array.isArray(value) && value.every(isBlob);
+const isBlob = (input: unknown) => input instanceof Blob;
 
-const specialSchema = z.object({
-  number: z.number(),
-  range: z.number(),
-  checkbox: z.object({
-    array: z.array(z.string()),
-    boolean: z.boolean(),
+const SpecialSchema = object({
+  number: number(),
+  range: number(),
+  checkbox: object({
+    array: array(string()),
+    boolean: boolean(),
   }),
-  select: z.object({
-    array: z.array(z.string()),
-    string: z.string().optional(),
+  select: object({
+    array: array(string()),
+    string: optional(string()),
   }),
-  file: z.object({
-    list: z.custom<NoSerialize<Blob[]>>(isBlobArray),
-    item: z.custom<NoSerialize<Blob>>(isBlob).optional(),
+  file: object({
+    list: array(special<NoSerialize<Blob>>(isBlob)),
+    item: optional(special<NoSerialize<Blob>>(isBlob)),
   }),
 });
 
-type SpecialForm = z.input<typeof specialSchema>;
+type SpecialForm = Input<typeof SpecialSchema>;
 
 const getInitFormValues = (): InitialValues<SpecialForm> => ({
   number: 0,
@@ -59,7 +64,7 @@ const getInitFormValues = (): InitialValues<SpecialForm> => ({
     string: undefined,
   },
   file: {
-    list: noSerialize([]),
+    list: [],
     item: undefined,
   },
 });
@@ -81,7 +86,7 @@ export const useFormAction = formAction$<SpecialForm>(
     console.log(values);
   },
   {
-    validate: zodForm$(specialSchema),
+    validate: valiForm$(SpecialSchema),
     arrays: ['checkbox.array', 'file.list', 'select.array'],
     booleans: ['checkbox.boolean'],
     files: ['file.item', 'file.list'],
@@ -94,6 +99,7 @@ export default component$(() => {
   const [specialForm, { Form, Field }] = useForm<SpecialForm>({
     loader: useFormLoader(),
     action: useFormAction(),
+    validate: valiForm$(SpecialSchema),
   });
 
   // Use reset form action

playgrounds/qwik/src/routes/actions/todos/index.tsx

@@ -3,7 +3,6 @@ import {
   Form as ActionForm,
   globalAction$,
   routeLoader$,
-  z,
   type DocumentHead,
 } from '@builder.io/qwik-city';
 import {
@@ -14,10 +13,19 @@ import {
   replace,
   swap,
   useForm,
-  zodForm$,
+  valiForm$,
   formAction$,
   getValues,
 } from '@modular-forms/qwik';
+import {
+  array,
+  type Input,
+  maxLength,
+  minLength,
+  object,
+  string,
+  isoDate,
+} from 'valibot';
 import {
   TextInput,
   InputLabel,
@@ -28,26 +36,24 @@ import {
   Response,
 } from '~/components';
 
-const todoSchema = z.object({
-  heading: z.string().min(1, 'Please enter a heading.'),
-  todos: z
-    .array(
-      z.object({
-        label: z.string().min(1, 'Please enter a label.'),
-        deadline: z
-          .string()
-          .min(1, 'Please enter a deadline.')
-          .regex(
-            /^([0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])$/,
-            'The specified date is invalid.'
-          ),
-      })
-    )
-    .min(1, 'Please add at least one todo.')
-    .max(4, 'You can add a maximum of 4 todos.'),
+const TodoSchema = object({
+  heading: string([minLength(1, 'Please enter a heading.')]),
+  todos: array(
+    object({
+      label: string([minLength(1, 'Please enter a label.')]),
+      deadline: string([
+        minLength(1, 'Please enter a deadline.'),
+        isoDate('The specified date is invalid.'),
+      ]),
+    }),
+    [
+      minLength(1, 'Please add at least one todo.'),
+      maxLength(4, 'You can add a maximum of 4 todos.'),
+    ]
+  ),
 });
 
-type TodoForm = z.input<typeof todoSchema>;
+type TodoForm = Input<typeof TodoSchema>;
 
 const getInitFormValues = (): InitialValues<TodoForm> => ({
   heading: 'Shopping list',
@@ -119,7 +125,7 @@ export const useFormAction = formAction$<TodoForm>(
     todoFormValues = values;
   },
   {
-    validate: zodForm$(todoSchema),
+    validate: valiForm$(TodoSchema),
     arrays: ['todos'],
   }
 );
@@ -129,7 +135,7 @@ export default component$(() => {
   const [todoForm, { Form, Field, FieldArray }] = useForm<TodoForm>({
     loader: useFormLoader(),
     action: useFormAction(),
-    validate: zodForm$(todoSchema),
+    validate: valiForm$(TodoSchema),
     fieldArrays: ['todos'],
   });