@stormlmd/form-builder 0.1.0

package/src/components/builder/EditorWrapper.tsx

@@ -0,0 +1,87 @@
+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';
+
+interface EditorWrapperProps {
+    node: SchemaNode;
+    children: React.ReactNode;
+}
+
+export const EditorWrapper: React.FC<EditorWrapperProps> = observer(({ node, children }) => {
+    const isSelected = formStore.selectedNodeId === node.id;
+
+    const handleClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        formStore.selectNode(node.id);
+    };
+
+    return (
+        <Box
+            onClick={handleClick}
+            onDoubleClick={(e) => {
+                e.stopPropagation();
+                formStore.openPropertiesModal(node.id);
+            }}
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1,
+                height: '100%',
+                position: 'relative',
+                outline: isSelected ? '2px solid #1976d2' : '1px dashed transparent',
+                outlineOffset: '-2px', // Inset outline to avoid overflow issues
+                cursor: 'pointer',
+                '&:hover': {
+                    outline: !isSelected ? '1px dashed #999' : '2px solid #1976d2',
+                    backgroundColor: !isSelected ? 'rgba(0, 0, 0, 0.02)' : undefined,
+                },
+                transition: 'all 0.2s',
+            }}
+        >
+            {isSelected && (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        top: -24,
+                        left: -2,
+                        backgroundColor: '#1976d2',
+                        color: 'white',
+                        padding: '2px 8px',
+                        borderRadius: '4px 4px 0 0',
+                        fontSize: '0.75rem',
+                        fontWeight: 'bold',
+                        zIndex: 10,
+                        textTransform: 'uppercase',
+                        boxShadow: 1
+                    }}
+                >
+                    {node.type}
+                </Box>
+            )}
+            {isSelected && (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        top: -15,
+                        right: -10,
+                        zIndex: 11,
+                        backgroundColor: 'background.paper',
+                        borderRadius: '50%',
+                        boxShadow: 2
+                    }}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        formStore.openPropertiesModal(node.id);
+                    }}
+                >
+                    <IconButton size="small" color="primary">
+                        <SettingsIcon fontSize="small" />
+                    </IconButton>
+                </Box>
+            )}
+            {children}
+        </Box>
+    );
+});

package/src/components/builder/FormBuilder.tsx

