An example of a reusable form component / 再利用可能なフォームコンポーネントの例 / 一個可重複使用的表單元件範例

[Arce0406]

Intro

【EN】
Shadcn-ui is a great collection of components, but since I am not that familiar with react, I was very troubled when I first started using the form component and could not understand the docs on shadcn-ui and react-hook-form.
Until now I have wrote a simple reusable form component, so I want to share it, and if there is any better ways, please teach me.
The following examples are based on Next.js 13 and TypeScript.

【JP】
Shadcn-ui は素晴らしいコンポーネントのコレクションですが、私は React にあまり詳しくないため、最初に form コンポーネントを使い始めたとき、shadcn-ui と React-Hook-form のドキュメントが理解できずに非常に苦労しました。
今まで簡単な再利用可能なフォームコンポーネントを書いたので共有したいと思います、そしてもっと良い方法があれば教えてください。
次の例は、Next.js 13 と TypeScript に基づいています。

【CH】
Shadcn 是個很棒的元件集合，但由於我自己對於 react 並不是那麼的熟悉，所以剛開始使用 form 元件時感到非常困擾，完全看不懂 shadcn 與 react-hook-form 上的教學文件。
直到今天我才研究出了一個簡單的可重複使用範本，因此想分享出來，並且如果有更好的優化方式，還請傳授與我。
以下範例是基於 Next.js 13、TypeScript 語法。

Example

Result

ShadcnForm.tsx

"use client"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { zodResolver } from "@hookform/resolvers/zod"
import { cloneElement } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"

type FieldType = {
    name: string
    zodType: z.ZodType<any, any>
    component: React.ReactElement
    label?: string
    description?: string,
}

export default function ShadcnForm({ fields: columns = [], values, onSubmit }: { fields: FieldType[], values?: Object, onSubmit: (values: any) => void }) {
    const columnZodTypes = columns.reduce((acc, column) => {
        acc[column.name] = column.zodType
        return acc
    }, {} as Record<string, z.ZodType<any, any>>)

    const formSchema = z.object(columnZodTypes)

    function handleSubmit(values: z.infer<typeof formSchema>) {
        console.log(values)
        onSubmit?.(values)
    }

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: values,
    })

    return (
        <Form {...form}>
            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-8">
                {columns.map((column) => (
                    <FormField
                        key={column.name}
                        control={form.control}
                        name={column.name}
                        render={({ field }) => (
                            <FormItem>
                                {column.label && (
                                    <FormLabel className="inline-flex gap-1">
                                        {column.zodType?.isOptional() === false && <span className="text-red-400">*</span>}
                                        <span>{column.label}</span>
                                    </FormLabel>
                                )}
                                <FormControl>{cloneElement(column.component, { ...field })}</FormControl>
                                {column.description && (<FormDescription>{column.description}</FormDescription>)}
                                <FormMessage />
                            </FormItem>
                        )}
                    />
                ))}
                <Button type="submit">Submit</Button>
            </form>
        </Form>
    )
}

SampleForm.tsx

'use client';
import { Input } from '@/components/ui/input'
import React from 'react'
import ShadcnForm from './shadcn-form'
import { z } from 'zod';

function SampleForm() {
    return (
        <ShadcnForm
            onSubmit={(values) => { }}
            fields={[{
                name: "nickname",
                label: "Nickname",
                description: "Please enter your nickname",
                component: <Input placeholder="shadcn" />,
                zodType: z.string()
            }, {
                name: "username",
                label: "Real name",
                description: "Please enter your real name",
                component: <Input placeholder="shadcn" />,
                zodType: z.string()
            }]}
            values={{}}
        />
    )
}

export default SampleForm