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

package/src/components/layout/Preview.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import '@syncfusion/ej2-form-renderer/styles/tailwind3.css';
+import type { FormSchema } from '../../types/FormSchema';
+import type { UnifiedSchema } from '../../../Common/json-converter';
+interface PreviewProps {
+    isOpen: boolean;
+    onClose: () => void;
+    schema?: UnifiedSchema;
+    formSchema: FormSchema;
+}
+export declare const Preview: React.FC<PreviewProps>;
+export default Preview;

package/src/components/layout/Preview.js

@@ -0,0 +1,337 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect, useRef } from 'react';
+import { FormRendererComponent } from '@syncfusion/ej2-react-form-renderer';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import '@syncfusion/ej2-form-renderer/styles/tailwind3.css';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
+import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
+import { formBuilderMode } from '../../FormBuilder';
+import { getFormId } from '../../../Common/globalFormId';
+import { useLocalization } from '../../context/LocalizationContext';
+// Ignore list for components to exclude from grid columns
+const IGNORE_COMPONENT_TYPES = ['button', 'staticHtml', 'panel', 'table', 'tabs', 'card', 'splitButton', 'fileUpload', 'message'];
+const IGNORE_COMPONENT_NAMES = []; // Can be populated manually
+const getSubmissionsFromStorage = async (formName) => {
+    try {
+        const response = await fetch(/*getRecordsUrl*/ '' + `${formName}`);
+        return response.ok ? await response.json() : [];
+    }
+    catch (error) {
+        console.error('Error fetching submissions:', error);
+        return [];
+    }
+};
+const saveSubmissionToStorage = async (formName, submission) => {
+    try {
+        await fetch(/*submitUrl*/ '' + `${formName}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(submission)
+        });
+    }
+    catch (error) {
+        console.error('Error saving submission:', error);
+    }
+};
+const clearSubmissionsFromStorage = async (formName) => {
+    try {
+        await fetch(/*submitUrl*/ '' + `${formName}`, { method: 'DELETE' });
+    }
+    catch (error) {
+        console.error('Error clearing submissions:', error);
+    }
+};
+const extractGridColumns = (formSchema) => {
+    const columns = [];
+    if (!formSchema?.components)
+        return columns;
+    const extractFromComponent = (component) => {
+        if (IGNORE_COMPONENT_TYPES.includes(component.type) || IGNORE_COMPONENT_NAMES.includes(component.name)) {
+            return;
+        }
+        if (component.label && component.type !== 'dataGrid') {
+            columns.push({
+                field: component.label,
+                headerText: component.label
+            });
+        }
+        else if (component.label && component.type === 'dataGrid') {
+            columns.push({
+                field: component.label,
+                headerText: `${component.label} (View)`
+            });
+        }
+        if (component.children && Array.isArray(component.children)) {
+            component.children.forEach((child) => {
+                if (Array.isArray(child)) {
+                    child.forEach((nestedChild) => extractFromComponent(nestedChild));
+                }
+                else {
+                    extractFromComponent(child);
+                }
+            });
+        }
+        if (component.tableCells && Array.isArray(component.tableCells)) {
+            component.tableCells.forEach((row) => {
+                if (Array.isArray(row)) {
+                    row.forEach((cell) => {
+                        if (Array.isArray(cell)) {
+                            cell.forEach((cellComponent) => extractFromComponent(cellComponent));
+                        }
+                        else {
+                            extractFromComponent(cell);
+                        }
+                    });
+                }
+            });
+        }
+        if (component.tabItems && Array.isArray(component.tabItems)) {
+            component.tabItems.forEach((tab) => {
+                if (tab.content && Array.isArray(tab.content)) {
+                    tab.content.forEach((tabComponent) => extractFromComponent(tabComponent));
+                }
+            });
+        }
+    };
+    formSchema.components.forEach(component => extractFromComponent(component));
+    return columns;
+};
+export const Preview = ({ isOpen, onClose, schema, formSchema }) => {
+    const [showSuccessScreen, setShowSuccessScreen] = useState(false);
+    const [formKey, setFormKey] = useState(0);
+    const [showDataDialog, setShowDataDialog] = useState(false);
+    const [storageRefresh, setStorageRefresh] = useState(0);
+    const gridColumns = useMemo(() => extractGridColumns(formSchema), [formSchema]);
+    const [gridData, setGridData] = useState([]);
+    const [expandedGridData, setExpandedGridData] = useState(null);
+    const [showExpandedDialog, setShowExpandedDialog] = useState(false);
+    const previewMainSectionRef = useRef(null);
+    const { locale } = useLocalization();
+    const dataGridFields = useMemo(() => {
+        const fields = new Set();
+        const traverse = (components) => {
+            components.forEach(comp => {
+                if (comp.type === 'dataGrid' && comp.label) {
+                    fields.add(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) => tab.content && traverse(tab.content));
+            });
+        };
+        traverse(formSchema?.components || []);
+        return fields;
+    }, [formSchema]);
+    useEffect(() => {
+        if (!isOpen || formBuilderMode !== 'component')
+            return;
+        const updatePreviewHeight = () => {
+            const container = document.getElementById('form-builder');
+            if (!container)
+                return;
+            const previewMainSection = previewMainSectionRef.current || container.querySelector('.preview-main-section');
+            if (!previewMainSection)
+                return;
+            const containerHeight = container.offsetHeight;
+            previewMainSection.style.height = `${containerHeight - 48}px`;
+        };
+        const rafId = requestAnimationFrame(updatePreviewHeight);
+        const resizeObserver = new ResizeObserver(updatePreviewHeight);
+        const container = document.getElementById('form-builder');
+        if (container) {
+            resizeObserver.observe(container);
+        }
+        window.addEventListener('resize', updatePreviewHeight);
+        return () => {
+            cancelAnimationFrame(rafId);
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', updatePreviewHeight);
+        };
+    }, [isOpen, formSchema.components, formSchema.settings]);
+    if (!isOpen)
+        return null;
+    const handleSubmit = (args) => {
+        const formName = formSchema?.settings?.name || 'Untitled Form';
+        // Process auto number fields
+        const processedData = { ...args.data };
+        if (formBuilderMode === undefined) {
+            if (formSchema?.components) {
+                const processAutoNumberFields = (components) => {
+                    components.forEach((component) => {
+                        if (component.type === 'autoNumber') {
+                            // Get submissions count from form data storage to calculate next index
+                            const submissions = getSubmissionsFromStorage(formName);
+                            const lastIndex = parseInt((submissions[submissions.length - 1]?.[component.label]?.replace(component.prefix, '').replace(component.suffix, '')) || String(component.startIndex - 1 || -1), 10);
+                            const nextIndex = lastIndex + 1;
+                            const formattedValue = `${component.prefix || ''}${nextIndex}${component.suffix || ''}`;
+                            processedData[component.label] = formattedValue;
+                        }
+                        // Handle nested components (like panel children)
+                        if (component.children && Array.isArray(component.children)) {
+                            component.children.forEach((child) => {
+                                if (Array.isArray(child)) {
+                                    processAutoNumberFields(child);
+                                }
+                                else {
+                                    processAutoNumberFields([child]);
+                                }
+                            });
+                        }
+                        // Handle table cells
+                        if (component.tableCells && Array.isArray(component.tableCells)) {
+                            component.tableCells.forEach((row) => {
+                                if (Array.isArray(row)) {
+                                    row.forEach((cell) => {
+                                        if (Array.isArray(cell)) {
+                                            processAutoNumberFields(cell);
+                                        }
+                                        else {
+                                            processAutoNumberFields([cell]);
+                                        }
+                                    });
+                                }
+                            });
+                        }
+                        // Handle tab items
+                        if (component.tabItems && Array.isArray(component.tabItems)) {
+                            component.tabItems.forEach((tab) => {
+                                if (tab.content && Array.isArray(tab.content)) {
+                                    processAutoNumberFields(tab.content);
+                                }
+                            });
+                        }
+                    });
+                };
+                processAutoNumberFields(formSchema.components);
+            }
+            const currentFormId = getFormId();
+            const storageKey = (currentFormId && String(currentFormId).trim()) ? currentFormId : formName;
+            saveSubmissionToStorage(storageKey, processedData);
+            setStorageRefresh(prev => prev + 1);
+            setShowSuccessScreen(true);
+        }
+    };
+    const handleAddAnotherResponse = () => {
+        setShowSuccessScreen(false);
+        setFormKey(prev => prev + 1);
+    };
+    const handleClearData = () => {
+        const formName = formSchema?.settings?.name || 'Untitled Form';
+        clearSubmissionsFromStorage(formName);
+        setStorageRefresh(prev => prev + 1);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("main", { role: "dialog", "aria-modal": "true", className: "preview-main-section", style: { position: 'absolute', top: '48px', left: 0, width: '100%' }, children: [_jsxs("div", { className: "main-header", children: [_jsx("div", { className: "left-section", children: formSchema?.settings?.name || 'Untitled Form' }), _jsx("div", { className: "center-section" }), _jsx("div", { className: "right-section", children: _jsx(ButtonComponent, { onClick: onClose, cssClass: "action-btn e-flat", children: "Close Preview" }) })] }), _jsx("div", { className: "preview-main-content", style: { width: "100%", position: "relative", zIndex: 9999, marginTop: "48px" }, children: !showSuccessScreen ? (_jsx("div", { className: `form-preview-area`, ref: previewMainSectionRef, children: (schema) &&
+                                _jsx(FormRendererComponent, { locale: locale, style: { maxWidth: formSchema.settings?.width || 'var(--form-width)' }, schema: schema, className: "preview-form", submit: handleSubmit }, formKey) })) : (_jsx("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                minHeight: 'calc(100vh - 100px)',
+                                position: 'relative',
+                                zIndex: 99999,
+                                background: "var(--preview-area-color)",
+                                padding: '40px 20px'
+                            }, children: _jsxs("div", { className: "e-card", style: {
+                                    textAlign: 'center',
+                                    maxWidth: '500px',
+                                    borderRadius: '12px',
+                                    padding: '60px 40px',
+                                    boxShadow: '0 10px 40px rgba(0, 0, 0, 0.08)',
+                                    animation: 'fadeIn 0.5s ease-in'
+                                }, children: [_jsx("div", { style: {
+                                            width: '80px',
+                                            height: '80px',
+                                            background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+                                            borderRadius: '50%',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            margin: '0 auto 30px',
+                                            animation: 'scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)'
+                                        }, children: _jsx("svg", { width: "44", height: "44", viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M13.8333 23.3333L19.25 28.75L30.1667 15.25", stroke: "white", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("h1", { style: {
+                                            fontSize: '28px',
+                                            fontWeight: '600',
+                                            color: 'var(--dashboard-heading-color)',
+                                            margin: '0 0 12px 0',
+                                            lineHeight: '1.4'
+                                        }, children: "Thank You!" }), _jsx("p", { style: {
+                                            fontSize: '16px',
+                                            color: '#64748b',
+                                            margin: '0 0 40px 0',
+                                            lineHeight: '1.6'
+                                        }, children: "Your response has been submitted successfully." }), _jsxs("div", { style: {
+                                            display: 'flex',
+                                            gap: '12px',
+                                            flexDirection: 'column'
+                                        }, children: [_jsx(ButtonComponent, { onClick: handleAddAnotherResponse, cssClass: "e-primary", style: {
+                                                    background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
+                                                    border: 'none',
+                                                    height: '44px',
+                                                    fontSize: '15px',
+                                                    fontWeight: '500',
+                                                    borderRadius: '8px',
+                                                    cursor: 'pointer',
+                                                    transition: 'all 0.3s ease',
+                                                    boxShadow: '0 4px 15px rgba(99, 102, 241, 0.3)'
+                                                }, children: "\uFF0B Add Another Response" }), _jsx(ButtonComponent, { onClick: () => {
+                                                    const fetchData = async () => {
+                                                        const currentFormId = getFormId()?.toString();
+                                                        const data = await getSubmissionsFromStorage(currentFormId);
+                                                        setGridData(data);
+                                                    };
+                                                    fetchData();
+                                                    setShowDataDialog(true);
+                                                }, cssClass: "e-outline", style: {
+                                                    height: '44px',
+                                                    fontSize: '15px',
+                                                    fontWeight: '500',
+                                                    borderRadius: '8px',
+                                                    cursor: 'pointer',
+                                                }, children: "View Submitted Data" }), _jsx(ButtonComponent, { onClick: onClose, cssClass: "e-outline", style: {
+                                                    height: '44px',
+                                                    fontSize: '15px',
+                                                    fontWeight: '500',
+                                                    borderRadius: '8px',
+                                                    cursor: 'pointer',
+                                                }, children: "Close Preview" })] })] }) })) })] }), _jsx(DialogComponent, { header: "Submitted Data", isModal: false, width: "100%", height: "calc(100dvh - 48px)", position: { X: 0, Y: 48 }, visible: showDataDialog, close: () => setShowDataDialog(false), showCloseIcon: true, footerTemplate: () => (_jsx("div", { style: { display: 'flex', gap: '8px', justifyContent: 'flex-end' }, children: _jsx(ButtonComponent, { onClick: handleClearData, cssClass: "e-danger", children: "Clear All Data" }) })), children: _jsx("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: _jsxs(GridComponent, { dataSource: gridData, allowPaging: true, pageSettings: { pageSize: 10 }, allowSorting: true, allowFiltering: true, children: [_jsx(ColumnsDirective, { children: gridColumns.map((column, index) => (_jsx(ColumnDirective, { field: column.field, headerText: column.headerText, isPrimaryKey: index === 0, template: (props) => {
+                                        const value = props[column.field];
+                                        if (dataGridFields.has(column.field) && Array.isArray(value)) {
+                                            return (_jsxs(ButtonComponent, { cssClass: "e-outline e-small", onClick: () => {
+                                                    setExpandedGridData(value);
+                                                    setShowExpandedDialog(true);
+                                                }, children: ["View (", value.length, ")"] }));
+                                        }
+                                        if (typeof value === 'boolean') {
+                                            return value ? 'true' : 'false';
+                                        }
+                                        if (typeof value === 'object' && value !== null) {
+                                            return JSON.stringify(value);
+                                        }
+                                        return value ?? '';
+                                    } }, index))) }), _jsx(Inject, { services: [Page, Sort, Filter] })] }) }) }), _jsx(DialogComponent, { isModal: true, width: "90%", height: "80%", visible: showExpandedDialog, close: () => setShowExpandedDialog(false), showCloseIcon: true, children: _jsxs(GridComponent, { dataSource: expandedGridData || [], allowPaging: true, pageSettings: { pageSize: 10 }, allowSorting: true, allowFiltering: true, children: [_jsx(ColumnsDirective, { children: expandedGridData && expandedGridData.length > 0 && Object.keys(expandedGridData[0]).map((key, index) => (_jsx(ColumnDirective, { field: key, headerText: key }, index))) }), _jsx(Inject, { services: [Page, Sort, Filter] })] }) }), _jsx("style", { children: `
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        @keyframes scaleIn {
+          from {
+            transform: scale(0.3);
+            opacity: 0;
+          }
+          to {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+      ` })] }));
+};
+export default Preview;

package/src/components/layout/RightPane.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { PropertyValues, ComponentDefinition } from '../../types/ComponentProperties';
+import type { FormSettings } from '../../types/FormSchema';
+import { type PropertyChangedEventArgs } from '../../FormBuilder';
+interface RightPaneProps {
+    mode: 'component' | 'formSettings';
+    componentType: string;
+    configData: Record<string, ComponentDefinition>;
+    formSettingsConfig?: any;
+    existingValues?: PropertyValues;
+    formSettings?: FormSettings;
+    onSave: (values: PropertyValues | FormSettings, key?: string) => void;
+    onPropertyChanged?: (args: PropertyChangedEventArgs) => void;
+    onClose: () => void;
+    builderMode?: 'Simple' | 'Developer';
+}
+/**
+ * RightPane Component
+ */
+export declare const RightPane: React.FC<RightPaneProps>;
+declare const _default: React.NamedExoticComponent<RightPaneProps>;
+export default _default;