@@ -0,0 +1,313 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, Paper, Typography, AppBar, Toolbar, Button, Tabs, Tab } from '@mui/material';
+import SettingsIcon from '@mui/icons-material/Settings';
+import SaveIcon from '@mui/icons-material/Save';
+import FileOpenIcon from '@mui/icons-material/FileOpen';
+import DownloadIcon from '@mui/icons-material/Download';
+import { observer } from 'mobx-react-lite';
+import {
+    DndContext,
+    type DragEndEvent,
+    type DragStartEvent,
+    pointerWithin,
+    PointerSensor,
+    KeyboardSensor,
+    useSensor,
+    useSensors,
+    DragOverlay,
+    defaultDropAnimationSideEffects
+} from '@dnd-kit/core';
+import {
+    sortableKeyboardCoordinates
+} from '@dnd-kit/sortable';
+import {
+    formStore,
+    type NodeType
+} from '../../store/FormStore';
+import { FormRenderer } from '../FormRenderer';
+import { Toolbox } from './Toolbox';
+import { IntegrationSettings } from './IntegrationSettings';
+import { PropertiesModal } from './PropertiesModal';
+import { generateId } from '../../utils/idGenerator';
+import { DroppableCanvas } from './DroppableCanvas';
+
+interface FormBuilderProps {
+    onCancel?: () => void;
+}
+
+export const FormBuilder: React.FC<FormBuilderProps> = observer(({ onCancel }) => {
+    const { t } = useTranslation();
+    const [activeId, setActiveId] = React.useState<string | null>(null);
+    const [activeData, setActiveData] = React.useState<any>(null);
+    const [leftTab, setLeftTab] = React.useState<'toolbox' | 'integrations'>('toolbox');
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 10,
+            },
+        }),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        })
+    );
+
+    const handleDragStart = (event: DragStartEvent) => {
+        setActiveId(event.active.id as string);
+        setActiveData(event.active.data.current);
+    };
+
+    const getDropTarget = (overId: string | undefined): { parentId: string; index?: number } | null => {
+        if (!overId) return null;
+        if (overId === 'canvas-drop-zone') return { parentId: 'root' };
+
+        const overNode = formStore.findNode(formStore.rootNode, overId);
+        if (!overNode) return null;
+
+        const containerTypes: NodeType[] = ['root', 'row', 'col', 'tabs', 'tab', 'paper', 'repeater', 'table', 'cell'];
+
+        if (containerTypes.includes(overNode.type)) {
+            // If dropping on a container, check if it has children. 
+            // If it's empty, we append (index undefined).
+            // If it's not empty, it's safer to append, unless we hit a specific child.
+            // But if we are ON the container itself, appending is the most natural behavior.
+            return { parentId: overId, index: -1 }; // -1 signifies "at the end" for my indicator logic
+        } else {
+            const parentNode = formStore.findParent(formStore.rootNode, overId);
+            if (parentNode) {
+                const overIndex = parentNode.children?.findIndex(c => c.id === overId) ?? -1;
+                return { parentId: parentNode.id, index: overIndex !== -1 ? overIndex : undefined };
+            }
+        }
+        return null;
+    };
+
+    const handleDragOver = (event: any) => {
+        const { over } = event;
+        const target = getDropTarget(over?.id);
+        if (target) {
+            formStore.setDropIndicator({ parentId: target.parentId, index: target.index ?? -1 });
+        } else {
+            formStore.setDropIndicator(null);
+        }
+    };
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const { active, over } = event;
+        setActiveId(null);
+        setActiveData(null);
+        formStore.setDropIndicator(null);
+
+        if (!over) return;
+
+        const target = getDropTarget(over.id as string);
+        if (!target) return;
+
+        const isToolboxItem = active.data.current?.isToolboxItem;
+
+        if (isToolboxItem) {
+            const toolData = active.data.current as { type: NodeType; defaultProps: Record<string, any> };
+            const { type, defaultProps } = toolData;
+
+            const newNode: any = {
+                id: generateId(type),
+                type: type,
+                props: { width: 6, ...defaultProps, name: generateId('field'), label: t(`toolbox.${type}`) },
+                children: []
+            };
+
+            // Special initialization for Table
+            if (type === 'table') {
+                if (!newNode.props.width) newNode.props.width = 12;
+                const rows = defaultProps?.rows || 2;
+                const cols = defaultProps?.cols || 2;
+                const cells = [];
+                for (let i = 0; i < rows * cols; i++) {
+                    cells.push({ id: generateId('cell'), type: 'cell', children: [] });
+                }
+                newNode.children = cells;
+            }
+
+            formStore.addNode(target.parentId, newNode, target.index === -1 ? undefined : target.index);
+        } else if (active.id !== over.id) {
+            formStore.moveNode(active.id as string, over.id === 'canvas-drop-zone' ? 'root' : over.id as string);
+        }
+    };
+
+
+
+
+    return (
+        <DndContext
+            sensors={sensors}
+            collisionDetection={pointerWithin}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragEnd={handleDragEnd}
+        >
+            <Box display="flex" flexDirection="column" height="100vh">
+                <AppBar position="static" color="default" elevation={1}>
+                    <Toolbar variant="dense">
+                        {/* Title removed per request */}
+                        <Box sx={{ display: 'flex', mx: 2, p: 0.5, backgroundColor: 'action.hover', borderRadius: 1 }}>
+                            <Button
+                                onClick={() => formStore.setEditMode(true)}
+                                variant={formStore.isEditMode ? 'contained' : 'text'}
+                                size="small"
+                                sx={{ px: 2 }}
+                            >
+                                {t('app.builder')}
+                            </Button>
+                            <Button
+                                onClick={() => formStore.setEditMode(false)}
+                                variant={!formStore.isEditMode ? 'contained' : 'text'}
+                                size="small"
+                                sx={{ px: 2 }}
+                            >
+                                {t('app.preview')}
+                            </Button>
+                        </Box>
+
+                        <Box sx={{ flexGrow: 1 }} />
+
+                        <Button
+                            color="inherit"
+                            startIcon={<SettingsIcon />}
+                            onClick={() => formStore.openPropertiesModal('root')}
+                        >
+                            {t("app.formSettings")}
+                        </Button>
+                        <Button color="inherit" startIcon={<FileOpenIcon />} onClick={() => formStore.loadFromStorage()}>
+                            {t("app.load")}
+                        </Button>
+                        {onCancel && (
+                            <Button color="inherit" onClick={onCancel} sx={{ ml: 1 }}>
+                                {t("app.cancel") || "Cancel"}
+                            </Button>
+                        )}
+                        <Button color="primary" variant="contained" startIcon={<SaveIcon />} onClick={() => formStore.saveToStorage()} sx={{ ml: 1 }}>
+                            {t("app.save")}
+                        </Button>
+                        <Button color="inherit" startIcon={<DownloadIcon />} onClick={() => {
+                            const data = JSON.stringify(formStore.rootNode, null, 2);
+                            const blob = new Blob([data], { type: 'application/json' });
+                            const url = URL.createObjectURL(blob);
+                            const a = document.createElement('a');
+                            a.href = url;
+                            a.download = 'form-schema.json';
+                            document.body.appendChild(a);
+                            a.click();
+                            document.body.removeChild(a);
+                            URL.revokeObjectURL(url);
+                        }}>
+                            {t("app.exportJson")}
+                        </Button>
+                    </Toolbar>
+                </AppBar>
+
+                <Box display="flex" flexGrow={1} overflow="hidden">
+                    {/* Left Sidebar with Tabs */}
+                    {formStore.isEditMode && (
+                        <Paper elevation={2} sx={{ width: 320, display: 'flex', flexDirection: 'column', zIndex: 1, borderRight: 1, borderColor: 'divider' }}>
+                            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                                <Tabs value={leftTab} onChange={(_, v) => setLeftTab(v)} variant="fullWidth">
+                                    <Tab label={t("app.toolbox")} value="toolbox" />
+                                    <Tab label={t("app.integrations")} value="integrations" />
+                                </Tabs>
+                            </Box>
+                            <Box sx={{ flexGrow: 1, overflow: 'auto' }}>
+                                {leftTab === 'toolbox' ? <Toolbox /> : <IntegrationSettings />}
+                            </Box>
+                        </Paper>
+                    )}
+
+                    {/* Canvas - Center Area */}
+                    <Box flexGrow={1} bgcolor="#f0f2f5" p={4} overflow="auto" display="flex" justifyContent="center">
+                        <Paper
+                            elevation={formStore.isEditMode ? 0 : 3}
+                            sx={{
+                                width: '100%',
+                                maxWidth: 1400,
+                                minHeight: '100%',
+                                p: formStore.isEditMode ? 4 : 6,
+                                px: formStore.isEditMode ? 6 : 8,
+                                bgcolor: 'background.paper',
+                                borderRadius: 2
+                            }}
+                        >
+                            {formStore.isEditMode ? (
+                                <DroppableCanvas>
+                                    <FormRenderer node={formStore.rootNode} path="" isEditing={true} />
+                                </DroppableCanvas>
+                            ) : (
+                                <Box>
+                                    <FormRenderer node={formStore.rootNode} path="" isEditing={false} />
+                                    <Box mt={6} pt={3} borderTop={1} borderColor="divider" display="flex" justifyContent="flex-end" gap={2}>
+                                        {onCancel && (
+                                            <Button
+                                                variant="outlined"
+                                                size="large"
+                                                sx={{ px: 4, borderRadius: 2 }}
+                                                onClick={onCancel}
+                                            >
+                                                {t('app.cancel') || "Cancel"}
+                                            </Button>
+                                        )}
+                                        <Button
+                                            variant="contained"
+                                            color="success"
+                                            size="large"
+                                            sx={{ px: 4, borderRadius: 2 }}
+                                            onClick={async () => {
+                                                try {
+                                                    await formStore.submitForm();
+                                                    alert(t('app.submissionSuccess'));
+                                                } catch (e) {
+                                                    console.error(e);
+                                                    alert(t('app.submissionFailed'));
+                                                }
+                                            }}
+                                        >
+                                            {t('app.submitForm')}
+                                        </Button>
+                                    </Box>
+                                </Box>
+                            )}
+                        </Paper>
+                    </Box>
+
+                    {/* Properties Modal (Replaces Sidebar) */}
+                    <PropertiesModal />
+                </Box>
+            </Box>
+            <DragOverlay dropAnimation={{
+                sideEffects: defaultDropAnimationSideEffects({
+                    styles: {
+                        active: {
+                            opacity: '0.5',
+                        },
+                    },
+                }),
+            }}>
+                {activeId ? (
+                    <Box sx={{
+                        p: 2,
+                        bgcolor: 'background.paper',
+                        border: '2px solid #1976d2',
+                        borderRadius: 1,
+                        boxShadow: 3,
+                        opacity: 0.9,
+                        minWidth: 100
+                    }}>
+                        {activeData?.isToolboxItem ? (
+                            <Typography>{activeData.type.toUpperCase()}</Typography>
+                        ) : (
+                            <Typography>{t("app.movingElement")}</Typography>
+                        )}
+                    </Box>
+                ) : null}
+            </DragOverlay>
+        </DndContext>
+    );
+});

