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

package/src/components/layout/RightPane.js

@@ -0,0 +1,370 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
+import { PropertyGroupRenderer } from '../../utils/PropertyRenderer';
+import { useLocalization } from '../../context/LocalizationContext';
+import { FormSettingsPanel } from '../../utils/FormSettingsPanel';
+import { useFormSchema } from '../../context/FormSchemaContext';
+import { ConditionsEditor } from '../../utils/ConditionsEditor';
+import { collectAvailableFieldNames, extractAllDescendantIds } from '../../../Common/utils';
+/**
+ * Extract all form field names from components recursively
+ *
+ * Traverses the form schema and extracts all data field names (excluding layout containers).
+ * Used to populate the field list for conditional rule authoring.
+ *
+ * @spec CONDITIONAL-VALIDATION.md - PropertyDialog integration
+ * @requirement Task 7.3-7.5: Extract all form field names recursively
+ *
+ * @param components - Array of FormComponent from schema
+ * @returns Array of FormComponent objects representing data fields only
+ */
+function extractAllFormFieldNames(components) {
+    const fields = [];
+    // Layout component types to exclude (non-data fields)
+    const layoutTypes = ['panel', 'table', 'tabs', 'button', 'message'];
+    function traverse(comps) {
+        for (const comp of comps) {
+            // Skip layout containers and non-data components
+            if (!layoutTypes.includes(comp.type)) {
+                fields.push(comp);
+            }
+            // Recursively traverse nested structures
+            if (comp.children && Array.isArray(comp.children)) {
+                traverse(comp.children);
+            }
+            // Handle table cells (3D array: [rows][columns][components])
+            if (comp.tableCells && Array.isArray(comp.tableCells)) {
+                comp.tableCells.forEach((row) => {
+                    if (Array.isArray(row)) {
+                        row.forEach((cell) => {
+                            if (Array.isArray(cell)) {
+                                traverse(cell);
+                            }
+                        });
+                    }
+                });
+            }
+            // Handle tab items
+            if (comp.tabItems && Array.isArray(comp.tabItems)) {
+                comp.tabItems.forEach((tabItem) => {
+                    if (tabItem.content && Array.isArray(tabItem.content)) {
+                        traverse(tabItem.content);
+                    }
+                });
+            }
+        }
+    }
+    traverse(components);
+    return fields;
+}
+const shouldShowPropertyInMode = (property, currentMode) => {
+    // If property requires developer mode and we're in Simple mode, hide it
+    if (property.mode === 'developer' && currentMode === 'Simple') {
+        return false;
+    }
+    return true;
+};
+/**
+ * RightPane Component
+ */
+export const RightPane = ({ mode, componentType, configData, formSettingsConfig, existingValues = {}, formSettings, onSave, onPropertyChanged, onClose, builderMode }) => {
+    // Store ALL values in refs - ZERO state in this component
+    const propertyValuesRef = useRef({});
+    const initializedRef = useRef(false);
+    const savedButtonsGroupsRef = useRef(null);
+    const allowMultipleValueRef = useRef(undefined);
+    const columnsValueRef = useRef(null);
+    const { l10n } = useLocalization();
+    // Get form schema for extracting all field names (for Conditions tab)
+    const { formSchema } = useFormSchema();
+    // State to force re-render when needed (minimal)
+    const [, forceUpdate] = useState({});
+    // Get the component definition from the config
+    const componentDefinition = configData[componentType];
+    // Helper function to find current component in schema
+    const findCurrentComponent = (comps) => {
+        for (const comp of comps) {
+            if (comp.id === existingValues?.id)
+                return comp;
+            if (comp.children) {
+                const found = findCurrentComponent(comp.children);
+                if (found)
+                    return found;
+            }
+            if (comp.tableCells) {
+                for (const row of comp.tableCells) {
+                    for (const cell of row) {
+                        const found = findCurrentComponent(cell);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+            if (comp.tabItems) {
+                for (const tab of comp.tabItems) {
+                    if (tab.content) {
+                        const found = findCurrentComponent(tab.content);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+        }
+        return null;
+    };
+    // Get current component and its child IDs for conditions editor
+    const currentComponent = useMemo(() => findCurrentComponent(formSchema.components), [formSchema.components, existingValues?.id]);
+    const excludeChildIds = useMemo(() => currentComponent ? extractAllDescendantIds(currentComponent) : [], [currentComponent]);
+    // Initialize property values with defaults - only when sidebar opens
+    useEffect(() => {
+        if (componentDefinition) {
+            const values = {};
+            componentDefinition.groups.forEach((group) => {
+                group.properties.forEach((property) => {
+                    let value = property.default;
+                    // Handle Validation group properties
+                    if (group.name === 'Validation') {
+                        if (existingValues?.[property.key] !== undefined) {
+                            value = existingValues[property.key];
+                        }
+                        else {
+                            value = property.default;
+                        }
+                    }
+                    // Handle Layout group properties
+                    else if (group.name === 'Layout') {
+                        if (existingValues.layout?.[property.key] !== undefined) {
+                            value = existingValues.layout[property.key];
+                        }
+                        else if (existingValues[property.key] !== undefined) {
+                            value = existingValues[property.key];
+                        }
+                        else {
+                            value = property.default;
+                        }
+                    }
+                    // Handle all other groups
+                    else {
+                        if (existingValues[property.key] !== undefined) {
+                            value = existingValues[property.key];
+                        }
+                        else if (property.key === 'value' && existingValues.defaultValue !== undefined) {
+                            value = existingValues.defaultValue;
+                        }
+                        else if (property.key === 'rows' && existingValues.textareaRows !== undefined) {
+                            value = existingValues.textareaRows;
+                        }
+                        else {
+                            value = property.default;
+                        }
+                    }
+                    values[property.key] = value;
+                });
+            });
+            // Store in refs only (NO state)
+            propertyValuesRef.current = values;
+            initializedRef.current = true;
+            // Initialize allowMultiple state for button component
+            if (componentType === 'button') {
+                const initialAllowMultiple = values.allowMultiple ?? false;
+                allowMultipleValueRef.current = initialAllowMultiple;
+                savedButtonsGroupsRef.current = values.buttonsGroups || [];
+            }
+        }
+    }, [componentType, componentDefinition, existingValues]);
+    // Determine which properties should be visible based on allowMultiple flag
+    const shouldShowProperty = (propKey, allowMultiple) => {
+        if (allowMultiple) {
+            const visibleKeys = ['allowMultiple', 'name', 'buttonsGroups', 'gap', 'cssClass', 'width', 'position', 'size', 'conditions'];
+            return visibleKeys.includes(propKey);
+        }
+        else {
+            const visibleKeys = ['allowMultiple', 'name', 'buttonType', 'cssClass', 'disabled', 'iconCss', 'iconPosition', 'label', 'position', 'style', 'size', 'conditions'];
+            return visibleKeys.includes(propKey);
+        }
+    };
+    // Filter groups and properties based on visibility rules
+    const getFilteredGroups = (groups, allowMultiple) => {
+        return groups.map(group => ({
+            ...group,
+            properties: group.properties.filter(prop => shouldShowProperty(prop.key, allowMultiple))
+        })).filter(group => group.properties.length > 0);
+    };
+    const applyModeFiltering = (groups) => {
+        return groups.map(group => ({
+            ...group,
+            properties: group.properties.filter(prop => shouldShowPropertyInMode(prop, builderMode))
+        })).filter(group => group.properties.length > 0);
+    };
+    /**
+     * Filter lookup properties based on displayFormat selection
+     * When displayFormat is Radio or CheckboxGroup, remove specific properties
+     */
+    const getFilteredLookupGroups = (groups, displayFormat) => {
+        const isRadioOrCheckbox = ['Radio', 'Checkbox', 'CheckboxGroup'].includes(displayFormat);
+        if (!isRadioOrCheckbox) {
+            return groups; // No filtering needed for Dropdown and MultiSelect
+        }
+        // Properties to remove for Radio/CheckboxGroup
+        const removeFromDisplay = ['placeholder', 'showClearButton', 'readOnly', 'enableVirtualization', 'floatLabelType', 'popupHeight', 'popupWidth'];
+        const removeFromValidation = ['validateOn'];
+        return groups.map(group => {
+            let filteredProps = group.properties;
+            if (group.name === 'Display') {
+                filteredProps = filteredProps.filter(prop => !removeFromDisplay.includes(prop.key));
+            }
+            else if (group.name === 'Validation') {
+                filteredProps = filteredProps.filter(prop => !removeFromValidation.includes(prop.key));
+            }
+            else if (group.name === 'Conditions') {
+                // For Conditions, keep only conditionalReadonly if it exists
+                filteredProps = filteredProps.map(prop => {
+                    if (prop.key === 'conditions') {
+                        return {
+                            ...prop,
+                            supportedConditions: [
+                                "visibleWhen",
+                                "hideWhen",
+                                "requiredWhen",
+                                "setValueWhen",
+                                "disabledWhen"
+                            ]
+                        };
+                    }
+                    return prop;
+                });
+            }
+            return {
+                ...group,
+                properties: filteredProps
+            };
+        }).filter(group => group.properties.length > 0);
+    };
+    // Real-time property change - saves immediately on change
+    const handlePropertyChange = (key, value) => {
+        // Update ref immediately
+        propertyValuesRef.current = {
+            ...propertyValuesRef.current,
+            [key]: value,
+        };
+        // Handle allowMultiple toggle for button component
+        if (key === 'allowMultiple' && componentType === 'button') {
+            const prevAllowMultiple = allowMultipleValueRef.current;
+            allowMultipleValueRef.current = value;
+            if (value === false) {
+                savedButtonsGroupsRef.current = propertyValuesRef.current.buttonsGroups;
+                propertyValuesRef.current.buttonsGroups = [];
+            }
+            else {
+                propertyValuesRef.current.buttonsGroups = savedButtonsGroupsRef.current || [];
+            }
+            // Only re-render if visibility actually changed
+            if (prevAllowMultiple !== value) {
+                forceUpdate({});
+            }
+        }
+        // Track buttonsGroups changes when allowMultiple is true
+        if (key === 'buttonsGroups' && componentType === 'button' && allowMultipleValueRef.current === true) {
+            savedButtonsGroupsRef.current = value;
+        }
+        // Handle columns change for table component
+        if (key === 'columns' && componentType === 'table') {
+            const prevColumns = columnsValueRef.current;
+            columnsValueRef.current = value;
+            propertyValuesRef.current.columns = value;
+            // Only re-render if columns actually changed
+            if (prevColumns !== value) {
+                forceUpdate({});
+            }
+        }
+        const propertyDef = componentDefinition?.groups
+            .flatMap(g => g.properties)
+            .find(p => p.key === key);
+        const fieldLabel = propertyDef?.label || key;
+        const label = propertyValuesRef.current.label || '';
+        // FIRE the property changed event
+        if (onPropertyChanged) {
+            onPropertyChanged({
+                field: label,
+                property: fieldLabel,
+                value,
+                name: existingValues?.name
+            });
+        }
+        // AUTO-SAVE: Save to parent immediately on every change
+        // This triggers real-time updates to the form schema
+        const valuesToSave = { ...propertyValuesRef.current };
+        onSave(valuesToSave);
+    };
+    /**
+     * Handle conditions change from ConditionsEditor
+     *
+     * @spec CONDITIONAL-VALIDATION.md - PropertyDialog integration
+     * @requirement Task 7.10-7.11: Store condition changes and call preview callback
+     */
+    const handleConditionsChange = (conditions) => {
+        // Store conditions in the ref first
+        propertyValuesRef.current = {
+            ...propertyValuesRef.current,
+            conditions,
+        };
+        onSave(propertyValuesRef.current);
+    };
+    const handleClose = () => {
+        propertyValuesRef.current = {};
+        initializedRef.current = false;
+        savedButtonsGroupsRef.current = null;
+        allowMultipleValueRef.current = false;
+        columnsValueRef.current = null;
+        onClose();
+    };
+    // If component definition doesn't exist, show error
+    if (!componentDefinition && mode === 'component') {
+        return (_jsxs("div", { className: "right-sidebar-content", children: [_jsxs("div", { className: "sidebar-header", children: [_jsx("h3", { children: "Error" }), _jsx("button", { "aria-label": "Close panel", className: "close-btn", onClick: handleClose, title: "Close (Esc)", children: "\u2715" })] }), _jsx("div", { className: "sidebar-body", children: _jsxs("p", { style: { color: 'var(--sf-error-color, red)', padding: '1rem' }, children: ["Component definition not found for: ", componentType] }) })] }));
+    }
+    if (mode === 'formSettings') {
+        return (_jsx(FormSettingsPanel, { settings: formSettings, formSettingsConfig: formSettingsConfig, onSave: onSave }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sidebar-header", children: [_jsx("h3", { children: l10n.getConstant('fieldSettings') }), _jsx("button", { "aria-label": "Close panel", className: "close-btn", onClick: handleClose, title: "Close (Esc)", children: "\u2715" })] }), _jsx("div", { className: `rightpane-property-content single-view`, role: "region", "aria-labelledby": "field-settings-heading", children: _jsx("div", { className: "properties-section", "aria-label": l10n.getConstant('fieldSettings'), children: _jsx("div", { className: "property-tabs-wrapper", children: _jsx(TabComponent, { className: "property-tabs", heightAdjustMode: "Auto", "aria-label": l10n.getConstant('fieldSettings'), animation: { previous: { effect: 'None' }, next: { effect: 'None' } }, children: _jsx(TabItemsDirective, { children: useMemo(() => {
+                                    let groupsToRender = componentDefinition.groups;
+                                    // Filter for button component based on allowMultiple
+                                    if (componentType === 'button') {
+                                        groupsToRender = getFilteredGroups(componentDefinition.groups, (allowMultipleValueRef.current || existingValues?.allowMultiple));
+                                    }
+                                    // Filter for lookup component based on displayFormat
+                                    else if (componentType === 'lookup') {
+                                        const displayFormat = propertyValuesRef.current?.lookUpConfig?.displayFormat || 'Dropdown';
+                                        groupsToRender = getFilteredLookupGroups(componentDefinition.groups, displayFormat);
+                                    }
+                                    groupsToRender = applyModeFiltering(groupsToRender);
+                                    return groupsToRender.map((group, index) => (_jsx(TabItemDirective, { header: { text: l10n.getConstant(group.name.toLowerCase()) }, content: () => {
+                                            // Special handling for Conditions group
+                                            if (group.name === 'Conditions') {
+                                                // Extract all form fields dynamically
+                                                const allFormFields = extractAllFormFieldNames(formSchema.components);
+                                                const conditionsProperty = group.properties.find(p => p.key === 'conditions');
+                                                const supportedConditions = conditionsProperty?.supportedConditions ||
+                                                    ['visibleWhen', 'readOnlyWhen', 'disabledWhen'];
+                                                return (_jsxs("div", { children: [_jsx(ConditionsEditor, { componentFields: allFormFields, excludeFieldId: existingValues?.id, componentForEdit: currentComponent || undefined, excludeChildIds: excludeChildIds, existingConditions: existingValues?.conditions, onChange: handleConditionsChange, supportedConditions: supportedConditions, builderMode: builderMode }, currentComponent?.options?.length), _jsx("input", { style: { opacity: 0, pointerEvents: 'none', width: 0, height: 0 }, "aria-hidden": "true", tabIndex: 0, onFocus: (e) => {
+                                                                const input = e.currentTarget;
+                                                                // Only forward focus the first time, then remove from tab order
+                                                                if (input.dataset.forwarded === 'true') {
+                                                                    return;
+                                                                }
+                                                                input.dataset.forwarded = 'true';
+                                                                input.tabIndex = -1;
+                                                                const btn = input.parentElement?.querySelector('.conditions-editor-wrapper button, .conditions-editor-wrapper [role="button"]');
+                                                                if (btn) {
+                                                                    btn.focus();
+                                                                }
+                                                            }, type: "text" })] }));
+                                            }
+                                            // Default: render PropertyGroupRenderer
+                                            return (_jsx(PropertyGroupRenderer, { groupName: group.name, properties: group.properties, existingValues: existingValues, initialValues: { ...propertyValuesRef.current,
+                                                    availableFields: collectAvailableFieldNames(formSchema.components)
+                                                }, onChange: handlePropertyChange, mode: builderMode }));
+                                        } }, `tab-${componentType}-${index}`)));
+                                }, [componentType, allowMultipleValueRef.current, propertyValuesRef.current?.lookUpConfig?.displayFormat, componentDefinition.groups]) }) }, `tabs-${componentType}-${columnsValueRef.current}-${propertyValuesRef.current}`) }) }) })] }));
+};
+export default React.memo(RightPane);

