robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -0,0 +1,348 @@
+import { Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { evaluateThreshold, resolveMuiColor } from 'services/builderHelper/thresholdEngine'
+import { schemaColor, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+import { runKpiAction } from 'services/builderHelper/actionExecutor'
+
+// ── Status classification ─────────────────────────────────────────────────────
+
+const DONE_STATUSES    = new Set(['done', 'success', 'completed', 'approved', 'closed', 'resolved', 'delivered', 'shipped', 'paid'])
+const ACTIVE_STATUSES  = new Set(['active', 'current', 'in-progress', 'inprogress', 'running', 'processing', 'open', 'started'])
+const WARNING_STATUSES = new Set(['warning', 'warn', 'at-risk', 'atrisk', 'delayed', 'on-hold'])
+const ERROR_STATUSES   = new Set(['error', 'failed', 'rejected', 'cancelled', 'blocked'])
+const PENDING_STATUSES = new Set(['pending', 'todo', 'future', 'upcoming', 'planned', 'not-started', 'queued'])
+
+function classifyStatus(s) {
+  const v = (s || '').toLowerCase().replace(/[\s_]/g, '-')
+  if (DONE_STATUSES.has(v))    return 'done'
+  if (ACTIVE_STATUSES.has(v))  return 'active'
+  if (WARNING_STATUSES.has(v)) return 'warning'
+  if (ERROR_STATUSES.has(v))   return 'error'
+  if (PENDING_STATUSES.has(v)) return 'pending'
+  return 'default'
+}
+
+// Semantic dot colors
+const CLASS_COLORS = {
+  done:    '#4caf50',
+  active:  '#1976d2',
+  warning: '#ff9800',
+  error:   '#f44336',
+  pending: '#bdbdbd',
+  default: '#bdbdbd',
+}
+
+// ── Sample data ───────────────────────────────────────────────────────────────
+
+const SAMPLE_STEPS = [
+  { id: 1, label: 'Order placed',     status: 'done',    description: 'Received Jan 10, 2025' },
+  { id: 2, label: 'Processing',       status: 'done',    description: 'Prepared Jan 11, 2025' },
+  { id: 3, label: 'Shipped',          status: 'active',  description: 'Est. arrival Jan 15' },
+  { id: 4, label: 'Out for delivery', status: 'pending' },
+  { id: 5, label: 'Delivered',        status: 'pending' },
+]
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
+
+export default function StepStageRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  const {
+    // data
+    dataKey,
+    labelField    = 'label',
+    statusField   = 'status',
+    descField,
+    iconField,
+    idField       = 'id',
+    activeKey,
+    maxItems,
+
+    // coloring
+    colorSchema,
+    thresholds    = [],
+    colorMap      = {},
+    activeColor   = '#1976d2',
+    doneColor     = '#4caf50',
+    pendingColor  = '#e0e0e0',
+    warningColor  = '#ff9800',
+    errorColor    = '#f44336',
+
+    // connector line
+    lineColor     = '#e0e0e0',
+    lineStyle     = 'solid',
+    filledLine    = true,
+
+    // dot
+    size          = 28,
+    dotStyle      = 'auto',   // 'auto' | 'filled' | 'ring'
+
+    // labels
+    showLabels    = true,
+    labelPosition = 'below',  // 'below' | 'above'
+    showNumbers   = true,
+    showDesc      = true,
+    fontSize      = 12,
+
+    // layout
+    orientation   = 'horizontal',
+  } = main
+
+  // Safe-parse colorMap — may arrive as a JSON string
+  const safeColorMap = typeof colorMap === 'string'
+    ? (() => { try { return JSON.parse(colorMap) } catch { return {} } })()
+    : (colorMap && typeof colorMap === 'object' ? colorMap : {})
+
+  const rawResolved = resolveValue(dataKey, data)
+  const noDataBound = inBuilder && (!Array.isArray(rawResolved) || rawResolved.length === 0)
+  const rawItems    = noDataBound ? SAMPLE_STEPS : (Array.isArray(rawResolved) ? rawResolved : [])
+  const items       = maxItems ? rawItems.slice(0, Number(maxItems)) : rawItems
+
+  const activeVal = noDataBound ? 3 /* highlight "Shipped" */ : resolveValue(activeKey, data, null)
+
+  if (!inBuilder && items.length === 0) return null
+
+  const sz = Math.max(8, Number(size) || 28)
+
+  // Determine the semantic class for a step (used for glyph, label weight, line fill)
+  const getStepClass = (item, i) => {
+    const status = item[statusField]
+
+    // 1. Status keyword classification
+    const cls = classifyStatus(status)
+    if (cls !== 'default') return cls
+
+    // 2. Fallback: activeKey/idField comparison (index or id)
+    if (activeVal != null) {
+      const itemId    = item[idField] != null ? item[idField] : i
+      const numActive = Number(activeVal)
+      const numId     = Number(itemId)
+      if (!isNaN(numId) && !isNaN(numActive)) {
+        if (numId === numActive) return 'active'
+        if (numId < numActive)  return 'done'
+        return 'pending'
+      }
+      if (String(itemId) === String(activeVal)) return 'active'
+    }
+
+    return 'default'
+  }
+
+  const resolveStepColor = (item, i) => {
+    const status = item[statusField]
+
+    // 1. Explicit colorMap override
+    if (status && safeColorMap[status]) return resolveMuiColor(safeColorMap[status]).color
+
+    // 2. colorSchema — when explicitly configured, takes priority over semantic colors
+    if (colorSchema?.mode) {
+      const c = schemaColor(colorSchema, i, item['color'] || null, items.length, DEFAULT_PALETTE)
+      if (c) return c
+    }
+
+    // 3. Numeric thresholds — only for numeric status values
+    const numericStatus = status !== '' && status != null && !isNaN(Number(status))
+    if (numericStatus && thresholds?.length) {
+      const rule = evaluateThreshold(Number(status), thresholds)
+      if (rule) return resolveMuiColor(rule.color).color
+    }
+
+    // 4. Semantic step class
+    const cls = getStepClass(item, i)
+    const semanticColors = {
+      done:    doneColor,
+      active:  activeColor,
+      warning: warningColor,
+      error:   errorColor,
+      pending: pendingColor,
+      default: pendingColor,
+    }
+    return semanticColors[cls] ?? pendingColor
+  }
+
+  // ── Click action ─────────────────────────────────────────────────────────────
+  const hasClickAction = !!node.props?.actions?.onStepClick?.code
+  const handleStepClick = (item, i) => {
+    runKpiAction(node, viewerContext, 'onStepClick', {
+      clickedItem:   item,
+      clickedIndex:  i,
+      clickedLabel:  item[labelField],
+      clickedStatus: item[statusField],
+      clickedId:     item[idField] ?? i,
+    })
+  }
+
+  const isHoriz = orientation === 'horizontal'
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{
+        display:       'flex',
+        flexDirection: isHoriz ? 'row' : 'column',
+        alignItems:    'flex-start',
+        width:         '100%',
+      }}>
+        {items.map((item, i) => {
+          const isLast     = i === items.length - 1
+          const dotColor   = resolveStepColor(item, i)
+          const stepClass  = getStepClass(item, i)
+          const isDone     = stepClass === 'done'
+          const isActive   = stepClass === 'active'
+          const isWarning  = stepClass === 'warning'
+          const isError    = stepClass === 'error'
+          const label      = item[labelField]
+          const desc       = descField ? item[descField] : null
+          const icon       = iconField ? item[iconField] : null
+
+          // Connector fill: done→done transitions show doneColor
+          const nextItem     = items[i + 1]
+          const nextClass    = nextItem ? getStepClass(nextItem, i + 1) : 'pending'
+          const lineIsFilled = filledLine && isDone && nextClass === 'done'
+
+          // Dot rendering
+          const useRing  = dotStyle === 'ring' || (dotStyle === 'auto' && stepClass === 'pending')
+          const glyph = icon
+            ? icon
+            : dotStyle !== 'ring' && (isDone ? '✓' : isError ? '✕' : isWarning ? '!' : null)
+
+          const dot = (
+            <Box sx={{ position: 'relative', flexShrink: 0 }}>
+              {/* Pulse ring for active step */}
+              {isActive && (
+                <Box sx={{
+                  position:     'absolute',
+                  inset:        -4,
+                  borderRadius: '50%',
+                  border:       `2px solid ${dotColor}`,
+                  opacity:      0.3,
+                }} />
+              )}
+              <Box sx={{
+                width:          sz,
+                height:         sz,
+                borderRadius:   '50%',
+                bgcolor:        useRing ? 'transparent' : dotColor,
+                border:         `2px solid ${dotColor}`,
+                display:        'flex',
+                alignItems:     'center',
+                justifyContent: 'center',
+                flexShrink:     0,
+                boxShadow:      isActive ? `0 0 0 3px ${dotColor}28` : 'none',
+                transition:     'all .2s',
+              }}>
+                {glyph
+                  ? (
+                    <Typography sx={{
+                      fontSize:   Math.max(8, sz * 0.48),
+                      color:      useRing ? dotColor : '#fff',
+                      fontWeight: 800,
+                      lineHeight: 1,
+                      userSelect: 'none',
+                    }}>
+                      {glyph}
+                    </Typography>
+                  )
+                  : showNumbers && (
+                    <Typography sx={{
+                      fontSize:   Math.max(7, sz * 0.38),
+                      fontWeight: 700,
+                      color:      useRing ? dotColor : (isDone || isActive || isWarning || isError ? '#fff' : '#aaa'),
+                      lineHeight: 1,
+                    }}>
+                      {i + 1}
+                    </Typography>
+                  )
+                }
+              </Box>
+            </Box>
+          )
+
+          // Connector
+          const connector = !isLast && (
+            <Box sx={{
+              flex:       isHoriz ? 1 : 'none',
+              height:     isHoriz ? 2 : 24,
+              width:      isHoriz ? 'auto' : 2,
+              bgcolor:    lineIsFilled ? doneColor : lineColor,
+              opacity:    lineIsFilled ? 0.75 : 1,
+              borderStyle: lineStyle,
+              borderColor: lineIsFilled ? doneColor : lineColor,
+              borderWidth: isHoriz ? '0 0 2px 0' : '0 0 0 2px',
+              mx:         isHoriz ? 0 : 'auto',
+              ml:         !isHoriz ? `${sz / 2 - 1}px` : 0,
+              transition: 'background .2s',
+            }} />
+          )
+
+          // Label + description block
+          const labelBlock = showLabels && label && (
+            <Box sx={{
+              textAlign: isHoriz ? 'center' : 'left',
+              ml:        !isHoriz ? 1.5 : 0,
+            }}>
+              <Typography sx={{
+                fontSize,
+                color:      isActive ? 'text.primary' : isDone ? 'text.secondary' : 'text.disabled',
+                fontWeight: isActive ? 700 : isDone ? 500 : 400,
+                lineHeight: 1.3,
+              }}>
+                {label}
+              </Typography>
+              {showDesc && desc && (
+                <Typography sx={{
+                  fontSize:   fontSize - 1,
+                  color:      'text.disabled',
+                  lineHeight: 1.25,
+                  mt:         0.25,
+                }}>
+                  {desc}
+                </Typography>
+              )}
+            </Box>
+          )
+
+          return (
+            <Box
+              key={i}
+              onClick={hasClickAction ? () => handleStepClick(item, i) : undefined}
+              sx={{
+                display:       'flex',
+                flex:          isHoriz ? 1 : 'none',
+                flexDirection: isHoriz ? 'column' : 'row',
+                alignItems:    isHoriz ? 'center' : 'center',
+                cursor:        hasClickAction ? 'pointer' : 'default',
+                borderRadius:  1,
+                transition:    'background .15s',
+                ...(hasClickAction && { '&:hover': { bgcolor: 'action.hover' } }),
+              }}
+            >
+              {/* Label above (horizontal only) */}
+              {isHoriz && labelPosition === 'above' && (
+                <Box sx={{ mb: 0.75 }}>{labelBlock}</Box>
+              )}
+
+              {/* Dot + connector */}
+              <Box sx={{
+                display:       'flex',
+                alignItems:    'center',
+                width:         isHoriz ? '100%' : 'auto',
+                flexDirection: isHoriz ? 'row' : 'column',
+              }}>
+                {dot}
+                {connector}
+              </Box>
+
+              {/* Label below (horizontal) or right (vertical) */}
+              {(!isHoriz || labelPosition === 'below') && (
+                <Box sx={{ mt: isHoriz ? 0.75 : 0 }}>{labelBlock}</Box>
+              )}
+            </Box>
+          )
+        })}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,115 @@
+import { Box } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { evaluateThreshold, resolveMuiColor } from 'services/builderHelper/thresholdEngine'
+import { schemaColor, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+import { runKpiAction } from 'services/builderHelper/actionExecutor'
+
+export default function TagListRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+
+  const {
+    dataKey,
+    labelField = 'label',
+    colorField = 'color',
+    valueField,
+    thresholds = [],
+    colorMap   = {},
+    colorSchema,
+    variant    = 'soft',
+    size       = 'small',
+    maxTags,
+    wrap       = true,
+    align      = 'left',
+    gap        = 0.5,
+  } = main
+
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  // ── Click action ─────────────────────────────────────────────────────────────
+  const hasClickAction = !!node.props?.actions?.onTagClick?.code
+  const handleTagClick = (item, index) => {
+    runKpiAction(node, viewerContext, 'onTagClick', {
+      clickedItem:  item,
+      clickedIndex: index,
+      clickedTag:   item,   // alias — same object as clickedItem
+      clickedValue: typeof item === 'object' ? item[valueField ?? 'value'] : item,
+      clickedLabel: typeof item === 'object' ? item[labelField] : item,
+    })
+  }
+
+  const SAMPLE_TAGS = ['Design', 'Engineering', 'Marketing', 'Finance']
+
+  const raw         = resolveValue(dataKey, data)
+  const noDataBound = inBuilder && (!Array.isArray(raw) || raw.length === 0)
+  const rawItems    = noDataBound ? SAMPLE_TAGS : (Array.isArray(raw) ? raw : [])
+  const items       = rawItems.map(item =>
+    typeof item === 'object' ? item : { [labelField]: String(item) }
+  )
+  const visible  = maxTags ? items.slice(0, Number(maxTags)) : items
+  const overflow = maxTags ? Math.max(0, items.length - Number(maxTags)) : 0
+
+  const fontSize = size === 'large' ? 13 : 11
+  const px       = size === 'large' ? 1.25 : 0.75
+  const py       = size === 'large' ? 0.4  : 0.2
+
+  const resolveChipColor = (item, index) => {
+    if (item[colorField]) return resolveMuiColor(item[colorField])
+    const label = item[labelField]
+    if (label && colorMap[label]) return resolveMuiColor(colorMap[label])
+    if (valueField) {
+      const rule = evaluateThreshold(item[valueField] ?? 0, thresholds)
+      if (rule) return resolveMuiColor(rule.color)
+    }
+    const sc = schemaColor(colorSchema, index, null, items.length, DEFAULT_PALETTE)
+    if (sc) return resolveMuiColor(sc)
+    return resolveMuiColor('default')
+  }
+
+  const chipStyle = palette => ({
+    soft:     { bgcolor: palette.bg,    color: palette.color, border: 'none' },
+    outlined: { bgcolor: 'transparent', color: palette.color, border: `1.5px solid ${palette.color}` },
+    filled:   { bgcolor: palette.color, color: '#fff',        border: 'none' },
+  }[variant] ?? {})
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{
+        display: 'flex', flexWrap: wrap ? 'wrap' : 'nowrap',
+        gap, overflow: 'hidden',
+        justifyContent: align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start',
+      }}>
+        {visible.map((item, i) => {
+          const palette = resolveChipColor(item, i)
+          return (
+            <Box
+              key={i}
+              component='span'
+              onClick={hasClickAction ? () => handleTagClick(item, i) : undefined}
+              sx={{
+                display: 'inline-flex', alignItems: 'center',
+                px, py, borderRadius: 10,
+                fontSize, fontWeight: 500, whiteSpace: 'nowrap',
+                cursor: hasClickAction ? 'pointer' : 'default',
+                transition: 'opacity .15s',
+                ...(hasClickAction && { '&:hover': { opacity: 0.75 } }),
+                ...chipStyle(palette),
+              }}
+            >
+              {item[labelField] ?? '—'}
+            </Box>
+          )
+        })}
+        {overflow > 0 && (
+          <Box component='span' sx={{
+            display: 'inline-flex', alignItems: 'center', px, py, borderRadius: 10,
+            fontSize, fontWeight: 500, bgcolor: 'action.selected', color: 'text.secondary',
+          }}>
+            +{overflow} more
+          </Box>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -1,67 +1,53 @@
 import { Autocomplete, TextField, Chip } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
 
 export default function TagPickerRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
-  // Get component key
   const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
-
-  // Get value from form state (array of selected tags)
   const value = form[key] || []
+  const error = validationErrors?.[key]
+  const options = Array.isArray(main.options) ? main.options : []
 
-  // Get validation error
-  const error = validationErrors[key]
+  const { label, labelPosition, required, helperText } = main
 
-  // Get options - can be static array or resolved via expression
-  const options = main.options || []
+  const processedOptions = options.map(o => (typeof o === 'object' ? o.value || o.label : o))
 
   const handleChange = (event, newValue) => {
     updateFormValue(key, newValue)
+    runFieldAction(node, viewerContext, 'onChange', newValue)
   }
 
-  // Ensure options is an array
-  const optionsArray = Array.isArray(options) ? options : []
-
-  // Process options to support both {label, value} and simple string format
-  const processedOptions = optionsArray.map(option => {
-    if (typeof option === 'object') {
-      return option.value || option.label
-    }
-    return option
-  })
-
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Autocomplete
-        multiple
-        freeSolo={main.freeSolo !== false} // Allow custom tags by default
-        options={processedOptions}
-        value={Array.isArray(value) ? value : []}
-        onChange={handleChange}
-        disabled={main.disabled}
-        renderTags={(tagValue, getTagProps) =>
-          tagValue.map((option, index) => (
-            <Chip
-              label={option}
-              {...getTagProps({ index })}
-              size={main.size || 'medium'}
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <Autocomplete
+          multiple
+          freeSolo={main.freeSolo !== false}
+          options={processedOptions}
+          value={Array.isArray(value) ? value : []}
+          onChange={handleChange}
+          disabled={main.disabled}
+          renderTags={(tagValue, getTagProps) =>
+            tagValue.map((option, index) => (
+              <Chip label={option} {...getTagProps({ index })} size={main.size || 'medium'} />
+            ))
+          }
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              placeholder={main.placeholder}
+              error={!!error}
+              helperText={error || helperText}
+              size={main.size}
             />
-          ))
-        }
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            label={main.label}
-            placeholder={main.placeholder}
-            error={!!error}
-            helperText={error || main.helperText}
-            size={main.size}
-          />
-        )}
-      />
+          )}
+        />
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }

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

