robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -0,0 +1,350 @@
+import { useState, useRef, useEffect, useCallback } from 'react'
+import {
+  Box, Button, IconButton, Typography, Popover,
+  Divider,
+} from '@mui/material'
+import {
+  EditOutlined, DeleteOutlined, VisibilityOutlined, OpenInNewOutlined,
+  ContentCopyOutlined, DownloadOutlined, PrintOutlined, CheckOutlined,
+  CloseOutlined, SendOutlined, RefreshOutlined, SettingsOutlined,
+  InfoOutlined, WarningOutlined, ArchiveOutlined, RestoreOutlined,
+  LockOutlined, LockOpenOutlined, StarOutlined, AddOutlined,
+  RemoveOutlined, MoreVertOutlined, ExpandMoreOutlined,
+  FilterListOutlined, SearchOutlined, TuneOutlined,
+} from '@mui/icons-material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import ComponentRenderer from '../ComponentRenderer'
+import DropZone from '../DropZone'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+import { createNode } from 'services/builderHelper/nodeFactory'
+import { insertIntoTreeAtIndex, moveNodeInTree } from 'services/builderHelper/tree'
+
+// ── Icon registry ─────────────────────────────────────────────────────────────
+
+const ICON_MAP = {
+  EditOutlined, DeleteOutlined, VisibilityOutlined, OpenInNewOutlined,
+  ContentCopyOutlined, DownloadOutlined, PrintOutlined, CheckOutlined,
+  CloseOutlined, SendOutlined, RefreshOutlined, SettingsOutlined,
+  InfoOutlined, WarningOutlined, ArchiveOutlined, RestoreOutlined,
+  LockOutlined, LockOpenOutlined, StarOutlined, AddOutlined,
+  RemoveOutlined, MoreVertOutlined, ExpandMoreOutlined,
+  FilterListOutlined, SearchOutlined, TuneOutlined,
+}
+
+function ResolvedIcon({ name, sx }) {
+  const Comp = name ? ICON_MAP[name] : null
+  if (!Comp) return null
+  return <Comp sx={{ fontSize: 18, ...sx }} />
+}
+
+// ── Placement → MUI anchor/transform origins ──────────────────────────────────
+
+const PLACEMENT_MAP = {
+  'bottom-start': {
+    anchorOrigin:    { vertical: 'bottom', horizontal: 'left'   },
+    transformOrigin: { vertical: 'top',    horizontal: 'left'   },
+  },
+  'bottom': {
+    anchorOrigin:    { vertical: 'bottom', horizontal: 'center' },
+    transformOrigin: { vertical: 'top',    horizontal: 'center' },
+  },
+  'bottom-end': {
+    anchorOrigin:    { vertical: 'bottom', horizontal: 'right'  },
+    transformOrigin: { vertical: 'top',    horizontal: 'right'  },
+  },
+  'top-start': {
+    anchorOrigin:    { vertical: 'top',    horizontal: 'left'   },
+    transformOrigin: { vertical: 'bottom', horizontal: 'left'   },
+  },
+  'top': {
+    anchorOrigin:    { vertical: 'top',    horizontal: 'center' },
+    transformOrigin: { vertical: 'bottom', horizontal: 'center' },
+  },
+  'top-end': {
+    anchorOrigin:    { vertical: 'top',    horizontal: 'right'  },
+    transformOrigin: { vertical: 'bottom', horizontal: 'right'  },
+  },
+  'left': {
+    anchorOrigin:    { vertical: 'center', horizontal: 'left'   },
+    transformOrigin: { vertical: 'center', horizontal: 'right'  },
+  },
+  'right': {
+    anchorOrigin:    { vertical: 'center', horizontal: 'right'  },
+    transformOrigin: { vertical: 'center', horizontal: 'left'   },
+  },
+}
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
+
+export default function PopoverRenderer({ node, viewerContext }) {
+  const { data, form, setData, dataRef, reportRefs, openDialog, closeDialog,
+          isEditMode, builderContext } = viewerContext
+
+  const resolveCtx = {
+    form, data, setData,
+    dataRef:    dataRef?.current ?? {},
+    reportRefs: reportRefs?.current ?? {},
+    openDialog:  openDialog  ?? (() => {}),
+    closeDialog: closeDialog ?? (() => {}),
+  }
+
+  const main = resolveProps(node, 'main', resolveCtx)
+
+  // ── Derived props ───────────────────────────────────────────────────────────
+  const triggerType     = main.triggerType    || 'button'
+  const triggerLabel    = main.triggerLabel   ?? 'Open'
+  const triggerVariant  = main.triggerVariant || 'outlined'
+  const triggerColor    = main.triggerColor   || 'primary'
+  const triggerSize     = main.triggerSize    || 'medium'
+  const triggerIcon     = main.triggerIcon    || ''
+  const triggerFullWidth= !!main.triggerFullWidth
+  const title           = main.title          || ''
+  const placement       = PLACEMENT_MAP[main.placement] ?? PLACEMENT_MAP['bottom-start']
+  const triggerOn       = main.triggerOn      || 'click'
+  const maxWidth        = main.maxWidth       ?? 360
+  const maxHeight       = main.maxHeight      ?? 480
+  const contentPadding  = main.contentPadding ?? 2
+  const closeOnClick    = !!main.closeOnContentClick
+
+  // `open` expression — when truthy the popover is forced open (controlled mode)
+  const controlledOpen  = main.open != null ? !!main.open : null   // null = uncontrolled
+
+  // ── Internal open state ─────────────────────────────────────────────────────
+  const [internalOpen, setInternalOpen] = useState(false)
+  const anchorRef    = useRef(null)
+  const hoverTimerRef = useRef(null)
+
+  // Sync controlled mode into internal state
+  useEffect(() => {
+    if (controlledOpen !== null) {
+      setInternalOpen(controlledOpen)
+    }
+  }, [controlledOpen])
+
+  const isOpen = controlledOpen !== null ? controlledOpen : internalOpen
+
+  const open  = useCallback(() => setInternalOpen(true),  [])
+  const close = useCallback(() => setInternalOpen(false), [])
+
+  // ── Hover handling ──────────────────────────────────────────────────────────
+  const handleTriggerMouseEnter = () => {
+    if (triggerOn !== 'hover') return
+    clearTimeout(hoverTimerRef.current)
+    setInternalOpen(true)
+  }
+  const handleTriggerMouseLeave = () => {
+    if (triggerOn !== 'hover') return
+    hoverTimerRef.current = setTimeout(() => setInternalOpen(false), 120)
+  }
+  const handlePopoverMouseEnter = () => {
+    if (triggerOn !== 'hover') return
+    clearTimeout(hoverTimerRef.current)
+  }
+  const handlePopoverMouseLeave = () => {
+    if (triggerOn !== 'hover') return
+    hoverTimerRef.current = setTimeout(() => setInternalOpen(false), 120)
+  }
+
+  // ── Drop handling (edit mode) ───────────────────────────────────────────────
+  const handleDropAtIndex = index => e => {
+    if (!isEditMode || !builderContext) return
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      const nodeId = e.dataTransfer.getData('application/builder-node-id')
+      if (nodeId) {
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: moveNodeInTree(prev.root, nodeId, node.id, index),
+        }))
+        builderContext.setSelectedId(nodeId)
+        builderContext.setDraggingNodeId(null)
+        return
+      }
+      const componentData = e.dataTransfer.getData('application/builder-component')
+      if (componentData) {
+        const component = JSON.parse(componentData)
+        if (component.type === 'dialog') return
+        const newNode = createNode(component.type, component.value ? JSON.parse(component.value) : null)
+        builderContext.setSchema(prev => ({
+          ...prev,
+          root: insertIntoTreeAtIndex(prev.root, node.id, newNode, index),
+        }))
+        builderContext.setSelectedId(newNode.id)
+        builderContext.setDraggingNodeId(null)
+      }
+    } catch (err) {
+      builderContext.setDraggingNodeId(null)
+      console.error(err)
+    }
+  }
+
+  // ── Enriched viewerContext for children ─────────────────────────────────────
+  // Inject closePopover so child Calculation code can call it directly.
+  const childContext = { ...viewerContext, closePopover: close, openPopover: open }
+
+  // ── Trigger element ─────────────────────────────────────────────────────────
+  const triggerProps = {
+    ref: anchorRef,
+    onMouseEnter: handleTriggerMouseEnter,
+    onMouseLeave: handleTriggerMouseLeave,
+    onClick: triggerOn === 'click' ? (isEditMode ? undefined : open) : undefined,
+  }
+
+  let triggerEl
+  if (triggerType === 'icon-button') {
+    triggerEl = (
+      <IconButton color={triggerColor} size={triggerSize} {...triggerProps}>
+        {triggerIcon
+          ? <ResolvedIcon name={triggerIcon} />
+          : <MoreVertOutlined sx={{ fontSize: 18 }} />
+        }
+      </IconButton>
+    )
+  } else if (triggerType === 'text') {
+    triggerEl = (
+      <Typography
+        component='span'
+        sx={{ cursor: 'pointer', color: `${triggerColor}.main`, userSelect: 'none',
+              display: 'inline-flex', alignItems: 'center', gap: 0.5 }}
+        {...triggerProps}
+      >
+        {triggerIcon && <ResolvedIcon name={triggerIcon} />}
+        {triggerLabel}
+      </Typography>
+    )
+  } else {
+    // default: button
+    triggerEl = (
+      <Button
+        variant={triggerVariant}
+        color={triggerColor}
+        size={triggerSize}
+        fullWidth={triggerFullWidth}
+        startIcon={triggerIcon ? <ResolvedIcon name={triggerIcon} /> : undefined}
+        {...triggerProps}
+      >
+        {triggerLabel}
+      </Button>
+    )
+  }
+
+  // ── Children content ────────────────────────────────────────────────────────
+  const contentChildren = (
+    <>
+      {node.children?.length > 0 ? (
+        <>
+          {node.children.map((child, index) => (
+            <Box key={child.id}>
+              {isEditMode && (
+                <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />
+              )}
+              <ComponentRenderer node={child} viewerContext={childContext} />
+            </Box>
+          ))}
+          {isEditMode && (
+            <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />
+          )}
+        </>
+      ) : (
+        <>
+          {isEditMode && <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />}
+          {!isEditMode && (
+            <Typography variant='body2' sx={{ color: 'text.disabled', textAlign: 'center', py: 1 }}>
+              Empty popover
+            </Typography>
+          )}
+        </>
+      )}
+    </>
+  )
+
+  // ── Edit mode — trigger + content zone (zone only visible when selected) ─────
+  if (isEditMode) {
+    const isSelected = builderContext?.selectedId === node.id
+
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{ display: 'inline-block', width: triggerFullWidth ? '100%' : undefined }}>
+          {/* Trigger — looks identical to production */}
+          {triggerEl}
+
+          {/* Content drop zone — only styled/expanded when this node is selected.
+              Children are always rendered so the tree stays navigable. */}
+          <Box
+            sx={{
+              borderRadius: 1,
+              overflow: isSelected ? 'visible' : 'hidden',
+              // When selected: thin blue-tinted dashed border, no fill
+              border: isSelected
+                ? '1px dashed rgba(25,118,210,0.45)'
+                : '1px solid transparent',
+              mt: isSelected ? 0.5 : 0,
+              p: isSelected ? contentPadding : 0,
+              minHeight: isSelected ? 24 : 0,
+              maxHeight: isSelected ? 'none' : 0,
+              position: 'relative',
+              transition: 'border-color 0.15s, padding 0.15s, min-height 0.15s',
+            }}
+          >
+            {isSelected && (
+              <Typography
+                sx={{
+                  fontSize: 9, letterSpacing: '0.08em', textTransform: 'uppercase',
+                  color: 'rgba(25,118,210,0.55)', position: 'absolute',
+                  top: 2, right: 6, pointerEvents: 'none', userSelect: 'none',
+                }}
+              >
+                popover
+              </Typography>
+            )}
+            {contentChildren}
+          </Box>
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ── Runtime ─────────────────────────────────────────────────────────────────
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      {/* Trigger */}
+      {triggerEl}
+
+      {/* Popover */}
+      <Popover
+        open={isOpen}
+        anchorEl={anchorRef.current}
+        onClose={triggerOn === 'click' ? close : undefined}
+        anchorOrigin={placement.anchorOrigin}
+        transformOrigin={placement.transformOrigin}
+        disableRestoreFocus={triggerOn === 'hover'}
+        PaperProps={{
+          onMouseEnter: handlePopoverMouseEnter,
+          onMouseLeave: handlePopoverMouseLeave,
+          onClick: closeOnClick ? close : undefined,
+          sx: {
+            maxWidth,
+            maxHeight,
+            overflow: 'auto',
+            boxShadow: '0 4px 24px rgba(0,0,0,0.12)',
+            border: '1px solid',
+            borderColor: 'divider',
+          },
+        }}
+      >
+        {title && (
+          <>
+            <Box sx={{ px: 2, py: 1.5 }}>
+              <Typography variant='subtitle2' fontWeight={600}>{title}</Typography>
+            </Box>
+            <Divider />
+          </>
+        )}
+        <Box sx={{ p: contentPadding }}>
+          {contentChildren}
+        </Box>
+      </Popover>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -4,7 +4,7 @@ import { resolveProps } from 'services/builderHelper/resolveProps'
 
 export default function ProgressCircleRenderer({ node, viewerContext }) {
   const { data, form } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
   const value = parseFloat(main.value) || 0
   const showValue = main.showValue ?? true

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

@@ -4,7 +4,7 @@ import { resolveProps } from 'services/builderHelper/resolveProps'
 
 export default function ProgressLineRenderer({ node, viewerContext }) {
   const { data, form } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
+  const main = resolveProps(node, 'main', viewerContext)
 
   const value = parseFloat(main.value) || 0
   const showValue = main.showValue ?? true

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

@@ -1,57 +1,46 @@
-import { FormControl, FormLabel, RadioGroup, Radio, FormControlLabel, FormHelperText } from '@mui/material'
+import { FormControl, RadioGroup, Radio, FormControlLabel, FormHelperText } 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 RadioGroupRenderer({ 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]
+  const options = Array.isArray(main.options) ? main.options : []
 
-  // Get validation error
-  const error = validationErrors[key]
-
-  // Get options - can be static array or resolved via expression
-  const options = main.options || []
+  const { label, labelPosition, required, helperText } = main
 
-  const handleChange = (e) => {
+  const handleChange = e => {
     updateFormValue(key, e.target.value)
+    runFieldAction(node, viewerContext, 'onChange', e.target.value)
   }
 
-  // Ensure options is an array
-  const optionsArray = Array.isArray(options) ? options : []
-
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <FormControl component="fieldset" error={!!error} disabled={main.disabled}>
-        {main.label && <FormLabel component="legend">{main.label}</FormLabel>}
-        <RadioGroup
-          value={value}
-          onChange={handleChange}
-          row={main.row}
-        >
-          {optionsArray.map((option, index) => {
-            // Support both {label, value} format and simple string format
-            const optionLabel = typeof option === 'object' ? option.label : option
-            const optionValue = typeof option === 'object' ? option.value : option
-            return (
-              <FormControlLabel
-                key={index}
-                value={optionValue}
-                control={<Radio size={main.size} />}
-                label={optionLabel}
-              />
-            )
-          })}
-        </RadioGroup>
-        {(error || main.helperText) && (
-          <FormHelperText>{error || main.helperText}</FormHelperText>
-        )}
-      </FormControl>
+      <FieldLabel label={label} required={required} labelPosition={labelPosition} error={!!error}>
+        <FormControl component="fieldset" error={!!error} disabled={main.disabled}>
+          <RadioGroup value={value} onChange={handleChange} row={main.row}>
+            {options.map((option, index) => {
+              const optionLabel = typeof option === 'object' ? option.label : option
+              const optionValue = typeof option === 'object' ? option.value : option
+              return (
+                <FormControlLabel
+                  key={index}
+                  value={optionValue}
+                  control={<Radio size={main.size} />}
+                  label={optionLabel}
+                />
+              )
+            })}
+          </RadioGroup>
+          {(error || helperText) && <FormHelperText>{error || helperText}</FormHelperText>}
+        </FormControl>
+      </FieldLabel>
     </ViewerComponentWrapper>
   )
 }

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

@@ -0,0 +1,80 @@
+import { useState } from 'react'
+import { Box } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { runKpiAction } from 'services/builderHelper/actionExecutor'
+
+const ICONS = {
+  star:   { filled: '★', empty: '☆' },
+  heart:  { filled: '♥', empty: '♡' },
+  circle: { filled: '●', empty: '○' },
+  square: { filled: '■', empty: '□' },
+}
+
+export default function RatingRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+  const { data, setData, isEditMode } = viewerContext ?? {}
+  // node is already available — passed through for runKpiAction
+
+  const {
+    valueKey,
+    max        = 5,
+    icon       = 'star',
+    color      = '#fbc02d',
+    emptyColor = '#e0e0e0',
+    size       = 24,
+    readonly   = false,
+    align      = 'left',
+    gap        = 2,
+  } = main
+
+  const storedValue = resolveValue(valueKey, data, 0)
+  const [hovered, setHovered] = useState(null)
+
+  const numMax  = Number(max) || 5
+  const numSize = Number(size) || 24
+  const display = hovered ?? Number(storedValue)
+
+  const { filled, empty } = ICONS[icon] ?? ICONS.star
+
+  const handleClick = (rating) => {
+    if (readonly || isEditMode) return
+    // Write value back if valueKey is a simple data key string
+    if (typeof valueKey === 'string' && valueKey && setData) {
+      setData(prev => ({ ...(prev ?? {}), [valueKey]: rating }))
+    }
+    // Fire the onChange action with newValue injected
+    runKpiAction(node, viewerContext, 'onChange', { newValue: rating, clickedValue: rating })
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ display: 'flex', gap: `${gap}px`, justifyContent: align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start' }}
+        onMouseLeave={() => !readonly && setHovered(null)}>
+        {Array.from({ length: numMax }, (_, i) => {
+          const val = i + 1
+          const active = val <= display
+          return (
+            <Box
+              key={i}
+              component='span'
+              onClick={() => handleClick(val)}
+              onMouseEnter={() => !readonly && setHovered(val)}
+              sx={{
+                fontSize: numSize,
+                color: active ? color : emptyColor,
+                cursor: readonly ? 'default' : 'pointer',
+                lineHeight: 1,
+                transition: 'color .1s, transform .1s',
+                display: 'inline-block',
+                '&:hover': readonly ? {} : { transform: 'scale(1.15)' },
+              }}
+            >
+              {active ? filled : empty}
+            </Box>
+          )
+        })}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}