@stormlmd/form-builder 0.1.0

package/src/components/layout/FormRepeater.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { Box, Button, Typography, Paper, IconButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { FieldProps } from '../FieldRegistry';
+import { LayoutPlaceholder } from './LayoutPlaceholder';
+import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
+
+export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { name, label, addLabel = 'Add Item' } = node.props || {};
+    const fullPath = path && name ? `${path}.${name}` : name;
+    const items: any[] = (fullPath ? formStore.getValue(fullPath) : []) || [];
+    const childrenIds = node.children?.map(c => c.id) || [];
+
+    const handleAdd = () => {
+        if (!fullPath) return;
+        const newItems = [...items, {}];
+        formStore.updateValue(fullPath, newItems);
+    };
+
+    const handleRemove = (index: number) => {
+        if (!fullPath) return;
+        const newItems = [...items];
+        newItems.splice(index, 1);
+        formStore.updateValue(fullPath, newItems);
+    };
+
+    // Note: FormRepeater structure is complex. It renders a list of *values*.
+    // And for each value, it renders a set of *fields* (children of repeater node).
+    // The DRAG & DROP here typically refers to reordering the *fields* in the schema (the template),
+    // OR reordering the *items* in the data array?
+    // In "Builder" mode, we are editing the template. So we want to reorder the *fields*.
+
+    // So inside each item Paper, we render the children fields.
+    // If we wrap THAT in SortableContext, we can reorder fields.
+    // However, since we render fields Multiple times (once per item), 
+    // dnd-kit might get confused if IDs are not unique across the entire DOM.
+    // But SortableNode uses schema node ID. If we render multiple SortableNodes with SAME ID (one per repeater item),
+    // dnd-kit WILL break.
+
+    // In EDITING mode, typically we don't need to see ALL items.
+    // Or we should only allow editing schema in a specific way.
+    // For now, let's just wrap the inner children in SortableContext. 
+    // BUT we must be careful about ID duplication if we render multiple items.
+    // Actually, in Builder mode, maybe we should only render ONE item as a preview?
+    // Or just render the children directly without mapping over data?
+
+    // Let's stick to the current implementation but if isEditing is true, 
+    // maybe we should ensure we only have one "template" instance to avoid ID clash?
+    // OR, we just don't support dragging INSIDE a repeater instance for now.
+    // Support dragging the repeater ITSELF (which is handled by parent).
+
+    // Let's add SortableContext for the children of the repeater template.
+    // To avoid ID clash, we should only enable SortableNode in the FIRST item if there are multiple.
+    // Or, simpler: In Builder mode, force Repeater to show at least 1 item, and maybe ONLY 1 dummy item?
+
+    // Let's try to just wrap it, but we might hit the ID issue.
+    // If we have 2 items, we have 2 rendered "Title" fields with ID "node_123". Dnd-kit will duplicate ids.
+
+    // PROPOSAL: In isEditing mode, FormRepeater only renders ONE dummy item.
+
+    // Force only 1 item in Builder mode to prevent ID collisions since we render generic "template" fields
+    const displayItems = isEditing ? [{}] : items;
+    // If items is empty in preview, show nothing? Or 0 items. 
+    // But in builder, if items is empty, we MUST show 1 dummy item to allow dropping.
+    // The current logic `isEditing ? [{}] : items` handles this well.
+
+    return (
+        <Box mb={1}>
+            {label && <Typography variant="h6" mb={0.5}>{label}</Typography>}
+
+            {displayItems.length === 0 && isEditing && (
+                <Box p={1} bgcolor="#f5f5f5" color="text.secondary" sx={{ border: '1px dashed #ccc', borderRadius: 1, textAlign: 'center' }}>
+                    Repeater Template
+                </Box>
+            )}
+
+            {displayItems.map((_item, index) => (
+                <Paper key={index} variant="outlined" sx={{ p: 1, mb: 0.5, position: 'relative' }}>
+                    <Box position="absolute" right={4} top={4} zIndex={5}>
+                        <IconButton size="small" onClick={() => handleRemove(index)} color="error" disabled={isEditing}>
+                            <DeleteIcon fontSize="inherit" />
+                        </IconButton>
+                    </Box>
+
+                    <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+                        {isEditing ? (
+                            <LayoutPlaceholder
+                                isEditing={isEditing}
+                                label="Item Template"
+                                isEmpty={childrenIds.length === 0}
+                                sx={{ p: 0.5, width: '100%' }}
+                            >
+                                <FormChildrenRenderer
+                                    parentId={node.id}
+                                    children={node.children}
+                                    isEditing={true}
+                                    layout="horizontal"
+                                    path={`${fullPath}[${index}]`}
+                                />
+                            </LayoutPlaceholder>
+                        ) : (
+                            <FormChildrenRenderer
+                                parentId={node.id}
+                                children={node.children}
+                                isEditing={false}
+                                layout="horizontal"
+                                path={`${fullPath}[${index}]`}
+                            />
+                        )}
+                    </Box>
+                </Paper>
+            ))}
+
+            {!isEditing && (
+                <Button
+                    startIcon={<AddIcon />}
+                    variant="outlined"
+                    size="small"
+                    onClick={handleAdd}
+                    sx={{ mt: 0.5 }}
+                >
+                    {addLabel}
+                </Button>
+            )}
+        </Box>
+    );
+});

