Zod Form

'use client';import type React from 'react';import { useCallback, useMemo, useState } from 'react';import { z } from 'zod';import type { IFieldJSONSchema } from './default-components';import ZodField from './zod-field';type ZodSchema = z.ZodObject<Record<string, z.ZodTypeAny>>;interface ZodFormProps<T extends ZodSchema> {  schema: T;  onSubmit: (data: z.infer<T>) => void;  defaultValues?: Partial<z.infer<T>>;  className?: string;  fieldClassName?: string;  children?: React.ReactNode;}export function ZodForm<T extends ZodSchema>(props: ZodFormProps<T>) {  const { schema, onSubmit, defaultValues = {}, className = '', fieldClassName = '', children } = props;  // 使用 Zod v4 内置的 JSON Schema 转换  const jsonSchema = useMemo(() => z.toJSONSchema(schema), [schema]);  // 初始化表单数据  const initialFormData = useMemo(() => {    const schemaDefaults = extractDefaultValues(jsonSchema);    return { ...schemaDefaults, ...defaultValues };  }, [jsonSchema, defaultValues]);  const [formData, setFormData] = useState<any>(initialFormData);  const [errors, setErrors] = useState<Record<string, string>>({});  // 更新字段值  const updateField = (name: string, value: any) => {    setFormData((prev: any) => ({ ...prev, [name]: value }));  };  const errorHandler = useCallback(    (args: {      error: NonNullable<z.ZodSafeParseResult<unknown>['error']>;      name?: string;      bypassCallback?: (data: any) => void;    }) => {      const { name, error } = args;      setErrors((prev) => {        const newErrors = { ...prev };        console.log('newErrors', newErrors);        error.issues.forEach((issue) => {          const path = name || issue.path.join('.');          newErrors[path] = issue.message;        });        console.log('newErrors', newErrors);        return newErrors;      });    },    [],  );  const validateField = async (name: string, value: any) => {    const fieldSchema = schema.shape[name as keyof typeof schema.shape];    if (!fieldSchema) {      return true;    }    const result = fieldSchema.safeParse(value);    if (result.success) {      setErrors((prev) => {        const newErrors = { ...prev };        delete newErrors[name];        return newErrors;      });    } else {      errorHandler({ error: result.error, name });    }    return result.success;  };  // 表单提交  const handleSubmit = (e: React.FormEvent) => {    e.preventDefault();    const result = schema.safeParse(formData);    if (result.success) {      setErrors({});      onSubmit(result.data);    } else {      errorHandler({        error: result.error,      });    }  };  const handleReset = () => {    setFormData({ ...initialFormData });    setErrors({});  };  const fields = useMemo(() => {    return Object.entries(jsonSchema.properties || {}) as [string, IFieldJSONSchema][];  }, [jsonSchema]);  return (    <form onReset={handleReset} onSubmit={handleSubmit} className={`${className}`}>      {fields.map(([name, fieldJsonSchema]) => {        if (typeof fieldJsonSchema === 'boolean') return null;        const type = fieldJsonSchema.type;        if (!type) return null;        const { label, description } = fieldJsonSchema;        const options = fieldJsonSchema.enum as string[];        return (          <ZodField            type={type}            label={label}            description={description}            key={name}            name={name}            options={options}            value={formData[name]}            error={errors[name]}            onChange={(e) => updateField(name, e.target.value)}            onBlur={() => validateField(name, formData[name])}            required={jsonSchema.required?.includes(name)}            className={fieldClassName}          />        );      })}      {children}    </form>  );}function extractDefaultValues(jsonSchema: any): Record<string, any> {  const defaults: Record<string, any> = {};  if (jsonSchema.properties) {    for (const [key, field] of Object.entries<any>(jsonSchema.properties)) {      if (field.default !== undefined) {        defaults[key] = field.default;      }    }  }  return defaults;}

import { memo } from 'react';import type { IFieldProps } from './default-components';import { defaultComponents } from './default-components';function ZodField(props: IFieldProps) {  const { name, type, label, description, ...restProps } = props;  // 根据类型渲染对应的组件  const FieldComponent = defaultComponents[type];  if (!FieldComponent) return <p className="text-red-500">{type} not found</p>;  return <FieldComponent name={name} type={type} label={label || name} description={description} {...restProps} />;}export default memo(ZodField, (prevProps, nextProps) => {  return prevProps.error === nextProps.error && prevProps.value === nextProps.value;});

'use client';import dynamic from 'next/dynamic';import { z } from 'zod';import { ZodFormFooter, ZodFormReset, ZodFormSubmit } from './default-components';const ZodForm = dynamic(() => import('./zod-form').then((mod) => mod.ZodForm), {  ssr: false,  loading: () => <div>Loading ZodForm...</div>,});const schema = z.object({  name: z.string().min(1, '姓名不能为空'),  email: z.email('请输入有效的邮箱地址'),  gender: z.enum(['male', 'female']).meta({    type: 'radio', // 类型级别的映射  }),});export default function Demo() {  return (    <ZodForm      schema={schema}      defaultValues={{ name: 'John Doe', email: 'john.doe@example.com', gender: 'male' }}      onSubmit={(data) => console.log('data', data)}    >      <ZodFormFooter>        <ZodFormSubmit>Submit</ZodFormSubmit>        <ZodFormReset variant={'destructive'}>Reset</ZodFormReset>      </ZodFormFooter>    </ZodForm>  );}

import type { FC, InputHTMLAttributes } from 'react';import type { z } from 'zod';import { Button } from '@/components/ui/button';import { Input } from '@/components/ui/input';import { cn } from '@/lib/utils';export interface IFieldJSONSchema extends z.core.JSONSchema.BaseSchema {  component?: string;  label?: string;}export type IFieldProps = InputHTMLAttributes<HTMLInputElement> & {  type: string; // 不同于 input 的 type，用于组件映射  error?: string;  label?: string;  name: string;  description?: string;  options?: string[];};export type NativeComponent = React.ComponentType<IFieldProps>;// ============ 默认组件 ============export const NativeInput: FC<IFieldProps> = (props) => {  const { label, required, name, error, value, type: _, ...restProps } = props;  return (    <div>      <label htmlFor={name}>        {label}: {required && <span>*</span>}      </label>      <Input type="text" name={name} value={value ?? ''} {...restProps} />      {error && <p className="text-red-500 text-sm">{error}</p>}    </div>  );};export const NativeRadio: FC<IFieldProps> = (props) => {  const { label, required, name, error, value, options = [], type: _, ...restProps } = props;  return (    <div>      <label htmlFor={name}>        {label}: {required && <span>*</span>}      </label>      <div className="flex items-center gap-4">        {options?.map((option) => (          <div key={option} className="flex items-center gap-1">            <input              type="radio"              id={`${name}_${option}`}              name={name}              value={option}              checked={value === option}              {...restProps}            />            <label htmlFor={`${name}_${option}`}>{option}</label>          </div>        ))}      </div>      {error && <p className="text-red-500 text-sm">{error}</p>}    </div>  );};export type TComponentType = 'string' | 'checkbox' | 'radio' | 'select';export type TComponentMap = Record<string, NativeComponent> & Partial<Record<TComponentType, NativeComponent>>;export function defineComponents(components: TComponentMap) {  return components;}export const defaultComponents = defineComponents({  // 类型级别的映射  string: NativeInput,  radio: NativeRadio,});export type ButtonProps = React.ComponentProps<typeof Button>;export function ZodFormSubmit(props: ButtonProps) {  return <Button type="submit" {...props} />;}export function ZodFormReset(props: ButtonProps) {  return <Button type="reset" {...props} />;}export function ZodFormFooter(props: { className?: string; children: React.ReactNode }) {  const { className, children } = props;  return <div className={cn('flex justify-end gap-2', className)}>{children}</div>;}