robobyte-front-builder 1.0.17 → 1.0.21

package/src/views/builder/inspector/fields/ColorSchemaField.jsx

@@ -0,0 +1,140 @@
+import {
+  Box, Typography, TextField, ToggleButtonGroup, ToggleButton, Tooltip,
+} from '@mui/material'
+import { generateTints, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+
+// ── Mode definitions ──────────────────────────────────────────────────────────
+
+const MODES = [
+  { value: 'palette', label: 'Palette', title: 'Cycle through the global fallback palette' },
+  { value: 'tints',   label: 'Tints',   title: 'Monochromatic tints of a chosen base color' },
+  { value: 'data',    label: 'Data',    title: 'Use only colors from the data — no generated fallback' },
+  { value: 'custom',  label: 'Custom',  title: 'Define a custom JSON color array for this component' },
+]
+
+// ── Inline preview strip ──────────────────────────────────────────────────────
+
+function ColorPreview({ mode, color }) {
+  const colors =
+    mode === 'tints' && color ? generateTints(color, 6) :
+    mode === 'palette'        ? DEFAULT_PALETTE.slice(0, 6) :
+    []
+
+  if (!colors.length) {
+    return (
+      <Typography sx={{ fontSize: 10, color: '#555', fontStyle: 'italic' }}>
+        from data only
+      </Typography>
+    )
+  }
+  return (
+    <Box sx={{ display: 'flex', gap: 0.4 }}>
+      {colors.map((c, i) => (
+        <Box key={i} sx={{
+          width: 12, height: 12, borderRadius: '2px', bgcolor: c,
+          border: '1px solid rgba(255,255,255,0.08)',
+        }} />
+      ))}
+    </Box>
+  )
+}
+
+// ── Main field component ──────────────────────────────────────────────────────
+
+export default function ColorSchemaField({ field, onChange }) {
+  const schema = field?.value ?? {}
+  const mode   = schema.mode  || 'palette'
+  const color  = schema.color || '#1976d2'
+
+  const upd = (k, v) => onChange({ valueType: 'value', value: { ...schema, [k]: v } })
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.875 }}>
+
+      {/* Mode selector + preview */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+        <ToggleButtonGroup
+          size='small' exclusive
+          value={mode}
+          onChange={(_, v) => v && upd('mode', v)}
+          sx={{
+            '& .MuiToggleButton-root': {
+              fontSize: 10, py: '2px', px: 0.875, color: '#999', borderColor: '#444',
+              '&.Mui-selected': { color: '#90caf9', bgcolor: 'rgba(144,202,249,0.1)', borderColor: '#90caf9' },
+              '&:hover': { bgcolor: 'rgba(255,255,255,0.05)' },
+            },
+          }}
+        >
+          {MODES.map(m => (
+            <Tooltip key={m.value} title={m.title} placement='top'>
+              <ToggleButton value={m.value}>{m.label}</ToggleButton>
+            </Tooltip>
+          ))}
+        </ToggleButtonGroup>
+        <ColorPreview mode={mode} color={color} />
+      </Box>
+
+      {/* Tints: base color picker */}
+      {mode === 'tints' && (
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
+          {/* Native color input hidden behind swatch */}
+          <Box sx={{
+            width: 22, height: 22, borderRadius: '4px',
+            bgcolor: color, border: '1px solid #555',
+            overflow: 'hidden', position: 'relative', flexShrink: 0,
+          }}>
+            <input
+              type='color' value={color}
+              onChange={e => upd('color', e.target.value)}
+              style={{
+                position: 'absolute', inset: 0, width: '200%', height: '200%',
+                border: 'none', padding: 0, cursor: 'pointer', opacity: 0,
+              }}
+            />
+          </Box>
+          {/* Hex input */}
+          <TextField
+            size='small' value={color}
+            onChange={e => upd('color', e.target.value)}
+            sx={{
+              width: 96,
+              '& .MuiInputBase-root': { color: '#e0e0e0', fontSize: 11 },
+              '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+              '& input': { py: '4px', px: 1, fontFamily: 'monospace' },
+            }}
+          />
+          {/* Palette swatches */}
+          <Box sx={{ display: 'flex', gap: 0.4, flexWrap: 'wrap', flex: 1 }}>
+            {DEFAULT_PALETTE.map(c => (
+              <Box
+                key={c} onClick={() => upd('color', c)}
+                sx={{
+                  width: 12, height: 12, borderRadius: '2px', bgcolor: c,
+                  cursor: 'pointer',
+                  border: color === c ? '1.5px solid #fff' : '1px solid transparent',
+                  transition: 'transform .1s',
+                  '&:hover': { transform: 'scale(1.25)' },
+                }}
+              />
+            ))}
+          </Box>
+        </Box>
+      )}
+
+      {/* Custom: JSON array */}
+      {mode === 'custom' && (
+        <TextField
+          fullWidth size='small'
+          value={schema.customColors || ''}
+          onChange={e => upd('customColors', e.target.value)}
+          placeholder='["#1976d2","#e91e63","#4caf50","#ff9800"]'
+          sx={{
+            '& .MuiInputBase-root': { color: '#e0e0e0', fontSize: 11 },
+            '& .MuiOutlinedInput-notchedOutline': { borderColor: '#555' },
+            '& input': { py: '4px', px: 1 },
+          }}
+        />
+      )}
+    </Box>
+  )
+}

