@syncfusion/ej2-react-form-renderer 0.1.0-beta

package/src/FormRenderer.js

@@ -0,0 +1,567 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Form Renderer Component
+ * Renders JSON-driven forms with React FormValidator
+ */
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Form, FormField } from './FormValidator';
+import { enableRipple } from '@syncfusion/ej2-base';
+import { renderFormField } from './renderFormField';
+import { CustomTabComponent } from './CustomTabComponent';
+import { mergeSchema, convertComponentsToDataSchema, generateUIPropertiesFromData, generateLayoutFromData, generateDataSchemaFromUI } from './json-converter';
+import { UniversalJsonParser } from './parser';
+import { TooltipComponent } from '@syncfusion/ej2-react-popups';
+import { VALIDATION_REGEX } from './FormValidator';
+import StaticHtmlRenderer from './StaticHtmlRenderer';
+import { splitWidths } from './utils';
+enableRipple(true);
+/**
+ * Form layout options (only applies when UI schema is NOT provided)
+ */
+export const FormLayout = {
+    SingleColumn: 'single',
+    TwoColumn: 'twocolumn',
+    ThreeColumn: 'threecolumn',
+    FourColumn: 'fourcolumn'
+};
+/**
+ * Helper: Normalize DataSchema input
+ * Converts any object to JSON string and parses with UniversalJsonParser
+ * Handles FormSchema, DataSchema, or raw data - parser infers the format
+ */
+function normalizeDataSchema(input) {
+    try {
+        // Convert object to JSON string
+        const jsonString = JSON.stringify(input);
+        const parser = new UniversalJsonParser();
+        const parseResult = parser.parse(jsonString);
+        if (parseResult.success && parseResult.schema) {
+            const dataSchema = convertComponentsToDataSchema(parseResult.schema.components);
+            // console.log(`✅ Parsed object as ${parseResult.metadata.detectedFormat} and converted to DataSchema`);
+            return dataSchema;
+        }
+        else {
+            console.error('❌ Failed to parse object:', parseResult.errors);
+            return null;
+        }
+    }
+    catch (error) {
+        console.error('❌ DataSchema normalization error:', error);
+        return null;
+    }
+}
+/**
+ * Helper: Parse string input using UniversalJsonParser
+ * Returns DataSchema if parseable, otherwise null
+ * Validates that UI schema was not accidentally provided
+ */
+function parseStringToDataSchema(input) {
+    try {
+        // First check if user accidentally pasted UI schema in data schema field
+        const testParse = JSON.parse(input);
+        if (testParse.layout || (testParse.theme && testParse.properties && testParse.layout)) {
+            console.error('The provided schema is a UI Schema in the data schema prop. Please provide a valid Data Schema with field definitions and validation rules.');
+            return null;
+        }
+        const parser = new UniversalJsonParser();
+        const parseResult = parser.parse(input);
+        if (parseResult.success && parseResult.schema) {
+            const dataSchema = convertComponentsToDataSchema(parseResult.schema.components);
+            return dataSchema;
+        }
+        else {
+            console.error('Failed to parse input:', parseResult.errors);
+            return null;
+        }
+    }
+    catch (error) {
+        console.error('Parser error:', error);
+        return null;
+    }
+}
+/**
+ * Helper: Parse string input as UISchema
+ * Validates JSON structure matches UISchema format
+ * Detects if data schema was accidentally provided
+ */
+function parseStringToUISchema(input) {
+    try {
+        const parsed = JSON.parse(input);
+        // Check if data schema was pasted in UI schema field
+        if (parsed.properties && !parsed.layout && !parsed.theme) {
+            const hasValidationProps = Object.values(parsed.properties).some((prop) => prop.required !== undefined || prop.minLength !== undefined || prop.maxLength !== undefined ||
+                prop.minValue !== undefined || prop.maxValue !== undefined || prop.pattern !== undefined);
+            if (hasValidationProps) {
+                console.error('The provided schema is a Data Schema in the UI schema prop. Please provide a valid UI Schema with theme, properties, and layout definitions.');
+                return null;
+            }
+        }
+        // Validate UISchema structure
+        if (!parsed.theme || !parsed.properties || !parsed.layout) {
+            console.error('Invalid UISchema: missing theme, properties, or layout');
+            return null;
+        }
+        return parsed;
+    }
+    catch (error) {
+        console.error('JSON parse error:', error);
+        return null;
+    }
+}
+// ForwardRef to expose public methods
+export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit, onChange, onButtonClick, className = '', layout = FormLayout.SingleColumn, created, ...restProps }, ref) => {
+    const processedSchema = React.useMemo(() => {
+        try {
+            // Parse and normalize data schema
+            let parsedDataSchema = dataSchema
+                ? ((typeof dataSchema === 'string'
+                    ? parseStringToDataSchema(dataSchema)
+                    : normalizeDataSchema(dataSchema)) || undefined)
+                : undefined;
+            // Parse and normalize UI schema
+            let parsedUISchema = uiSchema
+                ? (typeof uiSchema === 'string'
+                    ? parseStringToUISchema(uiSchema)
+                    : uiSchema) || undefined
+                : undefined;
+            // Scenario 1: Both dataSchema and uiSchema provided - full merge
+            if (parsedDataSchema && parsedUISchema) {
+                const uiFieldIds = new Set(Object.keys(parsedUISchema.properties));
+                const dataFieldIds = Object.keys(parsedDataSchema.properties);
+                const missingFields = dataFieldIds.filter(id => !uiFieldIds.has(id));
+                if (missingFields.length > 0) {
+                    console.warn(`⚠️ Found ${missingFields.length} fields in data schema missing from UI schema`);
+                }
+                const merged = mergeSchema({ dataSchema: parsedDataSchema, uiSchema: parsedUISchema });
+                return merged;
+            }
+            // Scenario 2: Only dataSchema provided - auto-generate UI schema
+            if (parsedDataSchema && !parsedUISchema) {
+                const autoUISchema = {
+                    properties: generateUIPropertiesFromData(parsedDataSchema),
+                    layout: generateLayoutFromData(parsedDataSchema)
+                };
+                const merged = mergeSchema({ dataSchema: parsedDataSchema, uiSchema: autoUISchema });
+                return merged;
+            }
+            // Scenario 3: Only uiSchema provided - auto-generate data schema
+            if (!parsedDataSchema && parsedUISchema) {
+                const autoDataSchema = generateDataSchemaFromUI(parsedUISchema);
+                const uiFieldIds = new Set(Object.keys(parsedUISchema.properties));
+                const dataFieldIds = Object.keys(autoDataSchema.properties);
+                const missingFields = dataFieldIds.filter(id => !uiFieldIds.has(id));
+                if (missingFields.length > 0) {
+                    console.warn(`Found ${missingFields.length} fields in auto-generated data schema missing from UI schema`);
+                }
+                const merged = mergeSchema({ dataSchema: autoDataSchema, uiSchema: parsedUISchema });
+                return merged;
+            }
+            // Scenario 4: Neither provided - return empty form
+            console.warn('FormRenderer: No schema provided (dataSchema or uiSchema)');
+            return { version: '1.0.0-beta', theme: 'tailwind3', components: [] };
+        }
+        catch (error) {
+            console.error('FormRenderer schema processing error:', error);
+            return { version: '1.0.0-beta', theme: 'tailwind3', components: [] };
+        }
+    }, [dataSchema, uiSchema]);
+    const [formState, setFormState] = useState(undefined);
+    const isInitializedRef = useRef(false);
+    // Attach ref to the input element for getComponent
+    let setInputRef;
+    // Store input component refs by name/id
+    const inputRefs = useRef({});
+    // Check if UI schema has layout components (table, tabs, or panel)
+    const hasLayoutComponents = React.useMemo(() => {
+        if (!processedSchema.components)
+            return false;
+        const checkForLayoutTypes = (components) => {
+            for (const comp of components) {
+                if (['table', 'tabs', 'panel', 'card'].includes(comp.type)) {
+                    return true;
+                }
+                if (comp.children && checkForLayoutTypes(comp.children)) {
+                    return true;
+                }
+                if (comp.tableCells) {
+                    for (const row of comp.tableCells) {
+                        for (const cell of row) {
+                            if (checkForLayoutTypes(cell))
+                                return true;
+                        }
+                    }
+                }
+                if (comp.tabItems) {
+                    for (const tab of comp.tabItems) {
+                        if (tab.content && checkForLayoutTypes(tab.content))
+                            return true;
+                    }
+                }
+            }
+            return false;
+        };
+        return checkForLayoutTypes(processedSchema.components);
+    }, [processedSchema]);
+    // Determine layout class (only apply if UI schema does NOT have table/tabs/panels)
+    const layoutClass = React.useMemo(() => {
+        if (hasLayoutComponents)
+            return ''; // Ignore layout if UI schema has table/tabs/panels
+        // Map enum to CSS class names
+        switch (layout) {
+            case FormLayout.TwoColumn:
+                return 'twolayout';
+            case FormLayout.ThreeColumn:
+                return 'threelayout';
+            case FormLayout.FourColumn:
+                return 'fourlayout';
+            case FormLayout.SingleColumn:
+            default:
+                return ''; // Default single column (no class needed)
+        }
+    }, [layout, hasLayoutComponents]);
+    /**
+     * Recursively collect all components including nested ones
+     */
+    const collectAllComponents = useCallback((components) => {
+        const allComponents = [];
+        const traverse = (comps) => {
+            comps.forEach(comp => {
+                allComponents.push(comp);
+                // Handle nested components in panels
+                if (comp.children && comp.children.length > 0) {
+                    traverse(comp.children);
+                }
+                // Handle components in table cells
+                if (comp.tableCells) {
+                    comp.tableCells.forEach(row => {
+                        row.forEach(cell => {
+                            traverse(cell);
+                        });
+                    });
+                }
+                // Handle components in tabs
+                if (comp.tabItems) {
+                    comp.tabItems.forEach(tab => {
+                        if (tab.content) {
+                            traverse(tab.content);
+                        }
+                    });
+                }
+            });
+        };
+        traverse(components);
+        return allComponents;
+    }, []);
+    const idToLabel = React.useMemo(() => {
+        const map = {};
+        const traverse = (comps) => {
+            comps.forEach(comp => {
+                if (comp.label && !['panel', 'table', 'tabs', 'card', 'button', 'message', 'splitbutton'].includes(comp.type)) {
+                    map[comp.id] = comp.label;
+                }
+                if (comp.children)
+                    traverse(comp.children);
+                if (comp.tableCells) {
+                    comp.tableCells.forEach(row => {
+                        row.forEach(cell => traverse(cell));
+                    });
+                }
+                if (comp.tabItems) {
+                    comp.tabItems.forEach(tab => {
+                        if (tab.content)
+                            traverse(tab.content);
+                    });
+                }
+            });
+        };
+        traverse(processedSchema.components);
+        return map;
+    }, [processedSchema]);
+    /**
+     * Build EJ2 FormValidator rules from schema
+     */
+    const buildValidationRules = useCallback(() => {
+        const rules = {};
+        const collectRules = (components) => {
+            components.forEach((component) => {
+                if (component) {
+                    const componentRules = {};
+                    if (component.required && !component.disabled && !component.readOnly) {
+                        componentRules.required = [true, component.validationMessage || `${component.label} is required`];
+                    }
+                    if (component.minLength && !component.disabled && !component.readOnly) {
+                        componentRules.minLength = [component.minLength, `Minimum ${component.minLength} characters required`];
+                    }
+                    if (component.maxLength && !component.disabled && !component.readOnly) {
+                        componentRules.maxLength = [component.maxLength, `Maximum ${component.maxLength} characters allowed`];
+                    }
+                    if (component?.type === 'textbox' && component?.textboxType && !component?.regex && !componentRules.regex && !component.disabled && !component.readOnly) {
+                        if (component.textboxType === 'email') {
+                            componentRules.regex = [VALIDATION_REGEX['EMAIL'], component?.validationMessage || 'Invalid format'];
+                        }
+                        else if (component.textboxType === 'url') {
+                            componentRules.regex = [VALIDATION_REGEX['URL'], component?.validationMessage || 'Invalid format'];
+                        }
+                    }
+                    if (component.regex && !component.disabled && !component.readOnly) {
+                        componentRules.regex = [component.regex, component.validationMessage || 'Invalid format'];
+                    }
+                    if (Object.keys(componentRules).length > 0) {
+                        rules[component.id] = componentRules;
+                    }
+                }
+                // Recursively collect rules from nested components
+                if (component.children) {
+                    collectRules(component.children);
+                }
+                if (component.tableCells) {
+                    component.tableCells.forEach(row => {
+                        row.forEach(cell => collectRules(cell));
+                    });
+                }
+                if (component.tabItems) {
+                    component.tabItems.forEach(tab => {
+                        if (tab.content)
+                            collectRules(tab.content);
+                    });
+                }
+            });
+        };
+        collectRules(processedSchema.components);
+        return rules;
+    }, [processedSchema]);
+    const validationRules = buildValidationRules();
+    /**
+     * Build initial form values from component defaultValues
+     */
+    const initialValues = React.useMemo(() => {
+        const values = {};
+        const allComponents = collectAllComponents(processedSchema.components);
+        const componentIds = new Set();
+        allComponents.forEach(comp => {
+            // Do NOT store datagrid data inside the form state; grids manage their own internal data.
+            if (comp.type === 'datagrid' || comp.type === 'richtexteditor') {
+                componentIds.add(comp.id);
+                return;
+            }
+            if (comp.defaultValue !== undefined) {
+                values[comp.id] = comp.defaultValue;
+            }
+            componentIds.add(comp.id);
+        });
+        if (formState) {
+            Object.keys(formState.values).filter(key => !componentIds.has(key)).forEach(key => {
+                delete formState.values[key];
+            });
+        }
+        return values;
+    }, [processedSchema, collectAllComponents, dataSchema, uiSchema]);
+    // Update the useEffect that sets default values
+    useEffect(() => {
+        if (formState && !isInitializedRef.current) {
+            isInitializedRef.current = true;
+        }
+        if (formState && initialValues) {
+            Object.keys(formState.values).filter(key => !(key in initialValues));
+            Object.entries(initialValues).forEach(([id, value]) => {
+                if (!formState.values[id]) {
+                    formState.values[id] = value;
+                }
+            });
+        }
+    }, [formState, processedSchema, initialValues]);
+    /**
+     * Render a single field with label and error
+     */
+    const renderField = (component) => {
+        // Skip invisible components
+        if (component.visible === false)
+            return null;
+        // Skip layout and button components (handled separately)
+        if (['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitbutton', 'statichtml'].includes(component.type)) {
+            return null;
+        }
+        const labelPos = component.labelPosition || 'top';
+        const labelWidth = component.labelWidth || 'auto';
+        const showLabel = !component.hideLabel && component.label && !['checkbox', 'button', 'statichtml'].includes(component.type);
+        if ((component.type === 'radio' || component.type === 'checkboxgroup') && Array.isArray(component.options)) {
+            // For radio, store each option's ref with unique key
+            setInputRef = (el, idx) => {
+                if (el && typeof idx === 'number') {
+                    inputRefs.current[`${component.id}_${idx}`] = el;
+                }
+            };
+        }
+        else {
+            setInputRef = (el) => {
+                if (el) {
+                    inputRefs.current[component.id] = el;
+                }
+            };
+        }
+        const hasError = !!formState?.errors[component.id];
+        return (_jsx(FormField, { name: component.id, children: _jsx("div", { className: "form-group", children: _jsxs("div", { className: `field-wrapper label-${labelPos.toLowerCase()}`, children: [showLabel && (_jsxs("label", { className: "field-label", htmlFor: component.id, style: { width: labelPos.toLowerCase() === 'left' ? `${labelWidth}%` : 'auto' }, children: [_jsx("span", { children: component.label }), component?.required && _jsx("span", { className: "required-asterisk", children: "*" }), component.tooltip && (_jsx(TooltipComponent, { content: component.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            flexShrink: 0,
+                                        } }) }))] })), _jsxs("div", { className: "field-input", children: [(component.type === 'radio' || component.type === 'checkboxgroup') && Array.isArray(component.options)
+                                    ? renderFormField({
+                                        component,
+                                        value: formState?.values[component.id],
+                                        onChange: (value) => {
+                                            formState?.onChange(component.id, { value });
+                                            if (onChange) {
+                                                onChange({ field: component.label || component.id, value });
+                                            }
+                                        },
+                                        onBlur: () => formState?.onBlur(component.id),
+                                        ref: (el, idx) => setInputRef(el, idx),
+                                        hasError,
+                                    })
+                                    : renderFormField({
+                                        component,
+                                        value: formState?.values[component.id],
+                                        onChange: (value) => {
+                                            if (component.type !== 'datagrid' && component.type !== 'signature' && component.type !== 'richtexteditor') {
+                                                formState?.onChange(component.id, { value });
+                                                if (onChange) {
+                                                    onChange({ field: component.label || component.id, value });
+                                                }
+                                            }
+                                        },
+                                        onBlur: () => { if (component.type !== 'datagrid' && component.type !== 'richtexteditor')
+                                            formState?.onBlur(component.id); },
+                                        ref: setInputRef,
+                                        hasError,
+                                    }), formState?.errors[component.id] && _jsx("div", { className: "e-error", children: formState.errors[component.id] })] })] }) }) }, component.id));
+    };
+    /**
+     * Render component (including layouts)
+     */
+    const renderComponent = (component) => {
+        // Skip invisible components
+        if (component.visible === false)
+            return null;
+        switch (component.type) {
+            case 'panel':
+                return (_jsxs("fieldset", { className: `form-panel-renderer ${component.cssClass}`, children: [(component.label && !component.hideLabel) && _jsx("legend", { className: `${!component.hideBorders ? 'panel-legend' : ''}`, children: component.label }), _jsx("div", { className: "panel-content", children: component.children?.map(child => renderComponent(child)) })] }, component.id));
+            case 'table':
+                const tableRows = component.rows || (component.tableCells ? component.tableCells.length : 2);
+                const tableCols = component.columns || (component.tableCells && component.tableCells[0] ? component.tableCells[0].length : 2);
+                const defaultColSpan = Math.floor(12 / tableCols);
+                const columnWidthsProp = component.columnWidths;
+                const splittedWidths = columnWidthsProp ? splitWidths(columnWidthsProp.widths) : [];
+                return (_jsx("div", { className: `form-table-renderer ${component.hideBorders ? '' : 'table-border'} ${component.cssClass}`, children: Array.from({ length: tableRows }).map((_, rowIndex) => (_jsx("div", { className: "table-row", children: Array.from({ length: tableCols }).map((_, colIndex) => {
+                            const cellComponents = component.tableCells?.[rowIndex]?.[colIndex] || [];
+                            const cellSpan = defaultColSpan;
+                            const colWidthValue = splittedWidths[colIndex];
+                            const cellStyle = colWidthValue ? { width: `${colWidthValue}%` } : {};
+                            const allNullWidths = !columnWidthsProp || (Array.isArray(columnWidthsProp.widths) && columnWidthsProp.widths.every((w) => w === null));
+                            return (_jsx("div", { className: `table-cell ${colWidthValue ? '' : allNullWidths ? `col-${cellSpan}` : ''}`, style: cellStyle, children: cellComponents.map(comp => renderComponent(comp)) }, `cell-${rowIndex}-${colIndex}`));
+                        }) }, `row-${rowIndex}`))) }, component.id));
+            case 'tabs':
+                return (_jsx("div", { className: `form-tabs-renderer ${component.cssClass || ''}`, children: _jsx(CustomTabComponent, { tabs: component.tabItems?.map(tab => ({
+                            header: tab.header,
+                            content: (_jsx("div", { className: "tab-content-renderer", children: tab.content?.map(comp => renderComponent(comp)) }))
+                        })) || [], className: component.cssClass }) }, component.id));
+            case 'card':
+                return (_jsxs("fieldset", { className: `e-card form-card-renderer ${component.cssClass}`, style: { padding: 0 }, children: [_jsx("div", { className: "e-card-header", children: _jsxs("div", { className: "e-card-header-caption", children: [_jsx("div", { className: "e-card-title", children: component.cardTitle || component.label || 'Card Title' }), component.cardSubtitle && (_jsx("div", { className: "e-card-sub-title", children: component.cardSubtitle }))] }) }), _jsx("div", { className: "e-card-content card-content", children: component.children?.map(child => renderComponent(child)) })] }, component.id));
+            case 'statichtml':
+                return (_jsx(StaticHtmlRenderer, { id: component.id, content: component.defaultValue || '<p>HTML content</p>', enableHtmlSanitizer: component.enableHtmlSanitizer }, component.id));
+            case 'message':
+                return (_jsx("div", { className: "form-group", children: renderFormField({
+                        component,
+                        value: undefined,
+                        onChange: () => { },
+                    }) }, component.id));
+            case 'button':
+                const handleButtonClick = (event) => {
+                    if (onButtonClick) {
+                        onButtonClick({
+                            buttonId: component.id,
+                            buttonLabel: component.buttonsGroups ? event.target?.ej2_instances[0].content : component.label || '', event
+                        });
+                    }
+                };
+                return (_jsx("div", { className: "form-group", children: renderFormField({
+                        component,
+                        value: undefined,
+                        onChange: () => { },
+                        onClick: (e) => { handleButtonClick(e); },
+                        ref: (el, idx) => {
+                            if (idx !== undefined) {
+                                inputRefs.current[`${component.id}_${idx}`] = el;
+                            }
+                            else {
+                                inputRefs.current[component.id] = el;
+                            }
+                        }
+                    }) }, component.id));
+            case 'splitbutton':
+                setInputRef = (el) => {
+                    if (el) {
+                        inputRefs.current[component.id] = el;
+                    }
+                };
+                const handleSplitButtonEvent = (event) => {
+                    if (onButtonClick) {
+                        onButtonClick({
+                            buttonId: component.id,
+                            buttonLabel: component.label || '',
+                            event
+                        });
+                    }
+                };
+                return (_jsx("div", { className: "form-group", children: renderFormField({
+                        component,
+                        value: undefined,
+                        onChange: () => { },
+                        onClick: (e) => { handleSplitButtonEvent(e); },
+                        ref: setInputRef
+                    }) }, component.id));
+            default:
+                return renderField(component);
+        }
+    };
+    // Notify when all form elements and refs are rendered
+    useEffect(() => {
+        if (created && formState) {
+            setTimeout(() => {
+                const hasInputs = Object.keys(inputRefs.current).length > 0;
+                if (hasInputs) {
+                    created();
+                }
+            }, 0);
+        }
+    }, [created, formState]);
+    // Expose getComponent as a public method
+    React.useImperativeHandle(ref, () => ({
+        /**
+         * Get the instance of the form input by name/id
+         */
+        getComponent: (name) => {
+            return inputRefs.current[name] || null;
+        },
+    }), []);
+    return (_jsx("div", { ...restProps, className: `form-renderer-container ${className}`, children: _jsx(Form, { rules: validationRules, initialValues: initialValues, onFormStateChange: (state) => setFormState(state), onSubmit: (data) => {
+                const isValid = formState?.errors ? Object.keys(formState.errors).length === 0 : false;
+                const transformedData = {};
+                // Exclude non-data components (buttons, messages, and layout-only components)
+                const excludedTypes = new Set(['button', 'message', 'panel', 'table', 'tabs', 'card', 'splitbutton', 'statichtml']);
+                const allComps = collectAllComponents(processedSchema.components || []);
+                const excludedIds = new Set(allComps.filter(c => excludedTypes.has(c.type)).map(c => c.id));
+                Object.entries(data).forEach(([id, val]) => {
+                    // Skip excluded components so they don't appear as submitted values
+                    if (excludedIds.has(id))
+                        return;
+                    const label = idToLabel[id] || id;
+                    transformedData[label] = val;
+                });
+                if (onSubmit) {
+                    onSubmit({ data: transformedData, isValid });
+                }
+            }, validateOnChange: true, className: `form-renderer ${layoutClass}`, children: processedSchema.components.map(component => renderComponent(component)) }) }));
+});
+export default FormRenderer;