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

package/src/context/LocalizationContext.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useMemo, createContext, useContext } from 'react';
+import { L10n } from '@syncfusion/ej2-base';
+import { defaultLocale } from '../config/locale';
+// Create the Localization context
+export const LocalizationContext = createContext(undefined);
+/**
+ * Hook to use Localization context
+ * Must be used within LocalizationProvider
+ */
+export const useLocalization = () => {
+    const context = useContext(LocalizationContext);
+    if (!context) {
+        throw new Error('useLocalization must be used within LocalizationProvider');
+    }
+    return context;
+};
+/**
+ * LocalizationProvider manages the localization state with L10n
+ * Provides L10n instance to all components in the tree
+ */
+export const LocalizationProvider = ({ children, locale }) => {
+    // State for current locale
+    const [currentLocale, setCurrentLocale] = React.useState(() => {
+        if (locale && L10n?.locale?.[locale]) {
+            return locale;
+        }
+        return 'en-US';
+    });
+    // Create L10n instance with current locale
+    const l10n = useMemo(() => {
+        return new L10n('formbuilder', defaultLocale, currentLocale);
+    }, [currentLocale]);
+    // Memoize the context value to prevent unnecessary re-renders
+    const value = useMemo(() => ({
+        l10n,
+        locale: locale || 'en-US',
+        setLocale: setCurrentLocale
+    }), [l10n, currentLocale]);
+    return (_jsx(LocalizationContext.Provider, { value: value, children: children }));
+};
+export default LocalizationProvider;

package/src/context/ThemeContext.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode, type JSX } from 'react';
+import { type ThemeVariant, type ThemeMode, type ThemeConfig } from '../components/theme/theme-constant';
+interface ThemeContextValue {
+    currentTheme: ThemeVariant;
+    themeMode: ThemeMode;
+    setTheme: (variant: ThemeVariant) => void;
+    setMode: (mode: ThemeMode) => void;
+    setThemeConfig: (config: ThemeConfig) => void;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    showTopBar?: boolean;
+}
+/**
+ * ThemeProvider component - wraps the app and provides theme context
+ */
+export declare function ThemeProvider({ children, showTopBar }: ThemeProviderProps): JSX.Element;
+/**
+ * Hook to access theme context
+ * @throws Error if used outside ThemeProvider
+ */
+export declare function useTheme(): ThemeContextValue;
+export {};