package/src/components/theme/ThemeSwitcher.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ThemeSwitcher - Dropdown component for selecting Syncfusion theme variants
+ */
+import React from 'react';
+import type { ThemeVariant } from './theme-constant';
+interface ThemeSwitcherProps {
+    currentTheme: ThemeVariant;
+    setTheme: (variant: ThemeVariant) => void;
+}
+/**
+ * ThemeSwitcher component renders a DropDownButton for theme selection
+ */
+export declare function ThemeSwitcher({ currentTheme, setTheme }: ThemeSwitcherProps): React.JSX.Element;
+export {};

package/src/components/theme/ThemeSwitcher.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
+import { AVAILABLE_THEMES } from './theme-constant';
+/**
+ * ThemeSwitcher component renders a DropDownButton for theme selection
+ */
+export function ThemeSwitcher({ currentTheme, setTheme }) {
+    // Convert theme options to DropDownButton items
+    const items = AVAILABLE_THEMES.map(theme => ({
+        id: theme.id,
+        text: theme.text,
+        iconCss: currentTheme === theme.id ? 'e-icons e-check' : ''
+    }));
+    /**
+     * Handle theme selection from dropdown
+     */
+    const handleSelect = (args) => {
+        const selectedTheme = AVAILABLE_THEMES.find(t => t.id === args.item.id);
+        if (selectedTheme) {
+            setTheme(selectedTheme.id);
+        }
+    };
+    return (_jsx("div", { className: "theme-switcher", style: { display: 'inline-block', marginRight: '10px' }, children: _jsx(DropDownButtonComponent, { cssClass: "action-btn theme-dropdown", items: items, select: handleSelect, content: "Choose Theme", title: "Choose theme" }) }));
+}

