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

package/src/renderFormField.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Standalone Form Field Renderer
+ * Renders individual form components based on FormComponent schema
+ */
+import React from 'react';
+import { type FormComponent } from './types/FormSchema';
+export interface RenderFormFieldProps {
+    component: FormComponent;
+    value?: any;
+    onChange: (value: any) => void;
+    onBlur?: () => void;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    ref?: any;
+    hasError?: boolean;
+}
+/**
+ * Renders a single form field component
+ */
+export declare const renderFormField: ({ component, value, onChange, onBlur, ref, hasError, onClick }: RenderFormFieldProps) => React.ReactNode;

package/src/renderFormField.js

@@ -0,0 +1,202 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextBoxComponent, NumericTextBoxComponent, MaskedTextBoxComponent, UploaderComponent, TextAreaComponent } from '@syncfusion/ej2-react-inputs';
+import { CheckBoxComponent, RadioButtonComponent, SwitchComponent, ButtonComponent, } from '@syncfusion/ej2-react-buttons';
+import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
+import { CheckBoxSelection, DropDownListComponent, MultiSelectComponent, } from '@syncfusion/ej2-react-dropdowns';
+import { DatePickerComponent, DateTimePickerComponent, TimePickerComponent, DateRangePickerComponent, Inject, Islamic, } from '@syncfusion/ej2-react-calendars';
+import { SliderComponent } from '@syncfusion/ej2-react-inputs';
+import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
+import { RatingComponent } from '@syncfusion/ej2-react-inputs';
+import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
+import { MessageComponent } from '@syncfusion/ej2-react-notifications';
+import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
+import { DataGridComponent } from './DataGridComponent';
+import { RichTextEditorComponent, Toolbar, HtmlEditor, Inject as RTEInject, Link, QuickToolbar } from '@syncfusion/ej2-react-richtexteditor';
+import { mapButtonStyleToClass, mapPositionToJustifyContent, resolveButtonType } from './utils';
+import CheckboxGroup from './CheckboxGroup';
+/**
+ * Converts htmlAttributes from array format to object format
+ */
+const normalizeAttributes = (attributes) => {
+    if (!attributes)
+        return {};
+    if (Array.isArray(attributes)) {
+        return attributes.reduce((acc, item) => {
+            if (item.key && item.value !== undefined) {
+                acc[item.key] = item.value;
+            }
+            return acc;
+        }, {});
+    }
+    return attributes;
+};
+/**
+ * Renders a single form field component
+ */
+export const renderFormField = ({ component, value, onChange, onBlur, ref, hasError = false, onClick }) => {
+    const commonProps = {
+        floatLabelType: (component.floatLabelType || 'Never'),
+        placeholder: component.placeholder || '',
+        enabled: !component.disabled,
+    };
+    const createValidationHandlers = (getValue) => {
+        const validateOn = component.validateOn || 'Blur';
+        const handlers = {};
+        // If validateOn is 'Change' or undefined, add change and blur handlers
+        if (!validateOn || validateOn === 'Change') {
+            handlers.onChange = (args) => onChange(getValue(args));
+            handlers.onBlur = () => onBlur?.();
+        }
+        // If validateOn is 'Blur', add change and blur handlers
+        if (validateOn === 'Blur') {
+            handlers.change = (args) => onChange(getValue(args));
+            handlers.blur = () => onBlur?.();
+        }
+        return handlers;
+    };
+    const htmlAttrs = normalizeAttributes(component.htmlAttributes);
+    const errorClass = hasError ? 'e-error' : '';
+    const cssClass = `${component.cssClass || ''} ${errorClass}`.trim();
+    switch (component.type) {
+        case 'textbox':
+            return (_jsx(TextBoxComponent, { id: component.id, type: component.multiline ? 'hidden' : component.textboxType ? component.textboxType : 'text', name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), multiline: component.multiline, showClearButton: component.showClearButton, autocomplete: component.autocomplete === false ? 'off' : 'on', readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+        case 'textarea':
+            return (_jsx(TextAreaComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), cols: component.cols || 200, rows: component.textareaRows || 4, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, maxLength: component?.maxLength || 255, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+        case 'number':
+            return (_jsx(NumericTextBoxComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || 0), decimals: component.decimals || 2, currency: component.currency, format: component.format || 'n2', step: component.step || 1, min: component.minValue || undefined, max: component.maxValue || undefined, readonly: component.readOnly || false, showClearButton: component.showClearButton || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+        case 'checkbox':
+            const checkboxLabel = component.label && component.required
+                ? `${component.label} *`
+                : component.label;
+            return (_jsx(CheckBoxComponent, { id: component.id, name: component.id, label: checkboxLabel, labelPosition: component.checkboxLabelPosition, checked: component.defaultValue ?? (component.checked ?? false), indeterminate: component.indeterminate || false, disabled: component.disabled, cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
+        case 'checkboxgroup':
+            return (_jsx(CheckboxGroup, { component: component, value: value, onChange: (v) => onChange(v), optionRef: ref }, component.id));
+        case 'radio':
+            return (_jsx("div", { id: `${component.id}-group`, className: `e-radio-group ${errorClass}`, children: (component.options || ['Option 1']).map((option, idx) => {
+                    const optionValue = option;
+                    const optionText = option;
+                    return (_jsx("div", { style: { marginBottom: '8px' }, children: _jsx(RadioButtonComponent, { id: `${component.id}_${idx}_${optionValue}`, name: component.id, label: optionText, disabled: component.disabled, value: optionValue, htmlAttributes: htmlAttrs, labelPosition: component.fieldLabelPosition, checked: component.defaultValue === optionValue, cssClass: component.cssClass, change: (args) => {
+                                if (args.value === optionValue) {
+                                    onChange(optionValue);
+                                }
+                            }, ref: ref ? (el) => ref(el, idx) : undefined }, component.id) }, idx));
+                }) }));
+        case 'dropdown':
+            return (_jsx(DropDownListComponent, { id: component.id, name: component.id, ...commonProps, cssClass: cssClass, dataSource: component.options || ["Option 1"], value: value !== undefined ? value : (component.defaultValue ?? null), showClearButton: component.showClearButton || false, readonly: component.readOnly || false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+        case 'multiselect':
+            return (_jsx(MultiSelectComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue ?? null), placeholder: component.placeholder, dataSource: component.options || ["Option 1"], fields: { text: 'text', value: 'value' }, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, allowCustomValue: component.allowCustomValue || false, addTagOnBlur: component.addTagOnBlur || false, delimiterChar: component.delimiterChar || ',', showSelectAll: component.showSelectAll || false, mode: component.showSelectAll ? 'CheckBox' : undefined, selectAllText: component.selectAllText, unSelectAllText: component.unSelectAllText, showDropDownIcon: component.showDropDownIcon !== false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [CheckBoxSelection] }) }, component.id));
+        case 'datepicker':
+            return (_jsx(DatePickerComponent, { ...commonProps, id: component.id, name: component.id, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', format: component.format || 'MM/dd/yyyy', placeholder: component.placeholder || '', readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false ? true : false, showTodayButton: component.showTodayButton !== false ? true : false, calendarMode: component.calendarMode || 'Gregorian', dayHeaderFormat: component.dayHeaderFormat || 'Short', depth: component.depth || 'Month', start: component.start || 'Month', firstDayOfWeek: component.firstDayOfWeek || 0, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
+        case 'datetimepicker':
+            return (_jsx(DateTimePickerComponent, { ...commonProps, id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'MM/dd/yyyy hh:mm a', showClearButton: component.showClearButton !== false, showTodayButton: component.showTodayButton || false, depth: component.depth || 'Month', start: component.start || 'Month', step: component.step || 1, readonly: component.readOnly || false, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, minTime: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, maxTime: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
+        case 'timepicker':
+            return (_jsx(TimePickerComponent, { id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'hh:mm a', showClearButton: component.showClearButton !== false, step: component.step || 30, readonly: component.readOnly || false, min: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, max: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+        case 'daterange':
+            return (_jsx(DateRangePickerComponent, { id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), depth: component.depth || 'Month', start: component.start || 'Month', min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, format: component.format || 'MM/dd/yyyy', separator: component.separator || ' - ', showClearButton: component.showClearButton !== false, readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+        case 'switch':
+            return (_jsx(SwitchComponent, { id: component.id, value: component.defaultValue, name: component.id, checked: component.checked, disabled: component.disabled, onLabel: component.onLabel || '', offLabel: component.offLabel || '', cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
+        case 'button':
+            // If buttonsGroups is provided, render a button group in-place of a single button
+            const groupButtons = (component.buttonsGroups || component.buttons || []);
+            if (groupButtons && groupButtons.length > 0) {
+                const groupStyleObj = {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap: component.gap || '8px',
+                    justifyContent: mapPositionToJustifyContent(component.position),
+                    width: component.width || undefined,
+                };
+                return (_jsx("div", { id: component.id, role: "group", "aria-label": component.label || 'Button Group', className: component.cssClass, style: groupStyleObj, children: groupButtons.map((btn, idx) => {
+                        const btnId = `${component.id}_${idx}`;
+                        const btnCssClass = [
+                            mapButtonStyleToClass(btn.style)
+                        ].filter(Boolean).join(' ');
+                        return (_jsx(ButtonComponent, { id: String(btnId), name: String(btnId), type: resolveButtonType(btn.type), cssClass: btnCssClass, disabled: btn.disabled || false, content: btn.label || `Button ${idx + 1}`, iconCss: btn.iconCss, iconPosition: btn.iconPosition, onClick: (event) => {
+                                if (onClick) {
+                                    onClick(event);
+                                }
+                            }, ref: (el) => {
+                                if (ref && typeof ref === 'function') {
+                                    ref(el, idx);
+                                }
+                            } }, String(btnId)));
+                    }) }, `form-${component.type}-${component.id}`));
+            }
+            // Fallback: render a single ButtonComponent when no group is configured
+            const resolvedButtonType = resolveButtonType(component.buttonType);
+            const buttonCssClassList = [
+                mapButtonStyleToClass(component.style),
+                resolvedButtonType === 'submit' ? 'submit-btn form-submit-type' : '',
+                resolvedButtonType === 'reset' ? 'form-reset-type' : '',
+                component.cssClass || 'e-primary'
+            ].filter(Boolean).join(' ') || 'e-primary';
+            const buttonContainerStyle = {
+                display: 'flex',
+                justifyContent: mapPositionToJustifyContent(component.position),
+                width: component.width || '100%',
+            };
+            return (_jsx("div", { id: `${component.id}-container`, style: buttonContainerStyle, children: _jsx(ButtonComponent, { id: component.id, type: resolvedButtonType, cssClass: buttonCssClassList, disabled: component.disabled, iconCss: component.iconCss, iconPosition: component.iconPosition, onClick: (event) => {
+                        if (onClick) {
+                            onClick(event);
+                        }
+                    }, ref: ref, children: component.label }, component.id) }, `form-${component.type}-${component.id}`));
+        case 'splitbutton':
+            const splitButtonCssClassList = [
+                component.style === 'primary' ? 'e-primary' : '',
+                component.style === 'flat' ? '' : '',
+                component.style === 'information' ? 'e-info' : '',
+                component.style === 'error' ? 'e-danger' : '',
+                component.style === 'success' ? 'e-success' : '',
+                component.style === 'warning' ? 'e-warning' : '',
+                component.cssClass || ''
+            ].filter(Boolean).join(' ') || undefined;
+            const splitButtonContainerStyle = {
+                display: 'flex',
+                justifyContent: mapPositionToJustifyContent(component.position)
+            };
+            return (_jsx("div", { id: `${component.id}-container`, "aria-label": 'Splitbutton', style: splitButtonContainerStyle, children: _jsx(SplitButtonComponent, { id: component.id, content: component.label || 'Split Button', items: component.options?.map((option, index) => ({
+                        text: option,
+                        id: `${component.id}_option_${index}`
+                    })) || [{ text: 'Option 1', id: `${component.id}_option_0` }], cssClass: splitButtonCssClassList, disabled: component.disabled, iconCss: component.iconCss, iconPosition: component.iconPosition || 'Left', onClick: (event) => {
+                        if (onClick) {
+                            onClick({ ...event, buttonId: component.id, buttonLabel: component.label });
+                        }
+                    }, select: (event) => {
+                        if (onClick) {
+                            onClick({ ...event, selectedItem: event.item?.properties?.text, buttonId: component.id, buttonLabel: component.label });
+                        }
+                    }, ref: ref }, component.id) }, `form-${component.type}-${component.id}`));
+        case 'signature':
+            return (_jsx(SignatureComponent, { id: component.id, backgroundColor: component.backgroundColor || '', strokeColor: component.strokeColor || '', maxStrokeWidth: component.maxValue, minStrokeWidth: component.minValue, velocity: component.velocity, disabled: component.disabled, change: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'rating':
+            return (_jsx(RatingComponent, { id: component.id, name: component.id, value: value !== undefined ? value : (component.defaultValue || 0), disabled: component.disabled, cssClass: component.cssClass, allowReset: component.allowReset, itemsCount: component.itemsCount, min: component?.minValue, precision: component.precision, readOnly: component.readOnly, showTooltip: component.showRatingTooltip || false, showLabel: component.showRatingLabel, labelPosition: component.showRatingLabel ? component.ratingLabelPosition : undefined, valueChanged: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'colorpicker':
+            return (_jsx(ColorPickerComponent, { id: component.id, value: value !== undefined ? value : (component.defaultValue || ''), disabled: component.disabled, enableOpacity: component.enableOpacity, showButtons: component.showButtons, showRecentColors: component.showRecentColors, noColor: component.showNoColor, cssClass: cssClass, change: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'inputmask':
+            return (_jsx(MaskedTextBoxComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, mask: component.mask || '000-000-0000', promptChar: component.promptChar || '_', customCharacters: component.customCharacters, readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+        case 'rangeslider':
+            return (_jsx(SliderComponent, { id: component.id, value: value !== undefined ? value : (component.defaultValue ?? 0), min: component.minValue || 0, max: component.maxValue || 100, step: component.step || 1, disabled: component.disabled, cssClass: cssClass, enabled: !component.disabled, showButtons: component.showButtons, change: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'fileupload':
+            return (_jsx(UploaderComponent, { id: component.id, name: component.id, type: 'file', enabled: !component.disabled, allowedExtensions: component.allowExtensions, asyncSettings: { saveUrl: component.saveUrl, removeUrl: component.removeUrl }, buttons: component.buttons || {
+                    "browse": "Choose File",
+                    "clear": "Clear All",
+                    "upload": "Upload All"
+                }, maxFileSize: component?.maxValue, minFileSize: component?.minValue, multiple: component.allowMultiple, showFileList: component.showFileList, htmlAttributes: htmlAttrs, cssClass: cssClass, change: (args) => onChange(args.filesData), ref: ref }, component.id));
+        case 'imageeditor':
+            return (_jsx(ImageEditorComponent, { id: component.id, disabled: component.disabled, cssClass: component.cssClass, height: (component.height || '350px').toString(), width: (component.width || '100%').toString(), ref: ref }, component.id));
+        case 'message':
+            return (_jsx(MessageComponent, { id: component.id, severity: component.severity || component.messageType || 'info', variant: component.variant, content: component.content || 'Message', showCloseIcon: component.showCloseIcon || false, showIcon: component.showIcon || false, disabled: component.disabled, cssClass: component.cssClass, ref: ref }, component.id));
+        case 'datagrid':
+            const dg = component;
+            return (_jsx("div", { id: dg.id, className: dg.cssClass, children: _jsx(DataGridComponent, { id: dg.id, type: 'datagrid', label: dg.label || '', columns: dg.columns || [], dataSource: value !== undefined ? value : (dg.dataSource ?? dg.dataSource ?? []), height: dg.height || '200px', width: dg.width || '100%', pageSize: dg.pageSize || 6, allowPaging: dg.allowPaging !== false, allowAdding: dg.allowAdding !== false, allowEditing: dg.allowEditing !== false, allowDeleting: dg.allowDeleting !== false, onDataChange: (data) => onChange(data), ref: ref }) }, dg.id));
+        case 'richtexteditor':
+            const toolbarSettings = {
+                items: ['Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|', 'CreateLink', 'Blockquote', '|', 'BulletFormatList', 'NumberFormatList', '|', 'Formats', 'Alignments', '|', 'Outdent', 'Indent', '|',
+                    'FontColor', 'BackgroundColor', 'FontName', 'FontSize', '|', 'LowerCase', 'UpperCase', '|', 'SourceCode']
+            };
+            return (_jsx(RichTextEditorComponent, { id: component.id, name: component.id, toolbarSettings: toolbarSettings, value: value !== undefined ? value : (component.defaultValue || ''), placeholder: component.placeholder || '', enabled: !component.disabled, readonly: component.readOnly || false, maxLength: component.maxLength || 1000, cssClass: cssClass || undefined, height: component.height || '300px', width: component.width || '100%', htmlAttributes: htmlAttrs, ref: ref, children: _jsx(RTEInject, { services: [Toolbar, Link, HtmlEditor, QuickToolbar] }) }, `${component.id}`));
+        default:
+            return (_jsxs("div", { className: "unsupported-component", children: ["Unsupported component type: ", component.type] }));
+    }
+};

package/src/types/FormSchema.d.ts

@@ -0,0 +1,177 @@
+/**
+ * Form Schema Type Definitions
+ * Copied from builder for standalone renderer
+ */
+import type { visualMode } from "@syncfusion/ej2-react-dropdowns";
+export interface ButtonClickEventArgs {
+    buttonId: string;
+    buttonLabel: string;
+    event: React.MouseEvent<HTMLButtonElement>;
+}
+export interface FormSchema {
+    version: string;
+    theme: string;
+    components: FormComponent[];
+}
+export interface FormComponent {
+    id: string;
+    type: 'textbox' | 'textarea' | 'number' | 'email' | 'url' | 'phone' | 'password' | 'checkbox' | 'checkboxgroup' | 'radio' | 'dropdown' | 'multiselect' | 'button' | 'datepicker' | 'datetimepicker' | 'timepicker' | 'daterange' | 'switch' | 'signature' | 'rating' | 'imageeditor' | 'fileupload' | 'rangeslider' | 'colorpicker' | 'inputmask' | 'message' | 'panel' | 'table' | 'tabs' | 'datagrid' | 'card' | 'splitbutton' | 'richtexteditor' | 'statichtml';
+    textboxType?: string;
+    label: string;
+    name: string;
+    placeholder?: string;
+    defaultValue?: any;
+    disabled?: boolean;
+    visible?: boolean;
+    tooltip?: string;
+    hideBorders?: boolean;
+    hideLabel?: boolean;
+    cssClass?: string;
+    multiline?: boolean;
+    showClearButton?: boolean;
+    showCloseIcon?: boolean;
+    showIcon?: boolean;
+    variant?: string;
+    severity?: string;
+    content?: string;
+    showTodayButton?: boolean;
+    htmlAttributes?: Record<string, any>;
+    labelPosition?: 'Top' | 'Bottom' | 'Left' | 'Right';
+    position?: 'center' | 'left' | 'right';
+    fieldLabelPosition?: 'After' | 'Before';
+    labelWidth?: string;
+    floatLabelType?: 'Never' | 'Always' | 'Auto';
+    readOnly?: boolean;
+    autocomplete?: boolean;
+    cols?: number;
+    textareaRows?: number;
+    checked?: boolean;
+    indeterminate?: boolean;
+    offLabel?: string;
+    onLabel?: string;
+    buttonType?: 'button' | 'submit' | 'reset';
+    iconCss?: string;
+    iconPosition?: 'Left' | 'Right';
+    style?: string;
+    buttonsGroups?: ButtonDefinition[];
+    gap?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    decimals?: number;
+    currency?: string;
+    format?: string;
+    allowReset?: boolean;
+    itemsCount?: number;
+    precision?: number | string;
+    showRatingTooltip?: boolean;
+    showRatingLabel?: boolean;
+    ratingLabelPosition?: 'Top' | 'Bottom' | 'Left' | 'Right';
+    height?: number | null;
+    width?: number | null;
+    backgroundColor?: string;
+    strokeColor?: string;
+    maximumStrokeWidth?: number;
+    minimumStrokeWidth?: number;
+    velocity?: number;
+    enableOpacity?: boolean;
+    showNoColor?: boolean;
+    showButtons?: boolean;
+    showRecentColors?: boolean;
+    orientation?: 'Horizontal' | 'Vertical';
+    allowExtensions?: string;
+    saveUrl?: string;
+    removeUrl?: string;
+    buttons?: {};
+    allowMultiple?: boolean;
+    showFileList?: boolean;
+    calendarMode?: string;
+    dayHeaderFormat?: string;
+    depth?: string;
+    firstDayOfWeek?: number;
+    start?: string;
+    allowEdit?: boolean;
+    enabled?: boolean;
+    timeFormat?: string;
+    step?: number;
+    startDate?: string;
+    endDate?: string;
+    separator?: string;
+    mask?: string;
+    customCharacters?: Record<string, string>;
+    promptChar?: string;
+    allowCustomValue?: boolean;
+    addTagOnBlur?: boolean;
+    delimiterChar?: string;
+    visualMode?: visualMode;
+    showSelectAll?: boolean;
+    selectAllText?: string;
+    unSelectAllText?: string;
+    showDropDownIcon?: boolean;
+    validateOn?: 'Change' | 'Blur';
+    pageSize?: number;
+    allowPaging?: boolean;
+    allowAdding?: boolean;
+    allowEditing?: boolean;
+    allowDeleting?: boolean;
+    required?: boolean;
+    minLength?: number | null;
+    maxLength?: number | null;
+    min?: number | null;
+    minimum?: number | null;
+    max?: number | null;
+    minDate?: string;
+    maxDate?: string;
+    minValue?: number | null;
+    maxValue?: number | null;
+    minTime?: string;
+    maxTime?: string;
+    regex?: string;
+    validationMessage?: string;
+    options?: string[];
+    checkboxLabelPosition?: 'Before' | 'After';
+    layoutDirection?: 'row' | 'column';
+    enableHtmlSanitizer?: boolean;
+    fields?: Record<string, any>;
+    enableVirtualization?: boolean;
+    popupHeight?: string;
+    popupWidth?: string;
+    children?: FormComponent[];
+    rows?: number;
+    columns?: number;
+    messageType?: 'info' | 'success' | 'warning' | 'error';
+    messageContent?: string;
+    legend?: string;
+    cardTitle?: string;
+    cardSubtitle?: string;
+    columnWidths?: {
+        columns: number;
+        widths: number[];
+    };
+    tabItems?: Array<{
+        header: string;
+        content?: FormComponent[];
+    }>;
+    tableCells?: FormComponent[][][];
+    parentPath?: string;
+    properties?: Record<string, any>;
+    _configured?: boolean;
+}
+export interface ValidationRules {
+    [fieldName: string]: {
+        required?: [boolean, string];
+        minLength?: [number, string];
+        maxLength?: [number, string];
+        min?: [number, string];
+        max?: [number, string];
+        regex?: [string, string];
+        date?: [string, string];
+        [key: string]: any;
+    };
+}
+export interface ButtonDefinition {
+    label: string;
+    type?: 'submit' | 'reset' | 'button';
+    style?: 'primary' | 'flat' | 'information' | 'error' | 'success' | 'warning';
+    iconCss?: string;
+    iconPosition?: 'Left' | 'Right';
+    disabled?: boolean;
+}

package/src/types/FormSchema.js

@@ -0,0 +1 @@
+export {};

package/src/utils.js

@@ -0,0 +1,60 @@
+/**
+ * Maps button style to Syncfusion CSS classes
+ * @param style - Button style ('primary' | 'flat' | 'information' | 'error' | 'success' | 'warning')
+ * @returns Space-separated CSS class string
+ */
+export const mapButtonStyleToClass = (style) => {
+    const styleMap = {
+        'primary': 'e-primary',
+        'flat': 'e-flat',
+        'information': 'e-info',
+        'error': 'e-danger',
+        'success': 'e-success',
+        'warning': 'e-warning'
+    };
+    return styleMap[style || 'primary'] || 'e-primary';
+};
+/**
+ * Resolves button type to valid HTML button type
+ * @param type - Button type ('submit' | 'reset' | 'button')
+ * @returns Resolved button type
+ */
+export const resolveButtonType = (type) => {
+    return (type === 'submit' || type === 'reset') ? type : 'button';
+};
+/**
+ * Maps button position to CSS justifyContent value
+ * @param position - Button position ('Left' | 'Right' | 'Center')
+ * @returns CSS justifyContent value
+ */
+export const mapPositionToJustifyContent = (position) => {
+    const positionMap = {
+        'Left': 'flex-start',
+        'Right': 'flex-end',
+        'Center': 'center'
+    };
+    return positionMap[position || 'Left'] || 'flex-start';
+};
+export function splitWidths(input) {
+    const result = input.map(v => (v === null ? NaN : Number(v)));
+    const sumKnown = result.reduce((s, v) => s + (isNaN(v) ? 0 : v), 0);
+    // If knowns already >= 100, unknowns become 0
+    const remainingInt = Math.max(0, Math.round(100 - sumKnown));
+    const unknownIndexes = result.map((v, i) => (isNaN(v) ? i : -1)).filter(i => i >= 0);
+    const k = unknownIndexes.length;
+    if (k === 0) {
+        // nothing to split; just clamp/round knowns so they sum to 100 if you prefer, but return as-is
+        return result.map(v => Math.round(v));
+    }
+    // Distribute integer percentage points to avoid fractional rounding problems
+    const base = Math.floor(remainingInt / k);
+    let remainder = remainingInt - base * k;
+    // Fill unknowns with base + 1 for first `remainder` items
+    unknownIndexes.forEach((idx) => {
+        const add = remainder > 0 ? base + 1 : base;
+        result[idx] = add;
+        remainder = Math.max(0, remainder - 1);
+    });
+    // Convert any NaN (shouldn't remain) to 0 and round knowns
+    return result.map(v => (isNaN(v) ? 0 : Math.round(v)));
+}

package/styles/bootstrap-dark.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-buttons/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-inputs/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-dropdowns/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-calendars/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-react-calendars/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-navigations/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-notifications/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-popups/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-lists/styles/bootstrap-dark.css';
+@import '@syncfusion/ej2-splitbuttons/styles/bootstrap-dark.css';
+@import "@syncfusion/ej2-react-popups/styles/bootstrap-dark.css";
+@import "@syncfusion/ej2-react-grids/styles/bootstrap-dark.css";
+@import "@syncfusion/ej2-splitbuttons/styles/bootstrap-dark.css";
+@import "@syncfusion/ej2-image-editor/styles/bootstrap-dark.css";
+@import "@syncfusion/ej2-layouts/styles/bootstrap-dark.css";
+@import '@syncfusion/ej2-richtexteditor/styles/bootstrap-dark.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #6e6e6e;
+  --sf-font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, '-apple-system', 'BlinkMacSystemFont';
+  --sf-text-color: #fff;
+  --sf-tooltip-text-color: #fff;
+  --sf-layout-border-color: #1a1a1a;
+}

package/styles/bootstrap.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/bootstrap.css';
+@import '@syncfusion/ej2-buttons/styles/bootstrap.css';
+@import '@syncfusion/ej2-inputs/styles/bootstrap.css';
+@import '@syncfusion/ej2-dropdowns/styles/bootstrap.css';
+@import '@syncfusion/ej2-calendars/styles/bootstrap.css';
+@import '@syncfusion/ej2-react-calendars/styles/bootstrap.css';
+@import '@syncfusion/ej2-navigations/styles/bootstrap.css';
+@import '@syncfusion/ej2-notifications/styles/bootstrap.css';
+@import '@syncfusion/ej2-popups/styles/bootstrap.css';
+@import '@syncfusion/ej2-lists/styles/bootstrap.css';
+@import '@syncfusion/ej2-splitbuttons/styles/bootstrap.css';
+@import "@syncfusion/ej2-react-popups/styles/bootstrap.css";
+@import "@syncfusion/ej2-react-grids/styles/bootstrap.css";
+@import "@syncfusion/ej2-splitbuttons/styles/bootstrap.css";
+@import "@syncfusion/ej2-image-editor/styles/bootstrap.css";
+@import "@syncfusion/ej2-layouts/styles/bootstrap.css";
+@import '@syncfusion/ej2-richtexteditor/styles/bootstrap.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #fff;
+  --sf-font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, '-apple-system', 'BlinkMacSystemFont';
+  --sf-text-color: #333;
+  --sf-tooltip-text-color: #333;
+  --sf-layout-border-color: #000;
+}

package/styles/bootstrap4.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/bootstrap4.css';
+@import '@syncfusion/ej2-buttons/styles/bootstrap4.css';
+@import '@syncfusion/ej2-inputs/styles/bootstrap4.css';
+@import '@syncfusion/ej2-dropdowns/styles/bootstrap4.css';
+@import '@syncfusion/ej2-calendars/styles/bootstrap4.css';
+@import '@syncfusion/ej2-react-calendars/styles/bootstrap4.css';
+@import '@syncfusion/ej2-navigations/styles/bootstrap4.css';
+@import '@syncfusion/ej2-notifications/styles/bootstrap4.css';
+@import '@syncfusion/ej2-popups/styles/bootstrap4.css';
+@import '@syncfusion/ej2-lists/styles/bootstrap4.css';
+@import '@syncfusion/ej2-splitbuttons/styles/bootstrap4.css';
+@import "@syncfusion/ej2-react-popups/styles/bootstrap4.css";
+@import "@syncfusion/ej2-react-grids/styles/bootstrap4.css";
+@import "@syncfusion/ej2-splitbuttons/styles/bootstrap4.css";
+@import "@syncfusion/ej2-image-editor/styles/bootstrap4.css";
+@import "@syncfusion/ej2-layouts/styles/bootstrap4.css";
+@import '@syncfusion/ej2-richtexteditor/styles/bootstrap4.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #fff;
+  --sf-font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, '-apple-system', 'BlinkMacSystemFont';
+  --sf-text-color: #000;
+  --sf-tooltip-text-color: #000;
+  --sf-layout-border-color: #343a40;
+}

package/styles/bootstrap5-dark.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-buttons/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-inputs/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-dropdowns/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-calendars/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-react-calendars/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-navigations/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-notifications/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-popups/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-lists/styles/bootstrap5-dark.css';
+@import '@syncfusion/ej2-splitbuttons/styles/bootstrap5-dark.css';
+@import "@syncfusion/ej2-react-popups/styles/bootstrap5-dark.css";
+@import "@syncfusion/ej2-react-grids/styles/bootstrap5-dark.css";
+@import "@syncfusion/ej2-splitbuttons/styles/bootstrap5-dark.css";
+@import "@syncfusion/ej2-image-editor/styles/bootstrap5-dark.css";
+@import "@syncfusion/ej2-layouts/styles/bootstrap5-dark.css";
+@import '@syncfusion/ej2-richtexteditor/styles/bootstrap5-dark.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #212529;
+  --sf-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'apple color emoji', 'Segoe UI emoji', 'Segoe UI Symbol', 'Noto color emoji';
+  --sf-text-color: #fff;
+  --sf-tooltip-text-color: #adb5bd;
+  --sf-layout-border-color: #343a40;
+}

package/styles/bootstrap5.3-dark.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-buttons/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-inputs/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-dropdowns/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-calendars/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-react-calendars/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-navigations/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-notifications/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-popups/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-lists/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-splitbuttons/styles/bootstrap5.3.css';
+@import "@syncfusion/ej2-react-popups/styles/bootstrap5.3.css";
+@import "@syncfusion/ej2-react-grids/styles/bootstrap5.3.css";
+@import "@syncfusion/ej2-splitbuttons/styles/bootstrap5.3.css";
+@import "@syncfusion/ej2-image-editor/styles/bootstrap5.3.css";
+@import "@syncfusion/ej2-layouts/styles/bootstrap5.3.css";
+@import '@syncfusion/ej2-richtexteditor/styles/bootstrap5.3.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #212529;
+  --sf-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'apple color emoji', 'Segoe UI emoji', 'Segoe UI Symbol', 'Noto color emoji';
+  --sf-text-color: #dee2e6;
+  --sf-tooltip-text-color: #adb5bd;
+  --sf-layout-border-color: #495057;
+}

package/styles/bootstrap5.3.css

@@ -0,0 +1,26 @@
+@import '@syncfusion/ej2-base/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-buttons/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-inputs/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-dropdowns/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-calendars/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-react-calendars/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-navigations/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-notifications/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-popups/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-lists/styles/bootstrap5.3.css';
+@import '@syncfusion/ej2-splitbuttons/styles/bootstrap5.3.css';
+@import "@syncfusion/ej2-react-popups/styles/bootstrap5.3.css";
+@import "@syncfusion/ej2-react-grids/styles/bootstrap5.3.css";
+@import "@syncfusion/ej2-splitbuttons/styles/bootstrap5.3.css";
+@import "@syncfusion/ej2-image-editor/styles/bootstrap5.3.css";
+@import "@syncfusion/ej2-layouts/styles/bootstrap5.3.css";
+@import '@syncfusion/ej2-richtexteditor/styles/bootstrap5.3.css';
+@import 'form-renderer.base.css';
+
+:root {
+  --sf-bg-color: #fff;
+  --sf-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'apple color emoji', 'Segoe UI emoji', 'Segoe UI Symbol', 'Noto color emoji';
+  --sf-text-color: #212529;
+  --sf-tooltip-text-color: #6c757d;
+  --sf-layout-border-color: #dee2e6;
+}