package/src/components/builder/FormChildrenRenderer.tsx

@@ -0,0 +1,68 @@
+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 { FormRenderer, DropIndicator } from '../FormRenderer';
+
+interface FormChildrenRendererProps {
+    parentId: string;
+    children: SchemaNode[] | undefined;
+    isEditing: boolean;
+    layout?: 'horizontal' | 'vertical';
+    path?: string;
+}
+
+export const FormChildrenRenderer: React.FC<FormChildrenRendererProps> = observer(({
+    parentId,
+    children,
+    isEditing,
+    layout = 'horizontal',
+    path
+}) => {
+    const childIds = children?.map(c => c.id) || [];
+    const { dropIndicator } = formStore;
+
+    const isHorizontal = layout === 'horizontal';
+
+    const containerSx: SxProps<Theme> = {
+        display: 'flex',
+        flexWrap: isHorizontal ? 'wrap' : 'nowrap',
+        flexDirection: isHorizontal ? 'row' : 'column',
+        width: '100%',
+        m: 0,
+        gap: 0,
+    };
+
+    if (!isEditing) {
+        return (
+            <Box sx={containerSx}>
+                {children?.map(child => (
+                    <FormRenderer key={child.id} node={child} path={path} isEditing={false} />
+                ))}
+            </Box>
+        );
+    }
+
+    return (
+        <Box sx={containerSx}>
+            <SortableContext items={childIds} strategy={rectSortingStrategy}>
+                {children?.map((child, index) => (
+                    <React.Fragment key={child.id}>
+                        {dropIndicator?.parentId === parentId && dropIndicator.index === index && (
+                            <Box sx={{ width: isHorizontal ? '100%' : 'auto', p: isHorizontal ? 1 : 0 }}>
+                                <DropIndicator />
+                            </Box>
+                        )}
+                        <FormRenderer node={child} path={path} isEditing={true} />
+                    </React.Fragment>
+                ))}
+                {dropIndicator?.parentId === parentId && dropIndicator.index === -1 && (
+                    <Box sx={{ width: isHorizontal ? '100%' : 'auto', p: isHorizontal ? 1 : 0 }}>
+                        <DropIndicator />
+                    </Box>
+                )}
+            </SortableContext>
+        </Box>
+    );
+});