package/src/context/ThemeContext.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ThemeContext - Global theme state management for Syncfusion EJ2 components
+ * Manages theme variant selection and light/dark mode with localStorage persistence
+ */
+import React from 'react';
+import { createContext, useContext, useCallback, useLayoutEffect } from 'react';
+import { DEFAULT_THEME, THEME_STORAGE_KEY } from '../components/theme/theme-constant';
+import TopBar from '../components/TopBar';
+// Import theme CSS files with ?url suffix so Vite processes them correctly for production
+import material3ThemeUrl from '../../styles/material3.css?url';
+import tailwind3ThemeUrl from '../../styles/tailwind3.css?url';
+import bootstrap53ThemeUrl from '../../styles/bootstrap5.3.css?url';
+import fluent2ThemeUrl from '../../styles/fluent2.css?url';
+const ThemeContext = createContext(undefined);
+/**
+ * Load theme configuration from localStorage
+ */
+function loadThemeFromStorage() {
+    try {
+        const stored = localStorage.getItem(THEME_STORAGE_KEY);
+        if (stored) {
+            const parsed = JSON.parse(stored);
+            return {
+                variant: parsed.variant || DEFAULT_THEME.variant,
+                mode: parsed.mode || DEFAULT_THEME.mode
+            };
+        }
+        const legacy = localStorage.getItem('theme');
+        if (legacy === 'light' || legacy === 'dark') {
+            return { ...DEFAULT_THEME, mode: legacy };
+        }
+    }
+    catch (error) {
+        console.warn('Failed to load theme from localStorage:', error);
+    }
+    // Detect system preference for dark mode
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return {
+        ...DEFAULT_THEME,
+        mode: prefersDark ? 'dark' : 'light'
+    };
+}
+/**
+ * Save theme configuration to localStorage
+ */
+function saveThemeToStorage(config) {
+    try {
+        localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(config));
+        try {
+            localStorage.setItem('theme', config.mode);
+        }
+        catch (e) {
+            // ignore
+        }
+    }
+    catch (error) {
+        console.warn('Failed to save theme to localStorage:', error);
+    }
+}
+/**
+ * Apply theme variant by updating/creating a link element
+ * This ensures only ONE theme is active at a time
+ */
+function applyThemeVariant(variant) {
+    const linkId = 'syncfusion-theme-dynamic';
+    let linkElement = document.getElementById(linkId);
+    if (!linkElement) {
+        // Create the link element if it doesn't exist
+        linkElement = document.createElement('link');
+        linkElement.id = linkId;
+        linkElement.rel = 'stylesheet';
+        linkElement.type = 'text/css';
+        document.head.appendChild(linkElement);
+    }
+    // Map variant to the actual theme file URL (Vite will handle these correctly in both dev and production)
+    const themePathMap = {
+        material3: material3ThemeUrl,
+        tailwind3: tailwind3ThemeUrl,
+        'bootstrap5.3': bootstrap53ThemeUrl,
+        fluent2: fluent2ThemeUrl
+    };
+    // Update href to switch theme (this replaces the old theme)
+    linkElement.href = themePathMap[variant];
+}
+/**
+ * Apply theme mode (light/dark) and variant by updating data-theme attribute and body classes
+ */
+function applyThemeMode(mode, variant) {
+    // Set data-theme attribute on root element
+    document.documentElement.setAttribute('data-theme', mode);
+    // Update body classes for Syncfusion components
+    if (mode === 'dark') {
+        document.body.classList.add('e-dark-mode');
+        document.body.classList.remove('e-light-mode');
+    }
+    else {
+        document.body.classList.add('e-light-mode');
+        document.body.classList.remove('e-dark-mode');
+    }
+    // Add theme variant class to body if variant is provided
+    if (variant) {
+        // Remove all existing theme variant classes first
+        document.body.classList.remove('theme-material3', 'theme-tailwind3', 'theme-bootstrap5-3', 'theme-fluent2');
+        // Add current theme variant class (normalize bootstrap5.3 to bootstrap5-3 for CSS class)
+        const themeClass = `theme-${variant.replace('.', '-')}`;
+        document.body.classList.add(themeClass);
+    }
+}
+/**
+ * ThemeProvider component - wraps the app and provides theme context
+ */
+export function ThemeProvider({ children, showTopBar = true }) {
+    const [config, setConfig] = React.useState(() => {
+        const loaded = loadThemeFromStorage();
+        applyThemeMode(loaded.mode, loaded.variant);
+        return loaded;
+    });
+    // Apply theme when config changes (user switches theme)
+    useLayoutEffect(() => {
+        applyThemeVariant(config.variant);
+        applyThemeMode(config.mode, config.variant);
+        saveThemeToStorage(config);
+    }, [config]);
+    const setTheme = useCallback((variant) => {
+        setConfig((prev) => ({ ...prev, variant }));
+    }, []);
+    const setMode = useCallback((mode) => {
+        setConfig((prev) => ({ ...prev, mode }));
+    }, []);
+    const setThemeConfig = useCallback((newConfig) => {
+        setConfig(newConfig);
+    }, []);
+    const value = {
+        currentTheme: config.variant,
+        themeMode: config.mode,
+        setTheme,
+        setMode,
+        setThemeConfig
+    };
+    return (_jsxs(ThemeContext.Provider, { value: value, children: [showTopBar ? (_jsx(TopBar, { themeMode: value.themeMode, currentTheme: value.currentTheme, setMode: value.setMode, setTheme: value.setTheme })) : null, children] }));
+}
+/**
+ * Hook to access theme context
+ * @throws Error if used outside ThemeProvider
+ */
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        console.warn('useTheme used without ThemeProvider — default theme will be assumed. Wrap your app with ThemeProvider to enable dynamic theming or import the theme CSS manually.');
+        const noop = () => { };
+        return {
+            currentTheme: DEFAULT_THEME.variant,
+            themeMode: DEFAULT_THEME.mode,
+            setTheme: noop,
+            setMode: noop,
+            setThemeConfig: noop
+        };
+    }
+    return context;
+}

