robobyte-front-builder 1.0.0

package/src/views/builder/viewer/ViewerComponentWrapper.jsx

@@ -0,0 +1,238 @@
+import { Box, Menu, MenuItem, ListItemIcon, ListItemText, Divider } from '@mui/material'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { removeFromTree } from 'services/builderHelper'
+import { duplicateInTree } from 'services/builderHelper/builderHelper'
+import { Delete, ContentCopy, Save } from '@mui/icons-material'
+import SaveWidgetDialog from 'views/builder/viewer/SaveWidgetDialog'
+import { useState } from 'react'
+import PostService from 'services/PostService'
+import { Endpoints } from 'services/Endpoints'
+
+function kebabToCamelCase(value = '') {
+  return value.replace(/-([a-z])/g, (_, char) => char.toUpperCase())
+}
+
+function parseInlineCss(cssText = '') {
+  return cssText
+    .split(';')
+    .map(rule => rule.trim())
+    .filter(Boolean)
+    .reduce((acc, rule) => {
+      const separatorIndex = rule.indexOf(':')
+      if (separatorIndex === -1) return acc
+
+      const property = rule.slice(0, separatorIndex).trim()
+      const value = rule.slice(separatorIndex + 1).trim()
+      if (!property || !value) return acc
+
+      acc[kebabToCamelCase(property)] = value
+      return acc
+    }, {})
+}
+
+function resolveElementStyle(elementStyle) {
+  if (!elementStyle) return {}
+  if (typeof elementStyle === 'string') return parseInlineCss(elementStyle)
+  if (typeof elementStyle === 'object' && !Array.isArray(elementStyle)) return elementStyle
+  return {}
+}
+
+function resolveElementCss(elementCss) {
+  if (!elementCss) return {}
+  if (typeof elementCss === 'string') return parseInlineCss(elementCss)
+  if (typeof elementCss === 'object' && !Array.isArray(elementCss)) return elementCss
+  return {}
+}
+
+export default function ViewerComponentWrapper({ node, children, viewerContext }) {
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+  const [contextMenu, setContextMenu] = useState(null)
+
+  const { data, form, isEditMode, builderContext } = viewerContext
+
+  // Resolve style and advanced props
+  const styleProps = resolveProps(node, 'style', { form, data })
+  const elementStyle = resolveElementStyle(styleProps.elementStyle)
+  const elementCss = resolveElementCss(styleProps.elementCss)
+  const resolvedStyleProps = {
+    ...styleProps,
+    elementStyle: undefined,
+    elementCss: undefined
+  }
+  const advancedProps = resolveProps(node, 'advanced', { form, data })
+
+  // Check visibility from advanced props
+  const isVisible = advancedProps.visible !== false
+
+  // Get selection state from builder context (only available in edit mode)
+  const isSelected = builderContext?.selectedId === node.id
+  const canEdit = isEditMode && (builderContext != null)
+  const isDraggingThis = builderContext?.draggingNodeId === node.id
+  // Handle component selection
+  const handleClick = e => {
+    if (canEdit) {
+      e.stopPropagation()
+      builderContext.setSelectedId(node.id)
+    }
+  }
+
+  // Handle delete action
+  const handleDelete = e => {
+    e.stopPropagation()
+    if (canEdit && builderContext.setSchema) {
+      builderContext.setSchema(prev => ({
+        ...prev,
+        root: removeFromTree(prev.root, node.id)
+      }))
+      builderContext.setSelectedId(null)
+    }
+  }
+
+  // Handle duplicate action
+  const handleDuplicate = e => {
+    e.stopPropagation()
+    if (canEdit && builderContext.setSchema) {
+      builderContext.setSchema(prev => ({
+        ...prev,
+        root: duplicateInTree(prev.root, node.id)
+      }))
+    }
+  }
+
+  // Handle drag start for moving existing components
+  const handleDragStart = e => {
+    if (!canEdit) return
+    e.stopPropagation()
+
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('application/builder-node-id', node.id)
+
+    // 🔑 important
+    // e.dataTransfer.setDragImage(document.createElement('div'), 0, 0)
+
+    // Defer state update to avoid interrupting drag initialization
+    setTimeout(() => {
+      builderContext.setDraggingNodeId(node.id)
+    }, 0)
+  }
+
+  const handleDragEnd = () => {
+    builderContext.setDraggingNodeId(null)
+  }
+
+  const handleContextMenu = e => {
+    if (!canEdit) return
+    e.preventDefault()
+    e.stopPropagation()
+    builderContext.setSelectedId(node.id)
+    setContextMenu({ mouseX: e.clientX, mouseY: e.clientY })
+  }
+
+  const handleCloseMenu = () => setContextMenu(null)
+
+  const handleSaveClick = () => {
+    handleCloseMenu()
+    setSaveDialogOpen(true)
+  }
+
+  // If not visible in preview mode, don't render
+  if (!isVisible && !isEditMode) {
+    return null
+  }
+
+  const handleSave = async values => {
+    if (!node) {
+      console.error('No schema to save')
+      return
+    }
+    setIsSaving(true)
+    try {
+      const data = {
+        name: values?.title,
+        widgetCategoryId : values.category?.id,
+        value: JSON.stringify(node)
+      }
+
+      const response = await PostService(Endpoints.Widget.Post.Add, true, data)
+
+      if (response) {
+        setSaveDialogOpen(false)
+      }
+    } catch (error) {
+      console.error('Error saving view:', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+  return (
+    <>
+      <Box
+        className={node.className}
+        style={elementCss}
+        draggable={canEdit}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onClick={handleClick}
+        onContextMenu={handleContextMenu}
+        sx={{
+          position: 'relative',
+          // Apply resolved style props
+          ...resolvedStyleProps,
+          // Apply custom CSS from inspector style.elementStyle
+          ...elementStyle,
+          // Edit mode styling
+          ...(canEdit && {
+            cursor: 'grab',
+            outline: isSelected ? '2px solid #1976d2' : '1px solid transparent',
+            outlineOffset: '2px',
+            '&:hover': {
+              outline: isSelected ? '2px solid #1976d2' : '1px solid #90caf9'
+            },
+            '&:active': {
+              cursor: 'grabbing'
+            }
+          }),
+          // Show hidden components with opacity in edit mode
+          ...(isEditMode &&
+            !isVisible && {
+              opacity: 0.3,
+              pointerEvents: 'auto'
+            }),
+          ...(isDraggingThis && {
+            opacity: 0,
+            height: 0,
+            overflow: 'hidden',
+            pointerEvents: 'none'
+          })
+        }}
+      >
+        {children}
+      </Box>
+
+      {/* Right-click context menu */}
+      <Menu
+        open={!!contextMenu}
+        onClose={handleCloseMenu}
+        anchorReference='anchorPosition'
+        anchorPosition={contextMenu ? { top: contextMenu.mouseY, left: contextMenu.mouseX } : undefined}
+      >
+        <MenuItem onClick={e => { handleDuplicate(e); handleCloseMenu() }} dense>
+          <ListItemIcon><ContentCopy fontSize='small' /></ListItemIcon>
+          <ListItemText>Duplicate</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={handleSaveClick} dense>
+          <ListItemIcon><Save fontSize='small' /></ListItemIcon>
+          <ListItemText>Save as Widget</ListItemText>
+        </MenuItem>
+        <Divider />
+        <MenuItem onClick={e => { handleDelete(e); handleCloseMenu() }} dense>
+          <ListItemIcon><Delete fontSize='small' color='error' /></ListItemIcon>
+          <ListItemText sx={{ color: 'error.main' }}>Remove</ListItemText>
+        </MenuItem>
+      </Menu>
+
+      <SaveWidgetDialog open={saveDialogOpen} onClose={() => setSaveDialogOpen(false)} onSave={handleSave} />
+    </>
+  )
+}

package/src/views/builder/viewer/ViewerToolbar.jsx

@@ -0,0 +1,89 @@
+import { Box, ToggleButton, ToggleButtonGroup, Button } from '@mui/material'
+import { ContentSave } from 'mdi-material-ui'
+import { useState } from 'react'
+import SaveViewDialog from './SaveViewDialog'
+import { useBuilder } from 'src/context/BuilderContext'
+import PostService from 'src/services/PostService'
+import { Endpoints } from 'src/services/Endpoints'
+
+export default function ViewerToolbar({ mode, setMode }) {
+  const { schema } = useBuilder()
+  const [saveDialogOpen, setSaveDialogOpen] = useState(false)
+  const [isSaving, setIsSaving] = useState(false)
+
+  const handleSaveClick = () => {
+    setSaveDialogOpen(true)
+  }
+
+  const handleSave = async (title) => {
+    if (!schema || !schema.root) {
+      console.error('No schema to save')
+      return
+    }
+
+    setIsSaving(true)
+    try {
+      const data = {
+        title: title,
+        value: JSON.stringify(schema)
+      }
+
+      const response = await PostService(Endpoints.View.Post.Add, true, data)
+
+      if (response) {
+        setSaveDialogOpen(false)
+      }
+    } catch (error) {
+      console.error('Error saving view:', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          p: 1,
+          borderBottom: '1px solid',
+          borderColor: 'divider',
+          bgcolor: 'background.paper',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1
+        }}
+      >
+        <ToggleButtonGroup
+          value={mode}
+          exclusive
+          size="small"
+          onChange={(e, v) => {
+            if (!v) return
+            setMode(v)
+          }}
+        >
+          <ToggleButton value="edit">Edit</ToggleButton>
+          <ToggleButton value="preview">Preview</ToggleButton>
+        </ToggleButtonGroup>
+
+        <Box sx={{ flex: 1 }} />
+
+        <Button
+          variant="contained"
+          size="small"
+          startIcon={<ContentSave />}
+          onClick={handleSaveClick}
+          disabled={isSaving || !schema?.root}
+        >
+          {isSaving ? 'Saving...' : 'Save View'}
+        </Button>
+      </Box>
+
+      <SaveViewDialog
+        open={saveDialogOpen}
+        onClose={() => setSaveDialogOpen(false)}
+        onSave={handleSave}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,57 @@
+import { FormControl, FormHelperText } from '@mui/material'
+import UniversalAutocomplete from 'services/components/universalAutoComplete'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { useEffect } from 'react'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+
+export default function AutoCompleteRenderer({ node, viewerContext }) {
+  const { data, form, updateFormValue, validationErrors } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+  const resolvedAsyncFetch =
+    node?.props?.main.asyncFetchOptions?.type === 'expression'
+      ? node?.props?.main?.asyncFetchOptions.expression?.code
+      : () => (Array.isArray(main.options) ? main.options : [])
+
+  const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
+  const value = form[key] ?? (main.isSingle ? null : [])
+  const error = validationErrors[key]
+
+  const handleChange = newValue => {
+    updateFormValue(key, newValue)
+
+    if (typeof main.onChange === 'function') {
+      main.onChange(newValue, { node, key, form, data, updateFormValue })
+    }
+  }
+  useEffect( () => {
+    async function ss(){
+      if (node?.props?.main?.asyncFetchOptions?.type === 'expression') {
+        console.log(resolvedAsyncFetch)
+        let a = await executeJSCode(resolvedAsyncFetch)
+        console.log(a)
+        // let b = a()
+        // console.log(b)
+      }
+    }
+    ss()
+
+  }, [resolvedAsyncFetch])
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <FormControl fullWidth={main.fullWidth !== false} error={!!error}>
+        <UniversalAutocomplete
+          {...main}
+          value={value}
+          data={form}
+          fullWidth={main.fullWidth !== false}
+          options={Array.isArray(main.options) ? main.options : []}
+          asyncFetchOptions={resolvedAsyncFetch}
+          fetchOnOpen={main.fetchOnOpen ?? !!main.asyncFetchOptions}
+          onChange={handleChange}
+        />
+        {(error || main.helperText) && <FormHelperText>{error || main.helperText}</FormHelperText>}
+      </FormControl>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,32 @@
+import { Breadcrumbs, Link, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function BreadcrumbRenderer({ node, viewerContext }) {
+  const { data, form } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  const items = main.items || []
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Breadcrumbs separator={main.separator || '/'}>
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1
+          return isLast ? (
+            <Typography key={index} color="text.primary">
+              {item.label}
+            </Typography>
+          ) : (
+            <Link key={index} underline="hover" color="inherit" href={item.href || '#'}>
+              {item.label}
+            </Link>
+          )
+        })}
+        {items.length === 0 && (
+          <Typography color="text.disabled">Breadcrumb</Typography>
+        )}
+      </Breadcrumbs>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,55 @@
+import { Button } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+
+export default function ButtonRenderer({ node, viewerContext }) {
+  const { data, form, submitForm, resetForm, setData } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+  // Get onClick action configuration
+  const onClickAction = node.props?.actions?.onClick
+
+  const handleClick = async e => {
+    e.stopPropagation()
+
+    if (!onClickAction) return
+
+    switch (onClickAction.actionType) {
+      case 'submit':
+        const isValid = await submitForm()
+        if (isValid) {
+          console.log('Form submitted successfully')
+        } else {
+          console.log('Form validation failed')
+        }
+        break
+
+      case 'reset':
+        resetForm()
+        console.log('Form reset')
+        break
+
+      case 'custom':
+        if (onClickAction.code) {
+          try {
+            const result = await executeJSCode(onClickAction.code, { form, data })
+            console.log('Custom action result:', result)
+          } catch (error) {
+            console.error('Custom action error:', error)
+          }
+        }
+        break
+
+      default:
+        console.log('Unknown action type:', onClickAction.actionType)
+    }
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Button variant='contained'  {...main} onClick={handleClick}>
+        {main.label || 'Button'}
+      </Button>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,76 @@
+import { Card, CardContent, CardHeader } 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 CardRenderer({ 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}>
+      <Card variant={main.variant || 'outlined'}>
+        {(main.title || main.subheader) && (
+          <CardHeader title={main.title} subheader={main.subheader} />
+        )}
+        <CardContent>
+          {node.children?.length > 0 ? (
+            <>
+              {node.children.map((child, index) => (
+                <div key={child.id}>
+                  {isEditMode && <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />}
+                  <ComponentRenderer node={child} viewerContext={viewerContext} />
+                </div>
+              ))}
+              {isEditMode && <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />}
+            </>
+          ) : (
+            <>
+              {isEditMode && <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />}
+              <div style={{ fontSize: 12, color: 'text.disabled', textAlign: 'center', py: 1 }}>
+                {isEditMode ? 'Drop components here' : 'Empty card'}
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </ViewerComponentWrapper>
+  )
+}

package/src/views/builder/viewer/renderers/CellRenderer.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 CellRenderer({ 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, border: '1px solid #eee' }}>
+        {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: 10, color: 'text.disabled', textAlign: 'center' }}>
+              {isEditMode ? 'Cell' : ''}
+            </Box>
+          </>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,27 @@
+import { FormControlLabel, Checkbox } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function CheckboxRenderer({ node, viewerContext }) {
+  const { data, form, updateFormValue } = 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 (default to false for checkboxes)
+  const checked = form[key] || false
+
+  const handleChange = (e) => {
+    updateFormValue(key, e.target.checked)
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <FormControlLabel
+        {...main}
+        control={<Checkbox  {...main} checked={checked} onChange={handleChange} />}
+      />
+    </ViewerComponentWrapper>
+  )
+}