Zod Form

'use client';import type React from 'react';import { useCallback, useMemo, useState } from 'react';import { z } from 'zod';import type { TComponentMap } from './default-components';import { ZodField, type ZodFieldProps } 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>>;  components?: TComponentMap;  className?: string;  fieldClassName?: string;  children?: React.ReactNode;  renderFields?: (props: ZodFieldProps) => React.ReactNode;}export function ZodForm<T extends ZodSchema>(props: ZodFormProps<T>) {  const {    schema,    onSubmit,    defaultValues = {},    className = '',    components = {},    fieldClassName = '',    renderFields,    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 }));    // 清除该字段的错误    if (errors[name]) {      setErrors((prev) => {        const newErrors = { ...prev };        delete newErrors[name];        return newErrors;      });    }  };  const errorHandler = useCallback(    (args: {      error: NonNullable<z.ZodSafeParseResult<unknown>['error']>;      name?: string;      bypassCallback?: (data: any) => void;    }) => {      const { name, error } = args;      const newErrors: Record<string, string> = {};      error.issues.forEach((issue) => {        const path = name || issue.path.join('.');        newErrors[path] = issue.message;      });      setErrors(newErrors);    },    [],  );  const onValidate = 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({});    } 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 || {});  }, [jsonSchema]);  return (    <form onReset={handleReset} onSubmit={handleSubmit} className={`${className}`}>      {fields.map(([name, fieldJsonSchema]) => {        const props = {          name,          fieldJsonSchema,          components,          value: formData[name],          error: errors[name],          updateField,          isRequired: jsonSchema.required?.includes(name),          onValidate,          className: fieldClassName,        };        return renderFields ? renderFields(props) : <ZodField key={name} {...props} />;      })}      {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 type { INativeInputProps, TFieldJSONSchema } from './default-components';import { defaultComponents, type TComponentMap } from './default-components';export type ZodFieldProps<T = string> = INativeInputProps<T> & {  components: TComponentMap;  isRequired?: boolean;  name: string;  updateField: (name: string, value: T) => void;  className?: string;  onValidate: (name: string, value: T) => void;};export function ZodField({  name,  fieldJsonSchema,  components,  isRequired,  value,  error,  updateField,  onValidate,}: ZodFieldProps) {  // 根据类型渲染对应的组件  const { component: FieldComponent } = extractComponent({    fieldJsonSchema,    components,  });  if (!FieldComponent) return null;  const { label, description } = fieldJsonSchema;  return (    <FieldComponent      name={name}      label={label || name}      description={description}      value={value}      error={error}      isRequired={isRequired}      onValidate={onValidate}      onChange={(newValue) => {        updateField(name, newValue);      }}      fieldJsonSchema={fieldJsonSchema}    />  );}type ExtractComponentParams<T> = (params: { fieldJsonSchema: TFieldJSONSchema; components: T }) => {  component: T[keyof T];};const extractComponent: ExtractComponentParams<TComponentMap> = (params) => {  const { fieldJsonSchema } = params;  const components = Object.assign(defaultComponents, params.components);  const component = fieldJsonSchema.component || fieldJsonSchema.type;  if (component && components[component]) {    return { component: components[component] };  }  return {    component: () => (      <div>        <mark>          Unsupported type: <strong>{component}</strong>, Please use          <strong> defineComponents</strong> to define a custom component.        </mark>      </div>    ),  };};

'use client';import { z } from 'zod';import { ZodFormFooter, ZodFormReset, ZodFormSubmit } from './default-components';import { ZodForm } from './zod-form';const schema = z.object({  name: z.string().min(1, '姓名不能为空'),  email: z.email('请输入有效的邮箱地址'),  age: z.number().min(18, '年龄必须大于18岁'),});export const App = () => {  return (    <div>      <ZodForm schema={schema} onSubmit={console.log}>        <ZodFormFooter>          <ZodFormSubmit>Submit</ZodFormSubmit>          <ZodFormReset variant={'destructive'}>Reset</ZodFormReset>        </ZodFormFooter>      </ZodForm>    </div>  );};

import { type FC, type InputHTMLAttributes, useMemo } from 'react';import { Button } from '@/components/ui/button';import { Input } from '@/components/ui/input';import { cn } from '@/lib/utils';export type TFieldJSONSchema = {  component?: string;  placeholder?: string;  label?: string;  description?: string;  type?: string;  [key: string]: any;};export type INativeInputProps<T> = Pick<  InputHTMLAttributes<HTMLInputElement>,  'placeholder' | 'disabled' | 'required' | 'className'> & {  onChange?: (value: T) => void;  onValidate?: (name: string, value: T) => Promise<boolean>;  readonly value?: T;  error?: string;  label?: string;  name: string;  description?: string;  options?: T[];  isRequired?: boolean;  fieldJsonSchema?: any;};export type NativeComponent<T> = React.ComponentType<INativeInputProps<T>>;// ============ 默认组件 ============export const NativeInput: FC<INativeInputProps<string | number>> = ({  value,  onChange,  name,  fieldJsonSchema,  onValidate,  isRequired,  error,}) => {  const isNumberInput = useMemo(() => fieldJsonSchema.type === 'number', [fieldJsonSchema.type]);  const label: string = fieldJsonSchema.label || name;  return (    <div>      <label htmlFor={name}>        {label}: {isRequired && <span>*</span>}      </label>      <Input        type={isNumberInput ? 'number' : 'text'}        name={name}        value={value ?? ''}        onChange={(e) => {          const newValue = isNumberInput ? Number(e.target.value) : e.target.value;          onChange?.(newValue);          onValidate?.(name, newValue);        }}        className="native-input"      />      {error && <p>{error}</p>}    </div>  );};export type TComponentType = 'string' | 'checkbox' | 'radio' | 'select';export type TComponentMap<T = any> = Record<string, NativeComponent<T>> &  Partial<Record<TComponentType, NativeComponent<T>>>;export function defineComponents<T extends TComponentMap>(components: T) {  return components as T;}export const defaultComponents = defineComponents({  // 类型级别的映射  string: NativeInput,  number: NativeInput,});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>;}