refactor(frontend): replace react-hook-form with @tanstack/form

[634750802]

refactor major management forms after #519

How to write a standard management form

Type Validator (Zod)

zod is a commonly used well-typed validating library.

Example for creating a zod type:

import { z } from zod;

const createEntitySchema = z.object({
  name: z.string().min(1),
  description: z.string(),
  is_default: z.boolean(),
});

There are two type utils to get the zod validator's type:

import { z } from zod;

type Input = z.input<typeof createEntitySchema>
type Output = z.infer<typeof createEntitySchema>

// Typing example
const input: Input = { ... };
const output = createEntitySchema.parse(input);

// output satisfies Output

@tanstack/form

See documents

Example 1. Create a form using withCreateEntityForm hoc

The withCreateEntityForm creates a component and type bound field layout components.

import { withCreateEntityForm } from '@/components/form/create-entity-form';
import { FormInput, FormSwitch, FormTextarea } from '@/components/form/control-widget';

const Form = withCreateEntityForm(
  createEntitySchema, // The form schema
  async data => { // The submit handler
    const entity = await create(data);
    return entity;
  }
)

const form = (
  <Form 
    onCreated={entity => {
      startTransition(() => {
        router.push('/entities/${entity.id}');
      })
    }}
    transitioning={transitioning}
  >
    <Form.Basic name='name' label='Name'>
      <FormInput />
    </Form.Basic>
    <Form.Basic name='description' label='Description'>
      <FormTextarea />
    </Form.Basic>
    <Form.Contained name='is_default' label='Is Default' description='xxx...'>
      <FormSwitch />
    </Form.Contained>
  </Form>
)

Example 2. Create fully controlled complex form from scratch

See frontend/app/src/components/llm/CreateLLMForm.tsx

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tidb-ai-preview	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2024 9:33am
tidb-ai-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 20, 2024 9:33am

[github-actions]

E2E Result Deployment

https://tidb-ai-playwright-bwl6xkh17-djaggers-projects.vercel.app