@stormlmd/form-builder 0.1.0 → 0.3.1

package/src/components/layout/FormTabs.tsx

@@ -3,10 +3,11 @@ import { Box, Tabs, Tab, Paper } from '@mui/material';
 import { observer } from 'mobx-react-lite';
 import type { FieldProps } from '../FieldRegistry';
 import { FormRenderer } from '../FormRenderer';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
 export const FormTabs: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     const [activeTab, setActiveTab] = React.useState(0);
     const allTabs = node.children || [];
     const tabs = isEditing

package/src/components/registerComponents.ts

@@ -1,4 +1,7 @@
-import { registerComponent } from './FieldRegistry';
+import { registerPlugin } from '../plugins/PluginRegistry';
+import type { FieldPlugin } from '../plugins/FieldPlugin';
+
+// Field components
 import { TextField } from './fields/TextField';
 import { NumberField } from './fields/NumberField';
 import { CheckboxField } from './fields/CheckboxField';
@@ -6,25 +9,77 @@ import { SelectField } from './fields/SelectField';
 import { DateField } from './fields/DateField';
 import { FileUploadField } from './fields/FileUploadField';
 import { RichTextField } from './fields/RichTextField';
+import { LabelField } from './fields/LabelField';
+
+// Layout components
 import { FormRow } from './layout/FormRow';
 import { FormCol } from './layout/FormCol';
 import { FormTabs } from './layout/FormTabs';
 import { FormTab } from './layout/FormTab';
 import { FormRepeater } from './layout/FormRepeater';
 import { FormPaper } from './layout/FormPaper';
+import { FormTable } from './layout/FormTable';
+import { FormTableCell } from './layout/FormTableCell';
+import { FormDivider } from './layout/FormDivider';
+
+// Icons
+import TextFieldsIcon from '@mui/icons-material/TextFields';
+import NumbersIcon from '@mui/icons-material/Numbers';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import ArrowDropDownCircleIcon from '@mui/icons-material/ArrowDropDownCircle';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
+import LabelIcon from '@mui/icons-material/Label';
+import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import TabIcon from '@mui/icons-material/Tab';
+import RepeatIcon from '@mui/icons-material/Repeat';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import LayersIcon from '@mui/icons-material/Layers';
+import React from 'react';
+
+/**
+ * Built-in field plugins.
+ */
+const BUILT_IN_FIELD_PLUGINS: FieldPlugin[] = [
+    { type: 'text', label: 'Text Field', icon: React.createElement(TextFieldsIcon), category: 'field', defaultProps: { label: 'New Text Field', width: 6 }, component: TextField },
+    { type: 'number', label: 'Number Field', icon: React.createElement(NumbersIcon), category: 'field', defaultProps: { label: 'New Number Field', width: 6 }, component: NumberField },
+    { type: 'checkbox', label: 'Checkbox', icon: React.createElement(CheckBoxIcon), category: 'field', defaultProps: { label: 'New Checkbox', width: 6 }, component: CheckboxField },
+    { type: 'select', label: 'Select', icon: React.createElement(ArrowDropDownCircleIcon), category: 'field', defaultProps: { label: 'New Select', width: 6, options: [{ label: 'Option 1', value: '1' }] }, component: SelectField },
+    { type: 'date', label: 'Date Picker', icon: React.createElement(CalendarTodayIcon), category: 'field', defaultProps: { label: 'New Date', width: 6 }, component: DateField },
+    { type: 'file', label: 'File Upload', icon: React.createElement(CloudUploadIcon), category: 'field', defaultProps: { label: 'New File Upload', width: 6 }, component: FileUploadField },
+    { type: 'richtext', label: 'Rich Text', icon: React.createElement(FormatQuoteIcon), category: 'field', defaultProps: { label: 'New Rich Text', width: 6 }, component: RichTextField },
+    { type: 'label', label: 'Label', icon: React.createElement(LabelIcon), category: 'field', defaultProps: { text: 'Static Text', variant: 'body1', width: 6 }, component: LabelField },
+];
+
+/**
+ * Built-in layout plugins.
+ */
+const BUILT_IN_LAYOUT_PLUGINS: FieldPlugin[] = [
+    { type: 'divider', label: 'Divider', icon: React.createElement(HorizontalRuleIcon), category: 'layout', defaultProps: { text: '' }, component: FormDivider },
+    { type: 'col', label: 'Column', icon: React.createElement(ViewColumnIcon), category: 'layout', isContainer: true, defaultProps: { cols: 6 }, component: FormCol },
+    { type: 'tabs', label: 'Tabs', icon: React.createElement(TabIcon), category: 'layout', isContainer: true, defaultProps: {}, component: FormTabs },
+    { type: 'repeater', label: 'Repeater', icon: React.createElement(RepeatIcon), category: 'layout', isContainer: true, defaultProps: { label: 'Repeater', addLabel: 'addItem' }, component: FormRepeater },
+    { type: 'table', label: 'Table', icon: React.createElement(TableChartIcon), category: 'layout', isContainer: true, defaultProps: { rows: 2, cols: 2, width: 12 }, component: FormTable },
+    { type: 'paper', label: 'Paper', icon: React.createElement(LayersIcon), category: 'layout', isContainer: true, defaultProps: { label: 'Paper Group', padding: 2, variant: 'elevation', elevation: 1 }, component: FormPaper },
+];
+
+/**
+ * Internal-only plugins (not shown in Toolbox but needed for rendering).
+ */
+const INTERNAL_PLUGINS: FieldPlugin[] = [
+    { type: 'tab', label: 'Tab', category: 'layout', isContainer: true, showInToolbox: false, component: FormTab },
+    { type: 'cell', label: 'Cell', category: 'layout', isContainer: true, showInToolbox: false, component: FormTableCell },
+    { type: 'row', label: 'Row', category: 'layout', isContainer: true, showInToolbox: false, defaultProps: {}, component: FormRow },
+];
 
