robobyte-front-builder 1.0.19 → 1.0.23

package/src/views/builder/UnsavedChangesGuard.jsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from 'react'
+import { useRouter } from 'next/router'
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle
+} from '@mui/material'
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded'
+
+/**
+ * Renders nothing visible until the user tries to leave the page (tab close,
+ * refresh, browser back, or in-app navigation) while `isDirty` is true.
+ *
+ *  - Tab close / refresh   → browser-native confirm (browsers do not allow
+ *                            custom UI here; only `beforeunload` is honored)
+ *  - In-app navigation     → custom MUI dialog (Stay / Leave)
+ *  - Browser back/forward  → handled by Next.js routeChangeStart, so the
+ *                            same custom dialog applies as long as the
+ *                            target stays inside the app
+ */
+export default function UnsavedChangesGuard({
+  isDirty,
+  title = 'Unsaved changes',
+  message = 'You have unsaved changes. If you leave this page now, your changes will be lost.',
+  stayLabel = 'Stay on page',
+  leaveLabel = 'Leave anyway'
+}) {
+  const router = useRouter()
+  const [pending, setPending] = useState(null) // { url, options }
+  // Set just before we re-fire a confirmed navigation so the routeChangeStart
+  // handler lets it through.
+  const allowNavigationRef = useRef(false)
+
+  // ── Tab close / refresh ─────────────────────────────────────────────────
+  useEffect(() => {
+    if (!isDirty) return
+    const handler = e => {
+      if (allowNavigationRef.current) return
+      e.preventDefault()
+      // Modern browsers ignore the message and show their own copy, but
+      // returnValue must be set for the prompt to appear at all.
+      e.returnValue = message
+      return message
+    }
+    window.addEventListener('beforeunload', handler)
+    return () => window.removeEventListener('beforeunload', handler)
+  }, [isDirty, message])
+
+  // ── In-app navigation (router push/replace, browser back) ──────────────
+  useEffect(() => {
+    if (!isDirty) return
+    const handler = (url, options) => {
+      if (allowNavigationRef.current) return
+      // Same-URL changes (e.g. shallow query swaps after save) are not real
+      // navigations from the user's POV; let them through.
+      if (url === router.asPath) return
+
+      setPending({ url, options })
+      // Documented Next.js pattern for cancelling a route change.
+      router.events.emit('routeChangeError')
+      // eslint-disable-next-line no-throw-literal
+      throw 'Route change aborted by UnsavedChangesGuard.'
+    }
+    router.events.on('routeChangeStart', handler)
+    return () => router.events.off('routeChangeStart', handler)
+  }, [isDirty, router])
+
+  const handleStay = () => setPending(null)
+
+  const handleLeave = () => {
+    if (!pending) return
+    const { url, options } = pending
+    allowNavigationRef.current = true
+    setPending(null)
+    // Re-fire the navigation; allowNavigationRef short-circuits the guard.
+    router.push(url, undefined, options).finally(() => {
+      allowNavigationRef.current = false
+    })
+  }
+
+  return (
+    <Dialog open={!!pending} onClose={handleStay} maxWidth='xs' fullWidth>
+      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <WarningAmberRoundedIcon color='warning' fontSize='small' />
+        {title}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText>{message}</DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ px: 3, pb: 2 }}>
+        <Button onClick={handleStay} autoFocus variant='contained' color='primary'>
+          {stayLabel}
+        </Button>
+        <Button onClick={handleLeave} color='error'>
+          {leaveLabel}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

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

