feat/TanStack-Form (#18346)

web/app/components/app/configuration/config-var/config-select/index.spec.tsx

@@ -0,0 +1,82 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import ConfigSelect from './index'
+
+jest.mock('react-sortablejs', () => ({
+  ReactSortable: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+}))
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+describe('ConfigSelect Component', () => {
+  const defaultProps = {
+    options: ['Option 1', 'Option 2'],
+    onChange: jest.fn(),
+  }
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders all options', () => {
+    render(<ConfigSelect {...defaultProps} />)
+
+    defaultProps.options.forEach((option) => {
+      expect(screen.getByDisplayValue(option)).toBeInTheDocument()
+    })
+  })
+
+  it('renders add button', () => {
+    render(<ConfigSelect {...defaultProps} />)
+
+    expect(screen.getByText('appDebug.variableConfig.addOption')).toBeInTheDocument()
+  })
+
+  it('handles option deletion', () => {
+    render(<ConfigSelect {...defaultProps} />)
+    const optionContainer = screen.getByDisplayValue('Option 1').closest('div')
+    const deleteButton = optionContainer?.querySelector('div[role="button"]')
+
+    if (!deleteButton) return
+    fireEvent.click(deleteButton)
+    expect(defaultProps.onChange).toHaveBeenCalledWith(['Option 2'])
+  })
+
+  it('handles adding new option', () => {
+    render(<ConfigSelect {...defaultProps} />)
+    const addButton = screen.getByText('appDebug.variableConfig.addOption')
+
+    fireEvent.click(addButton)
+
+    expect(defaultProps.onChange).toHaveBeenCalledWith([...defaultProps.options, ''])
+  })
+
+  it('applies focus styles on input focus', () => {
+    render(<ConfigSelect {...defaultProps} />)
+    const firstInput = screen.getByDisplayValue('Option 1')
+
+    fireEvent.focus(firstInput)
+
+    expect(firstInput.closest('div')).toHaveClass('border-components-input-border-active')
+  })
+
+  it('applies delete hover styles', () => {
+    render(<ConfigSelect {...defaultProps} />)
+    const optionContainer = screen.getByDisplayValue('Option 1').closest('div')
+    const deleteButton = optionContainer?.querySelector('div[role="button"]')
+
+    if (!deleteButton) return
+    fireEvent.mouseEnter(deleteButton)
+    expect(optionContainer).toHaveClass('border-components-input-border-destructive')
+  })
+
+  it('renders empty state correctly', () => {
+    render(<ConfigSelect options={[]} onChange={defaultProps.onChange} />)
+
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
+    expect(screen.getByText('appDebug.variableConfig.addOption')).toBeInTheDocument()
+  })
+})

web/app/components/app/configuration/config-var/config-select/index.tsx

@@ -51,7 +51,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                 <RiDraggable className='handle h-4 w-4 cursor-grab text-text-quaternary' />
                 <input
                   key={index}
