robobyte-front-builder 1.0.0

package/src/views/builder/viewer/renderers/LayoutCellRenderer.jsx

@@ -0,0 +1,162 @@
+import { Box, Typography } from '@mui/material'
+import { useState } from 'react'
+import ComponentRenderer from '../ComponentRenderer'
+import LayoutContextMenu from './LayoutContextMenu'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { createNode } from 'services/builderHelper/nodeFactory'
+import { insertIntoTreeAtIndex, moveNodeInTree } from 'services/builderHelper/tree'
+import { getCellProps_public } from 'services/builderHelper/layoutHelpers'
+
+export default function LayoutCellRenderer({ node, layoutNode, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+  const styleProps = resolveProps(node, 'style', { form, data })
+
+  const { elementStyle: _es, elementCss: _ec, justifyContent, alignItems, ...restStyle } = styleProps
+
+  const [contextMenu, setContextMenu] = useState(null)
+  const [isDragOver, setIsDragOver] = useState(false)
+
+  const { colStart, rowStart, colSpan, rowSpan } = getCellProps_public(node)
+
+  const isSelected = builderContext?.selectedId === node.id
+  const isEmpty = !node.children || node.children.length === 0
+
+  const handleRightClick = e => {
+    if (!isEditMode) return
+    e.preventDefault()
+    e.stopPropagation()
+    builderContext?.setSelectedId(node.id)
+    setContextMenu({ mouseX: e.clientX, mouseY: e.clientY })
+  }
+
+  const handleCloseMenu = () => setContextMenu(null)
+
+  const handleDrop = e => {
+    if (!isEditMode || !builderContext) return
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragOver(false)
+
+    try {
+      const nodeId = e.dataTransfer.getData('application/builder-node-id')
+      if (nodeId) {
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: moveNodeInTree(prev.root, nodeId, node.id, node.children?.length ?? 0)
+        }))
+        builderContext.setSelectedId(nodeId)
+        builderContext.setDraggingNodeId(null)
+        return
+      }
+
+      const componentData = e.dataTransfer.getData('application/builder-component')
+      if (componentData) {
+        const component = JSON.parse(componentData)
+        const newNode = createNode(component.type, component.value ? JSON.parse(component.value) : null)
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: insertIntoTreeAtIndex(prev.root, node.id, newNode, node.children?.length ?? 0)
+        }))
+        builderContext.setSelectedId(newNode.id)
+        builderContext.setDraggingNodeId(null)
+      }
+    } catch (err) {
+      builderContext.setDraggingNodeId(null)
+      console.error(err)
+    }
+  }
+
+  const handleDragOver = e => {
+    if (!isEditMode) return
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragOver(true)
+  }
+
+  const handleDragLeave = e => {
+    e.stopPropagation()
+    setIsDragOver(false)
+  }
+
+  return (
+    <>
+      <Box
+        onContextMenu={handleRightClick}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={e => {
+          if (isEditMode) {
+            e.stopPropagation()
+            builderContext?.setSelectedId(node.id)
+          }
+        }}
+        style={{
+          gridColumn: `${colStart} / span ${colSpan}`,
+          gridRow:    `${rowStart} / span ${rowSpan}`,
+          minHeight: 48,
+          height: '100%',
+          boxSizing: 'border-box',
+        }}
+        sx={{
+          position: 'relative',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: justifyContent ?? 'center',
+          alignItems: alignItems ?? 'stretch',
+          ...restStyle,
+          ...(isEditMode && !restStyle.border ? {
+            border: isSelected
+              ? '2px solid #1976d2'
+              : isDragOver
+                ? '2px dashed #1976d2'
+                : '1px dashed #bbb',
+          } : {}),
+          ...(isEditMode && isSelected ? { border: '2px solid #1976d2' } : {}),
+          borderRadius: restStyle.borderRadius ?? 1,
+          bgcolor: restStyle.backgroundColor
+            ? undefined
+            : isDragOver
+              ? 'rgba(25,118,210,0.06)'
+              : isEditMode ? 'rgba(0,0,0,0.01)' : 'transparent',
+          transition: 'border-color 0.15s, background-color 0.15s',
+          '&:hover': isEditMode ? { borderColor: '#90caf9' } : {},
+          overflow: restStyle.overflow ?? 'hidden',
+        }}
+      >
+        {isEmpty
+          ? isEditMode && (
+              <Typography
+                variant='caption'
+                sx={{
+                  color: isDragOver ? 'primary.main' : 'text.disabled',
+                  textAlign: 'center',
+                  width: '100%',
+                  py: 2,
+                  fontStyle: 'italic',
+                  pointerEvents: 'none',
+                  userSelect: 'none',
+                }}
+              >
+                Drop Component Here
+              </Typography>
+            )
+          : node.children.map(child => (
+              <ComponentRenderer key={child.id} node={child} viewerContext={viewerContext} />
+            ))
+        }
+      </Box>
+
+      {contextMenu && (
+        <LayoutContextMenu
+          anchorPosition={contextMenu}
+          onClose={handleCloseMenu}
+          cell={node}
+          layoutNode={layoutNode}
+          viewerContext={viewerContext}
+        />
+      )}
+    </>
+  )
+}

