[WIP] V3: migration from react-hook-form to tanstack-form

app/components/form/docs.stories.tsx

@@ -1,18 +1,10 @@
-import { zodResolver } from '@hookform/resolvers/zod';
 import { Meta } from '@storybook/react';
-import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
+import { useAppForm } from '@/lib/form/config';
 import { zu } from '@/lib/zod/zod-utils';
 
-import {
-  Form,
-  FormField,
-  FormFieldController,
-  FormFieldError,
-  FormFieldHelper,
-  FormFieldLabel,
-} from '@/components/form';
+import { Form } from '@/components/form';
 import { onSubmit } from '@/components/form/docs.utils';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -26,91 +18,51 @@ const zFormSchema = () =>
     name: zu.string.nonEmpty(z.string(), {
       required_error: 'Name is required',
     }),
-    other: zu.string.nonEmptyNullish(z.string()),
+    other: zu.string.nonEmpty(z.string()),
   });
 
 export const Default = () => {
-  const form = useForm({
-    mode: 'onBlur',
-    resolver: zodResolver(zFormSchema()),
+  const form = useAppForm({
+    validators: { onBlur: zFormSchema() },
     defaultValues: {
       name: '',
       other: '',
     },
+    onSubmit,
   });
 
   return (
-    <Form {...form} onSubmit={onSubmit}>
+    <Form form={form}>
       <div className="flex flex-col gap-4">
-        <FormField size="lg">
-          <FormFieldLabel>Name</FormFieldLabel>
-          <FormFieldController control={form.control} type="text" name="name" />
-          <FormFieldHelper>This is an helper text</FormFieldHelper>
-        </FormField>
-        <FormField>
-          <FormFieldLabel>Other (Custom)</FormFieldLabel>
-          <FormFieldController
-            control={form.control}
-            name="other"
-            type="custom"
-            render={({ field }) => (
-              <>
-                <Input {...field} value={field.value ?? ''} />
-                <FormFieldError />
-              </>
-            )}
-          />
-        </FormField>
+        <form.AppField name="name">
+          {(field) => (
+            <field.FormField size="lg">
+              <field.FormFieldLabel>Name</field.FormFieldLabel>
+              <field.FieldText />
+              <field.FormFieldHelper>
+                This is an helper text
+              </field.FormFieldHelper>
+            </field.FormField>
+          )}
+        </form.AppField>
+
+        <form.AppField name="other">
+          {(field) => (
+            <field.FormField>
+              <field.FormFieldLabel>Other (Custom)</field.FormFieldLabel>
+              <Input
+                value={field.state.value ?? ''}
+                onChange={(e) => field.setValue(e.target.value)}
+              />
+              <field.FormFieldError />
+            </field.FormField>
+          )}
+        </form.AppField>
+
         <div>
           <Button type="submit">Submit</Button>
         </div>
       </div>
     </Form>
   );
 };
-
-export const NoHtmlForm = () => {
-  const form = useForm({
-    mode: 'onBlur',
-    resolver: zodResolver(zFormSchema()),
-    defaultValues: {
-      name: '',
-      other: '',
-    },
-  });
-
-  return (
-    <Form {...form} noHtmlForm>
-      <form noValidate onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="flex flex-col gap-4">
-          <FormField size="lg">
-            <FormFieldLabel>Name</FormFieldLabel>
-            <FormFieldController
-              control={form.control}
-              type="text"
-              name="name"
-            />
-            <FormFieldHelper>This is an helper text</FormFieldHelper>
-          </FormField>
-          <FormField>
-            <FormFieldLabel>Other (Custom)</FormFieldLabel>
-            <FormFieldController
-              control={form.control}
-              name="other"
-              type="custom"
-              render={({ field }) => (
-                <>
-                  <Input {...field} value={field.value ?? ''} />
-                  <FormFieldError />
-                </>
-              )}
-            />
-          </FormField>
-          <div>
-            <Button type="submit">Submit</Button>
-          </div>
-        </div>
-      </form>
-    </Form>
-  );
-};

app/components/form/docs.utils.tsx

@@ -1,10 +1,10 @@
 import { toast } from 'sonner';
 
-export const onSubmit = (values: ExplicitAny) => {
+export const onSubmit = ({ value }: ExplicitAny) => {
   toast('You submitted the following values', {
     description: (
       <pre className="mt-2 w-[320px] rounded-md bg-black p-4">
-        <code className="text-white">{JSON.stringify(values, null, 2)}</code>
+        <code className="text-white">{JSON.stringify(value, null, 2)}</code>
       </pre>
     ),
   });

app/components/form/field-date/docs.stories.tsx

@@ -1,13 +1,11 @@
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import { FormFieldController } from '@/components/form';
+import { useAppForm } from '@/lib/form/config';
+
+import { Form } from '@/components/form';
 import { onSubmit } from '@/components/form/docs.utils';
 import { Button } from '@/components/ui/button';
 
-import { Form, FormField, FormFieldHelper, FormFieldLabel } from '..';
-
 export default {
   title: 'Form/FieldDate',
 };
@@ -17,30 +15,55 @@ const zFormSchema = () =>
     date: z.date(),
   });
 
-const formOptions = {
-  mode: 'onBlur',
-  resolver: zodResolver(zFormSchema()),
+const formOptions: Parameters<typeof useAppForm>[0] = {
+  validators: { onSubmit: zFormSchema() },
   defaultValues: {
     date: null as unknown as Date,
   },
-} as const;
+  onSubmit,
+};
 
 export const Default = () => {
-  const form = useForm(formOptions);
+  const form = useAppForm(formOptions);
+
+  return (
+    <Form form={form}>
+      <div className="flex flex-col gap-4">
+        <form.AppField name="date">
+          {(field) => (
+            <field.FormField>
+              <field.FormFieldLabel>Date</field.FormFieldLabel>
+              <field.FieldDate placeholder="DD/MM/YYYY" />
+              <field.FormFieldHelper>Help</field.FormFieldHelper>
+            </field.FormField>
+          )}
+        </form.AppField>
+        <div>
+          <Button type="submit">Submit</Button>
+        </div>
+      </div>
+    </Form>
+  );
+};
+
+export const DefaultValue = () => {
+  const form = useAppForm({
+    ...formOptions,
+    defaultValues: { date: new Date() },
+  });
 
   return (
-    <Form {...form} onSubmit={onSubmit}>
+    <Form form={form}>
       <div className="flex flex-col gap-4">
-        <FormField>
-          <FormFieldLabel>Date</FormFieldLabel>
-          <FormFieldController
-            type="date"
-            control={form.control}
-            name="date"
-            placeholder="DD/MM/YYYY"
-          />
-          <FormFieldHelper>Help</FormFieldHelper>
-        </FormField>
+        <form.AppField name="date">
+          {(field) => (
+            <field.FormField>
+              <field.FormFieldLabel>Date</field.FormFieldLabel>
+              <field.FieldDate placeholder="DD/MM/YYYY" />
+              <field.FormFieldHelper>Help</field.FormFieldHelper>
+            </field.FormField>
+          )}
+        </form.AppField>
         <div>
           <Button type="submit">Submit</Button>
         </div>
@@ -50,24 +73,25 @@ export const Default = () => {
 };
 
 export const CalendarCustomization = () => {
-  const form = useForm(formOptions);
+  const form = useAppForm(formOptions);
 
   return (
-    <Form {...form} onSubmit={onSubmit}>
+    <Form form={form}>
       <div className="flex flex-col gap-4">
-        <FormField>
-          <FormFieldLabel>Date</FormFieldLabel>
-          <FormFieldController
-            type="date"
-            control={form.control}
-            name="date"
-            placeholder="DD/MM/YYYY"
-            calendarProps={{
-              startMonth: new Date(),
-            }}
-          />
-          <FormFieldHelper>Help</FormFieldHelper>
-        </FormField>
+        <form.AppField name="date">
+          {(field) => (
+            <field.FormField>
+              <field.FormFieldLabel>Date</field.FormFieldLabel>
+              <field.FieldDate
+                placeholder="DD/MM/YYYY"
+                calendarProps={{
+                  startMonth: new Date(),
+                }}
+              />
+              <field.FormFieldHelper>Help</field.FormFieldHelper>
+            </field.FormField>
+          )}
+        </form.AppField>
         <div>
           <Button type="submit">Submit</Button>
         </div>