robobyte-front-builder 1.0.0

package/src/views/builder/JSEditor.js

@@ -0,0 +1,226 @@
+import { useEffect, useRef, useState } from 'react'
+import { Box, Tabs, Tab, Button, IconButton, Typography, TextField } from '@mui/material'
+import { CodeBraces } from 'mdi-material-ui'
+import Editor from '@monaco-editor/react'
+
+/**
+ * Monaco editor options
+ */
+const editorOptions = {
+  minimap: { enabled: false },
+  fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+  fontSize: 14,
+  lineNumbers: 'on',
+  wordWrap: 'on',
+  renderWhitespace: 'selection',
+  theme: 'vs-dark',
+  scrollBeyondLastLine: false,
+  automaticLayout: true
+  // formatOnPaste: true,
+  // formatOnType: true,
+}
+
+/**
+ * Fixed function shell
+ */
+const HEADER_LINES = 4
+
+const CALCULATION_TEMPLATE = `/**
+ * @param {IFormData} form
+ * @param {object} data
+ * @return {Promise<boolean>}
+ */
+async function Calculation (form, data) {
+
+}
+`
+
+export default function JSEditor({ value, expression, mode, onChange }) {
+  const [open, setOpen] = useState(false)
+  const [currentMode, setCurrentMode] = useState(mode || (expression ? 'expression' : 'value'))
+  const [code, setCode] = useState(expression?.code || CALCULATION_TEMPLATE)
+  const [simpleValue, setSimpleValue] = useState(value ?? '')
+
+  const editorRef = useRef(null)
+
+  const handleOpen = () => {
+    setCurrentMode(mode || (expression ? 'expression' : 'value'))
+    setCode(expression?.code || CALCULATION_TEMPLATE)
+    setSimpleValue(value ?? '')
+    setOpen(true)
+  }
+
+  useEffect(() => {
+    if (!open) {
+      setSimpleValue(value ?? '')
+    }
+  }, [value, open])
+
+  /**
+   * Lock everything except function body
+   */
+  const handleEditorMount = (editor, monaco) => {
+    editorRef.current = editor
+
+    const model = editor.getModel()
+    if (!model) return
+
+    const totalLines = model.getLineCount()
+    const readOnlyRanges = [
+      // Header
+      new monaco.Range(1, 1, HEADER_LINES + 1, 1),
+      // Closing brace
+      new monaco.Range(totalLines, 1, totalLines, model.getLineLength(totalLines) + 1)
+    ]
+
+    editor.createDecorationsCollection(
+      readOnlyRanges.map(range => ({
+        range,
+        options: { isWholeLine: true, className: 'readonly' }
+      }))
+    )
+
+    editor.onDidChangeCursorPosition(e => {
+      const currentTotalLines = model.getLineCount()
+      const currentMaxEditableLine = Math.max(HEADER_LINES + 2, currentTotalLines - 1)
+
+      if (e.position.lineNumber <= HEADER_LINES + 1) {
+        editor.setPosition({ lineNumber: HEADER_LINES + 2, column: 3 })
+        return
+      }
+      if (e.position.lineNumber >= currentTotalLines) {
+        editor.setPosition({ lineNumber: currentMaxEditableLine, column: 3 })
+      }
+    })
+
+    editor.focus()
+    editor.setPosition({ lineNumber: HEADER_LINES + 2, column: 3 })
+  }
+
+  /**
+   * Only allow edits inside function body
+   */
+  const handleCodeChange = newCode => {
+    if (!newCode) return
+
+    const lines = newCode.split('\n')
+
+    if (!newCode.includes('function Calculation')) {
+      setCode(CALCULATION_TEMPLATE)
+      return
+    }
+
+    setCode(newCode)
+  }
+
+  /**
+   * Save logic
+   */
+  const handleSave = () => {
+    if (currentMode === 'expression') {
+      console.log(code)
+      onChange?.({
+        valueType: 'expression',
+        type: 'expression',
+        value: undefined,
+        expression: { type: 'js', code }
+      })
+    } else {
+      onChange?.({
+        valueType: 'value',
+        type: 'value',
+        value: simpleValue
+      })
+    }
+    setOpen(false)
+  }
+
+  const modeForIcon = mode || (expression ? 'expression' : 'value')
+
+  return (
+    <>
+      {/* Open editor */}
+      <IconButton size='small' color={modeForIcon === 'expression' ? 'success' : 'default'} onClick={handleOpen}>
+        <CodeBraces />
+      </IconButton>
+
+      {open && (
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: '40vh',
+            bgcolor: '#1e1e1e',
+            zIndex: 1300,
+            borderTop: '1px solid #333',
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
+          {/* Tabs */}
+          <Tabs value={currentMode === 'expression' ? 0 : 1} sx={{ bgcolor: '#252526', color: '#fff' }}>
+            <Tab label='Calculable value' onClick={() => setCurrentMode('expression')} />
+            <Tab label='Simple value' onClick={() => setCurrentMode('value')} />
+          </Tabs>
+
+          {/* Content */}
+          {currentMode === 'expression' ? (
+            <Box sx={{ flex: 1, minHeight: 0 }}>
+              <Editor
+                height='100%'
+                defaultLanguage='javascript'
+                value={code}
+                options={editorOptions}
+                onMount={handleEditorMount}
+                onChange={handleCodeChange}
+              />
+            </Box>
+          ) : (
+            <Box sx={{ p: 2, color: '#fff' }}>
+              <Typography variant='body2'>Simple Value Mode</Typography>
+              <TextField
+                fullWidth
+                multiline
+                minRows={5}
+                size='small'
+                value={simpleValue}
+                onChange={e => setSimpleValue(e.target.value)}
+                placeholder='Type a plain value (e.g. CSS string)'
+                sx={{
+                  mt: 1.5,
+                  '& .MuiInputBase-root': { color: '#fff' },
+                  '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' }
+                }}
+              />
+              {simpleValue !== undefined && (
+                <Typography variant='caption' sx={{ opacity: 0.7 }}>
+                  Current value: {String(simpleValue)}
+                </Typography>
+              )}
+            </Box>
+          )}
+
+          {/* Footer */}
+          <Box
+            sx={{
+              p: 1,
+              display: 'flex',
+              gap: 1,
+              justifyContent: 'flex-end',
+              bgcolor: '#252526'
+            }}
+          >
+            <Button size='small' onClick={() => setOpen(false)}>
+              Close
+            </Button>
+            <Button size='small' variant='contained' onClick={handleSave}>
+              Save
+            </Button>
+          </Box>
+        </Box>
+      )}
+    </>
+  )
+}

