robobyte-front-builder 1.0.19 → 1.0.21

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

@@ -1,87 +1,403 @@
-import { Box, Stepper, Step, StepLabel, Button } from '@mui/material'
-import { useState } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
+import {
+  Box, Stepper, Step, StepLabel, StepContent, StepButton,
+  Button, Typography, Alert, LinearProgress, Chip, IconButton, Tooltip,
+} from '@mui/material'
+import AddIcon from '@mui/icons-material/Add'
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
 import ViewerComponentWrapper from '../ViewerComponentWrapper'
 import ComponentRenderer from '../ComponentRenderer'
-import DropZone from '../DropZone'
 import { resolveProps } from 'services/builderHelper/resolveProps'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
 import { createNode } from 'services/builderHelper/nodeFactory'
-import { insertIntoTreeAtIndex, moveNodeInTree } from 'services/builderHelper/tree'
+import { insertIntoTreeAtIndex, removeFromTree } from 'services/builderHelper/tree'
+
+// ─────────────────────────────────────────────────────────────────────────────
 
 export default function WizardRenderer({ node, viewerContext }) {
-  const { data, form, isEditMode, builderContext } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
-  const [activeStep, setActiveStep] = useState(0)
+  const {
+    data, form, setData, dataRef, reportRefs, openDialog, closeDialog,
+    isEditMode, builderContext,
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+  } = viewerContext
+
+  const resolveCtx = useRef({})
+  resolveCtx.current = {
+    form, data, setData,
+    dataRef:    dataRef?.current    ?? {},
+    reportRefs: reportRefs?.current ?? {},
+    openDialog:  openDialog  ?? (() => {}),
+    closeDialog: closeDialog ?? (() => {}),
+  }
 
-  const steps = node.children || []
+  const main = resolveProps(node, 'main', resolveCtx.current)
 
-  const handleNext = () => setActiveStep((prev) => prev + 1)
-  const handleBack = () => setActiveStep((prev) => prev - 1)
+  // All direct children are steps — no type filter needed (wizard only contains wizard-steps)
+  const steps = node.children ?? []
 
-  const handleDropAtIndex = index => e => {
-    if (!isEditMode || !builderContext) return
-    e.preventDefault()
-    e.stopPropagation()
+  // ── Config ──────────────────────────────────────────────────────────────────
+  const orientation  = main.orientation  || 'horizontal'
+  const altLabel     = main.variant      === 'alternativeLabel'
+  const linear       = main.linear       !== false
+  const hideNav      = !!main.hideNavigation
+  const backLabel    = main.backLabel    || 'Back'
+  const nextLabel    = main.nextLabel    || 'Next'
+  const finishLabel  = main.finishLabel  || 'Finish'
+  const nextColor    = main.nextColor    || 'primary'
+  const nextVariant  = main.nextVariant  || 'contained'
+  const backColor    = main.backColor    || 'inherit'
+  const backVariant  = main.backVariant  || 'text'
 
-    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
+  // ── Step index state ────────────────────────────────────────────────────────
+  const controlled  = main.activeStep != null && !isNaN(Number(main.activeStep))
+  const [internal, setInternal] = useState(0)
+  const clamp       = useCallback(n => Math.max(0, Math.min(n, Math.max(0, steps.length - 1))), [steps.length])
+  const activeStep  = controlled ? clamp(Number(main.activeStep)) : clamp(internal)
+
+  // Edit mode: track which step tab is selected for preview
+  const [editTab, setEditTab] = useState(0)
+
+  // Completed / error state
+  const [completed, setCompleted] = useState({})
+  const [stepError, setStepError] = useState(null)
+  const [loading,   setLoading]   = useState(false)
+
+  // ── Navigation ref — stable functions for extraVars injection ──────────────
+  const nav = useRef({})
+
+  const execCtx = useCallback(() => ({
+    ...resolveCtx.current,
+    pageData, pageSetData, pageDataRef, pageReportRefs,
+  }), [data, form]) // eslint-disable-line
+
+  // ── Core navigate ───────────────────────────────────────────────────────────
+  const navigate = useCallback(async (to, direction) => {
+    const from = activeStep
+    const safe = clamp(to)
+    if (safe === from && direction !== 'enter') return
+
+    setStepError(null)
+
+    // wizard-level onStepChange
+    if (main.onStepChange) {
+      try {
+        await executeJSCode(main.onStepChange, {
+          ...execCtx(),
+          extraVars: { from, to: safe, direction, ...nav.current },
+        })
+      } catch (e) { console.error('[Wizard] onStepChange:', e) }
+    }
+
+    if (controlled) {
+      setData?.(prev => ({ ...prev, [main.key || 'wizardStep']: safe }))
+    } else {
+      setInternal(safe)
+    }
+
+    // target step onEnter
+    const target = steps[safe]
+    if (target) {
+      const sm = resolveProps(target, 'main', resolveCtx.current)
+      if (sm.onEnter) {
+        try {
+          await executeJSCode(sm.onEnter, {
+            ...execCtx(),
+            extraVars: { stepIndex: safe, ...nav.current },
+          })
+        } catch (e) { console.error('[Wizard] onEnter:', e) }
       }
+    }
+  }, [activeStep, clamp, controlled, main, steps, execCtx, setData])
 
-      const componentData = e.dataTransfer.getData('application/builder-component')
-      if (componentData) {
-        const component = JSON.parse(componentData)
-        const newNode = createNode(component.type)
-        builderContext.setSchema(prev => ({
-          ...prev,
-          root: insertIntoTreeAtIndex(prev.root, node.id, newNode, index)
-        }))
-        builderContext.setSelectedId(newNode.id)
-        builderContext.setDraggingNodeId(null)
+  nav.current = {
+    goToStep: (n)  => navigate(n, 'jump'),
+    nextStep: ()   => navigate(activeStep + 1, 'next'),
+    prevStep: ()   => navigate(activeStep - 1, 'back'),
+  }
+
+  // ── Handle Next / Finish ────────────────────────────────────────────────────
+  const handleNext = useCallback(async () => {
+    if (loading) return
+    setStepError(null)
+
+    const current = steps[activeStep]
+    if (current) {
+      const sm = resolveProps(current, 'main', resolveCtx.current)
+      if (sm.onNext) {
+        setLoading(true)
+        try {
+          const result = await executeJSCode(sm.onNext, {
+            ...execCtx(),
+            extraVars: { stepIndex: activeStep, ...nav.current },
+          })
+          if (result === false) { setLoading(false); return }
+          if (typeof result === 'string') { setStepError(result); setLoading(false); return }
+        } catch (e) { console.error('[Wizard] onNext:', e); setLoading(false); return }
+        setLoading(false)
+      }
+    }
+
+    setCompleted(prev => ({ ...prev, [activeStep]: true }))
+
+    // Last step → onFinish
+    if (activeStep >= steps.length - 1) {
+      if (main.onFinish) {
+        setLoading(true)
+        try {
+          await executeJSCode(main.onFinish, {
+            ...execCtx(),
+            extraVars: { stepIndex: activeStep, ...nav.current },
+          })
+        } catch (e) { console.error('[Wizard] onFinish:', e) }
+        finally { setLoading(false) }
       }
-    } catch (err) {
-      builderContext.setDraggingNodeId(null)
-      console.error(err)
+      return
     }
+
+    navigate(activeStep + 1, 'next')
+  }, [loading, steps, activeStep, main, execCtx, navigate])
+
+  const handleBack = useCallback(() => {
+    setStepError(null)
+    navigate(activeStep - 1, 'back')
+  }, [activeStep, navigate])
+
+  // Fire onEnter for initial step on first mount (runtime only)
+  const didMount = useRef(false)
+  useEffect(() => {
+    if (isEditMode || didMount.current || steps.length === 0) return
+    didMount.current = true
+    const step = steps[0]
+    const sm = resolveProps(step, 'main', resolveCtx.current)
+    if (sm.onEnter) {
+      executeJSCode(sm.onEnter, {
+        ...execCtx(),
+        extraVars: { stepIndex: 0, ...nav.current },
+      }).catch(e => console.error('[Wizard] initial onEnter:', e))
+    }
+  }, []) // eslint-disable-line
+
+  // ── Child context — wizard nav injected for child components ───────────────
+  const childContext = { ...viewerContext, ...nav.current, wizardStep: activeStep, wizardTotal: steps.length }
+
+  // ── Step label helper ───────────────────────────────────────────────────────
+  const stepLabel = (stepNode, idx) => {
+    try {
+      const m = resolveProps(stepNode, 'main', resolveCtx.current)
+      return m.label || `Step ${idx + 1}`
+    } catch { return `Step ${idx + 1}` }
   }
 
-  return (
-    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Box sx={{ width: '100%' }}>
-        <Stepper activeStep={activeStep} orientation={main.orientation || 'horizontal'}>
-          {steps.map((child, index) => (
-            <Step key={child.id}>
-              <StepLabel>{child.props?.main?.label || `Step ${index + 1}`}</StepLabel>
-            </Step>
-          ))}
-          {isEditMode && <DropZone onDrop={handleDropAtIndex(steps.length)} isEditMode={isEditMode} />}
-        </Stepper>
-        <Box sx={{ mt: 2, mb: 1, minHeight: 100 }}>
-          {steps.length > 0 ? (
-            <Box key={steps[activeStep].id}>
-              <ComponentRenderer node={steps[activeStep]} viewerContext={viewerContext} />
+  const stepProp = (stepNode, prop) => {
+    try {
+      const m = resolveProps(stepNode, 'main', resolveCtx.current)
+      return m[prop]
+    } catch { return undefined }
+  }
+
+  // ── Add / remove step helpers (edit mode) ──────────────────────────────────
+  const handleAddStep = useCallback(() => {
+    if (!builderContext) return
+    const newStep = createNode('wizard-step')
+    builderContext.setSchema(prev => ({
+      ...prev,
+      root: insertIntoTreeAtIndex(prev.root, node.id, newStep, steps.length),
+    }))
+    setEditTab(steps.length)
+    builderContext.setSelectedId(newStep.id)
+  }, [builderContext, node.id, steps.length])
+
+  const handleRemoveStep = useCallback((stepId, stepIdx) => {
+    if (!builderContext) return
+    builderContext.setSchema(prev => ({
+      ...prev,
+      root: removeFromTree(prev.root, stepId),
+    }))
+    setEditTab(prev => Math.max(0, prev >= stepIdx ? prev - 1 : prev))
+  }, [builderContext])
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // EDIT MODE — tab strip + step content panel
+  // ══════════════════════════════════════════════════════════════════════════
+  if (isEditMode) {
+    const safeTab = Math.min(editTab, Math.max(0, steps.length - 1))
+
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{ width: '100%' }}>
+
+          {/* ── Step tabs + Add button ── */}
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, flexWrap: 'wrap', mb: 1 }}>
+            {steps.map((s, i) => (
+              <Chip
+                key={s.id}
+                label={`${i + 1}. ${stepLabel(s, i)}`}
+                size='small'
+                onClick={() => { setEditTab(i); builderContext?.setSelectedId(s.id) }}
+                onDelete={steps.length > 1 ? () => handleRemoveStep(s.id, i) : undefined}
+                deleteIcon={<DeleteOutlineIcon sx={{ fontSize: '14px !important' }} />}
+                color={safeTab === i ? 'primary' : 'default'}
+                variant={safeTab === i ? 'filled' : 'outlined'}
+                sx={{ cursor: 'pointer', fontSize: 11 }}
+              />
+            ))}
+
+            {/* "+ Step" button */}
+            <Tooltip title='Add step'>
+              <IconButton
+                size='small'
+                onClick={handleAddStep}
+                sx={{ border: '1px dashed', borderColor: 'divider', borderRadius: 1, p: '2px' }}
+              >
+                <AddIcon sx={{ fontSize: 16 }} />
+              </IconButton>
+            </Tooltip>
+          </Box>
+
+          {/* ── Active step content ── */}
+          {steps.length === 0 ? (
+            <Box sx={{
+              border: '1px dashed #ccc', borderRadius: 1, p: 2,
+              color: 'text.disabled', textAlign: 'center', fontSize: 13,
+            }}>
+              Click <strong>+</strong> to add your first step
             </Box>
           ) : (
-             <Box sx={{ textAlign: 'center', color: 'text.disabled', py: 2 }}>
-               {isEditMode ? 'Drop wizard-steps here' : 'No steps'}
-             </Box>
+            <Box sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1, p: 1.5, minHeight: 80 }}>
+              <ComponentRenderer
+                key={steps[safeTab]?.id}
+                node={steps[safeTab]}
+                viewerContext={childContext}
+              />
+            </Box>
           )}
         </Box>
-        <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
-          <Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
-            Back
-          </Button>
-          <Box sx={{ flex: '1 1 auto' }} />
-          <Button onClick={handleNext} disabled={activeStep === steps.length - 1}>
-            {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
-          </Button>
-        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // RUNTIME MODE
+  // ══════════════════════════════════════════════════════════════════════════
+
+  // ── Stepper ────────────────────────────────────────────────────────────────
+  const StepperEl = (
+    <Stepper
+      activeStep={activeStep}
+      orientation={orientation}
+      alternativeLabel={altLabel && orientation === 'horizontal'}
+      nonLinear={!linear}
+    >
+      {steps.map((stepNode, idx) => {
+        const label       = stepLabel(stepNode, idx)
+        const description = stepProp(stepNode, 'description')
+        const optional    = stepProp(stepNode, 'optional')
+        const isCompleted = stepProp(stepNode, 'completed') ?? completed[idx] ?? false
+        const isError     = !!stepProp(stepNode, 'error')
+
+        const optionalEl = optional
+          ? <Typography variant='caption'>Optional</Typography>
+          : description
+          ? <Typography variant='caption'>{description}</Typography>
+          : undefined
+
+        const labelEl = (
+          <StepLabel error={isError} optional={optionalEl}>
+            {label}
+          </StepLabel>
+        )
+
+        // Vertical: content and nav inline inside each step
+        if (orientation === 'vertical') {
+          return (
+            <Step key={stepNode.id} completed={isCompleted}>
+              {!linear
+                ? <StepButton onClick={() => navigate(idx, 'jump')}>{label}</StepButton>
+                : labelEl
+              }
+              <StepContent>
+                <ComponentRenderer node={stepNode} viewerContext={childContext} />
+                {!hideNav && (
+                  <Box sx={{ mt: 2, display: 'flex', gap: 1 }}>
+                    <Button size='small' disabled={idx === 0 || loading}
+                      variant={backVariant !== 'text' ? backVariant : 'text'}
+                      color={backColor !== 'inherit' ? backColor : 'inherit'}
+                      onClick={handleBack}>{backLabel}</Button>
+                    <Button size='small' disabled={loading}
+                      variant={nextVariant} color={nextColor !== 'inherit' ? nextColor : 'inherit'}
+                      onClick={handleNext}>
+                      {idx === steps.length - 1 ? finishLabel : nextLabel}
+                    </Button>
+                  </Box>
+                )}
+              </StepContent>
+            </Step>
+          )
+        }
+
+        // Horizontal
+        return (
+          <Step key={stepNode.id} completed={isCompleted}>
+            {!linear
+              ? <StepButton onClick={() => navigate(idx, 'jump')}>{label}</StepButton>
+              : labelEl
+            }
+          </Step>
+        )
+      })}
+    </Stepper>
+  )
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ width: '100%' }}>
+        {StepperEl}
+
+        {/* Horizontal: active step content below stepper */}
+        {orientation === 'horizontal' && steps.length > 0 && (
+          <Box sx={{ mt: 2, mb: 1, minHeight: 80 }}>
+            <ComponentRenderer
+              key={steps[activeStep]?.id}
+              node={steps[activeStep]}
+              viewerContext={childContext}
+            />
+          </Box>
+        )}
+
+        {orientation === 'horizontal' && steps.length === 0 && (
+          <Box sx={{ textAlign: 'center', color: 'text.disabled', py: 3 }}>No steps</Box>
+        )}
+
+        {/* Validation error */}
+        {stepError && (
+          <Alert severity='error' onClose={() => setStepError(null)} sx={{ mt: 1 }}>
+            {stepError}
+          </Alert>
+        )}
+
+        {/* Horizontal nav buttons */}
+        {orientation === 'horizontal' && !hideNav && steps.length > 0 && (
+          <Box sx={{ display: 'flex', alignItems: 'center', pt: 2 }}>
+            <Button
+              variant={backVariant !== 'text' ? backVariant : 'text'}
+              color={backColor !== 'inherit' ? backColor : 'inherit'}
+              disabled={activeStep === 0 || loading}
+              onClick={handleBack}
+            >
+              {backLabel}
+            </Button>
+            <Box sx={{ flex: 1 }} />
+            {loading && <LinearProgress sx={{ width: 60, mr: 2, alignSelf: 'center' }} />}
+            <Button
+              variant={nextVariant}
+              color={nextColor !== 'inherit' ? nextColor : 'inherit'}
+              disabled={loading}
+              onClick={handleNext}
+            >
+              {activeStep >= steps.length - 1 ? finishLabel : nextLabel}
+            </Button>
+          </Box>
+        )}
       </Box>
     </ViewerComponentWrapper>
   )

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