package/src/context/contexts.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Export all context-related exports from a single file
+ * This provides a clean import path for components
+ */
+export { FormSchemaContext, useFormSchema, FormSchemaProvider } from './FormSchemaContext';
+export { LocalizationContext, useLocalization, LocalizationProvider } from './LocalizationContext';

package/src/context/contexts.js

@@ -0,0 +1,6 @@
+/**
+ * Export all context-related exports from a single file
+ * This provides a clean import path for components
+ */
+export { FormSchemaContext, useFormSchema, FormSchemaProvider } from './FormSchemaContext';
+export { LocalizationContext, useLocalization, LocalizationProvider } from './LocalizationContext';

package/src/context/defaultFormSchema.d.ts

@@ -0,0 +1,6 @@
+import type { FormSchema } from '../types/FormSchema';
+/**
+ * Default form schema with a submit button
+ * This is used when no saved schema exists in localStorage
+ */
+export declare const defaultFormSchema: FormSchema;

package/src/context/defaultFormSchema.js

@@ -0,0 +1,20 @@
+/**
+ * Default form schema with a submit button
+ * This is used when no saved schema exists in localStorage
+ */
+export const defaultFormSchema = {
+    version: '0.1.0',
+    components: [{
+            id: 'submit_button_initial',
+            name: 'defaultFormsubmit',
+            type: 'button',
+            label: 'Submit',
+            style: 'primary',
+            buttonType: 'submit',
+            disabled: false,
+            _configured: true
+        }],
+    settings: {
+        name: 'Untitled Form',
+    }
+};

package/src/defaultPalette.d.ts

@@ -0,0 +1,9 @@
+import { ComponentCategory, type PaletteItem } from './types/FormSchema';
+export type DefaultPalette = {
+    [key in ComponentCategory]?: PaletteItem[];
+};
+/**
+ * Default palette configuration - all available components organized by category
+ * Users can override this by providing paletteConfig prop to FormBuilder
+ */
+export declare const defaultPalette: DefaultPalette;

package/src/defaultPalette.js

@@ -0,0 +1,45 @@
+import { ComponentCategory, FormComponentType } from './types/FormSchema';
+/**
+ * Default palette configuration - all available components organized by category
+ * Users can override this by providing paletteConfig prop to FormBuilder
+ */
+export const defaultPalette = {
+    [ComponentCategory.BASIC]: [
+        { type: FormComponentType.TEXTBOX },
+        { type: FormComponentType.TEXTAREA },
+        { type: FormComponentType.CHECKBOX },
+        { type: FormComponentType.RADIO },
+        { type: FormComponentType.NUMBER },
+        { type: FormComponentType.INPUT_MASK },
+        { type: FormComponentType.DROPDOWN },
+        { type: FormComponentType.MULTISELECT },
+        { type: FormComponentType.DATE },
+        { type: FormComponentType.BUTTON }
+    ],
+    [ComponentCategory.ADVANCED]: [
+        { type: FormComponentType.CHECKBOX_GROUP },
+        { type: FormComponentType.DATE_TIME },
+        { type: FormComponentType.TIME },
+        { type: FormComponentType.DATE_RANGE },
+        { type: FormComponentType.SWITCH },
+        { type: FormComponentType.RATING },
+        { type: FormComponentType.SPLIT_BUTTON },
+        { type: FormComponentType.RANGE_SLIDER },
+        { type: FormComponentType.SIGNATURE },
+        { type: FormComponentType.IMAGE_EDITOR },
+        { type: FormComponentType.FILE_UPLOAD },
+        { type: FormComponentType.COLOR_PICKER },
+        // { type: FormComponentType.LOOKUP },
+        { type: FormComponentType.RICH_TEXT_EDITOR },
+        { type: FormComponentType.DATA_GRID },
+        // { type: FormComponentType.AUTO_NUMBER }
+    ],
+    [ComponentCategory.LAYOUT]: [
+        { type: FormComponentType.MESSAGE },
+        { type: FormComponentType.PANEL },
+        { type: FormComponentType.TABLE },
+        { type: FormComponentType.TABS },
+        { type: FormComponentType.CARD },
+        { type: FormComponentType.STATIC_HTML }
+    ]
+};