package/src/components/builder/IntegrationSettings.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import {
+    Box, Button, TextField, Typography, List, ListItem,
+    ListItemText, ListItemSecondaryAction, IconButton,
+    Dialog, DialogTitle, DialogContent, DialogActions,
+    Select, MenuItem, FormControl, InputLabel
+} from '@mui/material';
+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';
+
+export const IntegrationSettings: React.FC = observer(() => {
+    const [open, setOpen] = useState(false);
+    const [currentIntegration, setCurrentIntegration] = useState<Partial<APIIntegration>>({
+        method: 'POST',
+        headers: {}
+    });
+
+    const handleAdd = () => {
+        setCurrentIntegration({ id: Math.random().toString(36).substr(2, 9), method: 'POST', headers: {}, name: '', fetchFieldsURL: '', submitURL: '', availableFields: [] });
+        setOpen(true);
+    };
+
+    const handleSave = () => {
+        if (currentIntegration.id) {
+            formStore.addIntegration(currentIntegration as APIIntegration);
+            setOpen(false);
+        }
+    };
+
+    const integrations = formStore.rootNode.props?.integrations || [];
+
+    return (
+        <Box sx={{ p: 2 }}>
+            <Typography variant="h6" gutterBottom>API Integrations</Typography>
+            <Button
+                variant="contained"
+                startIcon={<AddIcon />}
+                onClick={handleAdd}
+                sx={{ mb: 2 }}
+            >
+                Add Integration
+            </Button>
+
+            <List>
+                {integrations.map((integration: APIIntegration) => (
+                    <ListItem key={integration.id} divider>
+                        <ListItemText
+                            primary={integration.name}
+                            secondary={`${integration.method} ${integration.submitURL}`}
+                        />
+                        <ListItemSecondaryAction>
+                            <IconButton onClick={() => formStore.fetchExternalFields(integration.id)} title="Fetch Fields">
+                                <SyncIcon />
+                            </IconButton>
+                            <IconButton edge="end" onClick={() => formStore.removeIntegration(integration.id)}>
+                                <DeleteIcon />
+                            </IconButton>
+                        </ListItemSecondaryAction>
+                    </ListItem>
+                ))}
+            </List>
+
+            <Dialog open={open} onClose={() => setOpen(false)} fullWidth maxWidth="sm">
+                <DialogTitle>Add API Integration</DialogTitle>
+                <DialogContent>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
+                        <TextField
+                            label="Name"
+                            fullWidth
+                            value={currentIntegration.name}
+                            onChange={(e) => setCurrentIntegration({ ...currentIntegration, name: e.target.value })}
+                        />
+                        <TextField
+                            label="Fetch Fields URL"
+                            fullWidth
+                            value={currentIntegration.fetchFieldsURL}
+                            onChange={(e) => setCurrentIntegration({ ...currentIntegration, fetchFieldsURL: e.target.value })}
+                            placeholder="http://localhost:8000/api/mock-external/fields"
+                        />
+                        <TextField
+                            label="Submit URL"
+                            fullWidth
+                            value={currentIntegration.submitURL}
+                            onChange={(e) => setCurrentIntegration({ ...currentIntegration, submitURL: e.target.value })}
+                            placeholder="http://localhost:8000/api/mock-external/submit"
+                        />
+                        <FormControl fullWidth>
+                            <InputLabel>Method</InputLabel>
+                            <Select
+                                value={currentIntegration.method}
+                                label="Method"
+                                onChange={(e) => setCurrentIntegration({ ...currentIntegration, method: e.target.value as any })}
+                            >
+                                <MenuItem value="POST">POST</MenuItem>
+                                <MenuItem value="PUT">PUT</MenuItem>
+                            </Select>
+                        </FormControl>
+                    </Box>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpen(false)}>Cancel</Button>
+                    <Button onClick={handleSave} variant="contained">Save</Button>
+                </DialogActions>
+            </Dialog>
+        </Box>
+    );
+});