+/**
+ * Registers all built-in components as full plugins.
+ * Call this once at app startup. Backward compatible.
+ */
 export const registerAllComponents = () => {
-    registerComponent('text', TextField);
-    registerComponent('number', NumberField);
-    registerComponent('checkbox', CheckboxField);
-    registerComponent('select', SelectField);
-    registerComponent('date', DateField);
-    registerComponent('file', FileUploadField);
-    registerComponent('richtext', RichTextField);
-    registerComponent('row', FormRow);
-    registerComponent('col', FormCol);
-    registerComponent('tabs', FormTabs);
-    registerComponent('tab', FormTab);
-    registerComponent('repeater', FormRepeater);
-    registerComponent('paper', FormPaper);
+    for (const plugin of [...BUILT_IN_FIELD_PLUGINS, ...BUILT_IN_LAYOUT_PLUGINS, ...INTERNAL_PLUGINS]) {
+        registerPlugin(plugin);
+    }
 };

package/src/index.ts

@@ -3,3 +3,10 @@ export * from './components/FormRenderer';
 export * from './components/FieldRegistry';
 export * from './components/registerComponents';
 export { FormBuilder } from './components/builder/FormBuilder';
+
+// Plugin system
+export { registerPlugin, registerPlugins, getPlugin, getAllPlugins, getToolboxItems, isContainerType } from './plugins/PluginRegistry';
+export type { FieldPlugin, FieldProps, PluginPropertiesEditorProps } from './plugins/FieldPlugin';
+
+// Context-bound state management
+export { FormStoreProvider, useFormStore, createFormStore } from './store/FormStoreContext';