package/src/defaultTemplate.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultTemplates } from "./types/FormSchema";
+export declare const defaultTemplates: DefaultTemplates[];
+export default defaultTemplates;

package/src/defaultTemplate.js

@@ -0,0 +1,185 @@
+export const defaultTemplates = [
+    {
+        id: 'loginForm',
+        title: 'Login Form',
+        schema: {
+            type: 'object',
+            properties: {
+                email: {
+                    type: 'string',
+                    title: 'Email Address',
+                    name: 'emailAddress',
+                    description: 'Enter your email',
+                    format: 'email'
+                },
+                password: {
+                    type: 'string',
+                    title: 'Password',
+                    name: 'password',
+                    description: 'Enter your password',
+                    minLength: 6
+                },
+                rememberMe: {
+                    type: 'boolean',
+                    title: 'Remember Me',
+                    name: 'remember',
+                    default: false
+                }
+            },
+            required: ['email', 'password']
+        }
+    },
+    {
+        id: 'registrationForm',
+        title: 'User Registration',
+        schema: {
+            "version": "0.1.0",
+            "properties": {
+                "firstName": {
+                    "id": "textbox_1780395123369_348",
+                    "type": "string",
+                    "label": "First Name",
+                    "name": 'firstName',
+                    "minLength": 2,
+                    "widget": "textbox"
+                },
+                "lastName": {
+                    "id": "textbox_1780395123369_714",
+                    "type": "string",
+                    "label": "Last Name",
+                    "name": 'lastName',
+                    "minLength": 2,
+                    "widget": "textbox"
+                },
+                "emailAddress": {
+                    "id": "textbox_1780395123369_215",
+                    "type": "string",
+                    "label": "Email Address",
+                    "name": 'emailAddress',
+                    "textboxType": "email",
+                    "widget": "textbox"
+                },
+                "password": {
+                    "id": "textbox_1780395123369_201",
+                    "name": "password_1",
+                    "type": "string",
+                    "label": "Password",
+                    "textboxType": "password",
+                    "minLength": 8,
+                    "widget": "textbox"
+                },
+                "confirmPassword": {
+                    "id": "textbox_1780395123369_608",
+                    "name": "password_2",
+                    "type": "string",
+                    "label": "Confirm Password",
+                    "textboxType": "password",
+                    "minLength": 8,
+                    "widget": "textbox",
+                    "customValidation": [
+                        {
+                            "expression": "valid = (input === {password_1}) ? true : 'Confirm password should match the password'"
+                        }
+                    ]
+                },
+                "iAgreeToTheTermsAndConditions": {
+                    "id": "checkbox_1780395123369_384",
+                    "name": "agree",
+                    "type": "boolean",
+                    "label": "I agree to the Terms and Conditions",
+                    "widget": "checkbox"
+                },
+                "submit": {
+                    "id": "submit_button_initial",
+                    "type": "button",
+                    "name": "default_submit",
+                    "label": "Submit",
+                    "buttonType": "submit",
+                    "widget": "button",
+                    "style": "primary",
+                    "disabled": false
+                }
+            },
+            "layout": [
+                {
+                    "type": "field",
+                    "propertyId": "firstName"
+                },
+                {
+                    "type": "field",
+                    "propertyId": "lastName"
+                },
+                {
+                    "type": "field",
+                    "propertyId": "emailAddress"
+                },
+                {
+                    "type": "field",
+                    "propertyId": "password"
+                },
+                {
+                    "type": "field",
+                    "propertyId": "confirmPassword"
+                },
+                {
+                    "type": "field",
+                    "propertyId": "iAgreeToTheTermsAndConditions"
+                },
+                {
+                    "type": "field",
+                    "propertyId": "submit"
+                }
+            ],
+            "settings": {
+                "name": "Untitled Form"
+            }
+        }
+    },
+    {
+        id: 'feedbackSurvey',
+        title: 'Feedback Survey',
+        schema: {
+            "version": "1.0",
+            "properties": {
+                "howSatisfiedAreYou": {
+                    "id": "dropdown_1774507299146_461",
+                    "type": "string",
+                    "name": "satisfaction",
+                    "label": "How satisfied are you?",
+                    "options": [
+                        "very_satisfied",
+                        "satisfied",
+                        "neutral",
+                        "dissatisfied",
+                        "very_dissatisfied"
+                    ]
+                },
+                "wouldYouRecommendUs": {
+                    "id": "dropdown_1774507299146_513",
+                    "type": "string",
+                    "name": "recommendation",
+                    "label": "Would you recommend us?",
+                    "options": [
+                        "yes",
+                        "maybe",
+                        "no"
+                    ]
+                },
+                "additionalFeedback": {
+                    "id": "textarea_1774507317278_373",
+                    "type": "string",
+                    "name": "feedback",
+                    "label": "Additional Feedback"
+                },
+                "submit": {
+                    "id": "button_1774507299146_562",
+                    "type": "button",
+                    "name": "default_submit",
+                    "label": "Submit",
+                    "buttonType": "submit"
+                }
+            }
+        }
+    }
+];
+export default defaultTemplates;