package/src/components/builder/PropertiesModal.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Box,
+    Typography,
+    IconButton,
+    useTheme,
+    useMediaQuery
+} from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import { useTranslation } from 'react-i18next';
+import { formStore } from '../../store/FormStore';
+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 
+// OR just render PropertiesPanel inside the modal and strip its outer layout in refactor.
+// For now, let's wrap PropertiesPanel and modify it to not have the header?
+// Or better: Clone the logic from PropertiesPanel into here or make PropertiesPanel adapting.
+// Let's modify PropertiesPanel to accept a "mode" or just use it as content.
+
+export const PropertiesModal: React.FC = observer(() => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
+    const isOpen = formStore.isPropertiesModalOpen;
+    const node = formStore.selectedNode;
+
+    if (!node) return null;
+
+    const handleClose = () => {
+        formStore.closePropertiesModal();
+    };
+
+    return (
+        <Dialog
+            open={isOpen}
+            onClose={handleClose}
+            fullScreen={fullScreen}
+            maxWidth="sm"
+            fullWidth
+            scroll="paper"
+            PaperProps={{
+                sx: { minHeight: '600px', maxHeight: '80vh' }
+            }}
+        >
+            <DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Typography variant="h6" component="div">
+                    {node.type === 'root' ? t('app.formSettings') : t('app.elementSettings')}
+                </Typography>
+                <IconButton
+                    aria-label="close"
+                    onClick={handleClose}
+                    sx={{ color: (theme) => theme.palette.grey[500] }}
+                >
+                    <CloseIcon />
+                </IconButton>
+            </DialogTitle>
+            <DialogContent dividers sx={{ p: 0 }}>
+                {/* We render the existing panel. We might need to adjust styling later to remove duplicate headers */}
+                <Box sx={{ '& > div': { height: 'auto', border: 'none' } }}>
+                    <PropertiesPanel />
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={handleClose}>
+                    {t('properties.delete').toLowerCase() === 'delete' ? 'Close' : 'Закрыть'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+});