@stormlmd/form-builder 0.1.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stormlmd/form-builder",
-  "version": "0.1.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/FieldRegistry.ts

@@ -1,9 +1,12 @@
+/**
+ * FieldRegistry — backward-compatible facade over PluginRegistry.
+ *
+ * Existing code that imports registerComponent/getComponent from here
+ * will continue to work unchanged.
+ */
 import React from 'react';
 import type { SchemaNode } from '../store/FormStore';
-import { FormTable } from './layout/FormTable';
-import { FormTableCell } from './layout/FormTableCell';
-import { FormTabs } from './layout/FormTabs';
-import { FormTab } from './layout/FormTab';
+import { registerComponentAsPlugin, getComponentForType } from '../plugins/PluginRegistry';
 
 export interface FieldProps {
     node: SchemaNode;
@@ -13,22 +16,17 @@ export interface FieldProps {
 
 type ComponentType = React.FC<FieldProps>;
 
-const registry: Record<string, ComponentType> = {};
-
+/**
+ * @deprecated Use registerPlugin() for new code. This function is kept
+ * for backward compatibility and creates a minimal plugin entry.
+ */
 export const registerComponent = (type: string, component: ComponentType) => {
-    registry[type] = component;
+    registerComponentAsPlugin(type, component);
 };
 
-import { LabelField } from './fields/LabelField';
-import { FormDivider } from './layout/FormDivider';
-
+/**
+ * Get the React component for a given type.
+ */
 export const getComponent = (type: string): ComponentType | undefined => {
-    return registry[type];
+    return getComponentForType(type);
 };
-
-registerComponent('table', FormTable);
-registerComponent('cell', FormTableCell);
-registerComponent('label', LabelField);
-registerComponent('divider', FormDivider);
-registerComponent('tabs', FormTabs);
-registerComponent('tab', FormTab);

package/src/components/FormRenderer.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Typography, Tooltip } from '@mui/material';
-import { formStore } from '../store/FormStore';
+import { useFormStore } from '../store/FormStoreContext';
 import type { SchemaNode } from '../store/FormStore';
 import { getComponent } from './FieldRegistry';
+import { isContainerType } from '../plugins/PluginRegistry';
 import { FormChildrenRenderer } from './builder/FormChildrenRenderer';
 import { EditorWrapper } from './builder/EditorWrapper';
 import { SortableNode } from './builder/SortableNode';
@@ -27,6 +28,7 @@ export const DropIndicator = () => (
 );
 
 export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     // Evaluate condition if present (skip in editing mode)
     if (!isEditing && node.condition) {
         const conditionMet = formStore.evaluateCondition(node.condition);
@@ -76,7 +78,7 @@ export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path,
 
     const width = `${(colSpan / 12) * 100}%`;
 
-    const isContainer = ['root', 'row', 'col', 'tab', 'tabs', 'paper', 'table', 'cell', 'repeater'].includes(node.type);
+    const isContainer = isContainerType(node.type);
 
     const layoutSx = {
         width: width,

package/src/components/builder/EditorWrapper.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Box, IconButton } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { observer } from 'mobx-react-lite';
-import { formStore, type SchemaNode } from '../../store/FormStore';
+import { type SchemaNode } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 
 interface EditorWrapperProps {
     node: SchemaNode;
@@ -10,6 +11,7 @@ interface EditorWrapperProps {
 }
 
 export const EditorWrapper: React.FC<EditorWrapperProps> = observer(({ node, children }) => {
+    const formStore = useFormStore();
     const isSelected = formStore.selectedNodeId === node.id;
 
     const handleClick = (e: React.MouseEvent) => {

package/src/components/builder/FormBuilder.tsx

@@ -22,9 +22,11 @@ import {
     sortableKeyboardCoordinates
 } from '@dnd-kit/sortable';
 import {
-    formStore,
     type NodeType
 } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
+import { FormStoreProvider } from '../../store/FormStoreContext';
+import type { FormStore } from '../../store/FormStore';
 import { FormRenderer } from '../FormRenderer';
 import { Toolbox } from './Toolbox';
 import { IntegrationSettings } from './IntegrationSettings';
@@ -34,9 +36,12 @@ import { DroppableCanvas } from './DroppableCanvas';
 
 interface FormBuilderProps {
     onCancel?: () => void;
+    /** Optional FormStore instance. If omitted, the default singleton is used. */
+    store?: FormStore;
 }
 
-export const FormBuilder: React.FC<FormBuilderProps> = observer(({ onCancel }) => {
+const FormBuilderInner: React.FC<FormBuilderProps> = observer(({ onCancel }) => {
+    const formStore = useFormStore();
     const { t } = useTranslation();
     const [activeId, setActiveId] = React.useState<string | null>(null);
     const [activeData, setActiveData] = React.useState<any>(null);
@@ -311,3 +316,16 @@ export const FormBuilder: React.FC<FormBuilderProps> = observer(({ onCancel }) =
         </DndContext>
     );
 });
+
+/** Public FormBuilder component. Wraps in FormStoreProvider if store prop is provided. */
+export const FormBuilder: React.FC<FormBuilderProps> = ({ store, ...props }) => {
+    if (store) {
+        return (
+            <FormStoreProvider store={store}>
+                <FormBuilderInner {...props} />
+            </FormStoreProvider>
+        );
+    }
+    return <FormBuilderInner {...props} />;
+};
+

package/src/components/builder/FormChildrenRenderer.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, type SxProps, type Theme } from '@mui/material';
 import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
-import { formStore, type SchemaNode } from '../../store/FormStore';
+import type { SchemaNode } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import { FormRenderer, DropIndicator } from '../FormRenderer';
 
 interface FormChildrenRendererProps {
@@ -20,6 +21,7 @@ export const FormChildrenRenderer: React.FC<FormChildrenRendererProps> = observe
     layout = 'horizontal',
     path
 }) => {
+    const formStore = useFormStore();
     const childIds = children?.map(c => c.id) || [];
     const { dropIndicator } = formStore;
 

package/src/components/builder/FormulaHelp.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Typography,
+    Box,
+    IconButton,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Paper
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+interface FormulaHelpProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+export const FormulaHelp: React.FC<FormulaHelpProps> = ({ open, onClose }) => {
+
+    const examples = [
+        {
+            func: 'IF(cond, t, f)',
+            desc: 'Условие: если истина -> t, иначе -> f',
+            example: 'IF({{price}} > 100, "Высокая", "Низкая")'
+        },
+        {
+            func: 'SWITCH(v, v1, r1, ...)',
+            desc: 'Выбор по значению одного поля',
+            example: 'SWITCH({{type}}, "A", 10, "B", 20, 0)'
+        },
+        {
+            func: 'IFS(c1, r1, c2, r2, ...)',
+            desc: 'Цепочка условий (первое истинное)',
+            example: 'IFS({{score}} > 90, "A", {{score}} > 50, "B", "F")'
+        },
+        {
+            func: 'DATE_ADD(d, days)',
+            desc: 'Прибавить дни к дате',
+            example: 'DATE_ADD({{today}}, 7)'
+        },
+        {
+            func: 'DATE_DIFF(d1, d2)',
+            desc: 'Разница между датами в днях',
+            example: 'DATE_DIFF({{today}}, {{start_date}})'
+        },
+        {
+            func: 'ROUND(v, p)',
+            desc: 'Округление до p знаков',
+            example: 'ROUND({{price}} * 1.2, 2)'
+        },
+        {
+            func: 'AND/OR/NOT',
+            desc: 'Логические операторы',
+            example: 'AND({{active}}, NOT({{hidden}}))'
+        }
+    ];
+
+    return (
+        <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+            <DialogTitle sx={{ m: 0, p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <Typography variant="h6">Подсказка по формулам</Typography>
+                <IconButton onClick={onClose} size="small">
+                    <CloseIcon />
+                </IconButton>
+            </DialogTitle>
+            <DialogContent dividers>
+                <Typography variant="body2" gutterBottom color="text.secondary">
+                    Используйте <code>{`{{имя_поля}}`}</code> для доступа к значениям. Ниже приведены популярные функции:
+                </Typography>
+
+                <TableContainer component={Paper} variant="outlined" sx={{ mt: 2 }}>
+                    <Table size="small">
+                        <TableHead>
+                            <TableRow sx={{ bgcolor: 'action.hover' }}>
+                                <TableCell><strong>Функция</strong></TableCell>
+                                <TableCell><strong>Описание</strong></TableCell>
+                                <TableCell><strong>Пример</strong></TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {examples.map((item, index) => (
+                                <TableRow key={index}>
+                                    <TableCell sx={{ fontFamily: 'monospace', fontWeight: 'bold' }}>{item.func}</TableCell>
+                                    <TableCell>{item.desc}</TableCell>
+                                    <TableCell sx={{ fontFamily: 'monospace', fontSize: '0.8rem', color: 'primary.main' }}>
+                                        {item.example}
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+
+                <Box mt={3}>
+                    <Typography variant="subtitle2" gutterBottom>Полезные советы:</Typography>
+                    <Typography variant="body2" component="ul" sx={{ pl: 2 }}>
+                        <li>Пустые поля автоматически считаются <code>0</code> в математике.</li>
+                        <li>Для строк используйте кавычки: <code>"Текст"</code>.</li>
+                        <li><code>{`{{today}}`}</code> - текущая дата в формате DD-MM-YYYY.</li>
+                    </Typography>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="primary">Закрыть</Button>
+            </DialogActions>
+        </Dialog>
+    );
+};

package/src/components/builder/IntegrationSettings.tsx

@@ -9,9 +9,11 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import SyncIcon from '@mui/icons-material/Sync';
 import { observer } from 'mobx-react-lite';
-import { formStore, type APIIntegration } from '../../store/FormStore';
+import type { APIIntegration } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 
 export const IntegrationSettings: React.FC = observer(() => {
+    const formStore = useFormStore();
     const [open, setOpen] = useState(false);
     const [currentIntegration, setCurrentIntegration] = useState<Partial<APIIntegration>>({
         method: 'POST',

package/src/components/builder/OptionsEditor.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Box, TextField, IconButton, Button, Typography } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import { useTranslation } from 'react-i18next';
+
+interface Option {
+    label: string;
+    value: string;
+}
+
+interface OptionsEditorProps {
+    options: Option[];
+    onChange: (options: Option[]) => void;
+    disabled?: boolean;
+}
+
+export const OptionsEditor: React.FC<OptionsEditorProps> = ({ options, onChange, disabled }) => {
+    const { t } = useTranslation();
+
+    const handleAddOption = () => {
+        const newOptions = [...options, { label: `Option ${options.length + 1}`, value: `opt${options.length + 1}` }];
+        onChange(newOptions);
+    };
+
+    const handleRemoveOption = (index: number) => {
+        const newOptions = options.filter((_, i) => i !== index);
+        onChange(newOptions);
+    };
+
+    const handleUpdateOption = (index: number, key: keyof Option, value: string) => {
+        const newOptions = options.map((opt, i) => i === index ? { ...opt, [key]: value } : opt);
+        onChange(newOptions);
+    };
+
+    if (disabled) {
+        return (
+            <Box>
+                <Typography variant="body2" color="text.secondary">
+                    {t('properties.selectOptionsManagedByAPI') || "Options are managed by API integration"}
+                </Typography>
+                <Box sx={{ mt: 1, opacity: 0.7 }}>
+                    {options.map((opt, i) => (
+                        <Typography key={i} variant="caption" display="block">• {opt.label} ({opt.value})</Typography>
+                    ))}
+                </Box>
+            </Box>
+        );
+    }
+
+    return (
+        <Box>
+            <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
+                {t('properties.selectOptions')}
+            </Typography>
+            <Box display="flex" flexDirection="column" gap={1}>
+                {options.map((opt, index) => (
+                    <Box key={index} display="flex" gap={1} alignItems="center">
+                        <TextField
+                            label={t('properties.optionLabel')}
+                            size="small"
+                            value={opt.label}
+                            onChange={(e) => handleUpdateOption(index, 'label', e.target.value)}
+                            sx={{ flexGrow: 1 }}
+                        />
+                        <TextField
+                            label={t('properties.optionValue')}
+                            size="small"
+                            value={opt.value}
+                            onChange={(e) => handleUpdateOption(index, 'value', e.target.value)}
+                            sx={{ flexGrow: 1 }}
+                        />
+                        <IconButton size="small" color="error" onClick={() => handleRemoveOption(index)}>
+                            <DeleteIcon fontSize="small" />
+                        </IconButton>
+                    </Box>
+                ))}
+                <Button
+                    startIcon={<AddIcon />}
+                    onClick={handleAddOption}
+                    sx={{ mt: 1, alignSelf: 'flex-start' }}
+                    variant="outlined"
+                    size="small"
+                >
+                    {t('properties.addOption')}
+                </Button>
+            </Box>
+        </Box>
+    );
+};

package/src/components/builder/PropertiesModal.tsx

@@ -13,7 +13,7 @@ import {
 } from '@mui/material';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import CloseIcon from '@mui/icons-material/Close';
 import { PropertiesPanel } from './PropertiesPanel'; // We reuse the inner content for now
 // Actually PropertiesPanel has its own layout, we should extract the content 
@@ -23,6 +23,7 @@ import { PropertiesPanel } from './PropertiesPanel'; // We reuse the inner conte
 // Let's modify PropertiesPanel to accept a "mode" or just use it as content.
 
 export const PropertiesModal: React.FC = observer(() => {
+    const formStore = useFormStore();
     const { t } = useTranslation();
     const theme = useTheme();
     const fullScreen = useMediaQuery(theme.breakpoints.down('md'));