zod-form-kit/dist/examples/register-adapter-example.js

UI-agnostic form generation library based on Zod schemas with extensible adapter pattern

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { z } from 'zod';
import { ZodForm } from '../components/ZodForm';
// Example custom UI adapter
const customAdapter = {
    name: 'custom-example',
    components: {
        string: ({ name, label, value, onChange, error, required }) => (_jsxs("div", { className: "custom-string-field", children: [_jsxs("label", { htmlFor: name, className: "custom-label", children: [label, required && _jsx("span", { className: "required", children: "*" })] }), _jsx("input", { id: name, name: name, value: value, onChange: (e) => onChange(e.target.value), className: `custom-input ${error ? 'error' : ''}`, placeholder: `Enter ${label}` }), error && _jsx("div", { className: "error-message", children: error })] })),
        boolean: ({ name, label, value, onChange }) => (_jsx("div", { className: "custom-boolean-field", children: _jsxs("label", { className: "custom-checkbox-label", children: [_jsx("input", { type: "checkbox", name: name, checked: value, onChange: (e) => onChange(e.target.checked), className: "custom-checkbox" }), _jsx("span", { className: "checkbox-text", children: label })] }) })),
    }
};
// Example schema
const userSchema = z.object({
    name: z.string().min(1, 'Name is required'),
    email: z.string().email('Invalid email'),
    subscribe: z.boolean().default(false),
});
export function RegisterAdapterExample() {
    const handleSubmit = (data) => {
        console.log('Form submitted with custom adapter:', data);
    };
    return (_jsxs("div", { className: "register-adapter-example", children: [_jsx("h2", { children: "ZodForm with Custom UI Adapter" }), _jsx("p", { children: "The custom adapter will be automatically registered and set as the default theme." }), _jsx(ZodForm, { schema: userSchema, onSubmit: handleSubmit, registerUIAdapter: customAdapter, defaultValues: {
                    name: '',
                    email: '',
                    subscribe: false,
                }, className: "custom-form" })] }));
}