zod-form-radix/dist/examples/RadixAdapterExample.js

Radix UI integration for zod-form-kit

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { radixThemesAdapter } from '../adapters/RadixThemesAdapter';
import { StringField, NumberField, BooleanField, DateField, ArrayField, ObjectField, EnumField } from '../index';
// Example showing direct component usage
export function DirectComponentExample() {
    const [formData, setFormData] = React.useState({
        name: '',
        email: '',
        age: 25,
        subscribe: false,
        birthDate: null,
        skills: [],
        address: {
            street: '',
            city: '',
            country: ''
        },
        role: ''
    });
    const [errors] = React.useState({});
    const updateField = (path, value) => {
        setFormData(prev => {
            const keys = path.split('.');
            const newData = { ...prev };
            let current = newData;
            for (let i = 0; i < keys.length - 1; i++) {
                current = current[keys[i]];
            }
            current[keys[keys.length - 1]] = value;
            return newData;
        });
    };
    return (_jsxs("div", { className: "max-w-2xl mx-auto p-6 space-y-6", children: [_jsx("h1", { className: "text-2xl font-bold text-gray-900 mb-6", children: "Radix UI Adapter Example" }), _jsxs("form", { className: "space-y-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-800", children: "Personal Information" }), _jsx(StringField, { name: "name", label: "Full Name", value: formData.name, onChange: (value) => updateField('name', value), required: true, error: errors.name }), _jsx(StringField, { name: "email", label: "Email Address", value: formData.email, onChange: (value) => updateField('email', value), options: { format: 'email' }, required: true, error: errors.email })] }), _jsx(NumberField, { name: "age", label: "Age", value: formData.age, onChange: (value) => updateField('age', value), options: { min: 0, max: 120 }, required: true }), _jsxs("div", { className: "space-y-4", children: [_jsx("h2", { className: "text-lg font-semibold text-gray-800", children: "Preferences" }), _jsx(BooleanField, { name: "subscribe", label: "Subscribe to newsletter", value: formData.subscribe, onChange: (value) => updateField('subscribe', value), options: { variant: 'checkbox' } })] }), _jsx(DateField, { name: "birthDate", label: "Birth Date", value: formData.birthDate, onChange: (value) => updateField('birthDate', value), options: { format: 'date' } }), _jsx(EnumField, { name: "role", label: "Role", value: formData.role, onChange: (value) => updateField('role', value), values: ['user', 'admin', 'moderator'], required: true }), _jsx(ArrayField, { name: "skills", label: "Skills", value: formData.skills, onChange: updateField, itemSchema: { type: 'string' }, errors: errors, path: "skills", options: { minLength: 0, maxLength: 10 } }), _jsx(ObjectField, { name: "address", label: "Address", value: formData.address, onChange: updateField, properties: {
                            street: { type: 'string', label: 'Street Address', required: true },
                            city: { type: 'string', label: 'City', required: true },
                            country: { type: 'string', label: 'Country', required: true }
                        }, errors: errors, path: "address", required: true }), _jsx("button", { type: "submit", className: "w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", onClick: (e) => {
                            e.preventDefault();
                            console.log('Form Data:', formData);
                        }, children: "Submit Form" })] }), _jsxs("div", { className: "mt-8 p-4 bg-gray-100 rounded-lg", children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Current Form Data:" }), _jsx("pre", { className: "text-sm text-gray-700 overflow-auto", children: JSON.stringify(formData, null, 2) })] })] }));
}
// Example showing how to use the adapter with the plugin system
export function AdapterRegistrationExample() {
    // In a real application, you would call this during app initialization
    const setupAdapter = () => {
        console.log('Adapter ready:', radixThemesAdapter.name);
        console.log('Available components:', Object.keys(radixThemesAdapter.components));
        // This would typically be:
        // import { registerUIAdapter } from 'zod-form-kit';
        // registerUIAdapter(radixThemesAdapter);
    };
    React.useEffect(() => {
        setupAdapter();
    }, []);
    return (_jsxs("div", { className: "max-w-xl mx-auto p-6", children: [_jsx("h2", { className: "text-xl font-bold mb-4", children: "Adapter Registration Example" }), _jsxs("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4", children: [_jsx("h3", { className: "font-semibold text-blue-900 mb-2", children: "Integration Steps:" }), _jsxs("ol", { className: "list-decimal list-inside space-y-2 text-blue-800", children: [_jsxs("li", { children: ["Install: ", _jsx("code", { className: "bg-blue-100 px-1 rounded", children: "npm install @zod-form-kit/radix" })] }), _jsxs("li", { children: ["Register: ", _jsx("code", { className: "bg-blue-100 px-1 rounded", children: "registerUIAdapter(radixThemesAdapter)" })] }), _jsxs("li", { children: ["Use: ", _jsx("code", { className: "bg-blue-100 px-1 rounded", children: '<FormGenerator schema={schema} />' })] })] })] }), _jsxs("div", { className: "mt-6 p-4 bg-gray-50 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2", children: "Adapter Info:" }), _jsxs("p", { children: [_jsx("strong", { children: "Name:" }), " ", radixThemesAdapter.name] }), _jsxs("p", { children: [_jsx("strong", { children: "Components:" }), " ", Object.keys(radixThemesAdapter.components).join(', ')] })] })] }));
}
export default DirectComponentExample;