feat: implement form components including CheckboxField, SelectField, TextField, and SubmitButton with validation

web/app/components/base/checkbox/index.tsx

@@ -11,45 +11,38 @@ type CheckboxProps = {
   indeterminate?: boolean
 }
 
-const Checkbox = ({ id, checked, onCheck, className, disabled, indeterminate }: CheckboxProps) => {
-  if (!checked) {
-    return (
-      <div
-        id={id}
-        className={cn(
-          'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] border border-components-checkbox-border bg-components-checkbox-bg-unchecked shadow-xs',
-          indeterminate ? 'border-none bg-components-checkbox-bg text-components-checkbox-icon' : 'hover:bg-components-checkbox-bg-unchecked-hover',
-          disabled && 'cursor-not-allowed border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled text-components-checkbox-icon-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled',
-          className,
-        )}
-        onClick={() => {
-          if (disabled)
-            return
-          onCheck?.()
-        }}
-      >
-        {indeterminate && (
-          <IndeterminateIcon />
-        )}
-      </div>
-    )
-  }
+const Checkbox = ({
+    id,
+    checked,
+    onCheck,
+    className,
+    disabled,
+    indeterminate,
+}: CheckboxProps) => {
+  const checkClassName = (checked || indeterminate)
+    ? 'bg-components-checkbox-bg text-components-checkbox-icon hover:bg-components-checkbox-bg-hover'
+    : 'border border-components-checkbox-border bg-components-checkbox-bg-unchecked hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover'
+  const disabledClassName = (checked || indeterminate)
+    ? 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked'
+    : 'cursor-not-allowed border-components-checkbox-border-disabled bg-components-checkbox-bg-disabled hover:border-components-checkbox-border-disabled hover:bg-components-checkbox-bg-disabled'
+
   return (
     <div
       id={id}
       className={cn(
-        'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] bg-components-checkbox-bg text-components-checkbox-icon shadow-xs hover:bg-components-checkbox-bg-hover',
-        disabled && 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked',
+        'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] shadow-xs shadow-shadow-shadow-3',
+        checkClassName,
+        disabled && disabledClassName,
         className,
       )}
       onClick={() => {
         if (disabled)
           return
-
         onCheck?.()
       }}
     >
-      <RiCheckLine className='h-3 w-3' />
+      {!checked && indeterminate && <IndeterminateIcon />}
+      {checked && <RiCheckLine className='h-3 w-3' />}
     </div>
   )
 }

web/app/components/base/form/components/checkbox-field.tsx

@@ -0,0 +1,43 @@
+import cn from '@/utils/classnames'
+import { useFieldContext } from '..'
+import Checkbox from '../../checkbox'
+
+type CheckboxFieldProps = {
+  label: string;
+  labelClassName?: string;
+}
+
+const CheckboxField = ({
+  label,
+  labelClassName,
+}: CheckboxFieldProps) => {
+  const field = useFieldContext<boolean>()
+
+  return (
+    <div className='flex gap-2'>
+      <div className='flex h-6 shrink-0 items-center'>
+        <Checkbox
+          id={field.name}
+          checked={field.state.value}
+          onCheck={() => {
+            field.handleChange(!field.state.value)
+          }}
+        />
+      </div>
+      <label
+        htmlFor={field.name}
+        className={cn(
+          'system-sm-medium grow cursor-pointer pt-1 text-text-secondary',
+          labelClassName,
+        )}
+        onClick={() => {
+          field.handleChange(!field.state.value)
+        }}
+      >
+        {label}
+      </label>
+    </div>
+  )
+}
+
+export default CheckboxField

web/app/components/base/form/components/label.tsx

@@ -0,0 +1,44 @@
+import cn from '@/utils/classnames'
+import Tooltip from '../../tooltip'
+
+type LabelProps = {
+  htmlFor: string
+  label: string
+  isRequired?: boolean
+  showOptional?: boolean
+  tooltip?: string
+  className?: string
+  labelClassName?: string
+}
+
+const Label = ({
+  htmlFor,
+  label,
+  isRequired,
+  showOptional,
+  tooltip,
+  labelClassName,
+}: LabelProps) => {
+  return (
+    <div className='flex h-6 items-center'>
+      <label
+        htmlFor={htmlFor}
+        className={cn('system-sm-medium text-text-secondary', labelClassName)}
+      >
+        {label}
+      </label>
+      {showOptional && <div className='system-xs-regular ml-1 text-text-tertiary'>(Optional)</div>}
+      {isRequired && <div className='system-xs-regular ml-1 text-text-destructive-secondary'>*</div>}
+      {tooltip && (
+        <Tooltip
+          popupContent={
+            <div className='w-[200px]'>{tooltip}</div>
+          }
+          triggerClassName='ml-0.5 w-4 h-4'
+        />
+      )}
+    </div>
+  )
+}
+
+export default Label

web/app/components/base/form/components/select-filed.tsx

@@ -0,0 +1,42 @@
+import cn from '@/utils/classnames'
+import { useFieldContext } from '..'
+import PureSelect from '../../select/pure'
+import Label from './label'
+
+type SelectOption = {
+  value: string
+  label: string
+}
+
+type SelectFieldProps = {
+  label: string
+  options: SelectOption[]
+  className?: string
+  labelClassName?: string
+}
+
+const SelectField = ({
+  label,
+  options,
+  className,
+  labelClassName,
+}: SelectFieldProps) => {
+  const field = useFieldContext<string>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        className={labelClassName}
+        label={label}
+      />
+      <PureSelect
+        value={field.state.value}
+        options={options}
+        onChange={value => field.handleChange(value)}
+      />
+    </div>
+  )
+}
+
+export default SelectField