-                  type="input"
+                  type='input'
                   value={o || ''}
                   onChange={(e) => {
                     const value = e.target.value
@@ -67,6 +67,7 @@ const ConfigSelect: FC<IConfigSelectProps> = ({
                   onBlur={() => setFocusID(null)}
                 />
                 <div
+                  role='button'
                   className='absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
                   onClick={() => {
                     onChange(options.filter((_, i) => index !== i))

web/app/components/base/checkbox/assets/indeterminate-icon.tsx

@@ -0,0 +1,11 @@
+const IndeterminateIcon = () => {
+  return (
+    <div data-testid='indeterminate-icon'>
+      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+        <path d="M2.5 6H9.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+      </svg>
+    </div>
+  )
+}
+
+export default IndeterminateIcon

web/app/components/base/checkbox/assets/mixed.svg

@@ -1,5 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="check">
-<path id="Vector 1" d="M2.5 6H9.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-</g>
-</svg>

web/app/components/base/checkbox/index.module.css

@@ -1,10 +0,0 @@
-.mixed {
-  background: var(--color-components-checkbox-bg) url(./assets/mixed.svg) center center no-repeat;
-  background-size: 12px 12px;
-  border: none;
-}
-
-.checked.disabled {
-  background-color: #d0d5dd;
-  border-color: #d0d5dd;
-}

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

@@ -0,0 +1,67 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Checkbox from './index'
+
+describe('Checkbox Component', () => {
+  const mockProps = {
+    id: 'test',
+  }
+
+  it('renders unchecked checkbox by default', () => {
+    render(<Checkbox {...mockProps} />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toBeInTheDocument()
+    expect(checkbox).not.toHaveClass('bg-components-checkbox-bg')
+  })
+
+  it('renders checked checkbox when checked prop is true', () => {
+    render(<Checkbox {...mockProps} checked />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toHaveClass('bg-components-checkbox-bg')
+    expect(screen.getByTestId('check-icon-test')).toBeInTheDocument()
+  })
+
+  it('renders indeterminate state correctly', () => {
+    render(<Checkbox {...mockProps} indeterminate />)
+    expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument()
+  })
+
+  it('handles click events when not disabled', () => {
+    const onCheck = jest.fn()
+    render(<Checkbox {...mockProps} onCheck={onCheck} />)
+    const checkbox = screen.getByTestId('checkbox-test')
+
+    fireEvent.click(checkbox)
+    expect(onCheck).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not handle click events when disabled', () => {
+    const onCheck = jest.fn()
+    render(<Checkbox {...mockProps} disabled onCheck={onCheck} />)
+    const checkbox = screen.getByTestId('checkbox-test')
+
+    fireEvent.click(checkbox)
+    expect(onCheck).not.toHaveBeenCalled()
+    expect(checkbox).toHaveClass('cursor-not-allowed')
+  })
+
+  it('applies custom className when provided', () => {
+    const customClass = 'custom-class'
+    render(<Checkbox {...mockProps} className={customClass} />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toHaveClass(customClass)
+  })
+
+  it('applies correct styles for disabled checked state', () => {
+    render(<Checkbox {...mockProps} checked disabled />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled-checked')
+    expect(checkbox).toHaveClass('cursor-not-allowed')
+  })
+
+  it('applies correct styles for disabled unchecked state', () => {
+    render(<Checkbox {...mockProps} disabled />)
+    const checkbox = screen.getByTestId('checkbox-test')
+    expect(checkbox).toHaveClass('bg-components-checkbox-bg-disabled')
+    expect(checkbox).toHaveClass('cursor-not-allowed')
+  })
+})

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

@@ -1,48 +1,49 @@
 import { RiCheckLine } from '@remixicon/react'
-import s from './index.module.css'
 import cn from '@/utils/classnames'
+import IndeterminateIcon from './assets/indeterminate-icon'
 
 type CheckboxProps = {
+  id?: string
   checked?: boolean
   onCheck?: () => void
   className?: string
   disabled?: boolean
-  mixed?: boolean
+  indeterminate?: boolean
 }
 
-const Checkbox = ({ checked, onCheck, className, disabled, mixed }: CheckboxProps) => {
+const Checkbox = ({
-  if (!checked) {
+    id,
-    return (
+    checked,
-      <div
+    onCheck,
-        className={cn(
+    className,
-          'h-4 w-4 cursor-pointer rounded-[4px] border border-components-checkbox-border bg-components-checkbox-bg-unchecked shadow-xs hover:border-components-checkbox-border-hover',
+    disabled,
-          mixed ? s.mixed : 'hover:bg-components-checkbox-bg-unchecked-hover',
+    indeterminate,
-          disabled && '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',
+}: CheckboxProps) => {
-          className,
+  const checkClassName = (checked || indeterminate)
-        )}
+    ? 'bg-components-checkbox-bg text-components-checkbox-icon hover:bg-components-checkbox-bg-hover'
-        onClick={() => {
+    : 'border border-components-checkbox-border bg-components-checkbox-bg-unchecked hover:bg-components-checkbox-bg-unchecked-hover hover:border-components-checkbox-border-hover'
-          if (disabled)
+  const disabledClassName = (checked || indeterminate)
-            return
+    ? 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked'
-          onCheck?.()
+    : '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'
-        }}
+
-      ></div>
-    )
-  }
   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',
+        'flex h-4 w-4 cursor-pointer items-center justify-center rounded-[4px] shadow-xs shadow-shadow-shadow-3',
-        disabled && 'cursor-not-allowed bg-components-checkbox-bg-disabled-checked text-components-checkbox-icon-disabled hover:bg-components-checkbox-bg-disabled-checked',
+        checkClassName,
+        disabled && disabledClassName,
         className,
       )}
       onClick={() => {
         if (disabled)
           return
-
         onCheck?.()
       }}
+      data-testid={`checkbox-${id}`}
     >
-      <RiCheckLine className={cn('h-3 w-3')} />
+      {!checked && indeterminate && <IndeterminateIcon />}
+      {checked && <RiCheckLine className='h-3 w-3' data-testid={`check-icon-${id}`} />}
     </div>
   )
 }

web/app/components/base/form/components/field/checkbox.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/field/number-input.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { useFieldContext } from '../..'
+import Label from '../label'
+import cn from '@/utils/classnames'
+import type { InputNumberProps } from '../../../input-number'
+import { InputNumber } from '../../../input-number'
+
+type TextFieldProps = {
+  label: string
+  isRequired?: boolean
+  showOptional?: boolean
+  tooltip?: string
+  className?: string
+  labelClassName?: string
+} & Omit<InputNumberProps, 'id' | 'value' | 'onChange' | 'onBlur'>
+
+const NumberInputField = ({
+  label,
+  isRequired,
+  showOptional,
+  tooltip,
+  className,
+  labelClassName,
+  ...inputProps
+}: TextFieldProps) => {
+  const field = useFieldContext<number | undefined>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        isRequired={isRequired}
+        showOptional={showOptional}
+        tooltip={tooltip}
+        className={labelClassName}
+      />
+      <InputNumber
+        id={field.name}
+        value={field.state.value}
+        onChange={value => field.handleChange(value)}
+        onBlur={field.handleBlur}
+        {...inputProps}
+      />
+    </div>
+  )
+}
+
+export default NumberInputField

web/app/components/base/form/components/field/options.tsx

@@ -0,0 +1,34 @@
+import cn from '@/utils/classnames'
+import { useFieldContext } from '../..'
+import Label from '../label'
+import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
+
+type OptionsFieldProps = {
+  label: string;
+  className?: string;
+  labelClassName?: string;
+}
+
+const OptionsField = ({
+  label,
+  className,
+  labelClassName,
+}: OptionsFieldProps) => {
+  const field = useFieldContext<string[]>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        className={labelClassName}
+      />
+      <ConfigSelect
+        options={field.state.value}
+        onChange={value => field.handleChange(value)}
+      />
+    </div>
+  )
+}
+
+export default OptionsField

web/app/components/base/form/components/field/select.tsx

@@ -0,0 +1,51 @@
+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[]
+  isRequired?: boolean
+  showOptional?: boolean
+  tooltip?: string
+  className?: string
+  labelClassName?: string
+}
+
+const SelectField = ({
+  label,
+  options,
+  isRequired,
+  showOptional,
+  tooltip,
+  className,
+  labelClassName,
+}: SelectFieldProps) => {
+  const field = useFieldContext<string>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        isRequired={isRequired}
+        showOptional={showOptional}
+        tooltip={tooltip}
+        className={labelClassName}
+      />
+      <PureSelect
+        value={field.state.value}
+        options={options}
+        onChange={value => field.handleChange(value)}
+      />
+    </div>
+  )
+}
+
+export default SelectField

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

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

web/app/components/base/form/components/form/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/label.spec.tsx

@@ -0,0 +1,53 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import Label from './label'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+describe('Label Component', () => {
+  const defaultProps = {
+    htmlFor: 'test-input',
+    label: 'Test Label',
+  }
+
+  it('renders basic label correctly', () => {
+    render(<Label {...defaultProps} />)
+    const label = screen.getByTestId('label')
+    expect(label).toBeInTheDocument()
+    expect(label).toHaveAttribute('for', 'test-input')
+  })
+
+  it('shows optional text when showOptional is true', () => {
+    render(<Label {...defaultProps} showOptional />)
+    expect(screen.getByText('common.label.optional')).toBeInTheDocument()
+  })
+
+  it('shows required asterisk when isRequired is true', () => {
+    render(<Label {...defaultProps} isRequired />)
+    expect(screen.getByText('*')).toBeInTheDocument()
+  })
+
+  it('renders tooltip when tooltip prop is provided', () => {
+    const tooltipText = 'Test Tooltip'
+    render(<Label {...defaultProps} tooltip={tooltipText} />)
+    const trigger = screen.getByTestId('test-input-tooltip')
+    fireEvent.mouseEnter(trigger)
+    expect(screen.getByText(tooltipText)).toBeInTheDocument()
+  })
+
+  it('applies custom className when provided', () => {
+    const customClass = 'custom-label'
+    render(<Label {...defaultProps} className={customClass} />)
+    const label = screen.getByTestId('label')
+    expect(label).toHaveClass(customClass)
+  })
+
+  it('does not show optional text and required asterisk simultaneously', () => {
+    render(<Label {...defaultProps} isRequired showOptional />)
+    expect(screen.queryByText('common.label.optional')).not.toBeInTheDocument()
+    expect(screen.getByText('*')).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,48 @@
+import cn from '@/utils/classnames'
+import Tooltip from '../../tooltip'
+import { useTranslation } from 'react-i18next'
+
+export type LabelProps = {
+  htmlFor: string
+  label: string
+  isRequired?: boolean
+  showOptional?: boolean
+  tooltip?: string
+  className?: string
+}
+
+const Label = ({
+  htmlFor,
+  label,
+  isRequired,
+  showOptional,
+  tooltip,
+  className,
+}: LabelProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex h-6 items-center'>
+      <label
+        data-testid='label'
+        htmlFor={htmlFor}
+        className={cn('system-sm-medium text-text-secondary', className)}
+      >
+        {label}
+      </label>
+      {!isRequired && showOptional && <div className='system-xs-regular ml-1 text-text-tertiary'>{t('common.label.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'
+          triggerTestId={`${htmlFor}-tooltip`}
+        />
+      )}
+    </div>
+  )
+}
+
+export default Label

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,25 @@
+import { createFormHook, createFormHookContexts } from '@tanstack/react-form'
+import TextField from './components/field/text'
+import NumberInputField from './components/field/number-input'
+import CheckboxField from './components/field/checkbox'
+import SelectField from './components/field/select'
+import OptionsField from './components/field/options'
+import SubmitButton from './components/form/submit-button'
+
+export const { fieldContext, useFieldContext, formContext, useFormContext }
+  = createFormHookContexts()
+
+export const { useAppForm, withForm } = createFormHook({
+  fieldComponents: {
+    TextField,
+    NumberInputField,
+    CheckboxField,
+    SelectField,
+    OptionsField,
+  },
+  formComponents: {
+    SubmitButton,
+  },
+  fieldContext,
+  formContext,
+})

web/app/components/base/input-number/index.spec.tsx

@@ -0,0 +1,97 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { InputNumber } from './index'
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}))
+
+describe('InputNumber Component', () => {
+  const defaultProps = {
+    onChange: jest.fn(),
+  }
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders input with default values', () => {
+    render(<InputNumber {...defaultProps} />)
+    const input = screen.getByRole('textbox')
+    expect(input).toBeInTheDocument()
+  })
+
+  it('handles increment button click', () => {
+    render(<InputNumber {...defaultProps} value={5} />)
+    const incrementBtn = screen.getByRole('button', { name: /increment/i })
+
+    fireEvent.click(incrementBtn)
+    expect(defaultProps.onChange).toHaveBeenCalledWith(6)
+  })
+
+  it('handles decrement button click', () => {
+    render(<InputNumber {...defaultProps} value={5} />)
+    const decrementBtn = screen.getByRole('button', { name: /decrement/i })
+
+    fireEvent.click(decrementBtn)
+    expect(defaultProps.onChange).toHaveBeenCalledWith(4)
+  })
+
+  it('respects max value constraint', () => {
+    render(<InputNumber {...defaultProps} value={10} max={10} />)
+    const incrementBtn = screen.getByRole('button', { name: /increment/i })
+
+    fireEvent.click(incrementBtn)
+    expect(defaultProps.onChange).not.toHaveBeenCalled()
+  })
+
+  it('respects min value constraint', () => {
+    render(<InputNumber {...defaultProps} value={0} min={0} />)
+    const decrementBtn = screen.getByRole('button', { name: /decrement/i })
+
+    fireEvent.click(decrementBtn)
+    expect(defaultProps.onChange).not.toHaveBeenCalled()
+  })
+
+  it('handles direct input changes', () => {
+    render(<InputNumber {...defaultProps} />)
+    const input = screen.getByRole('textbox')
+
+    fireEvent.change(input, { target: { value: '42' } })
+    expect(defaultProps.onChange).toHaveBeenCalledWith(42)
+  })
+
+  it('handles empty input', () => {
+    render(<InputNumber {...defaultProps} value={0} />)
+    const input = screen.getByRole('textbox')
+
+    fireEvent.change(input, { target: { value: '' } })
+    expect(defaultProps.onChange).toHaveBeenCalledWith(undefined)
+  })
+
+  it('handles invalid input', () => {
+    render(<InputNumber {...defaultProps} />)
+    const input = screen.getByRole('textbox')
+
+    fireEvent.change(input, { target: { value: 'abc' } })
+    expect(defaultProps.onChange).not.toHaveBeenCalled()
+  })
+
+  it('displays unit when provided', () => {
+    const unit = 'px'
+    render(<InputNumber {...defaultProps} unit={unit} />)
+    expect(screen.getByText(unit)).toBeInTheDocument()
+  })
+
+  it('disables controls when disabled prop is true', () => {
+    render(<InputNumber {...defaultProps} disabled />)
+    const input = screen.getByRole('textbox')
+    const incrementBtn = screen.getByRole('button', { name: /increment/i })
+    const decrementBtn = screen.getByRole('button', { name: /decrement/i })
+
+    expect(input).toBeDisabled()
+    expect(incrementBtn).toBeDisabled()
+    expect(decrementBtn).toBeDisabled()
+  })
+})

web/app/components/base/input-number/index.tsx

@@ -8,7 +8,7 @@ export type InputNumberProps = {
   value?: number
   onChange: (value?: number) => void
   amount?: number
-  size?: 'sm' | 'md'
+  size?: 'regular' | 'large'
   max?: number
   min?: number
   defaultValue?: number
@@ -19,14 +19,12 @@ export type InputNumberProps = {
 } & Omit<InputProps, 'value' | 'onChange' | 'size' | 'min' | 'max' | 'defaultValue'>
 
 export const InputNumber: FC<InputNumberProps> = (props) => {
-  const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, wrapClassName, controlWrapClassName, controlClassName, disabled, ...rest } = props
+  const { unit, className, onChange, amount = 1, value, size = 'regular', max, min, defaultValue, wrapClassName, controlWrapClassName, controlClassName, disabled, ...rest } = props
 
   const isValidValue = (v: number) => {
-    if (max && v > max)
+    if (typeof max === 'number' && v > max)
       return false
-    if (min && v < min)
+    return !(typeof min === 'number' && v < min)
-      return false
-    return true
   }
 
   const inc = () => {
@@ -76,29 +74,39 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
         onChange(parsed)
       }}
       unit={unit}
+      size={size}
     />
     <div className={classNames(
       'flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs',
       disabled && 'opacity-50 cursor-not-allowed',
       controlWrapClassName)}
     >
-      <button onClick={inc} disabled={disabled} className={classNames(
+      <button
-        size === 'sm' ? 'pt-1' : 'pt-1.5',
+        type='button'
-        'px-1.5 hover:bg-components-input-bg-hover',
+        onClick={inc}
-        disabled && 'cursor-not-allowed hover:bg-transparent',
+        disabled={disabled}
-        controlClassName,
+        aria-label='increment'
-      )}>
+        className={classNames(
+          size === 'regular' ? 'pt-1' : 'pt-1.5',
+          'px-1.5 hover:bg-components-input-bg-hover',
+          disabled && 'cursor-not-allowed hover:bg-transparent',
+          controlClassName,
+        )}
+      >
         <RiArrowUpSLine className='size-3' />
       </button>
       <button
+        type='button'
         onClick={dec}
         disabled={disabled}
+        aria-label='decrement'
         className={classNames(
-          size === 'sm' ? 'pb-1' : 'pb-1.5',
+          size === 'regular' ? 'pb-1' : 'pb-1.5',
           'px-1.5 hover:bg-components-input-bg-hover',
           disabled && 'cursor-not-allowed hover:bg-transparent',
           controlClassName,
-        )}>
+        )}
+      >
         <RiArrowDownSLine className='size-3' />
       </button>
     </div>

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

@@ -30,7 +30,7 @@ export type InputProps = {
   wrapperClassName?: string
   styleCss?: CSSProperties
   unit?: string
-} & React.InputHTMLAttributes<HTMLInputElement> & VariantProps<typeof inputVariants>
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & VariantProps<typeof inputVariants>
 
 const Input = ({
   size,

web/app/components/base/param-item/index.tsx

@@ -54,7 +54,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             max={max}
             step={step}
             amount={step}
-            size='sm'
+            size='regular'
             value={value}
             onChange={(value) => {
               onChange(id, value)

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

@@ -10,6 +10,7 @@ export type TooltipProps = {
   position?: Placement
   triggerMethod?: 'hover' | 'click'
   triggerClassName?: string
+  triggerTestId?: string
   disabled?: boolean
   popupContent?: React.ReactNode
   children?: React.ReactNode
@@ -24,6 +25,7 @@ const Tooltip: FC<TooltipProps> = ({
   position = 'top',
   triggerMethod = 'hover',
   triggerClassName,
+  triggerTestId,
   disabled = false,
   popupContent,
   children,
@@ -91,7 +93,7 @@ const Tooltip: FC<TooltipProps> = ({
         onMouseLeave={() => triggerMethod === 'hover' && handleLeave(true)}
         asChild={asChild}
       >
-        {children || <div className={triggerClassName || 'h-3.5 w-3.5 shrink-0 p-[1px]'}><RiQuestionLine className='h-full w-full text-text-quaternary hover:text-text-tertiary' /></div>}
+        {children || <div data-testid={triggerTestId} className={triggerClassName || 'h-3.5 w-3.5 shrink-0 p-[1px]'}><RiQuestionLine className='h-full w-full text-text-quaternary hover:text-text-tertiary' /></div>}
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent
         className="z-[9999]"

web/app/components/datasets/create/step-two/inputs.tsx

@@ -47,7 +47,7 @@ export const MaxLengthInput: FC<InputNumberProps> = (props) => {
   </div>}>
     <InputNumber
       type="number"
-      className='h-9'
+      size='large'
       placeholder={`≤ ${maxValue}`}
       max={maxValue}
       min={1}
@@ -70,7 +70,7 @@ export const OverlapInput: FC<InputNumberProps> = (props) => {
   </div>}>
     <InputNumber
       type="number"
-      className='h-9'
+      size='large'
       placeholder={t('datasetCreation.stepTwo.overlap') || ''}
       min={1}
       {...props}

web/app/components/datasets/documents/detail/completed/index.tsx

@@ -220,13 +220,11 @@ const Completed: FC<ICompletedProps> = ({
   const resetList = useCallback(() => {
     setSelectedSegmentIds([])
     invalidSegmentList()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [invalidSegmentList])
-  }, [])
 
   const resetChildList = useCallback(() => {
     invalidChildSegmentList()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [invalidChildSegmentList])
-  }, [])
 
   const onClickCard = (detail: SegmentDetailModel, isEditMode = false) => {
     setCurrSegment({ segInfo: detail, showModal: true, isEditMode })
@@ -253,7 +251,7 @@ const Completed: FC<ICompletedProps> = ({
   const invalidChunkListEnabled = useInvalid(useChunkListEnabledKey)
   const invalidChunkListDisabled = useInvalid(useChunkListDisabledKey)
 
-  const refreshChunkListWithStatusChanged = () => {
+  const refreshChunkListWithStatusChanged = useCallback(() => {
     switch (selectedStatus) {
       case 'all':
         invalidChunkListDisabled()
@@ -262,7 +260,7 @@ const Completed: FC<ICompletedProps> = ({
       default:
         invalidSegmentList()
     }
-  }
+  }, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidSegmentList])
 
   const onChangeSwitch = useCallback(async (enable: boolean, segId?: string) => {
     const operationApi = enable ? enableSegment : disableSegment
@@ -280,8 +278,7 @@ const Completed: FC<ICompletedProps> = ({
         notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
       },
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasetId, documentId, selectedSegmentIds, segments, disableSegment, enableSegment, t, notify, refreshChunkListWithStatusChanged])
-  }, [datasetId, documentId, selectedSegmentIds, segments])
 
   const { mutateAsync: deleteSegment } = useDeleteSegment()
 
@@ -296,12 +293,11 @@ const Completed: FC<ICompletedProps> = ({
         notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
       },
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasetId, documentId, selectedSegmentIds, deleteSegment, resetList, t, notify])
-  }, [datasetId, documentId, selectedSegmentIds])
 
   const { mutateAsync: updateSegment } = useUpdateSegment()
 
-  const refreshChunkListDataWithDetailChanged = () => {
+  const refreshChunkListDataWithDetailChanged = useCallback(() => {
     switch (selectedStatus) {
       case 'all':
         invalidChunkListDisabled()
@@ -316,7 +312,7 @@ const Completed: FC<ICompletedProps> = ({
         invalidChunkListEnabled()
         break
     }
-  }
+  }, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidChunkListAll])
 
   const handleUpdateSegment = useCallback(async (
     segmentId: string,
@@ -375,17 +371,18 @@ const Completed: FC<ICompletedProps> = ({
         eventEmitter?.emit('update-segment-done')
       },
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segments, datasetId, documentId, updateSegment, docForm, notify, eventEmitter, onCloseSegmentDetail, refreshChunkListDataWithDetailChanged, t])
-  }, [segments, datasetId, documentId])
 
   useEffect(() => {
     resetList()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname])
 
   useEffect(() => {
     if (importStatus === ProcessStatus.COMPLETED)
       resetList()
-  }, [importStatus, resetList])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importStatus])
 
   const onCancelBatchOperation = useCallback(() => {
     setSelectedSegmentIds([])
@@ -430,8 +427,7 @@ const Completed: FC<ICompletedProps> = ({
       const count = segmentListData?.total || 0
       return `${total} ${t('datasetDocuments.segment.searchResults', { count })}`
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segmentListData, mode, parentMode, searchValue, selectedStatus, t])
-  }, [segmentListData?.total, mode, parentMode, searchValue, selectedStatus])
 
   const toggleFullScreen = useCallback(() => {
     setFullScreen(!fullScreen)
@@ -449,8 +445,7 @@ const Completed: FC<ICompletedProps> = ({
       resetList()
       currentPage !== totalPages && setCurrentPage(totalPages)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segmentListData, limit, currentPage, resetList])
-  }, [segmentListData, limit, currentPage])
 
   const { mutateAsync: deleteChildSegment } = useDeleteChildSegment()
 
@@ -470,8 +465,7 @@ const Completed: FC<ICompletedProps> = ({
         },
       },
     )
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [datasetId, documentId, parentMode, deleteChildSegment, resetList, resetChildList, t, notify])
-  }, [datasetId, documentId, parentMode])
 
   const handleAddNewChildChunk = useCallback((parentChunkId: string) => {
     setShowNewChildSegmentModal(true)
@@ -490,8 +484,7 @@ const Completed: FC<ICompletedProps> = ({
     else {
       resetChildList()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parentMode, currChunkId, segments, refreshChunkListDataWithDetailChanged, resetChildList])
-  }, [parentMode, currChunkId, segments])
 
   const viewNewlyAddedChildChunk = useCallback(() => {
     const totalPages = childChunkListData?.total_pages || 0
@@ -505,8 +498,7 @@ const Completed: FC<ICompletedProps> = ({
       resetChildList()
       currentPage !== totalPages && setCurrentPage(totalPages)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [childChunkListData, limit, currentPage, resetChildList])
-  }, [childChunkListData, limit, currentPage])
 
   const onClickSlice = useCallback((detail: ChildChunkDetail) => {
     setCurrChildChunk({ childChunkInfo: detail, showModal: true })
@@ -560,8 +552,7 @@ const Completed: FC<ICompletedProps> = ({
         eventEmitter?.emit('update-child-segment-done')
       },
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [segments, datasetId, documentId, parentMode, updateChildSegment, notify, eventEmitter, onCloseChildSegmentDetail, refreshChunkListDataWithDetailChanged, resetChildList, t])
-  }, [segments, childSegments, datasetId, documentId, parentMode])
 
   const onClearFilter = useCallback(() => {
     setInputValue('')
@@ -570,6 +561,12 @@ const Completed: FC<ICompletedProps> = ({
     setCurrentPage(1)
   }, [])
 
+  const selectDefaultValue = useMemo(() => {
+    if (selectedStatus === 'all')
+      return 'all'
+    return selectedStatus ? 1 : 0
+  }, [selectedStatus])
+
   return (
     <SegmentListContext.Provider value={{
       isCollapsed,
@@ -583,7 +580,7 @@ const Completed: FC<ICompletedProps> = ({
         <Checkbox
           className='shrink-0'
           checked={isAllSelected}
-          mixed={!isAllSelected && isSomeSelected}
+          indeterminate={!isAllSelected && isSomeSelected}
           onCheck={onSelectedAll}
           disabled={isLoadingSegmentList}
         />
@@ -591,7 +588,7 @@ const Completed: FC<ICompletedProps> = ({
         <SimpleSelect
           onSelect={onChangeStatus}
           items={statusList.current}
-          defaultValue={selectedStatus === 'all' ? 'all' : selectedStatus ? 1 : 0}
+          defaultValue={selectDefaultValue}
           className={s.select}
           wrapperClassName='h-fit mr-2'
           optionWrapClassName='w-[160px]'

web/app/components/datasets/documents/detail/completed/segment-card/index.tsx

@@ -106,13 +106,11 @@ const SegmentCard: FC<ISegmentCardProps> = ({
   const wordCountText = useMemo(() => {
     const total = formatNumber(word_count)
     return `${total} ${t('datasetDocuments.segment.characters', { count: word_count })}`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [word_count, t])
-  }, [word_count])
 
   const labelPrefix = useMemo(() => {
     return isParentChildMode ? t('datasetDocuments.segment.parentChunk') : t('datasetDocuments.segment.chunk')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isParentChildMode, t])
-  }, [isParentChildMode])
 
   if (loading)
     return <ParentChunkCardSkeleton />

web/app/components/datasets/documents/detail/completed/segment-detail.tsx

@@ -86,8 +86,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
 
   const titleText = useMemo(() => {
     return isEditMode ? t('datasetDocuments.segment.editChunk') : t('datasetDocuments.segment.chunkDetail')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEditMode, t])
-  }, [isEditMode])
 
   const isQAModel = useMemo(() => {
     return docForm === ChunkingMode.qa
@@ -98,13 +97,11 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
     const total = formatNumber(isEditMode ? contentLength : segInfo!.word_count as number)
     const count = isEditMode ? contentLength : segInfo!.word_count as number
     return `${total} ${t('datasetDocuments.segment.characters', { count })}`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEditMode, question.length, answer.length, isQAModel, segInfo, t])
-  }, [isEditMode, question.length, answer.length, segInfo?.word_count, isQAModel])
 
   const labelPrefix = useMemo(() => {
     return isParentChildMode ? t('datasetDocuments.segment.parentChunk') : t('datasetDocuments.segment.chunk')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isParentChildMode, t])
-  }, [isParentChildMode])
 
   return (
     <div className={'flex h-full flex-col'}>

web/app/components/datasets/documents/detail/completed/segment-list.tsx

@@ -42,7 +42,7 @@ const SegmentList = (
     embeddingAvailable,
     onClearFilter,
   }: ISegmentListProps & {
-    ref: React.RefObject<unknown>;
+    ref: React.LegacyRef<HTMLDivElement>
   },
 ) => {
   const mode = useDocumentContext(s => s.mode)

web/app/components/datasets/documents/list.tsx

@@ -202,7 +202,7 @@ export const OperationAction: FC<{
   const isListScene = scene === 'list'
 
   const onOperate = async (operationName: OperationName) => {
-    let opApi = deleteDocument
+    let opApi
     switch (operationName) {
       case 'archive':
         opApi = archiveDocument
@@ -490,7 +490,7 @@ const DocumentList: FC<IDocumentListProps> = ({
 
   const handleAction = (actionName: DocumentActionType) => {
     return async () => {
-      let opApi = deleteDocument
+      let opApi
       switch (actionName) {
         case DocumentActionType.archive:
           opApi = archiveDocument
@@ -527,7 +527,7 @@ const DocumentList: FC<IDocumentListProps> = ({
                     <Checkbox
                       className='mr-2 shrink-0'
                       checked={isAllSelected}
-                      mixed={!isAllSelected && isSomeSelected}
+                      indeterminate={!isAllSelected && isSomeSelected}
                       onCheck={onSelectedAll}
                     />
                   )}

web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx

@@ -40,7 +40,7 @@ const InputCombined: FC<Props> = ({
           className={cn(className, 'rounded-l-md')}
           value={value}
           onChange={onChange}
-          size='sm'
+          size='regular'
           controlWrapClassName='overflow-hidden'
           controlClassName='pt-0 pb-0'
           readOnly={readOnly}

web/app/components/workflow/nodes/_base/components/agent-strategy.tsx

@@ -133,7 +133,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
                 // TODO: maybe empty, handle this
                 onChange={onChange as any}
                 defaultValue={defaultValue}
-                size='sm'
+                size='regular'
                 min={def.min}
                 max={def.max}
                 className='w-12'

web/app/dev-preview/page.tsx

@@ -1,19 +1,11 @@
 'use client'
 
-import { ToolTipContent } from '../components/base/tooltip/content'
+import DemoForm from '../components/base/form/form-scenarios/demo'
-import { SwitchPluginVersion } from '../components/workflow/nodes/_base/components/switch-plugin-version'
-import { useTranslation } from 'react-i18next'
 
 export default function Page() {
-  const { t } = useTranslation()
+  return (
-  return <div className="p-20">
+    <div className='flex h-screen w-full items-center justify-center p-20'>
-    <SwitchPluginVersion
+      <DemoForm />
-      uniqueIdentifier={'langgenius/openai:12'}
+    </div>
-      tooltip={<ToolTipContent
+  )
-        title={t('workflow.nodes.agent.unsupportedStrategy')}
-      >
-        {t('workflow.nodes.agent.strategyNotFoundDescAndSwitchVersion')}
-      </ToolTipContent>}
-    />
-  </div>
 }

web/jest.config.ts

@@ -43,12 +43,13 @@ const config: Config = {
   coverageProvider: 'v8',
 
   // A list of reporter names that Jest uses when writing coverage reports
-  // coverageReporters: [
+  coverageReporters: [
-  //   "json",
+    'json',
-  //   "text",
+    'text',
-  //   "lcov",
+    'text-summary',
-  //   "clover"
+    'lcov',
-  // ],
+    'clover',
+  ],
 
   // An object that configures minimum threshold enforcement for coverage results
   // coverageThreshold: undefined,

web/jest.setup.ts

@@ -1 +1,6 @@
 import '@testing-library/jest-dom'
+import { cleanup } from '@testing-library/react'
+
+afterEach(() => {
+  cleanup()
+})

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