robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -0,0 +1,147 @@
+import { Box, Typography, Tooltip } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { thresholdColors } from 'services/builderHelper/thresholdEngine'
+import { formatNumber } from 'services/builderHelper/numberFormat'
+import { resolveColorSchema, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+
+export default function BulletChartRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  const {
+    valueKey,
+    targetKey,
+    // range — definition fields: min / max
+    min         = 0,
+    max         = 100,
+    // optional "good range" band — definition fields: goodFrom / goodTo
+    goodFrom,
+    goodTo,
+    label,
+    sublabel,
+    // bar color — definition field: actualColor
+    actualColor  = '#1976d2',
+    targetColor  = '#333',
+    trackColor   = 'action.hover',
+    goodColor    = '#e3f2fd',
+    height       = 36,
+    thresholds   = [],
+    colorSchema,
+    format       = 'number',
+    prefix       = '',
+    suffix       = '',
+    showLabels   = true,
+    showTarget   = true,
+    // label styling
+    labelFontSize   = 12,
+    labelFontWeight = 600,
+    labelColor      = 'text.secondary',
+    // sublabel styling
+    sublabelFontSize   = 11,
+    sublabelFontWeight = 400,
+    sublabelColor      = 'text.disabled',
+  } = main
+
+  const numMin    = Number(min)
+  const numMax    = Number(max)
+  const range     = numMax - numMin || 1
+  const rawValue  = resolveValue(valueKey, data)
+  const rawTarget = resolveValue(targetKey, data)
+  const numValue  = rawValue  != null ? Number(rawValue)  : (inBuilder ? numMin + range * 0.6 : null)
+  const numTarget = rawTarget != null ? Number(rawTarget) : (inBuilder ? numMin + range * 0.75 : null)
+
+  const valuePct    = numValue  != null ? Math.min(1, Math.max(0, (numValue  - numMin) / range)) * 100 : 0
+  const targetPct   = numTarget != null ? Math.min(1, Math.max(0, (numTarget - numMin) / range)) * 100 : null
+  const goodFromPct = goodFrom != null ? Math.min(100, Math.max(0, (Number(goodFrom) - numMin) / range)) * 100 : null
+  const goodToPct   = goodTo   != null ? Math.min(100, Math.max(0, (Number(goodTo)   - numMin) / range)) * 100 : null
+
+  // Color priority: threshold → colorSchema → actualColor
+  const { color: threshColor } = thresholdColors(numValue, thresholds)
+  const schemaColors = resolveColorSchema(colorSchema, 1, DEFAULT_PALETTE)
+  const baseColor    = actualColor !== '#1976d2' ? actualColor : (schemaColors?.[0] ?? actualColor)
+  const barColor     = thresholds.length && threshColor !== 'inherit' ? threshColor : baseColor
+
+  const barH  = Math.max(6, Math.floor(Number(height) * 0.35))
+  const trackH = Math.max(10, Math.floor(Number(height) * 0.55))
+
+  const formatted       = numValue  != null ? formatNumber(numValue,  { format, prefix, suffix }) : '—'
+  const targetFormatted = numTarget != null ? formatNumber(numTarget, { format, prefix, suffix }) : null
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ width: '100%' }}>
+        {/* Header */}
+        {(label || sublabel) && (
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.5 }}>
+            {label    && <Typography sx={{ fontSize: Number(labelFontSize),    fontWeight: labelFontWeight,    color: labelColor }}>{label}</Typography>}
+            {sublabel && <Typography sx={{ fontSize: Number(sublabelFontSize), fontWeight: sublabelFontWeight, color: sublabelColor }}>{sublabel}</Typography>}
+          </Box>
+        )}
+
+        {/* Track */}
+        <Box sx={{
+          position: 'relative', height: trackH,
+          bgcolor: trackColor, borderRadius: 1, overflow: 'visible',
+        }}>
+          {/* Good range band */}
+          {goodFromPct != null && goodToPct != null && (
+            <Box sx={{
+              position: 'absolute',
+              left: `${goodFromPct}%`,
+              width: `${goodToPct - goodFromPct}%`,
+              top: 0, bottom: 0,
+              bgcolor: goodColor, borderRadius: 1,
+            }} />
+          )}
+
+          {/* Value bar (centered vertically, thinner than track) */}
+          <Tooltip title={formatted} placement='top'>
+            <Box sx={{
+              position: 'absolute',
+              left: 0,
+              width: `${valuePct}%`,
+              top: '50%', transform: 'translateY(-50%)',
+              height: barH,
+              bgcolor: barColor, borderRadius: '2px',
+              transition: 'width .4s ease',
+            }} />
+          </Tooltip>
+
+          {/* Target marker */}
+          {showTarget && targetPct != null && (
+            <Tooltip title={`Target: ${targetFormatted}`} placement='top'>
+              <Box sx={{
+                position: 'absolute',
+                left: `${targetPct}%`,
+                top: '50%', transform: 'translate(-50%, -50%)',
+                width: 3,
+                height: trackH + 4,
+                bgcolor: targetColor,
+                borderRadius: 1,
+                zIndex: 2,
+              }} />
+            </Tooltip>
+          )}
+        </Box>
+
+        {/* Footer labels */}
+        {showLabels && (
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 0.5 }}>
+            <Typography sx={{ fontSize: 10, color: 'text.disabled' }}>{formatNumber(numMin, { format, prefix, suffix })}</Typography>
+            <Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
+              <Typography sx={{ fontSize: 11, fontWeight: 700, color: barColor }}>{formatted}</Typography>
+              {targetFormatted && (
+                <Typography sx={{ fontSize: 10, color: 'text.disabled' }}>
+                  target {targetFormatted}
+                </Typography>
+              )}
+            </Box>
+            <Typography sx={{ fontSize: 10, color: 'text.disabled' }}>{formatNumber(numMax, { format, prefix, suffix })}</Typography>
+          </Box>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -1,55 +1,114 @@
-import { Button } from '@mui/material'
+import { Button, IconButton, Tooltip } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
 import { resolveProps } from 'services/builderHelper/resolveProps'
