import React, { useState, useCallback } from 'react'; import { Input } from './input'; import { Button } from './button'; import { defineMessages, useIntl } from '../../i18n'; const i18n = defineMessages({ submit: { id: 'jsonSchemaForm.submit', defaultMessage: 'Submit', }, cancel: { id: 'jsonSchemaForm.cancel', defaultMessage: 'Cancel', }, fieldRequired: { id: 'jsonSchemaForm.fieldRequired', defaultMessage: 'This field is required', }, minLength: { id: 'jsonSchemaForm.minLength', defaultMessage: 'Minimum length is {minLength}', }, maxLength: { id: 'jsonSchemaForm.maxLength', defaultMessage: 'Maximum length is {maxLength}', }, minValue: { id: 'jsonSchemaForm.minValue', defaultMessage: 'Minimum value is {minimum}', }, maxValue: { id: 'jsonSchemaForm.maxValue', defaultMessage: 'Maximum value is {maximum}', }, selectPlaceholder: { id: 'jsonSchemaForm.selectPlaceholder', defaultMessage: 'Select...', }, noFields: { id: 'jsonSchemaForm.noFields', defaultMessage: 'No fields to display', }, }); interface JsonSchemaProperty { type?: string; description?: string; default?: unknown; enum?: string[]; minimum?: number; maximum?: number; minLength?: number; maxLength?: number; } export interface JsonSchema { type?: string; properties?: Record; required?: string[]; title?: string; description?: string; } interface JsonSchemaFormProps { schema: JsonSchema; onSubmit: (data: Record) => void; onCancel?: () => void; submitLabel?: string; cancelLabel?: string; disabled?: boolean; } export default function JsonSchemaForm({ schema, onSubmit, onCancel, submitLabel, cancelLabel, disabled = false, }: JsonSchemaFormProps) { const intl = useIntl(); const [formData, setFormData] = useState>(() => { const initial: Record = {}; if (schema.properties) { for (const [key, prop] of Object.entries(schema.properties)) { if (prop.default !== undefined) { initial[key] = prop.default; } else if (prop.type === 'boolean') { initial[key] = false; } else if (prop.type === 'number' || prop.type === 'integer') { initial[key] = prop.minimum ?? 0; } else { initial[key] = ''; } } } return initial; }); const [errors, setErrors] = useState>({}); const validateField = useCallback( (key: string, value: unknown): string | null => { const prop = schema.properties?.[key]; if (!prop) return null; const isRequired = schema.required?.includes(key); if (isRequired && (value === '' || value === null || value === undefined)) { return intl.formatMessage(i18n.fieldRequired); } if (prop.type === 'string' && typeof value === 'string') { if (!isRequired && value === '') return null; if (prop.minLength !== undefined && value.length < prop.minLength) { return intl.formatMessage(i18n.minLength, { minLength: prop.minLength }); } if (prop.maxLength !== undefined && value.length > prop.maxLength) { return intl.formatMessage(i18n.maxLength, { maxLength: prop.maxLength }); } } if ((prop.type === 'number' || prop.type === 'integer') && typeof value === 'number') { if (prop.minimum !== undefined && value < prop.minimum) { return intl.formatMessage(i18n.minValue, { minimum: prop.minimum }); } if (prop.maximum !== undefined && value > prop.maximum) { return intl.formatMessage(i18n.maxValue, { maximum: prop.maximum }); } } return null; }, [schema, intl] ); const handleChange = useCallback( (key: string, value: unknown) => { setFormData((prev) => ({ ...prev, [key]: value })); const error = validateField(key, value); setErrors((prev) => { if (error) { return { ...prev, [key]: error }; } const newErrors = { ...prev }; delete newErrors[key]; return newErrors; }); }, [validateField] ); const handleSubmit = useCallback( (e: React.FormEvent) => { e.preventDefault(); const newErrors: Record = {}; if (schema.properties) { for (const key of Object.keys(schema.properties)) { const error = validateField(key, formData[key]); if (error) { newErrors[key] = error; } } } if (Object.keys(newErrors).length > 0) { setErrors(newErrors); return; } onSubmit(formData); }, [formData, onSubmit, schema.properties, validateField] ); const renderField = (key: string, prop: JsonSchemaProperty) => { const value = formData[key]; const error = errors[key]; const isRequired = schema.required?.includes(key); if (prop.enum) { return ( ); } if (prop.type === 'boolean') { return ( handleChange(key, e.target.checked)} disabled={disabled} className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" /> {prop.description || key} ); } if (prop.type === 'number' || prop.type === 'integer') { return ( { const numValue = prop.type === 'integer' ? parseInt(e.target.value, 10) : parseFloat(e.target.value); handleChange(key, isNaN(numValue) ? '' : numValue); }} min={prop.minimum} max={prop.maximum} step={prop.type === 'integer' ? 1 : 'any'} disabled={disabled} className={error ? 'border-red-500' : ''} /> ); } return ( handleChange(key, e.target.value)} minLength={prop.minLength} maxLength={prop.maxLength} disabled={disabled} className={error ? 'border-red-500' : ''} /> ); }; if (!schema.properties || Object.keys(schema.properties).length === 0) { return

{intl.formatMessage(i18n.noFields)}

; } return (

{Object.entries(schema.properties).map(([key, prop]) => { const isRequired = schema.required?.includes(key); const error = errors[key]; if (prop.type === 'boolean') { return (

{renderField(key, prop)} {error && {error}}

); } return (

{key} {isRequired && *} {prop.description && prop.type !== 'boolean' && ( {prop.description} )} {renderField(key, prop)} {error && {error}}

); })}

{onCancel && ( )}

); }