feat/TanStack-Form (#18346)

web/app/components/base/form/form-scenarios/demo/contact-fields.tsx

@@ -0,0 +1,35 @@
+import { withForm } from '../..'
+import { demoFormOpts } from './shared-options'
+import { ContactMethods } from './types'
+
+const ContactFields = withForm({
+  ...demoFormOpts,
+  render: ({ form }) => {
+    return (
+      <div className='my-2'>
+        <h3 className='title-lg-bold text-text-primary'>Contacts</h3>
+        <div className='flex flex-col gap-4'>
+          <form.AppField
+            name='contact.email'
+            children={field => <field.TextField label='Email' />}
+          />
+          <form.AppField
+            name='contact.phone'
+            children={field => <field.TextField label='Phone' />}
+          />
+          <form.AppField
+            name='contact.preferredContactMethod'
+            children={field => (
+              <field.SelectField
+                label='Preferred Contact Method'
+                options={ContactMethods}
+              />
+            )}
+          />
+        </div>
+      </div>
+    )
+  },
+})
+
+export default ContactFields

web/app/components/base/form/form-scenarios/demo/index.tsx

@@ -0,0 +1,68 @@
+import { useStore } from '@tanstack/react-form'
+import { useAppForm } from '../..'
+import ContactFields from './contact-fields'
+import { demoFormOpts } from './shared-options'
+import { UserSchema } from './types'
+
+const DemoForm = () => {
+  const form = useAppForm({
+    ...demoFormOpts,
+    validators: {
+      onSubmit: ({ value }) => {
+        // Validate the entire form
+        const result = UserSchema.safeParse(value)
+        if (!result.success) {
+          const issues = result.error.issues
+          console.log('Validation errors:', issues)
+          return issues[0].message
+        }
+        return undefined
+      },
+    },
+    onSubmit: ({ value }) => {
+      console.log('Form submitted:', value)
+    },
+  })
+
+const name = useStore(form.store, state => state.values.name)
+
+  return (
+    <form
+      className='flex w-[400px] flex-col gap-4'
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        form.handleSubmit()
+      }}
+    >
+      <form.AppField
+        name='name'
+        children={field => (
+          <field.TextField label='Name' />
+        )}
+      />
+      <form.AppField
+        name='surname'
+        children={field => (
+          <field.TextField label='Surname' />
+        )}
+      />
+      <form.AppField
+        name='isAcceptingTerms'
+        children={field => (
+          <field.CheckboxField label='I accept the terms and conditions.' />
+        )}
+      />
+      {
+        !!name && (
+          <ContactFields form={form} />
+        )
+      }
+      <form.AppForm>
+        <form.SubmitButton>Submit</form.SubmitButton>
+      </form.AppForm>
+    </form>
+  )
+}
+
+export default DemoForm

web/app/components/base/form/form-scenarios/demo/shared-options.tsx

@@ -0,0 +1,14 @@
+import { formOptions } from '@tanstack/react-form'
+
+export const demoFormOpts = formOptions({
+  defaultValues: {
+    name: '',
+    surname: '',
+    isAcceptingTerms: false,
+    contact: {
+      email: '',
+      phone: '',
+      preferredContactMethod: 'email',
+    },
+  },
+})

web/app/components/base/form/form-scenarios/demo/types.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod'
+
+const ContactMethod = z.union([
+  z.literal('email'),
+  z.literal('phone'),
+  z.literal('whatsapp'),
+  z.literal('sms'),
+])
+
+export const ContactMethods = ContactMethod.options.map(({ value }) => ({
+  value,
+  label: value.charAt(0).toUpperCase() + value.slice(1),
+}))
+
+export const UserSchema = z.object({
+  name: z
+    .string()
+    .regex(/^[A-Z]/, 'Name must start with a capital letter')
+    .min(3, 'Name must be at least 3 characters long'),
+  surname: z
+    .string()
+    .min(3, 'Surname must be at least 3 characters long')
+    .regex(/^[A-Z]/, 'Surname must start with a capital letter'),
+  isAcceptingTerms: z.boolean().refine(val => val, {
+    message: 'You must accept the terms and conditions',
+  }),
+  contact: z.object({
+    email: z.string().email('Invalid email address'),
+    phone: z.string().optional(),
+    preferredContactMethod: ContactMethod,
+  }),
+})
+
+export type User = z.infer<typeof UserSchema>