@@ -28,22 +28,19 @@ export default function Inspector() {
         variant="scrollable"
         scrollButtons="auto"
         sx={{
-          bgcolor: '#3a3f45',
+          bgcolor: 'background.paper',
+          borderBottom: '1px solid',
+          borderColor: 'divider',
           minHeight: 48,
           '& .MuiTab-root': {
-            color: 'rgba(255, 255, 255, 0.7)',
+            color: 'text.secondary',
             minHeight: 48,
             textTransform: 'none',
             fontSize: '0.875rem',
             fontWeight: 500,
-            '&.Mui-selected': {
-              color: '#fff'
-            }
+            '&.Mui-selected': { color: 'text.primary' },
           },
-          '& .MuiTabs-indicator': {
-            backgroundColor: '#9c27b0',
-            height: 3
-          }
+          '& .MuiTabs-indicator': { backgroundColor: 'primary.main', height: 3 },
         }}
       >
         <Tab label="Main" />

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

@@ -2,7 +2,7 @@ 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 { findNodeAnywhere, updateNodeAnywhere } from 'services/builderHelper'
 import JSEditor from '../../JSEditor'
 
 /**
@@ -19,7 +19,7 @@ function normalizeActionField(field) {
 
 export default function ComponentActionsTab() {
   const { schema, selectedId, setSchema } = useBuilder()
-  const node = findNode(schema.root, selectedId)
+  const { node, location, dialogId } = findNodeAnywhere(schema, selectedId)
   if (!node) return null
 
   const actionFields = getActionsFields(node.type)
@@ -40,17 +40,11 @@ export default function ComponentActionsTab() {
   )
 
   const updateAction = (name, actionData) => {
-    setSchema(prev => ({
-      ...prev,
-      root: updateNodeInTree(prev.root, node.id, {
-        props: {
-          actions: {
-            ...actions,
-            [name]: actionData
-          }
-        }
-      })
-    }))
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, {
+        props: { actions: { ...actions, [name]: actionData } }
+      }, location, dialogId)
+    )
   }
 
   return (

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

@@ -1,4 +1,4 @@
-import { Box } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { useBuilder } from 'src/context/BuilderContext'
 import FieldWrapper from '../fields/FieldWrapper'
 import ExpressionEditor from '../fields/ExpressionEditor'
@@ -8,47 +8,98 @@ import TextEditor from '../fields/TextEditor'
 import OptionsEditor from '../fields/OptionsEditor'
 import TabsEditor from '../fields/TabsEditor'
 import ItemsEditor from '../fields/ItemsEditor'
+import ExtraColsEditor from '../fields/ExtraColsEditor'
+import ColumnsConfigEditor from '../fields/ColumnsConfigEditor'
+import ActionsConfigEditor from '../fields/ActionsConfigEditor'
+import ThresholdsEditor from '../fields/ThresholdsEditor'
+import SeriesEditorField from '../fields/SeriesEditorField'
+import DonutRingsEditorField from '../fields/DonutRingsEditorField'
+import ColorSchemaField from '../fields/ColorSchemaField'
+import ColumnFunctionEditor from '../fields/ColumnFunctionEditor'
+import IconEditor from '../fields/IconEditor'
+import ColumnMappingEditor from '../fields/ColumnMappingEditor'
+import TableColumnsEditor from '../fields/TableColumnsEditor'
+import MarkersEditorField from '../fields/MarkersEditorField'
+import KpiActionField from '../fields/KpiActionField'
 import { getMainFields } from '../definitions'
-import { findNode, updateNodeInTree } from 'services/builderHelper'
+import { findNodeAnywhere, updateNodeAnywhere } 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
-  }
+  return { valueType: 'value', value: field }
 }
 
 export default function MainTab() {
   const { schema, selectedId, setSchema } = useBuilder()
-  const node = findNode(schema.root, selectedId)
+
+  const { node, location, dialogId } = findNodeAnywhere(schema, 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 main = Object.fromEntries(
+    Object.entries(node.props?.main ?? {}).map(([k, v]) => [k, normalizeField(v)])
+  )
+
+  const actions = node.props?.actions ?? {}
+
   const updateField = (name, fieldState) => {
-    setSchema(prev => ({
-      ...prev,
-      root: updateNodeInTree(prev.root, node.id, {
-        props: {
-          main: {
-            ...main,
-            [name]: fieldState
-          }
-        }
-      })
-    }))
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, { props: { main: { ...main, [name]: fieldState } } }, location, dialogId)
+    )
+  }
+
+  // KPI action fields write to node.props.actions, not node.props.main
+  const updateAction = (name, actionValue) => {
+    const nextActions = { ...actions }
+    if (actionValue == null) {
+      delete nextActions[name]
+    } else {
+      nextActions[name] = actionValue
+    }
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, { props: { actions: nextActions } }, location, dialogId)
+    )
   }
   return (
     <Box p={2}>
       {fields.map(field => {
+        // ── Note / info block — no input, no FieldWrapper ─────────────────
+        if (field.type === 'note') {
+          return (
+            <Box key={field.name} sx={{
+              mb: 1.5, px: 1.25, py: 0.75,
+              bgcolor: 'action.hover',
+              borderLeft: '3px solid',
+              borderColor: 'info.main',
+              borderRadius: '0 4px 4px 0',
+            }}>
+              {field.label && (
+                <Typography variant='caption' sx={{ display: 'block', fontWeight: 600, mb: 0.25, color: 'info.main' }}>
+                  {field.label}
+                </Typography>
+              )}
+              <Typography variant='caption' sx={{ display: 'block', color: 'text.secondary', whiteSpace: 'pre-line' }}>
+                {field.text}
+              </Typography>
+            </Box>
+          )
+        }
+
+        // KPI action fields read from node.props.actions, not main
+        if (field.type === 'kpi-action') {
+          return (
+            <FieldWrapper key={field.name} label={field.label}>
+              <KpiActionField
+                label={field.label}
+                contextVars={field.context ?? []}
+                value={actions[field.name]}
+                onChange={payload => updateAction(field.name, payload)}
+              />
+            </FieldWrapper>
+          )
+        }
+
         const fieldValue = main[field.name] ?? { valueType: 'value', value: undefined }
         return (
           <FieldWrapper key={field.name} label={field.label}>
@@ -87,6 +138,73 @@ export default function MainTab() {
             {field.type === 'items-editor' && (
               <ItemsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
             )}
+
+            {field.type === 'extra-cols-editor' && (
+              <ExtraColsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'columns-config-editor' && (
+              <ColumnsConfigEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'thresholds-editor' && (
+              <ThresholdsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'series-editor' && (
+              <SeriesEditorField field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'rings-editor' && (
+              <DonutRingsEditorField field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'markers-editor' && (
+              <MarkersEditorField field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'color-schema' && (
+              <ColorSchemaField field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'actions-config-editor' && (
+              <ActionsConfigEditor field={fieldValue} context={field.context} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'icon' && (
+              <IconEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'column-mapping-editor' && (
+              <ColumnMappingEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'table-columns-editor' && (
+              <TableColumnsEditor field={fieldValue} onChange={payload => updateField(field.name, payload)} />
+            )}
+
+            {field.type === 'code' && (
+              <Box display='flex' alignItems='center' gap={1}>
+                <Typography
+                  noWrap
+                  sx={{
+                    flex: 1, fontSize: 11, fontFamily: 'monospace',
+                    color: fieldValue.value?.trim() ? '#aed581' : '#555',
+                    overflow: 'hidden', textOverflow: 'ellipsis',
+                  }}
+                >
+                  {fieldValue.value?.trim()
+                    ? fieldValue.value.trim().split('\n').find(l => l.trim() && !l.trim().startsWith('//') && !l.trim().startsWith('/*')) ?? '(code set)'
+                    : '(no code)'}
+                </Typography>
+                <ColumnFunctionEditor
+                  label={field.label}
+                  type={field.codeType || 'calculation'}
+                  value={fieldValue.value || ''}
+                  onChange={v => updateField(field.name, { valueType: 'value', value: v })}
+                />
+              </Box>
+            )}
           </FieldWrapper>
         )
       })}

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

@@ -6,43 +6,28 @@ 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'
+import { findNodeAnywhere, updateNodeAnywhere } 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
-  }
+  return { valueType: 'value', value: field }
 }
 
 export default function RulesTab() {
   const { schema, selectedId, setSchema } = useBuilder()
-  const node = findNode(schema.root, selectedId)
+  const { node, location, dialogId } = findNodeAnywhere(schema, 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 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
-          }
-        }
-      })
-    }))
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, { props: { rules: { ...rules, [name]: fieldState } } }, location, dialogId)
+    )
   }
 
   return (

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

@@ -6,43 +6,28 @@ 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'
+import { findNodeAnywhere, updateNodeAnywhere } 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
-  }
+  return { valueType: 'value', value: field }
 }
 
 export default function StyleTab() {
   const { schema, selectedId, setSchema } = useBuilder()
-  const node = findNode(schema.root, selectedId)
+  const { node, location, dialogId } = findNodeAnywhere(schema, 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 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
-          }
-        }
-      })
-    }))
+    setSchema(prev =>
+      updateNodeAnywhere(prev, node.id, { props: { style: { ...style, [name]: fieldState } } }, location, dialogId)
+    )
   }
 
   return (

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

@@ -1,13 +1,11 @@
+import { LABEL_POSITION_FIELDS } from '../common/main'
+
 export const AUTOCOMPLETE_MAIN_FIELDS = [
   { name: 'key', label: 'Key', type: 'expression' },
   { name: 'label', label: 'Label', type: 'expression' },
+  ...LABEL_POSITION_FIELDS,
   { name: 'placeholder', label: 'Placeholder', type: 'text' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium', 'large']
-  },
+  { 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' },

package/src/views/builder/inspector/definitions/banner/actions.js

@@ -0,0 +1,7 @@
+export const BANNER_ACTIONS_FIELDS = [
+  {
+    name: 'onClose',
+    label: 'On Close',
+    desc: 'Fires when the user dismisses the banner (requires Dismissible = true).',
+  },
+]

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

@@ -0,0 +1,22 @@
+export const BANNER_MAIN_FIELDS = [
+  { name: 'key',     label: 'Key',     type: 'expression' },
+  { name: 'message', label: 'Message', type: 'expression' },
+  { name: 'title',   label: 'Title',   type: 'expression' },
+  {
+    name: 'severity',
+    label: 'Severity',
+    type: 'select',
+    options: ['info', 'success', 'warning', 'error'],
+  },
+  {
+    name: 'variant',
+    label: 'Variant',
+    type: 'select',
+    options: ['standard', 'filled', 'outlined'],
+  },
+  // Controlled visibility — bind to a data key to show/hide programmatically.
+  // Leave blank to let the component manage its own visible state.
+  { name: 'open',        label: 'Controlled Open', type: 'expression' },
+  { name: 'dismissible', label: 'Dismissible',     type: 'boolean' },
+  { name: 'icon',        label: 'Show Icon',       type: 'boolean' },
+]

package/src/views/builder/inspector/definitions/banner/rules.js

@@ -0,0 +1 @@
+export const BANNER_RULES_FIELDS = []

package/src/views/builder/inspector/definitions/banner/style.js

@@ -0,0 +1 @@
+export const BANNER_STYLE_FIELDS = []

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

@@ -1,9 +1,46 @@
 export const BREADCRUMB_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  { name: 'separator', label: 'Separator', type: 'expression' },
+  { name: 'key',       label: 'Key',      type: 'expression' },
+  { name: 'items',     label: 'Items',    type: 'expression' },
+  // [{label, href?, disabled?}] — last item = current page
+
   {
-    name: 'items',
-    label: 'Items',
-    type: 'options', // Reusing options editor if it supports label/href or just label
-  }
+    name: 'variant', label: 'Variant', type: 'select',
+    options: ['breadcrumb', 'chevron'],
+  },
+  {
+    name: 'mode', label: 'Interaction Mode', type: 'select',
+    options: ['link', 'click', 'none'],
+    // link  → uses href for navigation
+    // click → calls onClick code with {item, index}
+    // none  → display only
+  },
+
+  // ── Breadcrumb-variant options ──────────────────────────────────────────
+  { name: 'separator',    label: 'Separator',    type: 'expression' },
+  { name: 'maxItems',     label: 'Max Items',    type: 'number' },
+  {
+    name: 'linkUnderline', label: 'Link Underline', type: 'select',
+    options: ['hover', 'always', 'none'],
+  },
+  {
+    name: 'currentColor', label: 'Current Item Color', type: 'select',
+    options: ['text.primary', 'primary.main', 'text.secondary', 'inherit'],
+  },
+
+  // ── Chevron-variant options ─────────────────────────────────────────────
+  { name: 'activeIndex', label: 'Active Index', type: 'expression' },
+  {
+    name: 'itemSize', label: 'Item Size', type: 'select',
+    options: ['small', 'medium', 'large'],
+  },
+  { name: 'fullWidth',       label: 'Full Width',           type: 'boolean' },
+  { name: 'completedColor',  label: 'Completed BG Color',   type: 'text' },
+  { name: 'activeColor',     label: 'Active BG Color',      type: 'text' },
+  { name: 'pendingColor',    label: 'Pending BG Color',     type: 'text' },
+  { name: 'completedTextColor', label: 'Completed Text Color', type: 'text' },
+  { name: 'activeTextColor',    label: 'Active Text Color',    type: 'text' },
+  { name: 'pendingTextColor',   label: 'Pending Text Color',   type: 'text' },
+
+  // ── onClick code ────────────────────────────────────────────────────────
+  { name: 'onClick', label: 'On Item Click', type: 'code', codeType: 'calculation' },
 ]

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

@@ -1,14 +1,13 @@
 export const BUTTON_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  { name: 'label', label: 'Label', type: 'expression' },
-  { name: 'variant', label: 'Variant', type: 'select', options: ['text', 'outlined', 'contained'] },
-  {
-    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: 'FullWidth', type: 'boolean' }
+  { name: 'key',        label: 'Key',        type: 'expression' },
+  { name: 'label',      label: 'Label',      type: 'expression' },
+  { name: 'variant',    label: 'Variant',    type: 'select', options: ['text', 'outlined', 'contained'] },
+  { name: 'color',      label: 'Color',      type: 'select', options: ['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success', 'inherit'] },
+  { name: 'size',       label: 'Size',       type: 'select', options: ['small', 'medium', 'large'] },
+  { name: 'prefix',     label: 'Prefix',     type: 'icon' },
+  { name: 'suffix',     label: 'Suffix',     type: 'icon' },
+  { name: 'tooltip',    label: 'Tooltip',    type: 'expression' },
+  { name: 'iconButton', label: 'Icon Button', type: 'boolean' },
+  { name: 'disabled',   label: 'Disabled',   type: 'boolean' },
+  { name: 'fullWidth',  label: 'Full Width',  type: 'boolean' },
 ]