package/src/components/theme/theme-constant.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Theme configuration constants for Syncfusion EJ2 components
+ */
+/**
+ * Supported theme variants
+ */
+export type ThemeVariant = 'material3' | 'tailwind3' | 'bootstrap5.3' | 'fluent2';
+/**
+ * Theme mode (light or dark)
+ */
+export type ThemeMode = 'light' | 'dark';
+/**
+ * Complete theme configuration
+ */
+export interface ThemeConfig {
+    variant: ThemeVariant;
+    mode: ThemeMode;
+}
+/**
+ * Theme option for dropdown selection
+ */
+export interface ThemeOption {
+    id: ThemeVariant;
+    text: string;
+}
+/**
+ * Available theme options for theme switcher dropdown
+ */
+export declare const AVAILABLE_THEMES: ThemeOption[];
+/**
+ * Default theme configuration
+ */
+export declare const DEFAULT_THEME: ThemeConfig;
+/**
+ * LocalStorage key for theme persistence
+ */
+export declare const THEME_STORAGE_KEY = "form-builder-theme";

package/src/components/theme/theme-constant.js

@@ -0,0 +1,23 @@
+/**
+ * Theme configuration constants for Syncfusion EJ2 components
+ */
+/**
+ * Available theme options for theme switcher dropdown
+ */
+export const AVAILABLE_THEMES = [
+    { id: 'material3', text: 'Material 3' },
+    { id: 'tailwind3', text: 'Tailwind 3' },
+    { id: 'bootstrap5.3', text: 'Bootstrap 5.3' },
+    { id: 'fluent2', text: 'Fluent 2' }
+];
+/**
+ * Default theme configuration
+ */
+export const DEFAULT_THEME = {
+    variant: 'tailwind3',
+    mode: 'light'
+};
+/**
+ * LocalStorage key for theme persistence
+ */
+export const THEME_STORAGE_KEY = 'form-builder-theme';