@stormlmd/form-builder 0.1.0

package/src/utils/apiTransformer.ts

@@ -0,0 +1,206 @@
+import type { SchemaNode, NodeType } from '../store/FormStore';
+import { generateId } from './idGenerator';
+
+export interface APIColumn {
+    id: number;
+    colName: string;
+    colType: string;
+    colTitle: string;
+    required: boolean;
+    [key: string]: any;
+}
+
+export interface APIColumnGroup {
+    id: number;
+    title: string;
+    columns: { id: number; colName: string }[];
+    [key: string]: any;
+}
+
+export interface APIResponse {
+    columns: APIColumn[];
+    rootColumnGroups: APIColumnGroup[];
+    [key: string]: any;
+}
+
+const mapType = (apiType: string): NodeType => {
+    switch (apiType) {
+        case 'STRING': return 'text';
+        case 'INT':
+        case 'FLOAT': return 'number';
+        case 'BOOLEAN': return 'checkbox';
+        case 'TIMESTAMP':
+        case 'TIMESTAMP_2': return 'date';
+        case 'FILE':
+        case 'FILE_SET': return 'file';
+        case 'REF': return 'select';
+        default: return 'text';
+    }
+};
+
+export const transformAPIDataToSchema = (apiData: APIResponse): SchemaNode => {
+    const { columns, rootColumnGroups } = apiData;
+
+    // Create a map for quick access to columns by ID
+    const columnMap = new Map<number, APIColumn>();
+    columns.forEach(col => columnMap.set(col.id, col));
+
+    // Track which columns are already placed in groups
+    const placedColumnIds = new Set<number>();
+
+    const transformColumn = (col: APIColumn): SchemaNode => {
+        const isRef = col.colType === 'REF';
+        const node: SchemaNode = {
+            id: col.id.toString(),
+            type: mapType(col.colType),
+            props: {
+                name: col.id.toString(), // Use API column ID for mapping
+                label: col.colTitle,
+                options: isRef ? [] : undefined,
+                enableAutocomplete: isRef ? true : undefined,
+                apiColumnName: col.colName // Keep the original name as meta
+            },
+            validation: {
+                required: col.required,
+                integer: col.colType === 'INT'
+            }
+        };
+
+        if (isRef && col.refForm && node.props) {
+            node.props.dictionaryInfo = {
+                tableName: col.refForm.tableName,
+                id: col.refForm.id,
+                mnemo: col.refForm.mnemo
+            };
+            // Also check for specific dictionary version mapping from apiData
+            const dicVersion = apiData.dicVersions?.find((dv: any) => dv.column.id === col.id);
+            if (dicVersion) {
+                node.props.dictionaryInfo.versionId = dicVersion.report.id;
+            }
+        }
+
+        return node;
+    };
+
+    const children: SchemaNode[] = [];
+
+    // 1. Process Groups
+    rootColumnGroups.forEach(group => {
+        const groupNode: SchemaNode = {
+            id: generateId('group'),
+            type: 'paper',
+            props: {
+                label: group.title,
+                padding: 2
+            },
+            children: []
+        };
+
+        group.columns.forEach(groupCol => {
+            const actualCol = columnMap.get(groupCol.id);
+            if (actualCol && actualCol.colType !== 'POSTGIS') {
+                groupNode.children?.push(transformColumn(actualCol));
+                placedColumnIds.add(actualCol.id);
+            }
+        });
+
+        if (groupNode.children && groupNode.children.length > 0) {
+            children.push(groupNode);
+        }
+    });
+
+    // 2. Process Remaining Columns (those not in any group)
+    columns.forEach(col => {
+        if (!placedColumnIds.has(col.id) && col.colType !== 'POSTGIS') {
+            children.push(transformColumn(col));
+        }
+    });
+
+    return {
+        id: 'root',
+        type: 'root',
+        children
+    };
+};
+
+export const transformSchemaToSubmission = (
+    rootNode: SchemaNode,
+    values: Record<string, any>,
+    sessionVars: Record<string, any> = {}
+): any => {
+    const fieldValues: Record<string, any> = {};
+
+    const traverse = (node: SchemaNode) => {
+        if (node.props?.name) {
+            // Internal path like "4094" (field name/id)
+            const val = getDeepValue(values, node.props.name);
+            if (val !== undefined) {
+                // Map internal value to the API-based key in the output (using id_поля / name)
+                fieldValues[node.props.name] = val;
+            }
+        }
+        node.children?.forEach(traverse);
+    };
+
+    traverse(rootNode);
+
+    // Submission format as requested
+    return {
+        reportId: sessionVars.reportId || Number(rootNode.id) || 0,
+        userGroupId: sessionVars.userGroupId || 1,
+        stageStatus: sessionVars.stageStatus || "T",
+        rows: [
+            {
+                id: sessionVars.rowId || 1,
+                leafProviderId: sessionVars.leafProviderId || 0,
+                values: fieldValues
+            }
+        ],
+        isFrontButton: true,
+        ...sessionVars.extraData // Allow merging other session data
+    };
+};
+
+// Helper for deep value access (same logic as in FormStore but standalone)
+function getDeepValue(obj: any, path: string) {
+    const normalizedPath = path.replace(/\[(\d+)\]/g, '.$1');
+    const keys = normalizedPath.split('.');
+    let current = obj;
+    for (const key of keys) {
+        if (current === undefined || current === null) return undefined;
+        current = current[key];
+    }
+    return current;
+}
+
+/**
+ * Transforms a dictionary response into Select/Autocomplete options.
+ * @param data The JSON response from the dictionary API
+ * @param labelKey Optional key to use for the label. If not provided, it tries to find the best candidate.
+ */
+export const transformDictionaryToOptions = (data: any, labelKey?: string): { label: string; value: any }[] => {
+    const content = data?.content || [];
+    if (!content.length) return [];
+
+    // If labelKey is not provided, try to find a candidate in the first item's values
+    let detectedLabelKey = labelKey;
+    if (!detectedLabelKey) {
+        const firstItem = content[0];
+        const values = firstItem.values || {};
+
+        // Strategy: 
+        // 1. Look for common names like 'name', 'title', 'label'
+        // 2. Look for the first key that has a string value (and isn't just a number-string)
+        // In the user's example, 4092 is "один", 4091 is "1". 4092 is the best label.
+        const keys = Object.keys(values);
+        detectedLabelKey = keys.find(k => {
+            const val = values[k];
+            return typeof val === 'string' && isNaN(Number(val));
+        }) || keys[0]; // fallback to first key
+    }
+
+    return content.map((item: any) => ({
+        label: item.values?.[detectedLabelKey!] || `Item ${item.id}`,
+        value: item.id
+    }));
+};

package/src/utils/idGenerator.ts

@@ -0,0 +1,3 @@
+export const generateId = (prefix: string = 'node'): string => {
+    return `${prefix}_${Math.random().toString(36).substr(2, 9)}`;
+};

package/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'FormBuilder',
+      fileName: 'form-builder',
+    },
+    rollupOptions: {
+      external: (id) => {
+        const externals = [
+          'react',
+          'react-dom',
+          'mobx',
+          'mobx-react-lite',
+          '@mui/material',
+          '@mui/icons-material',
+          '@emotion/react',
+          '@emotion/styled',
+          '@dnd-kit/core',
+          '@dnd-kit/sortable',
+          '@dnd-kit/utilities',
+          '@mui/x-date-pickers',
+          'date-fns',
+          'dayjs'
+        ];
+        // Match exact package name or subpaths
+        return externals.some(pkg => id === pkg || id.startsWith(pkg + '/'));
+      },
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          mobx: 'mobx',
+          'mobx-react-lite': 'mobxReactLite',
+          '@mui/material': 'MaterialUI',
+        },
+      },
+    },
+  },
+})