package/src/plugins/FieldPlugin.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { SchemaNode, ValidationRules } from '../store/FormStore';
+
+/**
+ * Props passed to every field component (built-in or plugin).
+ * Re-exported here for convenience when writing plugins.
+ */
+export interface FieldProps {
+    node: SchemaNode;
+    path?: string;
+    isEditing?: boolean;
+}
+
+/**
+ * Props passed to a plugin's custom properties editor.
+ */
+export interface PluginPropertiesEditorProps {
+    node: SchemaNode;
+    onChange: (key: string, value: any) => void;
+}
+
+/**
+ * Describes a full plugin that integrates into both
+ * the FormBuilder (constructor) and FormRenderer (viewer).
+ */
+export interface FieldPlugin {
+    /** Unique type identifier (e.g. 'rating', 'signature', 'address') */
+    type: string;
+
+    /** Display name shown in the Toolbox */
+    label: string;
+
+    /** Icon for the Toolbox (React element, e.g. MUI icon) */
+    icon?: React.ReactNode;
+
+    /** Category in the Toolbox: 'field' (default) or 'layout' */
+    category?: 'field' | 'layout';
+
+    /** Whether to show in Toolbox (default: true). Set to false for internal types. */
+    showInToolbox?: boolean;
+
+    /** Whether this type is a container that can hold children */
+    isContainer?: boolean;
+
+    /** Default props applied when a new node of this type is created */
+    defaultProps?: Record<string, any>;
+
+    /** React component used to render the field */
+    component: React.FC<FieldProps>;
+
+    /**
+     * Optional React component rendered in the Properties Panel
+     * when a node of this type is selected.
+     */
+    propertiesEditor?: React.FC<PluginPropertiesEditorProps>;
+
+    /**
+     * Optional custom validation function.
+     * Called after standard validation. Return an error message string
+     * or null if valid.
+     */
+    validate?: (value: any, rules: ValidationRules) => string | null;
+}

package/src/plugins/PluginRegistry.ts

@@ -0,0 +1,94 @@
+import type { FieldPlugin, FieldProps } from './FieldPlugin';
+import type React from 'react';
+
+/**
+ * Central plugin registry.
+ * Stores all registered plugins (both built-in and user-defined).
+ */
+const plugins: Map<string, FieldPlugin> = new Map();
+
+/**
+ * Built-in container types that are always recognized.
+ * User plugins can also set isContainer: true.
+ */
+const BUILT_IN_CONTAINERS = new Set([
+    'root', 'row', 'col', 'tabs', 'tab', 'paper', 'repeater', 'table', 'cell'
+]);
+
+/**
+ * Register a single plugin. If a plugin with the same type already exists,
+ * it will be overwritten (allowing user overrides of built-in types).
+ */
+export function registerPlugin(plugin: FieldPlugin): void {
+    plugins.set(plugin.type, plugin);
+}
+
+/**
+ * Register multiple plugins at once.
+ */
+export function registerPlugins(pluginList: FieldPlugin[]): void {
+    for (const plugin of pluginList) {
+        registerPlugin(plugin);
+    }
+}
+
+/**
+ * Get a plugin by its type identifier.
+ */
+export function getPlugin(type: string): FieldPlugin | undefined {
+    return plugins.get(type);
+}
+
+/**
+ * Get all registered plugins.
+ */
+export function getAllPlugins(): FieldPlugin[] {
+    return Array.from(plugins.values());
+}
+
+/**
+ * Get plugins for the Toolbox, filtered by category.
+ */
+export function getToolboxItems(category: 'field' | 'layout'): FieldPlugin[] {
+    return getAllPlugins().filter(p =>
+        (p.category || 'field') === category && p.showInToolbox !== false
+    );
+}
+
+/**
+ * Check if a type is a container (can hold children).
+ * Returns true for built-in containers and user plugins with isContainer: true.
+ */
+export function isContainerType(type: string): boolean {
+    if (BUILT_IN_CONTAINERS.has(type)) return true;
+    const plugin = getPlugin(type);
+    return plugin?.isContainer === true;
+}
+
+/**
+ * Backward-compatible bridge: register a bare component as a minimal plugin.
+ * Used by the legacy registerComponent() API.
+ */
+export function registerComponentAsPlugin(type: string, component: React.FC<FieldProps>): void {
+    // Only create a new plugin if one doesn't already exist for this type
+    // (prevents overwriting a full plugin with a bare component)
+    if (!plugins.has(type)) {
+        registerPlugin({
+            type,
+            label: type,
+            component,
+        });
+    } else {
+        // Update just the component on the existing plugin
+        const existing = plugins.get(type)!;
+        existing.component = component;
+    }
+}
+
+/**
+ * Get the React component for a given type.
+ * Backward-compatible replacement for the old getComponent().
+ */
+export function getComponentForType(type: string): React.FC<FieldProps> | undefined {
+    return plugins.get(type)?.component;
+}

package/src/store/FormStore.ts

@@ -1,26 +1,16 @@
 import { makeAutoObservable, toJS } from "mobx";
 import i18next from 'i18next';