package/src/import/schemaImportUtils.d.ts

@@ -0,0 +1,24 @@
+import { type ValidationResult } from '../../Common/parser';
+import type { FormSchema } from '../types/FormSchema';
+/**
+ * Utility functions for split and full schema import/validation
+ * Used by both ImportDialog and FileImportDialog
+ */
+/**
+ * Validate unified schema (properties + layout)
+ */
+export declare const validateSplitSchemas: (dataSchemaInput: string, _uiSchemaInput: string) => ValidationResult;
+/**
+ * Validate full schema (single JSON)
+ */
+export declare const validateFullSchema: (input: string) => ValidationResult;
+/**
+ * Import unified schema with merge
+ * Accepts unified schema (properties + layout) and converts to FormSchema
+ * Also supports legacy format (FormComponent array) for backward compatibility
+ */
+export declare const importSplitSchemas: (dataSchemaInput: string, currentFormSchema: FormSchema) => FormSchema;
+/**
+ * Import full schema
+ */
+export declare const importFullSchema: (input: string) => FormSchema;

package/src/import/schemaImportUtils.js

@@ -0,0 +1,121 @@
+import { UniversalJsonParser } from '../../Common/parser';
+import { splitSchema, mergeSchema, mergeWithIDRemapping, convertComponentsToDataSchema } from '../../Common/json-converter';
+/**
+ * Utility functions for split and full schema import/validation
+ * Used by both ImportDialog and FileImportDialog
+ */
+/**
+ * Validate unified schema (properties + layout)
+ */
+export const validateSplitSchemas = (dataSchemaInput, _uiSchemaInput) => {
+    const errors = [];
+    const trimmedDataInput = dataSchemaInput.trim();
+    if (!trimmedDataInput) {
+        return {
+            valid: false,
+            errors: ['Please provide a schema']
+        };
+    }
+    try {
+        const testParse = JSON.parse(trimmedDataInput);
+        // Check if it's unified schema (has properties and layout)
+        const isUnifiedSchema = testParse.properties && Array.isArray(testParse.layout);
+        if (isUnifiedSchema) {
+            // Validate unified schema structure
+            if (typeof testParse.properties !== 'object') {
+                errors.push('Invalid schema: "properties" must be an object');
+                return { valid: false, errors };
+            }
+            return { valid: true };
+        }
+        else {
+            // Try to parse as legacy format (FormComponent array)
+            const parser = new UniversalJsonParser();
+            const parseResult = parser.parse(trimmedDataInput);
+            if (!parseResult.success) {
+                errors.push(`Failed to parse schema: ${parseResult.errors.join(', ')}`);
+                return { valid: false, errors };
+            }
+            return { valid: true };
+        }
+    }
+    catch (e) {
+        errors.push(`Invalid JSON: ${e.message}`);
+        return { valid: false, errors };
+    }
+};
+/**
+ * Validate full schema (single JSON)
+ */
+export const validateFullSchema = (input) => {
+    const trimmedInput = input.trim();
+    if (!trimmedInput || trimmedInput.length === 0) {
+        return {
+            valid: false,
+            errors: ['Please paste a full form schema JSON']
+        };
+    }
+    const parser = new UniversalJsonParser();
+    const parseResult = parser.parse(trimmedInput);
+    return {
+        valid: parseResult?.success || false,
+        errors: parseResult?.errors.length > 0 ? parseResult.errors : undefined,
+        warnings: parseResult?.warnings.length > 0 ? parseResult.warnings : undefined
+    };
+};
+/**
+ * Import unified schema with merge
+ * Accepts unified schema (properties + layout) and converts to FormSchema
+ * Also supports legacy format (FormComponent array) for backward compatibility
+ */
+export const importSplitSchemas = (dataSchemaInput, currentFormSchema) => {
+    const trimmedDataInput = dataSchemaInput.trim();
+    if (!trimmedDataInput) {
+        throw new Error('Please provide a schema');
+    }
+    let mergedSchema;
+    // Parse the input
+    const testParse = JSON.parse(trimmedDataInput);
+    // Check if it's unified schema format (has properties and layout)
+    const isUnifiedSchema = testParse.properties && Array.isArray(testParse.layout);
+    if (isUnifiedSchema) {
+        // ✅ NEW PATH: Unified schema - merge directly
+        mergedSchema = mergeSchema(testParse);
+    }
+    else {
+        // ✅ LEGACY PATH: FormComponent array or old format - convert and merge with ID remapping
+        const parser = new UniversalJsonParser();
+        const parseResult = parser.parse(trimmedDataInput);
+        if (!parseResult.success || !parseResult.schema) {
+            throw new Error(`Failed to parse schema: ${parseResult.errors.join(', ')}`);
+        }
+        // Convert FormComponents to DataSchema
+        const dataSchema = convertComponentsToDataSchema(parseResult.schema.components);
+        // Get existing UI schema from current form
+        const currentUnified = splitSchema(currentFormSchema);
+        const currentUISchema = {
+            properties: currentUnified.properties,
+            layout: currentUnified.layout
+        };
+        // Merge with ID remapping to preserve layout stability
+        mergedSchema = mergeWithIDRemapping(dataSchema, currentUISchema);
+    }
+    return mergedSchema;
+};
+/**
+ * Import full schema
+ */
+export const importFullSchema = (input) => {
+    const trimmedInput = input.trim();
+    if (!trimmedInput || trimmedInput.length === 0) {
+        throw new Error('Please paste JSON content');
+    }
+    const parser = new UniversalJsonParser();
+    const parseResult = parser.parse(trimmedInput);
+    if (parseResult?.success && parseResult?.schema) {
+        return parseResult.schema;
+    }
+    else {
+        throw new Error(parseResult?.errors.join(', ') || 'Failed to parse schema');
+    }
+};