package/src/views/builder/inspector/fields/ColumnFunctionEditor.jsx

@@ -0,0 +1,238 @@
+import { useRef, useState } from 'react'
+import { Box, Button, IconButton, Tooltip, Typography } from '@mui/material'
+import { Close, Fullscreen, FullscreenExit } from '@mui/icons-material'
+import { CodeBraces } from 'mdi-material-ui'
+import Editor from '@monaco-editor/react'
+import { HelpPopover } from './FunctionHelpPopover'
+
+// ── Monaco options ─────────────────────────────────────────────────────────────
+
+const EDITOR_OPTIONS = {
+  minimap: { enabled: false },
+  fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+  fontSize: 13,
+  lineNumbers: 'on',
+  wordWrap: 'on',
+  scrollBeyondLastLine: false,
+  automaticLayout: true,
+}
+
+// ── Per-type templates (no JSDoc — see help popover) ──────────────────────────
+
+const SCOPE_PARAMS = `  { data, setData, dataRef, fetchReportData, setRefValue, getRefValue, getNodeRef, nodeName }`
+
+const TEMPLATES = {
+  calculation: `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
+
+}
+`,
+
+  calculationValidate: `async function Calculation(form, data, setData, dataRef, reportRefs, openDialog, closeDialog, urlParams, page) {
+  return true
+}
+`,
+
+  valueSetter: `(params,
+${SCOPE_PARAMS}) => {
+  const { newValue, data: rowData, context } = params
+  rowData.myField = newValue
+  setRefValue(context.updateRef, rowData, '__id', 'myField', newValue)
+  return true
+}`,
+
+  valueGetter: `(params,
+${SCOPE_PARAMS}) => {
+  return getRefValue(params.context.updateRef, params.data, '__id', 'myField')
+    ?? params.data?.myField
+}`,
+
+  valueFormatter: `(params,
+${SCOPE_PARAMS}) => {
+  return params.value ? 'Yes' : 'No'
+}`,
+
+  cellStyle: `(params,
+${SCOPE_PARAMS}) => {
+  if (params.value > 0) return { color: 'green', fontWeight: 'bold' }
+  if (params.value < 0) return { color: 'red' }
+  return {}
+}`,
+
+  tooltipValueGetter: `(params,
+${SCOPE_PARAMS}) => {
+  return String(params.value ?? '')
+}`,
+
+  asyncFetchOptions: `async (search, { data, dataRef, reportRefs, setData } = {}) => {
+  const res = await fetch(\`/api/items?q=\${encodeURIComponent(search)}\`)
+  return res.json()
+}`,
+}
+
+// Types that lock their first and last lines (signature shell)
+const SHELL_TYPES = new Set(['asyncFetchOptions'])
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+export default function ColumnFunctionEditor({ label, value, onChange, type = 'valueSetter' }) {
+  const [open, setOpen] = useState(false)
+  const [fullscreen, setFullscreen] = useState(false)
+  const [code, setCode] = useState('')
+  const editorRef = useRef(null)
+  const hasShell = SHELL_TYPES.has(type)
+
+  const handleOpen = () => {
+    setCode(value?.trim() || TEMPLATES[type] || TEMPLATES.valueSetter)
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+    setFullscreen(false)
+  }
+
+  const handleSave = () => {
+    onChange(code.trim())
+    handleClose()
+  }
+
+  const hasValue = !!value?.trim()
+
+  const handleMount = (editor, monaco) => {
+    editorRef.current = editor
+
+    if (hasShell) {
+      const model = editor.getModel()
+      if (model) {
+        const total = model.getLineCount()
+        const lockedRanges = [
+          new monaco.Range(1, 1, 1, model.getLineLength(1) + 1),
+          new monaco.Range(total, 1, total, model.getLineLength(total) + 1),
+        ]
+        editor.createDecorationsCollection(
+          lockedRanges.map(range => ({
+            range,
+            options: { isWholeLine: true, className: 'readonly', inlineClassName: 'readonly-inline' },
+          }))
+        )
+        editor.onDidChangeCursorPosition(e => {
+          const lines = editor.getModel()?.getLineCount() ?? total
+          if (e.position.lineNumber <= 1) {
+            editor.setPosition({ lineNumber: 2, column: 3 })
+          } else if (e.position.lineNumber >= lines) {
+            editor.setPosition({ lineNumber: lines - 1, column: 3 })
+          }
+        })
+        editor.setPosition({ lineNumber: 2, column: 3 })
+      }
+    }
+
+    editor.focus()
+  }
+
+  return (
+    <>
+      <Tooltip title={`Open ${label} in Monaco editor`}>
+        <IconButton
+          size='small'
+          onClick={handleOpen}
+          sx={{ color: hasValue ? '#aed581' : '#555', p: 0.4 }}
+        >
+          <CodeBraces fontSize='small' />
+        </IconButton>
+      </Tooltip>
+
+      {open && (
+        <Box
+          sx={{
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            top: fullscreen ? 0 : 'auto',
+            height: fullscreen ? '100vh' : '55vh',
+            bgcolor: '#1e1e1e',
+            zIndex: 1500,
+            borderTop: fullscreen ? 'none' : '2px solid #2a3a4a',
+            display: 'flex',
+            flexDirection: 'column',
+            transition: 'height 0.15s ease, top 0.15s ease',
+          }}
+        >
+          {/* Header */}
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              px: 2,
+              py: 0.8,
+              bgcolor: '#252526',
+              borderBottom: '1px solid #333',
+              flexShrink: 0,
+            }}
+          >
+            <Box display='flex' alignItems='center' gap={1}>
+              <CodeBraces sx={{ fontSize: 14, color: '#7b8ea0' }} />
+              <Typography sx={{ fontSize: 12, color: '#90caf9', fontWeight: 600, letterSpacing: '0.05em' }}>
+                {label}
+              </Typography>
+              {hasShell && (
+                <Typography sx={{ fontSize: 11, color: '#555', fontFamily: 'monospace' }}>
+                  async (search, {'{ data, dataRef, reportRefs, setData }'} = {'{}'}) =&gt; {'{ … }'}
+                </Typography>
+              )}
+            </Box>
+            <Box display='flex' alignItems='center' gap={0.5}>
+              <HelpPopover type={type} />
+              <Tooltip title={fullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
+                <IconButton size='small' onClick={() => setFullscreen(f => !f)} sx={{ color: '#666' }}>
+                  {fullscreen
+                    ? <FullscreenExit sx={{ fontSize: 16 }} />
+                    : <Fullscreen sx={{ fontSize: 16 }} />}
+                </IconButton>
+              </Tooltip>
+              <IconButton size='small' onClick={handleClose} sx={{ color: '#666' }}>
+                <Close sx={{ fontSize: 16 }} />
+              </IconButton>
+            </Box>
+          </Box>
+
+          {/* Monaco */}
+          <Box sx={{ flex: 1, minHeight: 0 }}>
+            <Editor
+              height='100%'
+              defaultLanguage='javascript'
+              theme='vs-dark'
+              value={code}
+              options={EDITOR_OPTIONS}
+              onMount={handleMount}
+              onChange={v => setCode(v ?? '')}
+            />
+          </Box>
+
+          {/* Footer */}
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 1,
+              justifyContent: 'flex-end',
+              px: 2,
+              py: 1,
+              bgcolor: '#252526',
+              borderTop: '1px solid #333',
+              flexShrink: 0,
+            }}
+          >
+            <Button size='small' onClick={handleClose} sx={{ color: '#888' }}>
+              Cancel
+            </Button>
+            <Button size='small' variant='contained' color='primary' onClick={handleSave}>
+              Apply
+            </Button>
+          </Box>
+        </Box>
+      )}
+    </>
+  )
+}