@@ -1,37 +1,44 @@
 import { TextField } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
 
 export default function TextAreaRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
-  // 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] || ''
+  const error = validationErrors?.[key]
 
-  // Get validation error
-  const error = validationErrors[key]
+  const { label, labelPosition, required, helperText, ...inputProps } = main
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     updateFormValue(key, e.target.value)
+    runFieldAction(node, viewerContext, 'onChange', e.target.value)
+  }
+
+  const handleBlur = e => {
+    runFieldAction(node, viewerContext, 'onBlur', e.target.value)
   }
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <TextField
-        {...main}
-        fullWidth
-        multiline
-        rows={main.rows || 4}
-        maxRows={main.maxRows}
-        value={value}
-        onChange={handleChange}
-        error={!!error}
-        helperText={error || main.helperText}
-      />
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <TextField
+          {...inputProps}
+          fullWidth
+          multiline
+          rows={main.rows || 4}
+          maxRows={main.maxRows}
+          value={value}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          error={!!error}
+          helperText={error || helperText}
+        />
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }

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

@@ -1,9 +1,15 @@
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
 
+function safeStr(v) {
+  if (v === null || v === undefined) return ''
+  if (typeof v === 'object') { try { return JSON.stringify(v) } catch { return '' } }
+  return String(v)
+}
+
 export default function TextRenderer({ node }) {
   return (
     <ViewerComponentWrapper node={node}>
-      <span>{node.props?.text}</span>
+      <span>{safeStr(node.props?.text)}</span>
     </ViewerComponentWrapper>
   )
 }