package/src/components/layout/FormRow.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FieldProps } from '../FieldRegistry';
+import { LayoutPlaceholder } from './LayoutPlaceholder';
+import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
+
+export const FormRow: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const childrenIds = node.children?.map(c => c.id) || [];
+
+    if (isEditing) {
+        return (
+            <LayoutPlaceholder isEditing={isEditing} label="Row" isEmpty={childrenIds.length === 0}>
+                <FormChildrenRenderer
+                    parentId={node.id}
+                    children={node.children}
+                    isEditing={true}
+                    layout="horizontal"
+                    path={path}
+                />
+            </LayoutPlaceholder>
+        );
+    }
+
+    return (
+        <FormChildrenRenderer
+            parentId={node.id}
+            children={node.children}
+            isEditing={false}
+            layout="horizontal"
+            path={path}
+        />
+    );
+});
+
+export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const childrenIds = node.children?.map(c => c.id) || [];
+
+    if (isEditing) {
+        return (
+            <LayoutPlaceholder isEditing={isEditing} label="Column" isEmpty={childrenIds.length === 0}>
+                <FormChildrenRenderer
+                    parentId={node.id}
+                    children={node.children}
+                    isEditing={true}
+                    layout="vertical"
+                    path={path}
+                />
+            </LayoutPlaceholder>
+        );
+    }
+
+    return (
+        <FormChildrenRenderer
+            parentId={node.id}
+            children={node.children}
+            isEditing={false}
+            layout="vertical"
+            path={path}
+        />
+    );
+});

package/src/components/layout/FormTab.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FieldProps } from '../FieldRegistry';
+import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
+import { LayoutPlaceholder } from './LayoutPlaceholder';
+
+export const FormTab: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const childrenIds = node.children?.map(c => c.id) || [];
+
+    const content = (
+        <FormChildrenRenderer
+            parentId={node.id}
+            children={node.children}
+            isEditing={!!isEditing}
+            path={path}
+            layout="vertical"
+        />
+    );
+
+    if (isEditing) {
+        return (
+            <LayoutPlaceholder isEditing={isEditing} label={node.props?.label || "Tab Content"} isEmpty={childrenIds.length === 0} sx={{ p: 1 }}>
+                {content}
+            </LayoutPlaceholder>
+        );
+    }
+
+    return (
+        <div style={{ padding: 0 }}>
+            {content}
+        </div>
+    );
+});