package/src/views/builder/viewer/renderers/LayoutContextMenu.jsx

@@ -0,0 +1,173 @@
+import { Menu, MenuItem, Divider, ListItemIcon, ListItemText } from '@mui/material'
+import {
+  ArrowForward,
+  ArrowDownward,
+  CallSplit,
+  AddCircleOutline,
+  RemoveCircleOutline,
+} from '@mui/icons-material'
+import {
+  mergeRight,
+  mergeDown,
+  splitHorizontal,
+  splitVertical,
+  addRow,
+  addColumn,
+  deleteRow,
+  deleteColumn,
+  canMergeRight,
+  canMergeDown,
+  canSplitHorizontal,
+  canSplitVertical,
+  getCellProps_public,
+  getTotalRows,
+  getTotalCols,
+} from 'services/builderHelper/layoutHelpers'
+import { updateNodeInTree } from 'services/builderHelper/tree'
+
+export default function LayoutContextMenu({ anchorPosition, onClose, cell, layoutNode, viewerContext }) {
+  const { builderContext } = viewerContext
+  const cells = layoutNode.children ?? []
+  const cellId = cell.id
+
+  const { colStart, rowStart } = getCellProps_public(cell)
+  const totalRows = getTotalRows(cells)
+  const totalCols = getTotalCols(cells)
+  const layoutCols = layoutNode.props?.main?.cols?.value ?? totalCols
+
+  const applyNewCells = (newCells, extraProps = {}) => {
+    builderContext?.setSchema(prev => ({
+      ...prev,
+      root: updateNodeInTree(prev.root, layoutNode.id, {
+        children: newCells,
+        ...extraProps,
+      })
+    }))
+    onClose()
+  }
+
+  const actions = [
+    {
+      label: 'Merge Right',
+      icon: <ArrowForward fontSize='small' />,
+      disabled: !canMergeRight(cells, cellId),
+      onClick: () => applyNewCells(mergeRight(cells, cellId)),
+    },
+    {
+      label: 'Merge Down',
+      icon: <ArrowDownward fontSize='small' />,
+      disabled: !canMergeDown(cells, cellId),
+      onClick: () => applyNewCells(mergeDown(cells, cellId)),
+    },
+    { divider: true },
+    {
+      label: 'Split Horizontal',
+      icon: <CallSplit fontSize='small' sx={{ transform: 'rotate(90deg)' }} />,
+      disabled: !canSplitHorizontal(cells, cellId),
+      onClick: () => applyNewCells(splitHorizontal(cells, cellId)),
+    },
+    {
+      label: 'Split Vertical',
+      icon: <CallSplit fontSize='small' />,
+      disabled: !canSplitVertical(cells, cellId),
+      onClick: () => applyNewCells(splitVertical(cells, cellId)),
+    },
+    { divider: true },
+    {
+      label: 'Add Row Above',
+      icon: <AddCircleOutline fontSize='small' />,
+      disabled: false,
+      onClick: () => applyNewCells(addRow(cells, layoutCols, rowStart - 1)),
+    },
+    {
+      label: 'Add Row Below',
+      icon: <AddCircleOutline fontSize='small' />,
+      disabled: false,
+      onClick: () => applyNewCells(addRow(cells, layoutCols, rowStart)),
+    },
+    { divider: true },
+    {
+      label: 'Add Column Left',
+      icon: <AddCircleOutline fontSize='small' />,
+      disabled: false,
+      onClick: () => {
+        const newCells = addColumn(cells, totalRows, colStart - 1)
+        applyNewCells(newCells, {
+          props: {
+            ...layoutNode.props,
+            main: {
+              ...layoutNode.props?.main,
+              cols: { valueType: 'value', value: layoutCols + 1 }
+            }
+          }
+        })
+      },
+    },
+    {
+      label: 'Add Column Right',
+      icon: <AddCircleOutline fontSize='small' />,
+      disabled: false,
+      onClick: () => {
+        const newCells = addColumn(cells, totalRows, colStart)
+        applyNewCells(newCells, {
+          props: {
+            ...layoutNode.props,
+            main: {
+              ...layoutNode.props?.main,
+              cols: { valueType: 'value', value: layoutCols + 1 }
+            }
+          }
+        })
+      },
+    },
+    { divider: true },
+    {
+      label: 'Delete Row',
+      icon: <RemoveCircleOutline fontSize='small' color='error' />,
+      disabled: totalRows <= 1,
+      onClick: () => applyNewCells(deleteRow(cells, rowStart)),
+    },
+    {
+      label: 'Delete Column',
+      icon: <RemoveCircleOutline fontSize='small' color='error' />,
+      disabled: totalCols <= 1,
+      onClick: () => {
+        const newCells = deleteColumn(cells, colStart)
+        applyNewCells(newCells, {
+          props: {
+            ...layoutNode.props,
+            main: {
+              ...layoutNode.props?.main,
+              cols: { valueType: 'value', value: Math.max(1, layoutCols - 1) }
+            }
+          }
+        })
+      },
+    },
+  ]
+
+  return (
+    <Menu
+      open
+      onClose={onClose}
+      anchorReference='anchorPosition'
+      anchorPosition={{ top: anchorPosition.mouseY, left: anchorPosition.mouseX }}
+    >
+      {actions.map((action, i) =>
+        action.divider ? (
+          <Divider key={i} />
+        ) : (
+          <MenuItem
+            key={action.label}
+            onClick={action.onClick}
+            disabled={action.disabled}
+            dense
+          >
+            <ListItemIcon>{action.icon}</ListItemIcon>
+            <ListItemText>{action.label}</ListItemText>
+          </MenuItem>
+        )
+      )}
+    </Menu>
+  )
+}

