robobyte-front-builder 1.0.0

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

@@ -0,0 +1,80 @@
+import { NumericFormat } from 'react-number-format'
+import { TextField } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function NumberFormatRenderer({ node, viewerContext }) {
+  const { data, form, updateFormValue, validationErrors } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  // 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] || ''
+
+  // Get validation error
+  const error = validationErrors[key]
+
+  const handleValueChange = (values) => {
+    // values.floatValue contains the actual numeric value
+    updateFormValue(key, values.floatValue)
+  }
+
+  // Determine format type and props
+  const formatType = main.formatType || 'decimal'
+  const decimalScale = main.decimalScale ?? 2
+  const fixedDecimalScale = main.fixedDecimalScale ?? false
+  const thousandSeparator = main.thousandSeparator ?? true
+  const prefix = main.prefix || ''
+  const suffix = main.suffix || ''
+  const allowNegative = main.allowNegative ?? true
+
+  // Build NumericFormat props based on format type
+  let formatProps = {
+    thousandSeparator,
+    decimalScale,
+    fixedDecimalScale,
+    allowNegative
+  }
+
+  switch (formatType) {
+    case 'currency':
+      formatProps.prefix = main.currencySymbol || '$'
+      formatProps.decimalScale = decimalScale
+      formatProps.fixedDecimalScale = true
+      break
+    case 'percentage':
+      formatProps.suffix = '%'
+      formatProps.decimalScale = decimalScale
+      break
+    case 'decimal':
+      formatProps.prefix = prefix
+      formatProps.suffix = suffix
+      break
+    case 'custom':
+      // Use custom format pattern
+      formatProps.format = main.format
+      formatProps.prefix = prefix
+      formatProps.suffix = suffix
+      break
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <NumericFormat
+        {...formatProps}
+        value={value}
+        onValueChange={handleValueChange}
+        customInput={TextField}
+        fullWidth
+        size={main.size}
+        label={main.label}
+        placeholder={main.placeholder}
+        disabled={main.disabled}
+        error={!!error}
+        helperText={error || main.helperText}
+      />
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { CircularProgress, Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function ProgressCircleRenderer({ node, viewerContext }) {
+  const { data, form } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  const value = parseFloat(main.value) || 0
+  const showValue = main.showValue ?? true
+  const size = main.size || 40
+  const thickness = main.thickness || 3.6
+  const color = main.color || 'primary'
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ position: 'relative', display: 'inline-flex' }}>
+        <CircularProgress
+          variant={main.variant || "determinate"}
+          value={value}
+          size={size}
+          thickness={thickness}
+          color={color}
+          {...main}
+        />
+        {showValue && (
+          <Box
+            sx={{
+              top: 0,
+              left: 0,
+              bottom: 0,
+              right: 0,
+              position: 'absolute',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Typography variant="caption" component="div" color="text.secondary">
+              {`${Math.round(value)}%`}
+            </Typography>
+          </Box>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { LinearProgress, Box, Typography } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function ProgressLineRenderer({ node, viewerContext }) {
+  const { data, form } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  const value = parseFloat(main.value) || 0
+  const showValue = main.showValue ?? true
+  const color = main.color || 'primary'
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ width: '100%' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Box sx={{ width: '100%', mr: 1 }}>
+            <LinearProgress
+              variant={main.variant || "determinate"}
+              value={value}
+              color={color}
+              {...main}
+            />
+          </Box>
+          {showValue && (
+            <Box sx={{ minWidth: 35 }}>
+              <Typography variant="body2" color="text.secondary">{`${Math.round(
+                value,
+              )}%`}</Typography>
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,57 @@
+import { FormControl, FormLabel, RadioGroup, Radio, FormControlLabel, FormHelperText } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function RadioGroupRenderer({ node, viewerContext }) {
+  const { data, form, updateFormValue, validationErrors } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  // 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] || ''
+
+  // Get validation error
+  const error = validationErrors[key]
+
+  // Get options - can be static array or resolved via expression
+  const options = main.options || []
+
+  const handleChange = (e) => {
+    updateFormValue(key, 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>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,94 @@
+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'
+
+export default function RepeaterRenderer({ node, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  // For repeater, we use the 'items' from data/form based on the 'key'
+  const items = main.items || []
+
+  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)
+        const newNode = createNode(component.type)
+        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)
+    }
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ border: '1px dashed #ccc', p: 1 }}>
+        {isEditMode ? (
+           // In edit mode, we show the template (children)
+           <Box>
+             <Box sx={{ fontSize: 10, color: 'text.secondary', mb: 1 }}>Repeater Template</Box>
+             {node.children?.length > 0 ? (
+                <>
+                  {node.children.map((child, index) => (
+                    <Box key={child.id}>
+                      <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />
+                      <ComponentRenderer node={child} viewerContext={viewerContext} />
+                    </Box>
+                  ))}
+                  <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />
+                </>
+             ) : (
+                <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />
+             )}
+           </Box>
+        ) : (
+          // In preview mode, we repeat the template for each item
+          items.map((item, index) => (
+            <Box key={index} sx={{ mb: 2, borderBottom: '1px solid #eee', pb: 1 }}>
+               {node.children?.map(child => (
+                 <ComponentRenderer
+                   key={child.id}
+                   node={child}
+                   viewerContext={{
+                     ...viewerContext,
+                     data: { ...data, item, index } // Provide item context
+                   }}
+                 />
+               ))}
+            </Box>
+          ))
+        )}
+        {!isEditMode && items.length === 0 && (
+          <Box sx={{ textAlign: 'center', color: 'text.disabled', py: 2 }}>No items to display</Box>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import ReportViewer from 'src/pages/reportModule/reportBuilder/reportViewer'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function ReportViewerRenderer({ node, viewerContext }) {
+  const { data, form } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <ReportViewer noHeader={true} {...main} />
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,76 @@
+import { useRef } from 'react'
+import SunEditor from 'suneditor-react'
+import 'suneditor/dist/css/suneditor.min.css'
+import { Box, FormHelperText } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function RichTextRenderer({ node, viewerContext }) {
+  const { data, form, updateFormValue, validationErrors } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+  const editorRef = useRef(null)
+
+  // 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] || ''
+
+  // Get validation error
+  const error = validationErrors[key]
+
+  const handleChange = (content) => {
+    updateFormValue(key, content)
+  }
+
+  // Default toolbar buttons
+  const defaultButtons = [
+    ['undo', 'redo'],
+    ['font', 'fontSize', 'formatBlock'],
+    ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
+    ['fontColor', 'hiliteColor'],
+    ['removeFormat'],
+    ['outdent', 'indent'],
+    ['align', 'horizontalRule', 'list', 'table'],
+    ['link', 'image', 'video'],
+    ['fullScreen', 'showBlocks', 'codeView'],
+    ['preview', 'print']
+  ]
+
+  // Get toolbar configuration from props or use default
+  const toolbar = main.toolbar || defaultButtons
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box>
+        <SunEditor
+          ref={editorRef}
+          setContents={value}
+          onChange={handleChange}
+          setOptions={{
+            buttonList: toolbar,
+            height: main.height || '300px',
+            placeholder: main.placeholder || 'Enter text here...',
+            disabled: main.disabled,
+            mode: main.mode || 'classic', // classic, inline, balloon, balloon-always
+            resizingBar: main.resizingBar !== false,
+            showPathLabel: main.showPathLabel !== false,
+            charCounter: main.charCounter !== false,
+            maxCharCount: main.maxCharCount,
+            width: '100%'
+          }}
+        />
+        {error && (
+          <FormHelperText error sx={{ mt: 0.5, mx: 1.75 }}>
+            {error}
+          </FormHelperText>
+        )}
+        {!error && main.helperText && (
+          <FormHelperText sx={{ mt: 0.5, mx: 1.75 }}>
+            {main.helperText}
+          </FormHelperText>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,89 @@
+import { useRef } from 'react'
+import SignatureCanvas from 'react-signature-canvas'
+import { Box, Button, FormHelperText } from '@mui/material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps } from 'services/builderHelper/resolveProps'
+
+export default function SignatureRenderer({ node, viewerContext }) {
+  const { data, form, updateFormValue, validationErrors } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+  const sigCanvas = useRef(null)
+
+  // 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] || ''
+
+  // Get validation error
+  const error = validationErrors[key]
+
+  const handleEnd = () => {
+    if (sigCanvas.current) {
+      const dataURL = sigCanvas.current.toDataURL('image/png')
+      updateFormValue(key, dataURL)
+    }
+  }
+
+  const handleClear = () => {
+    if (sigCanvas.current) {
+      sigCanvas.current.clear()
+      updateFormValue(key, '')
+    }
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box>
+        {main.label && (
+          <Box sx={{ mb: 1, fontSize: '0.875rem', color: 'text.secondary' }}>
+            {main.label}
+          </Box>
+        )}
+        <Box
+          sx={{
+            border: error ? '1px solid #d32f2f' : '1px solid #ccc',
+            borderRadius: 1,
+            overflow: 'hidden',
+            backgroundColor: main.disabled ? '#f5f5f5' : '#fff'
+          }}
+        >
+          <SignatureCanvas
+            ref={sigCanvas}
+            canvasProps={{
+              width: main.width || 500,
+              height: main.height || 200,
+              className: 'signature-canvas'
+            }}
+            backgroundColor={main.backgroundColor || '#ffffff'}
+            penColor={main.penColor || '#000000'}
+            minWidth={main.minWidth || 0.5}
+            maxWidth={main.maxWidth || 2.5}
+            onEnd={handleEnd}
+            disabled={main.disabled}
+          />
+        </Box>
+        <Box sx={{ mt: 1, display: 'flex', gap: 1 }}>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={handleClear}
+            disabled={main.disabled}
+          >
+            Clear
+          </Button>
+        </Box>
+        {error && (
+          <FormHelperText error sx={{ mt: 0.5, mx: 1.75 }}>
+            {error}
+          </FormHelperText>
+        )}
+        {!error && main.helperText && (
+          <FormHelperText sx={{ mt: 0.5, mx: 1.75 }}>
+            {main.helperText}
+          </FormHelperText>
+        )}
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,82 @@
+import { Box, Tab as MuiTab, Tabs } from '@mui/material'
+import { useState } from 'react'
+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'
+
+export default function TabRenderer({ node, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+  const [activeTab, setActiveTab] = useState(0)
+
+  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)
+        const newNode = createNode(component.type)
+        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)
+    }
+  }
+
+  const handleChange = (event, newValue) => {
+    setActiveTab(newValue)
+  }
+
+  const tabItems = node.children || []
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ width: '100%' }}>
+        <Tabs value={activeTab} onChange={handleChange} variant={main.variant || 'standard'}>
+          {tabItems.map((child, index) => (
+             <MuiTab key={child.id} label={child.props?.main?.label || `Tab ${index + 1}`} />
+          ))}
+          {isEditMode && (
+            <Box sx={{ display: 'flex', alignItems: 'center', px: 1 }}>
+               <DropZone onDrop={handleDropAtIndex(tabItems.length)} isEditMode={isEditMode} />
+            </Box>
+          )}
+        </Tabs>
+        <Box sx={{ p: 2, minHeight: 100 }}>
+          {tabItems.length > 0 ? (
+            <Box key={tabItems[activeTab].id}>
+               <ComponentRenderer node={tabItems[activeTab]} viewerContext={viewerContext} />
+            </Box>
+          ) : (
+            <Box sx={{ textAlign: 'center', color: 'text.disabled' }}>
+              {isEditMode ? 'Drop tab-items here' : 'No tabs'}
+            </Box>
+          )}
+        </Box>
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}

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

@@ -0,0 +1,92 @@
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } 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'
+
+export default function TableRenderer({ node, viewerContext }) {
+  const { data, form, isEditMode, builderContext } = viewerContext
+  const main = resolveProps(node, 'main', { form, data })
+
+  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)
+        const newNode = createNode(component.type)
+        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)
+    }
+  }
+
+  // Separate header-cells and other children (rows or regular cells)
+  const headerCells = node.children?.filter(child => child.type === 'header-cell') || []
+  const otherChildren = node.children?.filter(child => child.type !== 'header-cell') || []
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <TableContainer component={Paper} variant="outlined">
+        <Table size={main.size || 'medium'}>
+          <TableHead>
+            <TableRow>
+              {headerCells.map((child, index) => (
+                <TableCell key={child.id} padding="none">
+                  {isEditMode && <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />}
+                  <ComponentRenderer node={child} viewerContext={viewerContext} />
+                </TableCell>
+              ))}
+              {isEditMode && headerCells.length === 0 && (
+                <TableCell>
+                   <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />
+                </TableCell>
+              )}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {/* Very basic implementation: just renders other children in a single row for now,
+                or we can assume they are 'cells' and wrap them.
+                Formengine tables are more complex, but this is a start. */}
+             <TableRow>
+               {otherChildren.map((child, index) => (
+                 <TableCell key={child.id} padding="none">
+                   {isEditMode && <DropZone onDrop={handleDropAtIndex(headerCells.length + index)} isEditMode={isEditMode} />}
+                   <ComponentRenderer node={child} viewerContext={viewerContext} />
+                 </TableCell>
+               ))}
+               {isEditMode && otherChildren.length === 0 && (
+                 <TableCell>
+                    <DropZone onDrop={handleDropAtIndex(headerCells.length)} isEditMode={isEditMode} />
+                 </TableCell>
+               )}
+             </TableRow>
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </ViewerComponentWrapper>
+  )
+}