@stormlmd/form-builder 0.1.0

package/src/store/FormStore.ts

@@ -0,0 +1,811 @@
+import { makeAutoObservable, toJS } from "mobx";
+import i18next from 'i18next';
+import { transformAPIDataToSchema, transformSchemaToSubmission, transformDictionaryToOptions } from '../utils/apiTransformer';
+
+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';
+
+export interface FieldOption {
+  label: string;
+  value: string | number;
+}
+
+export interface ExternalField {
+  id: string;
+  label: string;
+  type: string;
+}
+
+export interface APIIntegration {
+  id: string;
+  name: string;
+  fetchFieldsURL: string;
+  submitURL: string;
+  method: 'POST' | 'PUT';
+  headers?: Record<string, string>;
+  availableFields: ExternalField[];
+}
+
+export interface ValidationRules {
+  required?: boolean;
+  min?: number | string;
+  max?: number | string;
+  integer?: boolean;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  email?: boolean;
+}
+
+export interface Condition {
+  field: string;
+  op: 'eq' | 'neq' | 'gt' | 'lt' | 'contains';
+  value: any;
+}
+
+export interface SchemaNode {
+  id: string;
+  type: NodeType;
+  props?: Record<string, any>; // generic props: label, name, required, etc.
+  validation?: ValidationRules;
+  condition?: Condition;
+  calculation?: { formula: string };
+  apiMapping?: string; // ID of the external field
+  defaultValue?: any;
+  children?: SchemaNode[];
+}
+
+export interface RootNodeProps {
+  integrations?: APIIntegration[];
+}
+
+export class FormStore {
+  rootNode: SchemaNode = {
+    id: 'root',
+    type: 'root',
+    children: []
+  };
+
+  selectedNodeId: string | null = null;
+  isPropertiesModalOpen: boolean = false;
+
+  // Store form values separately from schema
+  values: Record<string, any> = {};
+
+  // Store validation errors
+  errors: Record<string, string> = {};
+
+  // Drag and drop state
+  dropIndicator: { parentId: string; index: number } | null = null;
+
+  isFetchingExternalFields: boolean = false;
+  isEditMode: boolean = true;
+
+  // Session data (user info, report IDs, etc.)
+  sessionVariables: Record<string, any> = {};
+
+  // Pool of available API columns for mapping
+  availableApiColumns: any[] = [];
+
+  constructor() {
+    makeAutoObservable(this);
+    this.loadFromStorage(); // Load from storage on init
+  }
+
+  setEditMode(mode: boolean) {
+    this.isEditMode = mode;
+  }
+
+  // --- Actions ---
+
+  selectNode(id: string | null) {
+    this.selectedNodeId = id;
+    // Do not auto-open modal
+  }
+
+  openPropertiesModal(id?: string) {
+    if (id) {
+      this.selectedNodeId = id;
+    }
+    this.isPropertiesModalOpen = true;
+  }
+
+  closePropertiesModal() {
+    this.isPropertiesModalOpen = false;
+  }
+
+  setDropIndicator(indicator: { parentId: string; index: number } | null) {
+    this.dropIndicator = indicator;
+  }
+
+  // --- API Integration ---
+
+  private apiBase = "http://localhost:8000/api";
+
+  async fetchSchema(formId: string = "default") {
+    try {
+      const response = await fetch(`${this.apiBase}/schema/${formId}`);
+      if (!response.ok) throw new Error("Failed to fetch schema");
+      const schema = await response.json();
+      this.rootNode = schema;
+      this.applyDefaultValues();
+    } catch (error) {
+      console.error("Error fetching schema:", error);
+    }
+  }
+
+  importFromAPIResponse(data: any) {
+    try {
+      const newSchema = transformAPIDataToSchema(data);
+      this.rootNode = newSchema;
+      this.selectedNodeId = null;
+      this.values = {};
+      this.errors = {};
+
+      // Save original report info to session variables if available
+      this.setSessionVariables({
+        reportId: data.id,
+        userGroupId: data.userGroupId || 1,
+        stageStatus: data.stageStatus || "T"
+      });
+
+      // Save pool of available columns for mapping in PropertiesPanel
+      this.availableApiColumns = data.columns || [];
+
+      this.applyDefaultValues();
+      console.log("Schema successfully imported from API response");
+    } catch (error) {
+      console.error("Error importing from API response:", error);
+    }
+  }
+
+  setSessionVariables(vars: Record<string, any>) {
+    this.sessionVariables = { ...this.sessionVariables, ...vars };
+  }
+
+  getSubmissionData() {
+    return transformSchemaToSubmission(
+      this.rootNode,
+      toJS(this.values),
+      toJS(this.sessionVariables)
+    );
+  }
+
+  importDictionaryData(nodeId: string, data: any, labelKey?: string) {
+    const node = this.findNode(this.rootNode, nodeId);
+    if (node) {
+      const options = transformDictionaryToOptions(data, labelKey);
+      if (!node.props) node.props = {};
+      node.props.options = options;
+    }
+  }
+
+  async saveSchema(formId: string = "default") {
+    try {
+      const response = await fetch(`${this.apiBase}/schema/${formId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(toJS(this.rootNode))
+      });
+      if (!response.ok) throw new Error("Failed to save schema");
+      console.log("Schema saved successfully");
+    } catch (error) {
+      console.error("Error saving schema:", error);
+    }
+  }
+
+  async submitForm(formId: string = "default") {
+    try {
+      const response = await fetch(`${this.apiBase}/submit/${formId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(this.values)
+      });
+      if (!response.ok) throw new Error("Failed to submit form");
+      const result = await response.json();
+      console.log("Form submitted successfully:", result);
+      return result;
+    } catch (error) {
+      console.error("Error submitting form:", error);
+      throw error;
+    }
+  }
+
+  // --- External API Integration Actions ---
+
+  async fetchExternalFields(integrationId: string) {
+    const integration = this.rootNode.props?.integrations?.find((i: APIIntegration) => i.id === integrationId);
+    if (!integration || !integration.fetchFieldsURL) return;
+
+    this.isFetchingExternalFields = true;
+    try {
+      const response = await fetch(integration.fetchFieldsURL);
+      if (!response.ok) throw new Error("Failed to fetch external fields");
+      const fields = await response.json();
+      integration.availableFields = fields;
+    } catch (error) {
+      console.error("Error fetching external fields:", error);
+    } finally {
+      this.isFetchingExternalFields = false;
+    }
+  }
+
+  async submitToIntegration(integrationId: string) {
+    const integration = this.rootNode.props?.integrations?.find((i: APIIntegration) => i.id === integrationId);
+    if (!integration || !integration.submitURL) return;
+
+    const mappedData = this.prepareMappedData();
+
+    try {
+      const response = await fetch(integration.submitURL, {
+        method: integration.method,
+        headers: {
+          "Content-Type": "application/json",
+          ...integration.headers
+        },
+        body: JSON.stringify(mappedData)
+      });
+      if (!response.ok) throw new Error("Failed to submit to integration");
+      const result = await response.json();
+      console.log(`Submitted to ${integration.name}:`, result);
+      return result;
+    } catch (error) {
+      console.error(`Error submitting to ${integration.name}:`, error);
+      throw error;
+    }
+  }
+
+  private prepareMappedData(): Record<string, any> {
+    const result: Record<string, any> = {};
+    const traverse = (node: SchemaNode) => {
+      if (node.props?.name && node.apiMapping) {
+        const val = this.getValue(node.props.name);
+        if (val !== undefined) {
+          result[node.apiMapping] = val;
+        }
+      }
+      node.children?.forEach(traverse);
+    };
+    traverse(this.rootNode);
+    return result;
+  }
+
+  addIntegration(integration: APIIntegration) {
+    if (!this.rootNode.props) this.rootNode.props = {};
+    if (!this.rootNode.props.integrations) this.rootNode.props.integrations = [];
+    this.rootNode.props.integrations.push(integration);
+  }
+
+  updateIntegration(id: string, updates: Partial<APIIntegration>) {
+    const integration = this.rootNode.props?.integrations?.find((i: APIIntegration) => i.id === id);
+    if (integration) {
+      Object.assign(integration, updates);
+    }
+  }
+
+  removeIntegration(id: string) {
+    if (this.rootNode.props?.integrations) {
+      this.rootNode.props.integrations = this.rootNode.props.integrations.filter((i: APIIntegration) => i.id !== id);
+    }
+  }
+
+  // --- Validation ---
+
+  validateField(path: string, value: any, rules?: ValidationRules) {
+    if (!rules) return;
+
+    let error: string | null = null;
+
+    if (rules.required) {
+      if (value === undefined || value === null || value === '') {
+        error = i18next.t('validation.required');
+      }
+    }
+
+    if (!error && rules.integer && typeof value === 'number') {
+      if (!Number.isInteger(value)) {
+        error = i18next.t('validation.integer') || 'Must be an integer';
+      }
+    }
+
+    if (!error && rules.min !== undefined && typeof value === 'number') {
+      const minVal = typeof rules.min === 'string' ? this.evaluateFormula(rules.min) : rules.min;
+      if (typeof minVal === 'number' && value < minVal) {
+        error = i18next.t('validation.min', { min: minVal });
+      }
+    }
+
+    if (!error && rules.max !== undefined && typeof value === 'number') {
+      const maxVal = typeof rules.max === 'string' ? this.evaluateFormula(rules.max) : rules.max;
+      if (typeof maxVal === 'number' && value > maxVal) {
+        error = i18next.t('validation.max', { max: maxVal });
+      }
+    }
+
+    if (!error && (typeof rules.minLength === 'number') && typeof value === 'string') {
+      if (value.length < rules.minLength) {
+        error = i18next.t('validation.minLength', { min: rules.minLength });
+      }
+    }
+
+    if (!error && (typeof rules.maxLength === 'number') && typeof value === 'string') {
+      if (value.length > rules.maxLength) {
+        error = i18next.t('validation.maxLength', { max: rules.maxLength });
+      }
+    }
+
+    if (!error && rules.email && typeof value === 'string') {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      if (value && !emailRegex.test(value)) {
+        error = i18next.t('validation.email');
+      }
+    }
+
+    if (!error && rules.pattern && typeof value === 'string') {
+      try {
+        const regex = new RegExp(rules.pattern);
+        if (!regex.test(value)) {
+          error = i18next.t('validation.pattern');
+        }
+      } catch (e) {
+        console.warn('Invalid regex pattern', rules.pattern, e);
+      }
+    }
+
+    if (error) {
+      this.errors[path] = error;
+    } else {
+      delete this.errors[path];
+    }
+  }
+
+  evaluateCondition(condition: Condition): boolean {
+    const fieldValue = this.getValue(condition.field);
+
+    switch (condition.op) {
+      case 'eq':
+        return fieldValue === condition.value;
+      case 'neq':
+        return fieldValue !== condition.value;
+      case 'gt':
+        return typeof fieldValue === 'number' && typeof condition.value === 'number'
+          ? fieldValue > condition.value
+          : false;
+      case 'lt':
+        return typeof fieldValue === 'number' && typeof condition.value === 'number'
+          ? fieldValue < condition.value
+          : false;
+      case 'contains':
+        if (typeof fieldValue === 'string' && typeof condition.value === 'string') {
+          return fieldValue.includes(condition.value);
+        }
+        if (Array.isArray(fieldValue)) {
+          return fieldValue.includes(condition.value);
+        }
+        return false;
+      default:
+        return true;
+    }
+  }
+
+  evaluateFormula(formula: string): any {
+    try {
+      // Replace {{fieldName}} with actual values
+      const evaluated = formula.replace(/\{\{([^}]+)\}\}/g, (_, fieldName) => {
+        if (fieldName === 'today') {
+          const d = new Date();
+          const day = String(d.getDate()).padStart(2, '0');
+          const month = String(d.getMonth() + 1).padStart(2, '0');
+          const year = d.getFullYear();
+          return JSON.stringify(`${day}-${month}-${year}`);
+        }
+        if (fieldName === 'now') {
+          return JSON.stringify(new Date().toISOString());
+        }
+
+        const value = this.getValue(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';
+        if (typeof value === 'string') return JSON.stringify(value);
+        return value.toString();
+      });
+
+      // Injected helper functions
+      const helpers = {
+        IF: (c: any, t: any, f: any) => (c ? t : f),
+        AND: (...args: any[]) => args.every(Boolean),
+        OR: (...args: any[]) => args.some(Boolean),
+        NOT: (v: any) => !v,
+        ABS: (v: any) => Math.abs(v),
+        ROUND: (v: any, p: number = 0) => {
+          const factor = Math.pow(10, p);
+          return Math.round(v * factor) / factor;
+        }
+      };
+
+      // Use a basic eval-like mechanism for simple math/logic
+      const helperKeys = Object.keys(helpers);
+      const helperVals = Object.values(helpers);
+      return new Function(...helperKeys, `return ${evaluated}`)(...helperVals);
+    } catch (e) {
+      console.warn('Formula evaluation failed:', formula, e);
+      return undefined;
+    }
+  }
+
+  runCalculations(node: SchemaNode = this.rootNode) {
+    if (node.calculation?.formula && node.props?.name) {
+      const newValue = this.evaluateFormula(node.calculation.formula);
+      if (newValue !== undefined) {
+        this.setDeepValue(this.values, node.props.name, newValue);
+      }
+    }
+
+    if (node.children) {
+      for (const child of node.children) {
+        this.runCalculations(child);
+      }
+    }
+  }
+
+  addNode(parentId: string, node: SchemaNode, index?: number) {
+    const parent = this.findNode(this.rootNode, parentId);
+    console.log('FormStore.addNode:', { parentId, node, index });
+    if (parent) {
+      const children = parent.children ? [...parent.children] : [];
+      if (index !== undefined && index >= 0 && index <= children.length) {
+        children.splice(index, 0, node);
+      } else {
+        children.push(node);
+      }
+      parent.children = children;
+
+      // Initialize if has default value
+      if (node.defaultValue !== undefined && node.props?.name) {
+        if (this.getValue(node.props.name) === undefined) {
+          this.updateValue(node.props.name, node.defaultValue);
+        }
+      }
+    }
+  }
+
+  removeNode(id: string) {
+    this.removeNodeRecursive(this.rootNode, id);
+    if (this.selectedNodeId === id) {
+      this.selectedNodeId = null;
+    }
+  }
+
+  updateNodeProps(id: string, props: Record<string, any>) {
+    const node = this.findNode(this.rootNode, id);
+    if (node) {
+      node.props = { ...node.props, ...props };
+    }
+  }
+
+  updateNodeValidation(id: string, validation: ValidationRules) {
+    const node = this.findNode(this.rootNode, id);
+    if (node) {
+      node.validation = { ...node.validation, ...validation };
+    }
+  }
+
+  updateNodeCondition(id: string, condition: Condition | undefined) {
+    const node = this.findNode(this.rootNode, id);
+    if (node) {
+      node.condition = condition;
+    }
+  }
+
+  updateNodeCalculation(id: string, calculation: { formula: string } | undefined) {
+    const node = this.findNode(this.rootNode, id);
+    if (node) {
+      node.calculation = calculation;
+      this.runCalculations();
+    }
+  }
+
+  updateNode(id: string, updates: Partial<SchemaNode>) {
+    const node = this.findNode(this.rootNode, id);
+    if (node) {
+      Object.assign(node, updates);
+    }
+  }
+
+  resizeTable(tableId: string, newRows: number, newCols: number) {
+    const node = this.findNode(this.rootNode, tableId);
+    if (!node || node.type !== 'table') return;
+
+    if (!node.children) node.children = [];
+    const currentCells = node.children;
+
+    // We assume cells are stored in row-major order: (0,0), (0,1), ... (1,0), (1,1) ...
+    // But children list is just a flat list. 
+    // Ideally we re-construct the list to match new dimensions, preserving existing cells where possible.
+
+    const oldCols = node.props?.cols || 1;
+    // const oldRows = Math.ceil(currentCells.length / oldCols);
+
+    const newCells: SchemaNode[] = [];
+
+    // Helper to generate a basic cell
+    const createCell = () => ({
+      id: `cell-${Math.random().toString(36).substr(2, 9)}`,
+      type: 'cell' as NodeType,
+      children: []
+    });
+
+    for (let r = 0; r < newRows; r++) {
+      for (let c = 0; c < newCols; c++) {
+        // Try to find if a cell existed at this position (r, c)
+        // Original index = r * oldCols + c
+        if (c < oldCols && r * oldCols + c < currentCells.length) {
+          // Check bounds. If we are within the old width, we might map to an existing cell
+          const oldIndex = r * oldCols + c;
+          // Ensure we don't pick undefined if shrinking rows
+          if (currentCells[oldIndex]) {
+            newCells.push(currentCells[oldIndex]);
+          } else {
+            newCells.push(createCell());
+          }
+        } else {
+          // New column or new row
+          newCells.push(createCell());
+        }
+      }
+    }
+
+    node.children = newCells;
+    this.updateNodeProps(tableId, { rows: newRows, cols: newCols });
+  }
+
+  updateValue(path: string, value: any) {
+    this.setDeepValue(this.values, path, value);
+    this.applyDefaultValues();
+    this.runCalculations();
+  }
+
+  updateField(path: string, value: any, rules?: ValidationRules) {
+    this.updateValue(path, value);
+    if (rules) {
+      this.validateField(path, value, rules);
+    }
+  }
+
+  getValue(path: string) {
+    // Handle bracket notation like addresses[0].city
+    const normalizedPath = path.replace(/\[(\d+)\]/g, '.$1');
+    const keys = normalizedPath.split('.');
+    let current: any = this.values;
+
+    for (const key of keys) {
+      if (current === undefined || current === null) return undefined;
+      current = current[key];
+    }
+    return current;
+  }
+
+  private setDeepValue(obj: any, path: string, value: any) {
+    const normalizedPath = path.replace(/\[(\d+)\]/g, '.$1');
+    const keys = normalizedPath.split('.');
+    let current = obj;
+
+    for (let i = 0; i < keys.length - 1; i++) {
+      const key = keys[i];
+      const nextKey = keys[i + 1];
+
+      // If property doesn't exist
+      if (current[key] === undefined) {
+        // If next key is a number, create an array, otherwise an object
+        current[key] = !isNaN(Number(nextKey)) ? [] : {};
+      }
+
+      current = current[key];
+    }
+
+    current[keys[keys.length - 1]] = value;
+  }
+
+  get selectedNode() {
+    return this.selectedNodeId ? this.findNode(this.rootNode, this.selectedNodeId) : null;
+  }
+
+  // --- Helpers ---
+
+  getAllFieldNames(root: SchemaNode = this.rootNode, names: string[] = []): string[] {
+    if (root.props?.name) {
+      names.push(root.props.name);
+    }
+    if (root.children) {
+      for (const child of root.children) {
+        this.getAllFieldNames(child, names);
+      }
+    }
+    return Array.from(new Set(names)); // Return unique names
+  }
+
+  moveNode(activeId: string, overId: string) {
+    const activeNode = this.findNode(this.rootNode, activeId);
+    const activeParent = this.findParent(this.rootNode, activeId);
+    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 overParent = isOverContainer ? overNode : this.findParent(this.rootNode, overId);
+
+    if (!activeNode || !activeParent || !activeParent.children) {
+      console.warn('MoveNode: Active node or parent not found');
+      return;
+    }
+
+    if (!overParent || !overParent.children) {
+      console.warn('MoveNode: Target parent not found');
+      return;
+    }
+
+    // Same parent reordering
+    if (activeParent.id === overParent.id && !isOverContainer) {
+      const oldIndex = activeParent.children.findIndex(c => c.id === activeId);
+      const newIndex = overParent.children.findIndex(c => c.id === overId);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newChildren = [...activeParent.children];
+        const [moved] = newChildren.splice(oldIndex, 1);
+        newChildren.splice(newIndex, 0, moved);
+        activeParent.children = newChildren;
+        console.log(`Reordered in parent ${activeParent.id}: ${oldIndex} -> ${newIndex}`);
+      }
+      return;
+    }
+
+    // Cross-parent move or drop on container
+    const oldIndex = activeParent.children.findIndex(c => c.id === activeId);
+    if (oldIndex === -1) return;
+
+    const newChildrenActive = [...activeParent.children];
+    const [movedNode] = newChildrenActive.splice(oldIndex, 1);
+    activeParent.children = newChildrenActive;
+
+    if (isOverContainer && overNode) {
+      // Drop directly into a container
+      const newChildrenOver = overNode.children ? [...overNode.children] : [];
+      newChildrenOver.push(movedNode);
+      overNode.children = newChildrenOver;
+      console.log(`Moved to container ${overNode.id}`);
+    } else if (overParent) {
+      // Drop onto a sibling in a different parent
+      const newIndex = overParent.children.findIndex(c => c.id === overId);
+      const newChildrenOver = [...overParent.children];
+      if (newIndex !== -1) {
+        newChildrenOver.splice(newIndex, 0, movedNode);
+      } else {
+        newChildrenOver.push(movedNode);
+      }
+      overParent.children = newChildrenOver;
+      console.log(`Moved to parent ${overParent.id} at index ${newIndex}`);
+    }
+  }
+
+  // --- Persistence ---
+
+  getAllNodes(): SchemaNode[] {
+    const nodes: SchemaNode[] = [];
+    const traverse = (node: SchemaNode) => {
+      nodes.push(node);
+      node.children?.forEach(traverse);
+    };
+    traverse(this.rootNode);
+    return nodes;
+  }
+
+  saveToStorage() {
+    try {
+      localStorage.setItem('form_schema', JSON.stringify(this.rootNode));
+      console.log('Schema saved to localStorage');
+    } catch (e) {
+      console.error('Failed to save schema', e);
+    }
+  }
+
+  loadFromStorage() {
+    try {
+      const stored = localStorage.getItem('form_schema');
+      if (stored) {
+        this.rootNode = JSON.parse(stored);
+        this.applyDefaultValues();
+        console.log('Schema loaded from localStorage');
+      }
+    } catch (e) {
+      console.error('Failed to load schema', e);
+    }
+  }
+
+  // --- Helpers ---
+
+  applyDefaultValues(node: SchemaNode = this.rootNode) {
+    if (node.defaultValue !== undefined && node.props?.name) {
+      const currentValue = this.getValue(node.props.name);
+      // Apply if value is missing OR if it's a formula (to keep it reactive)
+      // Note: This might overwrite manual input if the user cleared the field.
+      // But usually formulas in default values are expected to be reactive until a hard value is set.
+      const isFormula = typeof node.defaultValue === 'string' && node.defaultValue.includes('{{');
+
+      if (currentValue === undefined || currentValue === null || currentValue === '' || isFormula) {
+        let val = node.defaultValue;
+        if (isFormula) {
+          val = this.evaluateFormula(val);
+        }
+
+        // Only update if value actually changed to avoid infinite loops
+        if (val !== currentValue) {
+          this.setDeepValue(this.values, node.props.name, val);
+          // We use setDeepValue directly here to avoid re-triggering this.updateValue -> infinite loop
+        }
+      }
+    }
+
+    if (node.children) {
+      for (const child of node.children) {
+        this.applyDefaultValues(child);
+      }
+    }
+  }
+
+  findNode(root: SchemaNode, id: string): SchemaNode | null {
+    if (root.id === id) return root;
+    if (root.children) {
+      for (const child of root.children) {
+        const found = this.findNode(child, id);
+        if (found) return found;
+      }
+    }
+    return null;
+  }
+
+  findParent(root: SchemaNode, childId: string): SchemaNode | null {
+    if (!root.children) return null;
+
+    for (const child of root.children) {
+      if (child.id === childId) return root;
+      const found = this.findParent(child, childId);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  private removeNodeRecursive(parent: SchemaNode, id: string): boolean {
+    if (!parent.children) return false;
+
+    const index = parent.children.findIndex(c => c.id === id);
+    if (index !== -1) {
+      parent.children.splice(index, 1);
+      return true;
+    }
+
+    for (const child of parent.children) {
+      if (this.removeNodeRecursive(child, id)) return true;
+    }
+    return false;
+  }
+}
+
+export const formStore = new FormStore();