+import { addDays, differenceInDays, parse, format, parseISO, isValid } from 'date-fns';
 import { transformAPIDataToSchema, transformSchemaToSubmission, transformDictionaryToOptions } from '../utils/apiTransformer';
+import { getPlugin, isContainerType } from '../plugins/PluginRegistry';
 
-export type NodeType =
-  | 'root'
-  | 'text'
-  | 'number'
-  | 'checkbox'
-  | 'select'
-  | 'row'
-  | 'col'
-  | 'tabs' // container for tabs
-  | 'tab'  // individual tab
-  | 'table'
-  | 'cell'
-  | 'paper'
-  | 'repeater'
-  | 'date'
-  | 'file'
-  | 'richtext'
-  | 'label'
-  | 'divider';
+/**
+ * Node type identifier. Open string type to support plugin-defined types.
+ * Built-in types: 'root', 'text', 'number', 'checkbox', 'select', 'row',
+ * 'col', 'tabs', 'tab', 'table', 'cell', 'paper', 'repeater', 'date',
+ * 'file', 'richtext', 'label', 'divider'.
+ */
+export type NodeType = string;
 
 export interface FieldOption {
   label: string;
@@ -101,6 +91,9 @@ export class FormStore {
   // Session data (user info, report IDs, etc.)
   sessionVariables: Record<string, any> = {};
 
+  // External constants for formulas and lists
+  externalConstants: Record<string, any> = {};
+
   // Pool of available API columns for mapping
   availableApiColumns: any[] = [];
 
@@ -113,6 +106,10 @@ export class FormStore {
     this.isEditMode = mode;
   }
 
+  setConstant(name: string, value: any) {
+    this.externalConstants[name] = value;
+  }
+
   // --- Actions ---
 
   selectNode(id: string | null) {
@@ -144,6 +141,7 @@ export class FormStore {
       const response = await fetch(`${this.apiBase}/schema/${formId}`);
       if (!response.ok) throw new Error("Failed to fetch schema");
       const schema = await response.json();
+      if (schema && !schema.id) schema.id = 'root'; // Enforce root ID
       this.rootNode = schema;
       this.applyDefaultValues();
     } catch (error) {
@@ -308,7 +306,7 @@ export class FormStore {
 
   // --- Validation ---
 
-  validateField(path: string, value: any, rules?: ValidationRules) {
+  validateField(path: string, value: any, rules?: ValidationRules, nodeType?: string) {
     if (!rules) return;
 
     let error: string | null = null;
@@ -369,6 +367,14 @@ export class FormStore {
       }
     }
 
+    // Plugin custom validation
+    if (!error && nodeType) {
+      const plugin = getPlugin(nodeType);
+      if (plugin?.validate) {
+        error = plugin.validate(value, rules);
+      }
+    }
+
     if (error) {
       this.errors[path] = error;
     } else {
@@ -420,7 +426,13 @@ export class FormStore {
           return JSON.stringify(new Date().toISOString());
         }
 
-        const value = this.getValue(fieldName);
+        let value = this.getValue(fieldName);
+
+        // Fallback to external constants if not found in form values
+        if (value === undefined && this.externalConstants[fieldName] !== undefined) {
+          value = this.externalConstants[fieldName];
+        }
+
         // If it's a number, return it raw. If it's a string, JSON.stringify it.
         // If undefined/null, return '0' for safety in math.
         if (value === undefined || value === null) return '0';
@@ -438,6 +450,40 @@ export class FormStore {
         ROUND: (v: any, p: number = 0) => {
           const factor = Math.pow(10, p);
           return Math.round(v * factor) / factor;
+        },
+        DATE_ADD: (date: any, days: any) => {
+          if (!date) return '';
+          const daysNum = Number(days) || 0;
+          let d = parseISO(date);
+          let isISO = true;
+          if (!isValid(d)) {
+            d = parse(date, 'dd-MM-yyyy', new Date());
+            isISO = false;
+          }
+          if (!isValid(d)) return date;
+          const result = addDays(d, daysNum);
+          return isISO ? result.toISOString() : format(result, 'dd-MM-yyyy');
+        },
+        DATE_DIFF: (date1: any, date2: any) => {
+          if (!date1 || !date2) return 0;
+          let d1 = parseISO(date1);
+          if (!isValid(d1)) d1 = parse(date1, 'dd-MM-yyyy', new Date());
+          let d2 = parseISO(date2);
+          if (!isValid(d2)) d2 = parse(date2, 'dd-MM-yyyy', new Date());
+          if (!isValid(d1) || !isValid(d2)) return 0;
+          return differenceInDays(d1, d2);
+        },
+        SWITCH: (val: any, ...args: any[]) => {
+          for (let i = 0; i < args.length - 1; i += 2) {
+            if (val === args[i]) return args[i + 1];
+          }
+          return args.length % 2 === 1 ? args[args.length - 1] : undefined;
+        },
+        IFS: (...args: any[]) => {
+          for (let i = 0; i < args.length - 1; i += 2) {
+            if (args[i]) return args[i + 1];
+          }
+          return args.length % 2 === 1 ? args[args.length - 1] : undefined;
         }
       };
 
@@ -648,8 +694,7 @@ export class FormStore {
     const overNode = this.findNode(this.rootNode, overId);
 
     // If we drop on a container, the parent is the container itself
-    const containerTypes: NodeType[] = ['root', 'row', 'col', 'tabs', 'tab', 'paper', 'repeater', 'table', 'cell'];
-    const isOverContainer = overNode && containerTypes.includes(overNode.type);
+    const isOverContainer = overNode && isContainerType(overNode.type);
     const overParent = isOverContainer ? overNode : this.findParent(this.rootNode, overId);
 
     if (!activeNode || !activeParent || !activeParent.children) {
@@ -730,7 +775,9 @@ export class FormStore {
     try {
       const stored = localStorage.getItem('form_schema');
       if (stored) {
-        this.rootNode = JSON.parse(stored);
+        const schema = JSON.parse(stored);
+        if (schema && !schema.id) schema.id = 'root'; // Enforce root ID
+        this.rootNode = schema;
         this.applyDefaultValues();
         console.log('Schema loaded from localStorage');
       }
@@ -771,6 +818,7 @@ export class FormStore {
   }
 
   findNode(root: SchemaNode, id: string): SchemaNode | null {
+    if (id === 'root' && (root === this.rootNode || root.id === 'root')) return root;
     if (root.id === id) return root;
     if (root.children) {
       for (const child of root.children) {

package/src/store/FormStoreContext.tsx

@@ -0,0 +1,66 @@
+import React, { createContext, useContext } from 'react';
+import { FormStore, formStore as defaultFormStore } from './FormStore';
+
+/**
+ * React Context for providing FormStore instances to the component tree.
+ * When null, components fall back to the default singleton.
+ */
+const FormStoreContext = createContext<FormStore | null>(null);
+
+/**
+ * Hook to get the current FormStore from context.
+ * Falls back to the default singleton if no provider is found.
+ */
+export function useFormStore(): FormStore {
+    const store = useContext(FormStoreContext);
+    return store ?? defaultFormStore;
+}
+
+/**
+ * Factory function to create a new isolated FormStore instance.
+ * Use this when you need multiple independent form instances.
+ *
+ * @example
+ * const myStore = createFormStore();
+ * <FormStoreProvider store={myStore}>
+ *   <FormBuilder />
+ * </FormStoreProvider>
+ */
+export function createFormStore(): FormStore {
+    return new FormStore();
+}
+
+interface FormStoreProviderProps {
+    /** FormStore instance to provide. If omitted, creates a new one. */
+    store?: FormStore;
+    children: React.ReactNode;
+}
+
+/**
+ * Provider component that supplies a FormStore instance to all descendant
+ * form components. Enables multiple independent form instances on the same page.
+ *
+ * @example
+ * // Using an external store
+ * const store = createFormStore();
+ * <FormStoreProvider store={store}>
+ *   <FormBuilder />
+ * </FormStoreProvider>
+ *
+ * @example
+ * // Auto-creates an internal store
+ * <FormStoreProvider>
+ *   <FormBuilder />
+ * </FormStoreProvider>
+ */
+export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({ store, children }) => {
+    const [internalStore] = React.useState(() => store ?? createFormStore());
+
+    return (
+        <FormStoreContext.Provider value={store ?? internalStore}>
+            {children}
+        </FormStoreContext.Provider>
+    );
+};
+
+export { FormStoreContext };