package/src/views/builder/viewer/renderers/LayoutRenderer.jsx

@@ -0,0 +1,51 @@
+import { Box, IconButton, Tooltip } from '@mui/material'
+import { useEffect } from 'react'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import LayoutCellRenderer from './LayoutCellRenderer'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { createLayoutGrid, getTotalRows, getTotalCols, getCellProps_public } from 'services/builderHelper/layoutHelpers'
+import { updateNodeInTree } from 'services/builderHelper/tree'
+
+export default function LayoutRenderer({ node, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  const cols = main.cols ?? 2
+  const gap  = main.gap  ?? 8
+
+  const cells = node.children ?? []
+
+  // Auto-initialise with a 2×2 grid when first dropped onto the canvas
+  useEffect(() => {
+    if (isEditMode && builderContext && cells.length === 0) {
+      const defaultCells = createLayoutGrid(cols, 2)
+      builderContext.setSchema(prev => ({
+        ...prev,
+        root: updateNodeInTree(prev.root, node.id, { children: defaultCells })
+      }))
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box
+        style={{
+          display: 'grid',
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          gap: `${gap}px`,
+          width: '100%',
+        }}
+      >
+        {cells.map(cell => (
+          <LayoutCellRenderer
+            key={cell.id}
+            node={cell}
+            layoutNode={node}
+            viewerContext={viewerContext}
+          />
+        ))}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

package/src/views/builder/viewer/renderers/LinkRenderer.jsx

@@ -0,0 +1,24 @@
+import { Link } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function LinkRenderer({ node, viewerContext }) {
+  const { data, form } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Link
+        href={main.href || main.url}
+        target={main.target}
+        rel={main.rel}
+        variant={main.variant}
+        color={main.color}
+        underline={main.underline || 'hover'}
+        onClick={main.onClick}
+      >
+        {main.text || main.label || 'Link'}
+      </Link>
+    </ViewerComponentWrapper>
+  )
+}

package/src/views/builder/viewer/renderers/MenuRenderer.jsx

@@ -0,0 +1,291 @@
+import { useState } from 'react'
+import { Box, Tabs, Tab, Link } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import ComponentRenderer from '../ComponentRenderer'
+import DropZone from '../DropZone'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { createNode } from 'services/builderHelper/nodeFactory'
+import { insertIntoTreeAtIndex } from 'services/builderHelper/tree'
+import { moveNodeInTree } from 'services/builderHelper/tree'
+
+function TabPanel({ children, value, index, ...other }) {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`menu-tabpanel-${index}`}
+      aria-labelledby={`menu-tab-${index}`}
+      {...other}
+    >
+      <Box sx={{ p: 2 }}>{children}</Box>
+    </div>
+  )
+}
+
+export default function MenuRenderer({ node, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+  const [activeTab, setActiveTab] = useState(0)
+
+  // Resolve main props for configuration
+  const main = resolveProps(node, 'main', { form, data })
+  const styleProps = resolveProps(node, 'style', { form, data })
+
+  // Get configuration - check if items (navigation menu) or tabs (tab panels) mode
+  const items = main.items || []
+  const tabs = main.tabs || []
+  const isNavigationMode = items.length > 0
+
+  // For navigation mode, determine active key
+  const activeKey = main.activeKey || (items[0]?.title || '')
+
+  // Ensure node.children is an array organized by tabs (only used in tabs mode)
+  const children = node.children || []
+
+  const handleTabChange = (event, newValue) => {
+    setActiveTab(newValue)
+  }
+
+  // Handle drop at specific index within a tab
+  const handleDropAtIndex = (tabIndex, indexInTab) => e => {
+    if (!isEditMode || !builderContext) return
+    e.preventDefault()
+    e.stopPropagation()
+
+    try {
+      const nodeId = e.dataTransfer.getData('application/builder-node-id')
+
+      if (nodeId) {
+        // Calculate absolute index in flat children array
+        const absoluteIndex = getAbsoluteIndex(tabIndex, indexInTab)
+
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: moveNodeInTree(prev.root, nodeId, node.id, absoluteIndex)
+        }))
+
+        builderContext.setSelectedId(nodeId)
+        builderContext.setDraggingNodeId(null)
+        return
+      }
+
+      const componentData = e.dataTransfer.getData('application/builder-component')
+
+      if (componentData) {
+        const component = JSON.parse(componentData)
+        const newNode = createNode(component.type)
+
+        // Store tab index in node metadata
+        newNode.tabIndex = tabIndex
+
+        const absoluteIndex = getAbsoluteIndex(tabIndex, indexInTab)
+
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: insertIntoTreeAtIndex(prev.root, node.id, newNode, absoluteIndex)
+        }))
+
+        builderContext.setSelectedId(newNode.id)
+        builderContext.setDraggingNodeId(null)
+      }
+    } catch (err) {
+      builderContext.setDraggingNodeId(null)
+      console.error(err)
+    }
+  }
+
+  // Helper to calculate absolute index from tab index and index within tab
+  const getAbsoluteIndex = (tabIndex, indexInTab) => {
+    let absoluteIndex = 0
+    for (let i = 0; i < tabIndex; i++) {
+      absoluteIndex += getChildrenForTab(i).length
+    }
+    return absoluteIndex + indexInTab
+  }
+
+  // Helper to get children for specific tab
+  const getChildrenForTab = (tabIndex) => {
+    return children.filter(child => (child.tabIndex ?? 0) === tabIndex)
+  }
+
+  // Navigation Menu Mode (items-based) - now using local tabs instead of routing
+  if (isNavigationMode) {
+    // Map items to tabs format for consistent local tab behavior
+    const itemTabs = items.map(item => ({ label: item.title, ...item }))
+
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{ width: '100%' }}>
+          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+            <Tabs
+              value={activeTab}
+              onChange={handleTabChange}
+              orientation={main.vertical ? 'vertical' : 'horizontal'}
+              variant={main.justified ? 'fullWidth' : (styleProps.variant || 'standard')}
+              scrollButtons={styleProps.scrollButtons || 'auto'}
+              textColor={styleProps.textColor || 'primary'}
+              indicatorColor={styleProps.indicatorColor || 'primary'}
+              centered={styleProps.centered && !main.justified}
+            >
+              {(main.reversed ? [...itemTabs].reverse() : itemTabs).map((item, index) => (
+                <Tab
+                  key={index}
+                  label={item.label || item.title}
+                  icon={item.icon}
+                  iconPosition={item.iconPosition || 'start'}
+                  disabled={item.disabled}
+                  id={`menu-tab-${index}`}
+                  aria-controls={`menu-tabpanel-${index}`}
+                />
+              ))}
+            </Tabs>
+          </Box>
+
+          {itemTabs.map((item, tabIndex) => {
+            const tabChildren = getChildrenForTab(tabIndex)
+
+            return (
+              <TabPanel key={tabIndex} value={activeTab} index={tabIndex}>
+                <Box
+                  sx={{
+                    minHeight: 48,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: styleProps.gap ?? 1.5
+                  }}
+                >
+                  {tabChildren.length > 0 ? (
+                    <>
+                      {tabChildren.map((child, indexInTab) => (
+                        <Box key={child.id}>
+                          {isEditMode && (
+                            <DropZone
+                              onDrop={handleDropAtIndex(tabIndex, indexInTab)}
+                              isEditMode={isEditMode}
+                            />
+                          )}
+                          <ComponentRenderer node={child} viewerContext={viewerContext} />
+                        </Box>
+                      ))}
+                      {isEditMode && (
+                        <DropZone
+                          onDrop={handleDropAtIndex(tabIndex, tabChildren.length)}
+                          isEditMode={isEditMode}
+                        />
+                      )}
+                    </>
+                  ) : (
+                    <>
+                      {isEditMode && (
+                        <DropZone
+                          onDrop={handleDropAtIndex(tabIndex, 0)}
+                          isEditMode={isEditMode}
+                        />
+                      )}
+                      <Box sx={{ fontSize: 12, color: 'text.disabled', textAlign: 'center', py: 1 }}>
+                        {isEditMode ? 'Drop components here' : 'Empty tab'}
+                      </Box>
+                    </>
+                  )}
+                </Box>
+              </TabPanel>
+            )
+          })}
+
+          {itemTabs.length === 0 && (
+            <Box sx={{ p: 2, fontSize: 12, color: 'text.disabled', textAlign: 'center' }}>
+              No items configured. Add items in the inspector.
+            </Box>
+          )}
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // Tab Panels Mode (tabs-based with children)
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ width: '100%' }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Tabs
+            value={activeTab}
+            onChange={handleTabChange}
+            variant={styleProps.variant || 'standard'}
+            scrollButtons={styleProps.scrollButtons || 'auto'}
+            textColor={styleProps.textColor || 'primary'}
+            indicatorColor={styleProps.indicatorColor || 'primary'}
+            centered={styleProps.centered}
+          >
+            {tabs.map((tab, index) => (
+              <Tab
+                key={index}
+                label={tab.label || `Tab ${index + 1}`}
+                icon={tab.icon}
+                iconPosition={tab.iconPosition || 'start'}
+                disabled={tab.disabled}
+                id={`menu-tab-${index}`}
+                aria-controls={`menu-tabpanel-${index}`}
+              />
+            ))}
+          </Tabs>
+        </Box>
+
+        {tabs.map((tab, tabIndex) => {
+          const tabChildren = getChildrenForTab(tabIndex)
+
+          return (
+            <TabPanel key={tabIndex} value={activeTab} index={tabIndex}>
+              <Box
+                sx={{
+                  minHeight: 48,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: styleProps.gap ?? 1.5
+                }}
+              >
+                {tabChildren.length > 0 ? (
+                  <>
+                    {tabChildren.map((child, indexInTab) => (
+                      <Box key={child.id}>
+                        {isEditMode && (
+                          <DropZone
+                            onDrop={handleDropAtIndex(tabIndex, indexInTab)}
+                            isEditMode={isEditMode}
+                          />
+                        )}
+                        <ComponentRenderer node={child} viewerContext={viewerContext} />
+                      </Box>
+                    ))}
+                    {isEditMode && (
+                      <DropZone
+                        onDrop={handleDropAtIndex(tabIndex, tabChildren.length)}
+                        isEditMode={isEditMode}
+                      />
+                    )}
+                  </>
+                ) : (
+                  <>
+                    {isEditMode && (
+                      <DropZone
+                        onDrop={handleDropAtIndex(tabIndex, 0)}
+                        isEditMode={isEditMode}
+                      />
+                    )}
+                    <Box sx={{ fontSize: 12, color: 'text.disabled', textAlign: 'center', py: 1 }}>
+                      {isEditMode ? 'Drop components here' : 'Empty tab'}
+                    </Box>
+                  </>
+                )}
+              </Box>
+            </TabPanel>
+          )
+        })}
+
+        {tabs.length === 0 && (
+          <Box sx={{ p: 2, fontSize: 12, color: 'text.disabled', textAlign: 'center' }}>
+            No tabs configured. Add tabs in the inspector.
+          </Box>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}