web/app/components/base/form/components/submit-button.tsx

@@ -0,0 +1,25 @@
+import { useStore } from '@tanstack/react-form'
+import { useFormContext } from '..'
+import Button, { type ButtonProps } from '../../button'
+
+type SubmitButtonProps = Omit<ButtonProps, 'disabled' | 'loading' | 'onClick'>
+
+const SubmitButton = ({ ...buttonProps }: SubmitButtonProps) => {
+  const form = useFormContext()
+
+  const [isSubmitting, canSubmit] = useStore(form.store, state => [
+    state.isSubmitting,
+    state.canSubmit,
+  ])
+
+  return (
+    <Button
+      disabled={isSubmitting || !canSubmit}
+      loading={isSubmitting}
+      onClick={() => form.handleSubmit()}
+      {...buttonProps}
+    />
+  )
+}
+
+export default SubmitButton

web/app/components/base/form/components/text-field.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useFieldContext } from '..'
+import Input from '../../input'
+import Label from './label'
+import cn from '@/utils/classnames'
+
+type TextFieldProps = {
+  label: string
+  className?: string
+  labelClassName?: string
+}
+
+const TextField = ({
+  label,
+  className,
+  labelClassName,
+}: TextFieldProps) => {
+  const field = useFieldContext<string>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        labelClassName={labelClassName}
+      />
+      <Input
+        id={field.name}
+        value={field.state.value}
+        onChange={e => field.handleChange(e.target.value)}
+        onBlur={field.handleBlur}
+      />
+    </div>
+  )
+}
+
+export default TextField

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>

web/app/components/base/form/index.tsx

@@ -0,0 +1,21 @@
+import { createFormHook, createFormHookContexts } from '@tanstack/react-form'
+import TextField from './components/text-field'
+import CheckboxField from './components/checkbox-field'
+import SelectField from './components/select-filed'
+import SubmitButton from './components/submit-button'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext }
+  = createFormHookContexts()
+
+export const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+    CheckboxField,
+    SelectField,
+  },
+  formComponents: {
+    SubmitButton,
+  },
+  fieldContext,
+  formContext,
+})

web/package.json

@@ -54,6 +54,7 @@
     "@sentry/utils": "^8.54.0",
     "@svgdotjs/svg.js": "^3.2.4",
     "@tailwindcss/typography": "^0.5.15",
+    "@tanstack/react-form": "^1.3.3",
     "@tanstack/react-query": "^5.60.5",
     "@tanstack/react-query-devtools": "^5.60.5",
     "ahooks": "^3.8.4",

web/pnpm-lock.yaml

@@ -94,6 +94,9 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.15
         version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@18.15.0)(typescript@4.9.5)))
+      '@tanstack/react-form':
+        specifier: ^1.3.3
+        version: 1.3.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@tanstack/react-query':
         specifier: ^5.60.5
         version: 5.72.2(react@19.0.0)
@@ -2781,12 +2784,27 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
+  '@tanstack/form-core@1.3.2':
+    resolution: {integrity: sha512-hqRLw9EJ8bLJ5zvorGgTI4INcKh1hAtjPRTslwdB529soP8LpguzqWhn7yVV5/c2GcMSlqmpy5NZarkF5Mf54A==}
+
   '@tanstack/query-core@5.72.2':
     resolution: {integrity: sha512-fxl9/0yk3mD/FwTmVEf1/H6N5B975H0luT+icKyX566w6uJG0x6o+Yl+I38wJRCaogiMkstByt+seXfDbWDAcA==}
 
   '@tanstack/query-devtools@5.72.2':
     resolution: {integrity: sha512-mMKnGb+iOhVBcj6jaerCFRpg8pACStdG8hmUBHPtToeZzs4ctjBUL1FajqpVn2WaMxnq8Wya+P3Q5tPFNM9jQw==}
 