-import { executeJSCode } from 'services/builderHelper/jsExecutor'
+import { executeActionsByEvent } from 'services/builderHelper/actionExecutor'
+import { resolveIcon } from 'services/builderHelper/iconResolver'
+
+// ── Icon / text element helper ────────────────────────────────────────────────
+// Returns a React element for prefix/suffix values:
+//   • MUI icon name  → <IconComponent fontSize='small' />
+//   • plain string   → <span>{value}</span>
+//   • null/undefined → null
+
+function resolveAdornmentElement(value) {
+  if (!value) return null
+  const str  = String(value)
+  const Icon = resolveIcon(str)
+  if (Icon) return <Icon fontSize='small' />
+  return <span style={{ fontSize: '0.875em', lineHeight: 1 }}>{str}</span>
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
 
 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 { form, data, setData, dataRef, reportRefs, openDialog, closeDialog, submitForm, resetForm } = viewerContext
+
+  const main       = resolveProps(node, 'main',  viewerContext)
+  const styleProps = resolveProps(node, 'style', viewerContext)
+
+  const { label, key: _key, iconButton, prefix, suffix, tooltip, ...buttonProps } = main
+
+  // Pull out style props that need specificity-boosting via `&&`
+  const { color: cssColor, background, backgroundColor, ...restStyleProps } = styleProps
+
+  const sx = {
+    ...restStyleProps,
+    ...(background      && { '&&': { background } }),
+    ...(backgroundColor && { '&&': { backgroundColor } }),
+    ...(cssColor        && { '&&': { color: cssColor } }),
+  }
 
   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)
+    // ComponentActionsTab stores actions in node.props.actions as:
+    // { onClick: { actionType: 'custom'|'submit'|'reset', code: '...' } }
+    // Convert to the array format executeActionsByEvent expects.
+    const propsActions = node.props?.actions ?? {}
+    const actions = Object.entries(propsActions)
+      .filter(([, v]) => v?.actionType === 'custom' && v?.code)
+      .map(([event, v]) => ({ event, code: v.code, name: event }))
+
+    const context = {
+      form, data, setData,
+      dataRef:    dataRef?.current ?? dataRef ?? {},
+      reportRefs: reportRefs ?? {},
+      openDialog,
+      closeDialog,
+      submitForm,
+      resetForm,
     }
+
+    // Built-in submit / reset (non-custom actions)
+    const onClickAction = propsActions.onClick
+    if (onClickAction?.actionType === 'submit') { submitForm?.(); return }
+    if (onClickAction?.actionType === 'reset')  { resetForm?.();  return }
+
+    await executeActionsByEvent(actions, 'onClick', context)
   }
 
-  return (
+  // ── Icon Button mode ────────────────────────────────────────────────────────
+  // When iconButton=true the button collapses to just the icon (MUI IconButton).
+  // The icon is taken from prefix first, then suffix, then label (as icon name).
+  if (iconButton) {
+    const iconValue = prefix || suffix || label
+    const Icon      = resolveIcon(String(iconValue ?? ''))
+
+    const btn = (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <IconButton {...buttonProps} sx={sx} onClick={handleClick}>
+          {Icon
+            ? <Icon fontSize={buttonProps.size === 'small' ? 'small' : buttonProps.size === 'large' ? 'large' : 'medium'} />
+            : (iconValue || '?')}
+        </IconButton>
+      </ViewerComponentWrapper>
+    )
+
+    return tooltip
+      ? <Tooltip title={tooltip}>{btn}</Tooltip>
+      : btn
+  }
+
+  // ── Regular Button mode ─────────────────────────────────────────────────────
+  const startIconEl = resolveAdornmentElement(prefix)
+  const endIconEl   = resolveAdornmentElement(suffix)
+
+  const btn = (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Button variant='contained'  {...main} onClick={handleClick}>
-        {main.label || 'Button'}
+      <Button
+        variant='contained'
+        {...buttonProps}
+        startIcon={startIconEl ?? undefined}
+        endIcon={endIconEl   ?? undefined}
+        sx={sx}
+        onClick={handleClick}
+      >
+        {label || 'Button'}
       </Button>
     </ViewerComponentWrapper>
   )
+
+  return tooltip
+    ? <Tooltip title={tooltip}>{btn}</Tooltip>
+    : btn
 }

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

@@ -8,7 +8,7 @@ import { insertIntoTreeAtIndex, moveNodeInTree } from 'services/builderHelper/tr
 
 export default function CardRenderer({ node, viewerContext }) {
   const { data, form, isEditMode, builderContext } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
   const handleDropAtIndex = index => e => {
     if (!isEditMode || !builderContext) return