robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -1,13 +1,15 @@
 import { FormControl, FormHelperText } from '@mui/material'
 import UniversalAutocomplete from 'services/components/universalAutoComplete'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import FieldLabel from '../FieldLabel'
 import { resolveProps } from 'services/builderHelper/resolveProps'
 import { useEffect } from 'react'
 import { executeJSCode } from 'services/builderHelper/jsExecutor'
 
 export default function AutoCompleteRenderer({ node, viewerContext }) {
   const { data, form, updateFormValue, validationErrors } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
+
   const resolvedAsyncFetch =
     node?.props?.main.asyncFetchOptions?.type === 'expression'
       ? node?.props?.main?.asyncFetchOptions.expression?.code
@@ -15,43 +17,45 @@ export default function AutoCompleteRenderer({ node, viewerContext }) {
 
   const key = node.props?.main?.key?.value || node.props?.main?.key || node.id
   const value = form[key] ?? (main.isSingle ? null : [])
-  const error = validationErrors[key]
+  const error = validationErrors?.[key]
 
-  const handleChange = newValue => {
-    updateFormValue(key, newValue)
+  const { label, labelPosition, required, helperText, ...acProps } = main
 
+  const handleChange = (newValue) => {
+    updateFormValue(key, newValue)
     if (typeof main.onChange === 'function') {
       main.onChange(newValue, { node, key, form, data, updateFormValue })
     }
   }
-  useEffect( () => {
-    async function ss(){
+
+  useEffect(() => {
+    async function ss() {
       if (node?.props?.main?.asyncFetchOptions?.type === 'expression') {
         console.log(resolvedAsyncFetch)
         let a = await executeJSCode(resolvedAsyncFetch)
         console.log(a)
-        // let b = a()
-        // console.log(b)
       }
     }
     ss()
-
   }, [resolvedAsyncFetch])
+
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <FormControl fullWidth={main.fullWidth !== false} error={!!error}>
-        <UniversalAutocomplete
-          {...main}
-          value={value}
-          data={form}
-          fullWidth={main.fullWidth !== false}
-          options={Array.isArray(main.options) ? main.options : []}
-          asyncFetchOptions={resolvedAsyncFetch}
-          fetchOnOpen={main.fetchOnOpen ?? !!main.asyncFetchOptions}
-          onChange={handleChange}
-        />
-        {(error || main.helperText) && <FormHelperText>{error || main.helperText}</FormHelperText>}
-      </FormControl>
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <FormControl fullWidth={main.fullWidth !== false} error={!!error}>
+          <UniversalAutocomplete
+            {...acProps}
+            value={value}
+            data={form}
+            fullWidth={main.fullWidth !== false}
+            options={Array.isArray(main.options) ? main.options : []}
+            asyncFetchOptions={resolvedAsyncFetch}
+            fetchOnOpen={main.fetchOnOpen ?? !!main.asyncFetchOptions}
+            onChange={handleChange}
+          />
+          {(error || helperText) && <FormHelperText>{error || helperText}</FormHelperText>}
+        </FormControl>
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }

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

@@ -0,0 +1,112 @@
+import { Box, Tooltip } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { schemaColor, DEFAULT_PALETTE } from 'services/builderHelper/colorSchema'
+
+function initials(name) {
+  if (!name) return '?'
+  const parts = String(name).trim().split(/\s+/)
+  return parts.length >= 2
+    ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+    : String(name).slice(0, 2).toUpperCase()
+}
+
+// Keep hash-color as fallback when schema is not set
+function hashColor(str) {
+  let h = 0
+  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0
+  return DEFAULT_PALETTE[h % DEFAULT_PALETTE.length]
+}
+
+export default function AvatarGroupRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, isEditMode } = viewerContext ?? {}
+  const inBuilder = isEditMode !== false
+
+  const {
+    dataKey,
+    nameField    = 'name',
+    imageField   = 'image',
+    colorField   = 'color',
+    tooltipField,
+    colorSchema,
+    maxVisible   = 5,
+    size         = 36,
+    overlap      = 8,
+    borderColor  = '#fff',
+    borderWidth  = 2,
+    direction    = 'ltr',
+    align        = 'left',
+  } = main
+
+  const SAMPLE_AVATARS = [
+    { name: 'Alice Brown' },
+    { name: 'Bob Chen' },
+    { name: 'Carol Davis' },
+    { name: 'Dan Evans' },
+  ]
+
+  const raw         = resolveValue(dataKey, data)
+  const noDataBound = inBuilder && (!Array.isArray(raw) || raw.length === 0)
+  const items       = noDataBound ? SAMPLE_AVATARS : (Array.isArray(raw) ? raw : [])
+  const max   = Number(maxVisible) || 5
+  const sz    = Number(size) || 36
+  const olap  = Number(overlap) || 8
+  const bw    = Number(borderWidth) || 2
+  const visible  = items.slice(0, max)
+  const overflow = Math.max(0, items.length - max)
+
+  const totalWidth = visible.length > 0
+    ? sz + (visible.length - 1) * (sz - olap) + (overflow > 0 ? sz - olap : 0)
+    : 0
+
+  const avatarSx = {
+    width: sz, height: sz, borderRadius: '50%',
+    border: `${bw}px solid ${borderColor}`,
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+    fontSize: sz * 0.35, fontWeight: 700, color: '#fff',
+    flexShrink: 0, position: 'absolute', overflow: 'hidden', userSelect: 'none',
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ display: 'flex', justifyContent: align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start' }}>
+        <Box sx={{ position: 'relative', height: sz, width: totalWidth }}>
+          {visible.map((item, i) => {
+            const name  = item[nameField] ?? ''
+            const img   = item[imageField]
+            const tip   = item[tooltipField ?? nameField] ?? name
+            const left  = direction === 'rtl'
+              ? (visible.length - 1 - i) * (sz - olap)
+              : i * (sz - olap)
+            // Schema color takes priority over hash; per-item colorField wins over both
+            const bgColor = schemaColor(colorSchema, i, item[colorField] || null, items.length, DEFAULT_PALETTE)
+              ?? hashColor(name)
+
+            return (
+              <Tooltip key={i} title={tip} placement='top'>
+                <Box sx={{ ...avatarSx, left, bgcolor: img ? 'transparent' : bgColor, zIndex: i + 1 }}>
+                  {img
+                    ? <img src={img} alt={name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                    : initials(name)}
+                </Box>
+              </Tooltip>
+            )
+          })}
+          {overflow > 0 && (
+            <Tooltip title={`${overflow} more`} placement='top'>
+              <Box sx={{
+                ...avatarSx,
+                left: visible.length * (sz - olap),
+                bgcolor: '#e0e0e0', color: '#666', zIndex: visible.length + 1,
+                fontSize: sz * 0.28,
+              }}>
+                +{overflow}
+              </Box>
+            </Tooltip>
+          )}
+        </Box>
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,79 @@
+import { Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { evaluateThreshold, resolveMuiColor } from 'services/builderHelper/thresholdEngine'
+
+export default function BadgeRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data } = viewerContext ?? {}
+
+  const {
+    valueKey,
+    label,          // static label — if empty, show the raw value
+    thresholds = [],
+    variant   = 'soft',   // 'soft' | 'outlined' | 'filled'
+    size      = 'medium',
+    dot       = false,    // show colored dot before label
+    icon,               // MUI icon name (optional)
+    align     = 'left',
+  } = main
+
+  const rawValue = resolveValue(valueKey, data)
+  const displayLabel = label ?? (rawValue != null ? String(rawValue) : '—')
+
+  const rule   = evaluateThreshold(rawValue ?? 0, thresholds)
+  const palette = resolveMuiColor(rule?.color ?? 'default')
+
+  const fontSize = size === 'small' ? 11 : size === 'large' ? 14 : 12
+  const px       = size === 'small' ? 0.75 : size === 'large' ? 1.5 : 1.1
+  const py       = size === 'small' ? 0.2  : size === 'large' ? 0.6 : 0.35
+
+  // Override label from threshold if rule provides one
+  const finalLabel = (rule?.label) || displayLabel
+
+  const styles = {
+    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',
+    },
+  }
+
+  const s = styles[variant] ?? styles.soft
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ textAlign: align }}>
+        <Box
+          component='span'
+          sx={{
+            display: 'inline-flex', alignItems: 'center', gap: 0.5,
+            borderRadius: 10, px, py,
+            fontSize, fontWeight: 600,
+            ...s,
+            transition: 'background .2s, color .2s',
+          }}
+        >
+          {dot && (
+            <Box sx={{
+              width: fontSize * 0.55, height: fontSize * 0.55,
+              borderRadius: '50%',
+              bgcolor: variant === 'filled' ? 'rgba(255,255,255,0.7)' : palette.color,
+            }} />
+          )}
+          {finalLabel}
+        </Box>
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,62 @@
+import { useState } from 'react'
+import { Alert, AlertTitle, Collapse } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { runFieldAction } from 'services/builderHelper/actionExecutor'
+
+export default function BannerRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const {
+    message,
+    title,
+    severity = 'info',
+    variant = 'standard',
+    dismissible = false,
+    open: controlledOpen,
+    icon,
+  } = main
+
+  const [dismissed, setDismissed] = useState(false)
+
+  // Support controlled `open` prop — if set, use it; otherwise manage locally.
+  const isVisible = controlledOpen !== undefined && controlledOpen !== null && controlledOpen !== ''
+    ? Boolean(controlledOpen)
+    : !dismissed
+
+  const handleClose = () => {
+    setDismissed(true)
+    runFieldAction(node, viewerContext, 'onClose')
+  }
+
+  // Edit-mode placeholder
+  if (viewerContext?.isEditMode) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Alert
+          severity={severity || 'info'}
+          variant={variant || 'standard'}
+          sx={{ pointerEvents: 'none', opacity: 0.85 }}
+        >
+          {title && <AlertTitle>{title || 'Banner Title'}</AlertTitle>}
+          {message || 'Banner message — configure in inspector'}
+        </Alert>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Collapse in={isVisible} unmountOnExit>
+        <Alert
+          severity={severity || 'info'}
+          variant={variant || 'standard'}
+          onClose={dismissible ? handleClose : undefined}
+          icon={icon === false ? false : undefined}
+        >
+          {title && <AlertTitle>{title}</AlertTitle>}
+          {message}
+        </Alert>
+      </Collapse>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -1,31 +1,219 @@
-import { Breadcrumbs, Link, Typography } from '@mui/material'
+import { Breadcrumbs, Link, Typography, Box } from '@mui/material'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+
+// ── Size tokens ───────────────────────────────────────────────────────────────
+const SIZE = {
+  small:  { height: 28, fontSize: '0.75rem',   arrow: 10, px: 12 },
+  medium: { height: 36, fontSize: '0.8125rem', arrow: 14, px: 16 },
+  large:  { height: 44, fontSize: '0.9375rem', arrow: 18, px: 20 },
+}
+
+// ── Item normalizer ───────────────────────────────────────────────────────────
+function normalizeItem(item) {
+  if (!item)                    return { label: '', href: undefined, disabled: false }
+  if (typeof item === 'string') return { label: item, href: undefined, disabled: false }
+  return {
+    label:    item.label ?? item.title ?? item.name ?? item.text ?? '',
+    href:     item.href  ?? item.url   ?? item.link ?? undefined,
+    disabled: item.disabled ?? false,
+  }
+}
+
+function toItemArray(raw) {
+  if (Array.isArray(raw))                         return raw.map(normalizeItem)
+  if (raw && typeof raw === 'object')              return [normalizeItem(raw)]
+  if (typeof raw === 'string' && raw.trim() !== '') return [normalizeItem(raw)]
+  return []
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
 
 export default function BreadcrumbRenderer({ node, viewerContext }) {
-  const { data, form } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const {
+    data, form, setData, dataRef, reportRefs, openDialog, closeDialog,
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+  } = viewerContext
+
+  const ctx = { form, data, setData, dataRef: dataRef?.current ?? {}, reportRefs: reportRefs?.current ?? {} }
+  const main = resolveProps(node, 'main', ctx)
+
+  const items       = toItemArray(main.items)
+  const variant     = main.variant || 'breadcrumb'
+  const mode        = main.mode    || (main.onClick ? 'click' : 'link')
+  const activeIndex = main.activeIndex != null ? Number(main.activeIndex) : items.length - 1
+
+  // ── Shared click handler ──────────────────────────────────────────────────
+  const handleClick = async (item, index, e) => {
+    if (mode === 'none' || item.disabled) return
+    if (mode === 'link' && item.href) return
+    e?.preventDefault?.()
+    if (!main.onClick) return
+    try {
+      await executeJSCode(main.onClick, {
+        form, data, setData,
+        dataRef:        dataRef?.current        ?? {},
+        reportRefs:     reportRefs?.current     ?? {},
+        openDialog:     openDialog              ?? (() => {}),
+        closeDialog:    closeDialog             ?? (() => {}),
+        pageData, pageSetData,
+        pageDataRef:    pageDataRef?.current    ?? {},
+        pageReportRefs: pageReportRefs?.current ?? {},
+        extraVars: { item, index },
+      })
+    } catch (err) {
+      console.error('[Breadcrumb] onClick:', err)
+    }
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // CHEVRON VARIANT
+  // Each item renders a right-pointing CSS border-triangle via ::after,
+  // overlapping the next item's left edge. Items stack with decreasing z-index
+  // so each item's triangle sits on top of the next item.
+  // ══════════════════════════════════════════════════════════════════════════
+  if (variant === 'chevron') {
+    const sz        = SIZE[main.itemSize] || SIZE.medium
+    const { height: h, arrow, px, fontSize } = sz
+    const clickable = mode !== 'none'
+    const total     = items.length
+
+    const completedBg   = main.completedColor     || '#bdbdbd'
+    const activeBg      = main.activeColor        || '#4caf50'
+    const pendingBg     = main.pendingColor       || '#e0e0e0'
+    const completedText = main.completedTextColor || '#fff'
+    const activeText    = main.activeTextColor    || '#fff'
+    const pendingText   = main.pendingTextColor   || '#9e9e9e'
 
-  const items = main.items || []
+    const getBg   = (i) => i < activeIndex ? completedBg : i === activeIndex ? activeBg : pendingBg
+    const getText = (i) => i < activeIndex ? completedText : i === activeIndex ? activeText : pendingText
+
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{ display: 'flex', alignItems: 'stretch', width: main.fullWidth ? '100%' : 'max-content' }}>
+          {items.length === 0 && (
+            <Box sx={{ px: 2, height: h, display: 'flex', alignItems: 'center' }}>
+              <Typography sx={{ fontSize, color: 'text.disabled' }}>Steps</Typography>
+            </Box>
+          )}
+
+          {items.map((item, index) => {
+            const isLast      = index === total - 1
+            const isFirst     = index === 0
+            const bg          = getBg(index)
+            const color       = getText(index)
+            const isClickable = clickable && !item.disabled && index !== activeIndex
+
+            return (
+              <Box
+                key={index}
+                onClick={isClickable ? (e) => handleClick(item, index, e) : undefined}
+                sx={{
+                  position: 'relative',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  flex: main.fullWidth ? 1 : undefined,
+                  height: h,
+                  minWidth: 60,
+                  // Extra left padding on non-first items so text clears the
+                  // previous item's arrow triangle
+                  pl: `${isFirst ? px : px + arrow}px`,
+                  pr: `${isLast  ? px : px + arrow / 2}px`,
+                  bgcolor: bg,
+                  // Items are stacked with DECREASING z-index so each item's
+                  // ::after triangle appears on top of the following item
+                  zIndex: total - index,
+                  cursor: isClickable ? 'pointer' : 'default',
+                  transition: 'filter 0.15s',
+                  '&:hover': isClickable ? { filter: 'brightness(0.92)' } : {},
+                  // Right-pointing triangle via CSS border trick (not last item)
+                  ...(!isLast && {
+                    '&::after': {
+                      content: '""',
+                      position: 'absolute',
+                      right: -arrow,
+                      top: 0,
+                      zIndex: 2,
+                      width: 0,
+                      height: 0,
+                      borderStyle: 'solid',
+                      // top-transparent, right-0, bottom-transparent, left-colored
+                      borderWidth: `${h / 2}px 0 ${h / 2}px ${arrow}px`,
+                      borderColor: `transparent transparent transparent ${bg}`,
+                    },
+                  }),
+                }}
+              >
+                <Typography
+                  noWrap
+                  sx={{
+                    fontSize,
+                    fontWeight: index === activeIndex ? 600 : 400,
+                    color,
+                    lineHeight: 1,
+                    position: 'relative',
+                    zIndex: 1,
+                  }}
+                >
+                  {item.label}
+                </Typography>
+              </Box>
+            )
+          })}
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // BREADCRUMB VARIANT (default)
+  // ══════════════════════════════════════════════════════════════════════════
+  const separator    = main.separator    || '/'
+  const maxItems     = main.maxItems     ? Number(main.maxItems) : undefined
+  const underline    = main.linkUnderline || 'hover'
+  const currentColor = main.currentColor || 'text.primary'
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Breadcrumbs separator={main.separator || '/'}>
+      <Breadcrumbs separator={separator} maxItems={maxItems} aria-label='breadcrumb'>
+        {items.length === 0 && (
+          <Typography color='text.disabled' sx={{ fontSize: 'inherit' }}>Breadcrumb</Typography>
+        )}
+
         {items.map((item, index) => {
           const isLast = index === items.length - 1
-          return isLast ? (
-            <Typography key={index} color="text.primary">
-              {item.label}
-            </Typography>
-          ) : (
-            <Link key={index} underline="hover" color="inherit" href={item.href || '#'}>
-              {item.label}
+          const { label, href, disabled } = item
+
+          if (isLast) {
+            return (
+              <Typography key={index} color={currentColor} sx={{ fontSize: 'inherit' }}>
+                {label}
+              </Typography>
+            )
+          }
+
+          const isLink = mode === 'link' && href
+          return (
+            <Link
+              key={index}
+              underline={mode === 'none' ? 'none' : underline}
+              color='inherit'
+              href={isLink ? href : undefined}
+              component={isLink ? 'a' : 'span'}
+              onClick={mode === 'click' && !disabled ? (e) => handleClick(item, index, e) : undefined}
+              sx={{
+                fontSize: 'inherit',
+                cursor: mode === 'none' || disabled ? 'default' : 'pointer',
+                opacity: disabled ? 0.4 : 1,
+                pointerEvents: mode === 'none' || disabled ? 'none' : undefined,
+              }}
+            >
+              {label}
             </Link>
           )
         })}
-        {items.length === 0 && (
-          <Typography color="text.disabled">Breadcrumb</Typography>
-        )}
       </Breadcrumbs>
     </ViewerComponentWrapper>
   )