+  '@tanstack/react-form@1.3.3':
+    resolution: {integrity: sha512-rjZU6ufaQYbZU9I0uIXUJ1CPQ9M/LFyfpbsgA4oqpX/lLoiCFYsV7tZYVlWMMHkpSr1hhmAywp/8rmCFt14lnw==}
+    peerDependencies:
+      '@tanstack/react-start': ^1.112.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      vinxi: ^0.5.0
+    peerDependenciesMeta:
+      '@tanstack/react-start':
+        optional: true
+      vinxi:
+        optional: true
+
   '@tanstack/react-query-devtools@5.72.2':
     resolution: {integrity: sha512-n53qr9JdHCJTCUba6OvMhwiV2CcsckngOswKEE7nM5pQBa/fW9c43qw8omw1RPT2s+aC7MuwS8fHsWT8g+j6IQ==}
     peerDependencies:
@@ -2798,12 +2816,21 @@ packages:
     peerDependencies:
       react: ^18 || ^19
 
+  '@tanstack/react-store@0.7.0':
+    resolution: {integrity: sha512-S/Rq17HaGOk+tQHV/yrePMnG1xbsKZIl/VsNWnNXt4XW+tTY8dTlvpJH2ZQ3GRALsusG5K6Q3unAGJ2pd9W/Ng==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   '@tanstack/react-virtual@3.13.6':
     resolution: {integrity: sha512-WT7nWs8ximoQ0CDx/ngoFP7HbQF9Q2wQe4nh2NB+u2486eX3nZRE40P9g6ccCVq7ZfTSH5gFOuCoVH5DLNS/aA==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  '@tanstack/store@0.7.0':
+    resolution: {integrity: sha512-CNIhdoUsmD2NolYuaIs8VfWM467RK6oIBAW4nPEKZhg1smZ+/CwtCdpURgp7nxSqOaV9oKkzdWD80+bC66F/Jg==}
+
   '@tanstack/virtual-core@3.13.6':
     resolution: {integrity: sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==}
 
@@ -4348,6 +4375,9 @@ packages:
   decimal.js@10.5.0:
     resolution: {integrity: sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==}
 
+  decode-formdata@0.9.0:
+    resolution: {integrity: sha512-q5uwOjR3Um5YD+ZWPOF/1sGHVW9A5rCrRwITQChRXlmPkxDFBqCm4jNTIVdGHNH9OnR+V9MoZVgRhsFb+ARbUw==}
+
   decode-named-character-reference@1.1.0:
     resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==}
 
@@ -4423,6 +4453,9 @@ packages:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
 
+  devalue@5.1.1:
+    resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
+
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
@@ -11352,10 +11385,24 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@18.15.0)(typescript@4.9.5))
 
+  '@tanstack/form-core@1.3.2':
+    dependencies:
+      '@tanstack/store': 0.7.0
+
   '@tanstack/query-core@5.72.2': {}
 
   '@tanstack/query-devtools@5.72.2': {}
 
+  '@tanstack/react-form@1.3.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@tanstack/form-core': 1.3.2
+      '@tanstack/react-store': 0.7.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      decode-formdata: 0.9.0
+      devalue: 5.1.1
+      react: 19.0.0
+    transitivePeerDependencies:
+      - react-dom
+
   '@tanstack/react-query-devtools@5.72.2(@tanstack/react-query@5.72.2(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@tanstack/query-devtools': 5.72.2
@@ -11367,12 +11414,21 @@ snapshots:
       '@tanstack/query-core': 5.72.2
       react: 19.0.0
 
+  '@tanstack/react-store@0.7.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@tanstack/store': 0.7.0
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+      use-sync-external-store: 1.5.0(react@19.0.0)
+
   '@tanstack/react-virtual@3.13.6(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@tanstack/virtual-core': 3.13.6
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  '@tanstack/store@0.7.0': {}
+
   '@tanstack/virtual-core@3.13.6': {}
 
   '@testing-library/dom@10.4.0':
@@ -13139,6 +13195,8 @@ snapshots:
 
   decimal.js@10.5.0: {}
 
+  decode-formdata@0.9.0: {}
+
   decode-named-character-reference@1.1.0:
     dependencies:
       character-entities: 2.0.2
@@ -13199,6 +13257,8 @@ snapshots:
 
   detect-newline@3.1.0: {}
 
+  devalue@5.1.1: {}
+
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3