zod-form-kit/dist/examples/default-adapter-demo.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';
import { getDefaultAdapter } from '../utils/plugin-registry';
// Create a custom adapter
const blueThemeAdapter = {
    name: 'blue-theme',
    components: {
        string: ({ name, label, value, onChange, error, required }) => (_jsxs("div", { style: { marginBottom: '1rem' }, children: [_jsxs("label", { htmlFor: name, style: {
                        display: 'block',
                        color: '#1e40af',
                        fontWeight: 'bold',
                        marginBottom: '0.5rem'
                    }, children: [label, required && _jsx("span", { style: { color: '#dc2626' }, children: "*" })] }), _jsx("input", { id: name, name: name, value: value, onChange: (e) => onChange(e.target.value), style: {
                        width: '100%',
                        padding: '0.5rem',
                        border: error ? '2px solid #dc2626' : '2px solid #3b82f6',
                        borderRadius: '0.375rem',
                        fontSize: '1rem'
                    }, placeholder: `Enter ${label}` }), error && (_jsx("div", { style: { color: '#dc2626', fontSize: '0.875rem', marginTop: '0.25rem' }, children: error }))] })),
        boolean: ({ name, label, value, onChange }) => (_jsx("div", { style: { marginBottom: '1rem' }, children: _jsxs("label", { style: { display: 'flex', alignItems: 'center', cursor: 'pointer' }, children: [_jsx("input", { type: "checkbox", name: name, checked: value, onChange: (e) => onChange(e.target.checked), style: {
                            marginRight: '0.5rem',
                            transform: 'scale(1.2)',
                            accentColor: '#3b82f6'
                        } }), _jsx("span", { style: { color: '#1e40af', fontWeight: 'bold' }, children: label })] }) })),
    }
};
const schema = z.object({
    name: z.string().min(1, 'Name is required'),
    email: z.string().email('Invalid email address'),
    newsletter: z.boolean().default(false),
});
export function DefaultAdapterDemo() {
    const handleSubmit = (data) => {
        console.log('Submitted data:', data);
        // Show current default adapter
        const defaultAdapter = getDefaultAdapter();
        console.log('Current default adapter:', defaultAdapter?.name);
        alert(`Form submitted!\nDefault adapter: ${defaultAdapter?.name}\nData: ${JSON.stringify(data, null, 2)}`);
    };
    return (_jsxs("div", { style: { maxWidth: '400px', margin: '2rem auto', padding: '2rem' }, children: [_jsx("h2", { style: { color: '#1e40af', marginBottom: '1rem' }, children: "Auto-Default Adapter Demo" }), _jsx("div", { style: {
                    background: '#eff6ff',
                    padding: '1rem',
                    borderRadius: '0.5rem',
                    marginBottom: '2rem',
                    border: '1px solid #3b82f6'
                }, children: _jsxs("p", { style: { margin: 0, color: '#1e40af', fontSize: '0.875rem' }, children: [_jsx("strong", { children: "Note:" }), " The blue-theme adapter will be automatically registered and set as the default when this form renders."] }) }), _jsx(ZodForm, { schema: schema, onSubmit: handleSubmit, registerUIAdapter: blueThemeAdapter, defaultValues: {
                    name: '',
                    email: '',
                    newsletter: false,
                } })] }));
}