package/src/views/builder/inspector/Inspector.jsx

@@ -0,0 +1,63 @@
+import { Box, Tabs, Tab, Typography } from '@mui/material'
+import { useState } from 'react'
+import { useBuilder } from 'src/context/BuilderContext'
+import MainTab from './tabs/MainTab'
+import StyleTab from './tabs/StyleTab'
+import RulesTab from './tabs/RulesTab'
+import ComponentActionsTab from './tabs/ComponentActionsTab'
+
+export default function Inspector() {
+  const { selectedId } = useBuilder()
+  const [tab, setTab] = useState(0)
+
+  if (!selectedId) {
+    return (
+      <Box p={2}>
+        <Typography variant="body2" color="text.disabled">
+          Select a component to edit its settings
+        </Typography>
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <Tabs
+        value={tab}
+        onChange={(_, v) => setTab(v)}
+        variant="scrollable"
+        scrollButtons="auto"
+        sx={{
+          bgcolor: '#3a3f45',
+          minHeight: 48,
+          '& .MuiTab-root': {
+            color: 'rgba(255, 255, 255, 0.7)',
+            minHeight: 48,
+            textTransform: 'none',
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            '&.Mui-selected': {
+              color: '#fff'
+            }
+          },
+          '& .MuiTabs-indicator': {
+            backgroundColor: '#9c27b0',
+            height: 3
+          }
+        }}
+      >
+        <Tab label="Main" />
+        <Tab label="Style" />
+        <Tab label="Rules" />
+        <Tab label="Actions" />
+      </Tabs>
+
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
+        {tab === 0 && <MainTab />}
+        {tab === 1 && <StyleTab />}
+        {tab === 2 && <RulesTab />}
+        {tab === 3 && <ComponentActionsTab />}
+      </Box>
+    </Box>
+  )
+}

package/src/views/builder/inspector/Tabs/ComponentActionsTab.jsx

@@ -0,0 +1,117 @@
+import { Box, Typography, TextField, MenuItem } from '@mui/material'
+import { useBuilder } from 'src/context/BuilderContext'
+import FieldWrapper from '../fields/FieldWrapper'
+import { getActionsFields } from '../definitions'
+import { findNode, updateNodeInTree } from 'services/builderHelper'
+import JSEditor from '../../JSEditor'
+
+/**
+ * Ensure every field is an object:
+ * { actionType: 'submit' | 'reset' | 'custom', code?: string }
+ */
+function normalizeActionField(field) {
+  if (field && typeof field === 'object' && field.actionType) return field
+
+  return {
+    actionType: 'submit'
+  }
+}
+
+export default function ComponentActionsTab() {
+  const { schema, selectedId, setSchema } = useBuilder()
+  const node = findNode(schema.root, selectedId)
+  if (!node) return null
+
+  const actionFields = getActionsFields(node.type)
+
+  if (actionFields.length === 0) {
+    return (
+      <Box p={2}>
+        <Typography variant="body2" color="text.disabled">
+          This component has no actions
+        </Typography>
+      </Box>
+    )
+  }
+
+  // Get actions from props
+  const actions = Object.fromEntries(
+    Object.entries(node.props?.actions ?? {}).map(([k, v]) => [k, normalizeActionField(v)])
+  )
+
+  const updateAction = (name, actionData) => {
+    setSchema(prev => ({
+      ...prev,
+      root: updateNodeInTree(prev.root, node.id, {
+        props: {
+          actions: {
+            ...actions,
+            [name]: actionData
+          }
+        }
+      })
+    }))
+  }
+
+  return (
+    <Box p={2}>
+      {actionFields.map(field => {
+        const actionValue = actions[field.name] ?? { actionType: 'submit' }
+
+        // Provide default actionTypes if not defined
+        const actionTypes = field.actionTypes || [
+          { value: 'submit', label: 'Submit Form' },
+          { value: 'reset', label: 'Reset Form' },
+          { value: 'custom', label: 'Custom Action' }
+        ]
+
+        return (
+          <FieldWrapper key={field.name} label={field.label}>
+            <Box display="flex" flexDirection="column" gap={2}>
+              <TextField
+                label="Action Type"
+                size="small"
+                fullWidth
+                select
+                value={actionValue.actionType}
+                onChange={e =>
+                  updateAction(field.name, {
+                    ...actionValue,
+                    actionType: e.target.value
+                  })
+                }
+              >
+                {actionTypes.map(actionType => (
+                  <MenuItem key={actionType.value} value={actionType.value}>
+                    {actionType.label}
+                  </MenuItem>
+                ))}
+              </TextField>
+
+              {actionValue.actionType === 'custom' && (
+                <Box>
+                  <Typography variant="caption" display="block" sx={{ mb: 1 }}>
+                    Custom Action Code
+                  </Typography>
+                  <JSEditor
+                    value={actionValue.code}
+                    expression={actionValue.code ? { type: 'js', code: actionValue.code } : undefined}
+                    mode="expression"
+                    onChange={payload => {
+                      if (payload.expression?.code) {
+                        updateAction(field.name, {
+                          ...actionValue,
+                          code: payload.expression.code
+                        })
+                      }
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </FieldWrapper>
+        )
+      })}
+    </Box>
+  )
+}

package/src/views/builder/inspector/Tabs/MainTab.jsx

@@ -0,0 +1,95 @@
+import { Box } from '@mui/material'
+import { useBuilder } from 'src/context/BuilderContext'
+import FieldWrapper from '../fields/FieldWrapper'
+import ExpressionEditor from '../fields/ExpressionEditor'
+import BooleanEditor from '../fields/BooleanEditor'
+import SelectEditor from '../fields/SelectEditor'
+import TextEditor from '../fields/TextEditor'
+import OptionsEditor from '../fields/OptionsEditor'
+import TabsEditor from '../fields/TabsEditor'
+import ItemsEditor from '../fields/ItemsEditor'
+import { getMainFields } from '../definitions'
+import { findNode, updateNodeInTree } from 'services/builderHelper'
+
+/**
+ * Ensure every field is an object:
+ * { type: 'value' | 'expression', value?, expression? }
+ */
+function normalizeField(field) {
+  if (field && typeof field === 'object' && field.valueType) return field
+
+  return {
+    valueType: 'value',
+    value: field
+  }
+}
+
+export default function MainTab() {
+  const { schema, selectedId, setSchema } = useBuilder()
+  const node = findNode(schema.root, selectedId)
+  if (!node) return null
+
+  const fields = getMainFields(node.type)
+
+  // 🔑 Normalize ALL main props
+  const main = Object.fromEntries(Object.entries(node.props?.main ?? {}).map(([k, v]) => [k, normalizeField(v)]))
+  const updateField = (name, fieldState) => {
+    setSchema(prev => ({
+      ...prev,
+      root: updateNodeInTree(prev.root, node.id, {
+        props: {
+          main: {
+            ...main,
+            [name]: fieldState
+          }
+        }
+      })
+    }))
+  }
+  return (
+    <Box p={2}>
+      {fields.map(field => {
+        const fieldValue = main[field.name] ?? { valueType: 'value', value: undefined }
+        return (
+          <FieldWrapper key={field.name} label={field.label}>
+            {field.type === 'expression' && (
+              <ExpressionEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'boolean' && (
+              <BooleanEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'select' && (
+              <SelectEditor
+                field={fieldValue}
+                options={field.options}
+                onChange={payload => updateField(field.name, payload)}
+              />
+            )}
+
+            {field.type === 'text' && (
+              <TextEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'number' && (
+              <TextEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} type="number" />
+            )}
+
+            {field.type === 'options-editor' && (
+              <OptionsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'tabs-editor' && (
+              <TabsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'items-editor' && (
+              <ItemsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+          </FieldWrapper>
+        )
+      })}
+    </Box>
+  )
+}

package/src/views/builder/inspector/Tabs/RulesTab.jsx

@@ -0,0 +1,79 @@
+import { Box } from '@mui/material'
+import { useBuilder } from 'src/context/BuilderContext'
+import FieldWrapper from '../fields/FieldWrapper'
+import ExpressionEditor from '../fields/ExpressionEditor'
+import BooleanEditor from '../fields/BooleanEditor'
+import SelectEditor from '../fields/SelectEditor'
+import TextEditor from '../fields/TextEditor'
+import { getRulesFields } from '../definitions'
+import { findNode, updateNodeInTree } from 'services/builderHelper'
+
+/**
+ * Ensure every field is an object:
+ * { valueType: 'value' | 'expression', value?, expression? }
+ */
+function normalizeField(field) {
+  if (field && typeof field === 'object' && field.valueType) return field
+
+  return {
+    valueType: 'value',
+    value: field
+  }
+}
+
+export default function RulesTab() {
+  const { schema, selectedId, setSchema } = useBuilder()
+  const node = findNode(schema.root, selectedId)
+  if (!node) return null
+
+  const fields = getRulesFields(node.type)
+
+  // 🔑 Normalize ALL rules props
+  const rules = Object.fromEntries(Object.entries(node.props?.rules ?? {}).map(([k, v]) => [k, normalizeField(v)]))
+
+  const updateField = (name, fieldState) => {
+    setSchema(prev => ({
+      ...prev,
+      root: updateNodeInTree(prev.root, node.id, {
+        props: {
+          rules: {
+            ...rules,
+            [name]: fieldState
+          }
+        }
+      })
+    }))
+  }
+
+  return (
+    <Box p={2}>
+      {fields.map(field => {
+        const fieldValue = rules[field.name] ?? { valueType: 'value', value: undefined }
+
+        return (
+          <FieldWrapper key={field.name} label={field.label}>
+            {field.type === 'expression' && (
+              <ExpressionEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'boolean' && (
+              <BooleanEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'select' && (
+              <SelectEditor
+                field={fieldValue}
+                options={field.options}
+                onChange={payload => updateField(field.name, payload)}
+              />
+            )}
+
+            {field.type === 'text' && (
+              <TextEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+          </FieldWrapper>
+        )
+      })}
+    </Box>
+  )
+}

package/src/views/builder/inspector/Tabs/StyleTab.jsx

@@ -0,0 +1,79 @@
+import { Box } from '@mui/material'
+import { useBuilder } from 'src/context/BuilderContext'
+import FieldWrapper from '../fields/FieldWrapper'
+import ExpressionEditor from '../fields/ExpressionEditor'
+import BooleanEditor from '../fields/BooleanEditor'
+import SelectEditor from '../fields/SelectEditor'
+import TextEditor from '../fields/TextEditor'
+import { getStyleFields } from '../definitions'
+import { findNode, updateNodeInTree } from 'services/builderHelper'
+
+/**
+ * Ensure every field is an object:
+ * { valueType: 'value' | 'expression', value?, expression? }
+ */
+function normalizeField(field) {
+  if (field && typeof field === 'object' && field.valueType) return field
+
+  return {
+    valueType: 'value',
+    value: field
+  }
+}
+
+export default function StyleTab() {
+  const { schema, selectedId, setSchema } = useBuilder()
+  const node = findNode(schema.root, selectedId)
+  if (!node) return null
+
+  const fields = getStyleFields(node.type)
+
+  // 🔑 Normalize ALL style props
+  const style = Object.fromEntries(Object.entries(node.props?.style ?? {}).map(([k, v]) => [k, normalizeField(v)]))
+
+  const updateField = (name, fieldState) => {
+    setSchema(prev => ({
+      ...prev,
+      root: updateNodeInTree(prev.root, node.id, {
+        props: {
+          style: {
+            ...style,
+            [name]: fieldState
+          }
+        }
+      })
+    }))
+  }
+
+  return (
+    <Box p={2}>
+      {fields.map(field => {
+        const fieldValue = style[field.name] ?? { valueType: 'value', value: undefined }
+
+        return (
+          <FieldWrapper key={field.name} label={field.label}>
+            {field.type === 'expression' && (
+              <ExpressionEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'boolean' && (
+              <BooleanEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'select' && (
+              <SelectEditor
+                field={fieldValue}
+                options={field.options}
+                onChange={payload => updateField(field.name, payload)}
+              />
+            )}
+
+            {field.type === 'text' && (
+              <TextEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+          </FieldWrapper>
+        )
+      })}
+    </Box>
+  )
+}

package/src/views/builder/inspector/definitions/autocomplete/main.js

@@ -0,0 +1,25 @@
+export const AUTOCOMPLETE_MAIN_FIELDS = [
+  { name: 'key', label: 'Key', type: 'expression' },
+  { name: 'label', label: 'Label', type: 'expression' },
+  { name: 'placeholder', label: 'Placeholder', type: 'text' },
+  {
+    name: 'size',
+    label: 'Size',
+    type: 'select',
+    options: ['small', 'medium', 'large']
+  },
+  { name: 'disabled', label: 'Disabled', type: 'boolean' },
+  { name: 'enabled', label: 'Enabled', type: 'boolean' },
+  { name: 'fullWidth', label: 'Full Width', type: 'boolean' },
+  { name: 'options', label: 'Options', type: 'options-editor' },
+  { name: 'isSingle', label: 'Single Select', type: 'boolean' },
+  { name: 'freeSolo', label: 'Allow Free Text', type: 'boolean' },
+  { name: 'clearable', label: 'Clear On Escape', type: 'boolean' },
+  { name: 'disableCloseOnSelect', label: 'Disable Close On Select', type: 'boolean' },
+  { name: 'fetchOnOpen', label: 'Fetch On Open', type: 'boolean' },
+  { name: 'labelField', label: 'Label Field', type: 'expression' },
+  { name: 'groupByField', label: 'Group By Field', type: 'expression' },
+  { name: 'targetValue', label: 'Target Value Path', type: 'expression' },
+  { name: 'targetValues', label: 'Target Values Map', type: 'expression' },
+  { name: 'asyncFetchOptions', label: 'Async Fetch Options', type: 'expression' },
+]

package/src/views/builder/inspector/definitions/breadcrumb/main.js

@@ -0,0 +1,9 @@
+export const BREADCRUMB_MAIN_FIELDS = [
+  { name: 'key', label: 'Key', type: 'expression' },
+  { name: 'separator', label: 'Separator', type: 'expression' },
+  {
+    name: 'items',
+    label: 'Items',
+    type: 'options', // Reusing options editor if it supports label/href or just label
+  }
+]