package/src/components/layout/FormTable.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import type { FieldProps } from '../FieldRegistry';
+import { FormRenderer } from '../FormRenderer';
+import { LayoutPlaceholder } from './LayoutPlaceholder';
+
+export const FormTable: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { rows = 2, cols = 2 } = node.props || {};
+
+    console.log(`FormTable Render: ${node.id}`, {
+        childrenCount: node.children?.length,
+        rows,
+        cols,
+        childTypes: node.children?.map(c => c.type)
+    });
+
+    const gridStyle = {
+        display: 'grid',
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gridTemplateRows: `repeat(${rows}, minmax(32px, auto))`,
+        gap: '4px',
+        width: '100%',
+        backgroundColor: isEditing ? 'rgba(0, 0, 0, 0.02)' : 'transparent', // Subtle background in edit mode
+    };
+
+    const tableContent = (
+        <Box sx={gridStyle}>
+            {node.children?.map((child, index) => (
+                <Box key={child.id} sx={{ width: '100%', height: '100%' }}>
+                    <FormRenderer node={child} path={`${path}[${index}]`} isEditing={isEditing} />
+                </Box>
+            ))}
+        </Box>
+    );
+
+    if (isEditing) {
+        // Import LayoutPlaceholder at the top if not already
+        return (
+            <LayoutPlaceholder isEditing={isEditing} label="Table" isEmpty={false}>
+                {tableContent}
+            </LayoutPlaceholder>
+        );
+    }
+
+    return tableContent;
+});

package/src/components/layout/FormTableCell.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import type { FieldProps } from '../FieldRegistry';
+import { LayoutPlaceholder } from './LayoutPlaceholder';
+import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
+
+export const FormTableCell: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const childrenIds = node.children?.map(c => c.id) || [];
+    const isEmpty = childrenIds.length === 0;
+
+    if (isEditing) {
+        return (
+            <LayoutPlaceholder
+                isEditing={isEditing}
+                label="Cell"
+                isEmpty={isEmpty}
+                sx={{
+                    height: '100%',
+                    border: '1px dashed #bbb', // Darker border
+                    backgroundColor: isEmpty ? '#f9f9f9' : 'transparent', // Light background if empty
+                    '&:hover': {
+                        borderColor: '#2196f3',
+                        backgroundColor: '#f0f7ff'
+                    }
+                }}
+            >
+                <FormChildrenRenderer
+                    parentId={node.id}
+                    children={node.children}
+                    isEditing={true}
+                    layout="vertical"
+                    path={path}
+                />
+            </LayoutPlaceholder>
+        );
+    }
+
+    return (
+        <FormChildrenRenderer
+            parentId={node.id}
+            children={node.children}
+            isEditing={false}
+            layout="vertical"
+            path={path}
+        />
+    );
+});

package/src/components/layout/FormTabs.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+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 { LayoutPlaceholder } from './LayoutPlaceholder';
+
+export const FormTabs: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const [activeTab, setActiveTab] = React.useState(0);
+    const allTabs = node.children || [];
+    const tabs = isEditing
+        ? allTabs
+        : allTabs.filter(tabNode => {
+            if (!tabNode.condition) return true;
+            return formStore.evaluateCondition(tabNode.condition);
+        });
+
+    const { elevation: elevationProp = 1, variant: variantProp } = node.props || {};
+    const variant = isEditing ? (variantProp ?? 'outlined') : (variantProp ?? 'transparent');
+    const elevation = variant === 'elevation' ? elevationProp : 0;
+
+    const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+        setActiveTab(newValue);
+        if (tabs[newValue]) {
+            formStore.selectNode(tabs[newValue].id);
+        }
+    };
+
+    if (!isEditing && tabs.length === 0) {
+        return null;
+    }
+
+    if (activeTab >= tabs.length && tabs.length > 0) {
+        setActiveTab(0);
+    }
+
+    const currentTabNode = tabs[activeTab];
+
+    return (
+        <Paper
+            variant={variant}
+            elevation={variant === 'elevation' ? elevation : 0}
+            sx={{
+                mb: 2,
+                display: 'flex',
+                flexDirection: 'column',
+                backgroundColor: variant === 'transparent' ? 'transparent' : undefined,
+                backgroundImage: variant === 'transparent' ? 'none' : undefined,
+                boxShadow: variant === 'transparent' ? 'none !important' : undefined,
+                border: variant === 'transparent' ? 'none !important' : undefined,
+                overflow: 'hidden'
+            }}
+        >
+            <Tabs
+                value={tabs.length > 0 ? activeTab : false}
+                onChange={handleTabChange}
+                sx={{ borderBottom: 1, borderColor: 'divider', minHeight: 48 }}
+                variant="scrollable"
+                scrollButtons="auto"
+            >
+                {tabs.map((tabNode, index) => (
+                    <Tab key={tabNode.id} label={tabNode.props?.label || `Tab ${index + 1}`} />
+                ))}
+            </Tabs>
+            <Box p={0} flexGrow={1}>
+                {tabs.length === 0 && isEditing ? (
+                    <LayoutPlaceholder isEditing={isEditing} label="Tabs" isEmpty={true} sx={{ minHeight: 120 }}>
+                        <Box />
+                    </LayoutPlaceholder>
+                ) : (
+                    currentTabNode && <FormRenderer key={currentTabNode.id} node={currentTabNode} path={path} isEditing={isEditing} />
+                )}
+            </Box>
+        </Paper>
+    );
+});

