robobyte-front-builder 1.0.0

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

@@ -0,0 +1,96 @@
+import { Grid } 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, moveNodeInTree } from 'services/builderHelper/tree'
+import { useEffect } from 'react'
+import { Box } from '@mui/system'
+
+export default function ColumnGroupRenderer({ node, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+  const children = node.children.map(child => ({
+    ...child,
+    props: {
+      ...child.props,
+      main: {
+        ...child.props.main,
+        size:
+          child.props?.main?.size != null
+            ? child.props.main?.size?.value != ''
+              ? child.props.main?.size?.value
+              : 12
+            : 12
+      }
+    }
+  }))
+  // child.props?.main = resolveProps(child, 'main', { form, data })
+  const handleDropAtIndex = index => e => {
+    if (!isEditMode || !builderContext) return
+    e.preventDefault()
+    e.stopPropagation()
+
+    try {
+      const nodeId = e.dataTransfer.getData('application/builder-node-id')
+      if (nodeId) {
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: moveNodeInTree(prev.root, nodeId, node.id, index)
+        }))
+        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)
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: insertIntoTreeAtIndex(prev.root, node.id, newNode, index)
+        }))
+        builderContext.setSelectedId(componentData)
+        builderContext.setDraggingNodeId(null)
+      }
+    } catch (err) {
+      builderContext.setDraggingNodeId(null)
+      console.error(err)
+    }
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Grid item container={main?.container} size={main?.size ?? 12} spacing={main.spacing ?? 2} direction={main.direction} wrap={main.wrap}>
+        {node.children?.length > 0 ? (
+          <>
+            {children.map((child, index) => {
+              console.log('Child:', child)
+              console.log(parseInt(child.props?.main?.size))
+              return (
+                <Box key={child.id}>
+                  {isEditMode && <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />}
+                  <ComponentRenderer node={child} viewerContext={viewerContext} />
+                </Box>
+              )
+            })}
+            {isEditMode && (
+              <Grid item size={12}>
+                <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />
+              </Grid>
+            )}
+          </>
+        ) : (
+          <Grid item size={12}>
+            {isEditMode && <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />}
+            <div style={{ fontSize: 12, color: 'text.disabled', textAlign: 'center', py: 1 }}>
+              {isEditMode ? 'Drop columns here' : 'Empty group'}
+            </div>
+          </Grid>
+        )}
+      </Grid>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,71 @@
+import { Box } 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, moveNodeInTree } from 'services/builderHelper/tree'
+
+export default function ColumnRenderer({ node, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  const handleDropAtIndex = index => e => {
+    if (!isEditMode || !builderContext) return
+    e.preventDefault()
+    e.stopPropagation()
+
+    try {
+      const nodeId = e.dataTransfer.getData('application/builder-node-id')
+      if (nodeId) {
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: moveNodeInTree(prev.root, nodeId, node.id, index)
+        }))
+        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)
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: insertIntoTreeAtIndex(prev.root, node.id, newNode, index)
+        }))
+        builderContext.setSelectedId(newNode.id)
+        builderContext.setDraggingNodeId(null)
+      }
+    } catch (err) {
+      builderContext.setDraggingNodeId(null)
+      console.error(err)
+    }
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ minHeight: 48 }}>
+        {node.children?.length > 0 ? (
+          <>
+            {node.children.map((child, index) => (
+              <Box key={child.id}>
+                {isEditMode && <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />}
+                <ComponentRenderer node={child} viewerContext={viewerContext} />
+              </Box>
+            ))}
+            {isEditMode && <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />}
+          </>
+        ) : (
+          <>
+            {isEditMode && <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />}
+            <Box sx={{ fontSize: 12, color: 'text.disabled', textAlign: 'center', py: 1 }}>
+              {isEditMode ? 'Drop components here' : 'Empty column'}
+            </Box>
+          </>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,111 @@
+import { Box } from '@mui/material'
+import { useState } from 'react'
+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'
+
+export default function ContainerRenderer({ node, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+
+  // Resolve style props for layout configuration
+  const styleProps = resolveProps(node, 'style', { form, data })
+
+  // Handle drop at specific index
+  const handleDropAtIndex = index => e => {
+    if (!isEditMode || !builderContext) return
+    e.preventDefault()
+    e.stopPropagation()
+
+    try {
+      const nodeId = e.dataTransfer.getData(
+        'application/builder-node-id'
+      )
+      console.log(nodeId)
+
+      if (nodeId) {
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: moveNodeInTree(prev.root, nodeId, node.id, index)
+        }))
+
+        builderContext.setSelectedId(nodeId)
+        // 🔑 ABSOLUTELY REQUIRED
+        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,
+            index
+          )
+        }))
+
+        builderContext.setSelectedId(newNode.id)
+        builderContext.setDraggingNodeId(null)
+      }
+    } catch (err) {
+      builderContext.setDraggingNodeId(null)
+      console.error(err)
+    }
+  }
+
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box
+        sx={{
+          minHeight: 48,
+          display: 'flex',
+          flexDirection: styleProps.flexDirection ?? 'column',
+          gap: styleProps.gap ?? 1.5,
+          justifyContent: styleProps.justifyContent ?? 'flex-start',
+          alignItems: styleProps.alignItems ?? 'stretch'
+        }}
+      >
+        {node.children?.length > 0 ? (
+          <>
+            {node.children.map((child, index) => (
+              <Box key={child.id}>
+                {/* Drop zone before each component */}
+                {isEditMode && (
+                  <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />
+                )}
+                <ComponentRenderer node={child} viewerContext={viewerContext} />
+              </Box>
+            ))}
+            {/* Drop zone after last component */}
+            {isEditMode && (
+              <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />
+            )}
+          </>
+        ) : (
+          <>
+            {/* Drop zone for empty container */}
+            {isEditMode && (
+              <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />
+            )}
+            <Box sx={{ fontSize: 12, color: 'text.disabled', textAlign: 'center', py: 1 }}>
+              {isEditMode ? 'Drop components here' : 'Empty container'}
+            </Box>
+          </>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,49 @@
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { DatePicker } from '@mui/x-date-pickers/DatePicker'
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import { TextField } from '@mui/material'
+import dayjs from 'dayjs'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function DatePickerRenderer({ node, viewerContext }) {
+  const { data, form, updateFormValue, validationErrors } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  // Get component key
+  const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
+
+  // Get value from form state
+  const value = form[key] || null
+
+  // Get validation error
+  const error = validationErrors[key]
+
+  const handleChange = (newValue) => {
+    // Store as dayjs object or ISO string depending on preference
+    updateFormValue(key, newValue ? newValue.toISOString() : null)
+  }
+
+  // Convert value to dayjs if it exists
+  const dayjsValue = value ? dayjs(value) : null
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <DatePicker
+          {...main}
+          value={dayjsValue}
+          onChange={handleChange}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              fullWidth
+              error={!!error}
+              helperText={error || main.helperText}
+            />
+          )}
+        />
+      </LocalizationProvider>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { Divider } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function DividerRenderer({ node, viewerContext }) {
+  const { data, form } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Divider
+        orientation={main.orientation || 'horizontal'}
+        variant={main.variant}
+        flexItem={main.flexItem}
+        light={main.light}
+        textAlign={main.textAlign}
+      >
+        {main.text}
+      </Divider>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,63 @@
+import { FormControl, InputLabel, Select, MenuItem, FormHelperText } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function DropdownRenderer({ node, viewerContext }) {
+  const { data, form, updateFormValue, validationErrors } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  // Get component key
+  const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
+
+  // Get value from form state
+  const value = form[key] || (main.multiple ? [] : '')
+
+  // Get validation error
+  const error = validationErrors[key]
+
+  // Get options - can be static array or resolved via expression
+  const options = main.options || []
+
+  const handleChange = (e) => {
+    updateFormValue(key, e.target.value)
+  }
+
+  // Ensure options is an array
+  const optionsArray = Array.isArray(options) ? options : []
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <FormControl fullWidth={main.fullWidth} error={!!error} size={main.size}>
+        {main.label && <InputLabel>{main.label}</InputLabel>}
+        <Select
+          value={value}
+          onChange={handleChange}
+          label={main.label}
+          disabled={main.disabled}
+          multiple={main.multiple}
+          native={main.native}
+          displayEmpty={!!main.placeholder}
+        >
+          {main.placeholder && (
+            <MenuItem value="" disabled>
+              <em>{main.placeholder}</em>
+            </MenuItem>
+          )}
+          {optionsArray.map((option, index) => {
+            // Support both {label, value} format and simple string format
+            const optionLabel = typeof option === 'object' ? option.label : option
+            const optionValue = typeof option === 'object' ? option.value : option
+            return (
+              <MenuItem key={index} value={optionValue}>
+                {optionLabel}
+              </MenuItem>
+            )
+          })}
+        </Select>
+        {(error || main.helperText) && (
+          <FormHelperText>{error || main.helperText}</FormHelperText>
+        )}
+      </FormControl>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,78 @@
+import { Box, Typography } 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, moveNodeInTree } from 'services/builderHelper/tree'
+
+export default function HeaderCellRenderer({ node, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  const handleDropAtIndex = index => e => {
+    if (!isEditMode || !builderContext) return
+    e.preventDefault()
+    e.stopPropagation()
+
+    try {
+      const nodeId = e.dataTransfer.getData('application/builder-node-id')
+      if (nodeId) {
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: moveNodeInTree(prev.root, nodeId, node.id, index)
+        }))
+        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)
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: insertIntoTreeAtIndex(prev.root, node.id, newNode, index)
+        }))
+        builderContext.setSelectedId(newNode.id)
+        builderContext.setDraggingNodeId(null)
+      }
+    } catch (err) {
+      builderContext.setDraggingNodeId(null)
+      console.error(err)
+    }
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ minHeight: 40, p: main.padding || 1, bgcolor: 'action.hover', borderBottom: '2px solid #ddd' }}>
+        {main.label && (
+           <Typography variant="subtitle2" sx={{ fontWeight: 'bold', mb: 0.5 }}>
+             {main.label}
+           </Typography>
+        )}
+        {node.children?.length > 0 ? (
+          <>
+            {node.children.map((child, index) => (
+              <Box key={child.id}>
+                {isEditMode && <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />}
+                <ComponentRenderer node={child} viewerContext={viewerContext} />
+              </Box>
+            ))}
+            {isEditMode && <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />}
+          </>
+        ) : (
+          <>
+            {isEditMode && <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />}
+            {!main.label && isEditMode && (
+              <Box sx={{ fontSize: 10, color: 'text.disabled', textAlign: 'center' }}>
+                Header Cell
+              </Box>
+            )}
+          </>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,23 @@
+import { Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function HeaderRenderer({ node, viewerContext }) {
+  const { data, form } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Typography
+        variant={main.variant || 'h1'}
+        component={main.component}
+        color={main.color}
+        align={main.align}
+        gutterBottom={main.gutterBottom}
+        noWrap={main.noWrap}
+      >
+        {main.text || main.label || 'Header'}
+      </Typography>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,26 @@
+import { Box } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function ImageRenderer({ node, viewerContext }) {
+  const { data, form } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box
+        component="img"
+        src={main.src || main.url}
+        alt={main.alt || 'Image'}
+        width={main.width}
+        height={main.height}
+        sx={{
+          maxWidth: '100%',
+          objectFit: main.objectFit || 'cover',
+          borderRadius: main.borderRadius,
+          ...main.sx
+        }}
+      />
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,34 @@
+import { TextField } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function InputRenderer({ node, viewerContext }) {
+  const { data, form, updateFormValue, validationErrors } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  // Get component key
+  const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
+
+  // Get value from form state
+  const value = form[key] || ''
+
+  // Get validation error
+  const error = validationErrors[key]
+
+  const handleChange = (e) => {
+    updateFormValue(key, e.target.value)
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <TextField
+        {...main}
+        fullWidth
+        value={value}
+        onChange={handleChange}
+        error={!!error}
+        helperText={error || main.helperText}
+      />
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,23 @@
+import { Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function LabelRenderer({ node, viewerContext }) {
+  const { data, form } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Typography
+        variant={main.variant || 'body1'}
+        color={main.color}
+        align={main.align}
+        gutterBottom={main.gutterBottom}
+        noWrap={main.noWrap}
+        paragraph={main.paragraph}
+      >
+        {main.text || main.label || 'Label'}
+      </Typography>
+    </ViewerComponentWrapper>
+  )
+}