package/src/views/builder/inspector/fields/ColumnMappingEditor.jsx

@@ -0,0 +1,105 @@
+import { Box, TextField, IconButton, Button, Typography } from '@mui/material'
+import { Add, Close, EastOutlined } from '@mui/icons-material'
+import { useState, useEffect } from 'react'
+import JSEditor from '../../JSEditor'
+
+export default function ColumnMappingEditor({ field, onChange }) {
+  const safeField = field ?? { valueType: 'value', value: [] }
+  const isExpression = safeField.valueType === 'expression'
+  const [rows, setRows] = useState([])
+
+  useEffect(() => {
+    if (!isExpression && Array.isArray(safeField.value)) {
+      setRows(safeField.value.length > 0 ? safeField.value : [{ column: '', field: '' }])
+    } else {
+      setRows([{ column: '', field: '' }])
+    }
+  }, [isExpression, JSON.stringify(safeField.value)])
+
+  const handleAdd = () => {
+    const next = [...rows, { column: '', field: '' }]
+    setRows(next)
+    onChange?.({ valueType: 'value', value: next })
+  }
+
+  const handleRemove = (index) => {
+    const next = rows.filter((_, i) => i !== index)
+    setRows(next)
+    onChange?.({ valueType: 'value', value: next })
+  }
+
+  const handleChange = (index, key, value) => {
+    const next = rows.map((r, i) => i === index ? { ...r, [key]: value } : r)
+    setRows(next)
+    onChange?.({ valueType: 'value', value: next })
+  }
+
+  return (
+    <Box>
+      <Box display='flex' alignItems='center' justifyContent='space-between' mb={1}>
+        <Typography variant='subtitle2' sx={{ opacity: 0.9 }}>
+          {isExpression ? 'Using JS Expression' : 'Manual Entry'}
+        </Typography>
+        <JSEditor
+          value={rows}
+          expression={safeField.expression}
+          mode={isExpression ? 'expression' : 'value'}
+          onChange={payload => onChange?.(payload)}
+        />
+      </Box>
+
+      {!isExpression && (
+        <>
+          {/* Column headers */}
+          <Box display='flex' alignItems='center' gap={1} mb={0.5}>
+            <Typography variant='caption' sx={{ flex: 1, opacity: 0.6 }}>Excel Column</Typography>
+            <Box sx={{ width: 20 }} />
+            <Typography variant='caption' sx={{ flex: 1, opacity: 0.6 }}>Field Name</Typography>
+            <Box sx={{ width: 32 }} />
+          </Box>
+
+          {/* Rows */}
+          {rows.map((row, index) => (
+            <Box key={index} display='flex' alignItems='center' gap={1} mb={1}>
+              <TextField
+                size='small'
+                value={row.column || ''}
+                onChange={e => handleChange(index, 'column', e.target.value)}
+                placeholder='column name'
+                sx={{ flex: 1 }}
+              />
+              <EastOutlined sx={{ fontSize: 16, color: 'text.disabled', flexShrink: 0 }} />
+              <TextField
+                size='small'
+                value={row.field || ''}
+                onChange={e => handleChange(index, 'field', e.target.value)}
+                placeholder='field name'
+                sx={{ flex: 1 }}
+              />
+              <IconButton
+                size='small'
+                onClick={() => handleRemove(index)}
+                disabled={rows.length === 1}
+                sx={{ width: 32, height: 32, flexShrink: 0 }}
+              >
+                <Close fontSize='small' />
+              </IconButton>
+            </Box>
+          ))}
+
+          <Button size='small' startIcon={<Add />} onClick={handleAdd} sx={{ mt: 0.5 }}>
+            Add Mapping
+          </Button>
+        </>
+      )}
+
+      {isExpression && (
+        <Box sx={{ p: 1.5, bgcolor: 'action.hover', borderRadius: 1, mt: 1 }}>
+          <Typography variant='body2' color='text.secondary'>
+            Mapping defined by JS expression. Click the code icon above to edit.
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  )
+}