@@ -2,39 +2,44 @@ import { Box } from '@mui/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'
 
+// WizardStepRenderer — renders the CONTENT of one wizard step.
+//
+// The parent WizardRenderer is responsible for:
+//   - showing/hiding this step based on activeStep
+//   - resolving step-level props (label, description, completed, error, onEnter, onNext)
+//
+// This renderer just provides a drop zone for child components.
+// It receives wizard navigation helpers (goToStep, nextStep, prevStep) from
+// viewerContext if placed inside a WizardRenderer.
+
 export default function WizardStepRenderer({ node, viewerContext }) {
-  const { data, form, isEditMode, builderContext } = viewerContext
-  // main is resolved by parent or child depending on usage,
-  // but here we just need to render children
+  const { isEditMode, builderContext } = viewerContext
 
   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)
+          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)
         const newNode = createNode(component.type)
         builderContext.setSchema(prev => ({
           ...prev,
-          root: insertIntoTreeAtIndex(prev.root, node.id, newNode, index)
+          root: insertIntoTreeAtIndex(prev.root, node.id, newNode, index),
         }))
         builderContext.setSelectedId(newNode.id)
         builderContext.setDraggingNodeId(null)
@@ -47,22 +52,26 @@ export default function WizardStepRenderer({ node, viewerContext }) {
 
   return (
     <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Box sx={{ minHeight: 48 }}>
+      <Box sx={{ minHeight: 48, py: 0.5 }}>
         {node.children?.length > 0 ? (
           <>
             {node.children.map((child, index) => (
               <Box key={child.id}>
-                {isEditMode && <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />}
+                {isEditMode && (
+                  <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />
+                )}
                 <ComponentRenderer node={child} viewerContext={viewerContext} />
               </Box>
             ))}
-            {isEditMode && <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />}
+            {isEditMode && (
+              <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />
+            )}
           </>
         ) : (
           <>
             {isEditMode && <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />}
             <Box sx={{ fontSize: 12, color: 'text.disabled', textAlign: 'center', py: 1 }}>
-              {isEditMode ? 'Drop components for this step' : 'Empty step'}
+              {isEditMode ? 'Drop components for this step' : ''}
             </Box>
           </>
         )}