package/src/components/layout/LayoutPlaceholder.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Box, Typography, Chip } from '@mui/material';
+
+interface LayoutPlaceholderProps {
+    isEditing?: boolean;
+    label: string;
+    children: React.ReactNode;
+    sx?: any;
+    isEmpty?: boolean;
+}
+
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
+
+export const LayoutPlaceholder: React.FC<LayoutPlaceholderProps> = ({
+    isEditing,
+    label,
+    children,
+    sx = {},
+    isEmpty
+}) => {
+    if (!isEditing) {
+        return <>{children}</>;
+    }
+
+    return (
+        <Box sx={{
+            position: 'relative',
+            border: '1px dashed #ccc',
+            borderRadius: 1,
+            p: 2,
+            pt: 4, // Space for label
+            minHeight: isEmpty ? 120 : 'auto',
+            width: '100%',
+            transition: 'all 0.2s',
+            boxSizing: 'border-box',
+            backgroundColor: isEmpty ? 'rgba(0, 0, 0, 0.01)' : 'transparent',
+            '&:hover': {
+                borderColor: '#1976d2',
+                backgroundColor: 'rgba(25, 118, 210, 0.04)'
+            },
+            ...sx
+        }}>
+            <Chip
+                label={label}
+                size="small"
+                sx={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    borderRadius: '4px 0 4px 0',
+                    height: 20,
+                    fontSize: '0.7rem',
+                    backgroundColor: '#eee',
+                    color: '#666',
+                    zIndex: 1
+                }}
+            />
+            {children}
+            {isEmpty && (
+                <Box
+                    display="flex"
+                    flexDirection="column"
+                    alignItems="center"
+                    justifyContent="center"
+                    height="100%"
+                    position="absolute"
+                    top={0}
+                    left={0}
+                    right={0}
+                    bottom={0}
+                    zIndex={0}
+                    sx={{ opacity: 0.6 }}
+                >
+                    <AddCircleOutlineIcon sx={{ fontSize: 40, mb: 1, color: 'text.secondary' }} />
+                    <Typography variant="body2" color="text.secondary" fontWeight="medium">
+                        Empty {label}
+                    </Typography>
+                    <Typography variant="caption" color="text.secondary">
+                        Drag items from toolbox here
+                    </Typography>
+                </Box>
+            )}
+        </Box>
+    );
+};

package/src/components/registerComponents.ts

@@ -0,0 +1,30 @@
+import { registerComponent } from './FieldRegistry';
+import { TextField } from './fields/TextField';
+import { NumberField } from './fields/NumberField';
+import { CheckboxField } from './fields/CheckboxField';
+import { SelectField } from './fields/SelectField';
+import { DateField } from './fields/DateField';
+import { FileUploadField } from './fields/FileUploadField';
+import { RichTextField } from './fields/RichTextField';
+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';
+
+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);
+};

package/src/index.css

@@ -0,0 +1,75 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color: #213547;
+  background-color: #ffffff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: #f0f2f5;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+h6 {
+  color: black !important;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './store/FormStore';
+export * from './components/FormRenderer';
+export * from './components/FieldRegistry';
+export * from './components/registerComponents';
+export { FormBuilder } from './components/builder/FormBuilder';

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)