robobyte-front-builder 1.0.0

package/src/views/builder/viewer/ComponentRenderer.jsx

@@ -0,0 +1,166 @@
+import ContainerRenderer from './renderers/ContainerRenderer'
+import InputRenderer from './renderers/InputRenderer'
+import CheckboxRenderer from './renderers/CheckboxRenderer'
+import ButtonRenderer from './renderers/ButtonRenderer'
+import DatePickerRenderer from './renderers/DatePickerRenderer'
+import DropdownRenderer from './renderers/DropdownRenderer'
+import NumberFormatRenderer from './renderers/NumberFormatRenderer'
+import RadioGroupRenderer from './renderers/RadioGroupRenderer'
+import RichTextRenderer from './renderers/RichTextRenderer'
+import SignatureRenderer from './renderers/SignatureRenderer'
+import TagPickerRenderer from './renderers/TagPickerRenderer'
+import TextAreaRenderer from './renderers/TextAreaRenderer'
+import TimePickerRenderer from './renderers/TimePickerRenderer'
+import ToggleRenderer from './renderers/ToggleRenderer'
+import LabelRenderer from './renderers/LabelRenderer'
+import DividerRenderer from './renderers/DividerRenderer'
+import HeaderRenderer from './renderers/HeaderRenderer'
+import ImageRenderer from './renderers/ImageRenderer'
+import LinkRenderer from './renderers/LinkRenderer'
+import MenuRenderer from './renderers/MenuRenderer'
+import ProgressCircleRenderer from './renderers/ProgressCircleRenderer'
+import ProgressLineRenderer from './renderers/ProgressLineRenderer'
+import CardRenderer from './renderers/CardRenderer'
+import ColumnGroupRenderer from './renderers/ColumnGroupRenderer'
+import ColumnRenderer from './renderers/ColumnRenderer'
+import CellRenderer from './renderers/CellRenderer'
+import HeaderCellRenderer from './renderers/HeaderCellRenderer'
+import BreadcrumbRenderer from './renderers/BreadcrumbRenderer'
+import TableRenderer from './renderers/TableRenderer'
+import TabRenderer from './renderers/TabRenderer'
+import WizardRenderer from './renderers/WizardRenderer'
+import WizardStepRenderer from './renderers/WizardStepRenderer'
+import RepeaterRenderer from './renderers/RepeaterRenderer'
+import ReportViewerRenderer from './renderers/ReportViewerRenderer'
+import AutoCompleteRenderer from './renderers/AutoCompleteRenderer'
+import LayoutRenderer from './renderers/LayoutRenderer'
+import LayoutCellRenderer from './renderers/LayoutCellRenderer'
+import ViewerComponentWrapper from 'views/builder/viewer/ViewerComponentWrapper'
+
+export default function ComponentRenderer({ node, viewerContext }) {
+  if (!node) return null
+
+  switch (node.type) {
+    case 'container':
+      return <ContainerRenderer node={node} viewerContext={viewerContext} />
+
+    case 'input':
+      return <InputRenderer node={node} viewerContext={viewerContext} />
+
+    case 'checkbox':
+      return <CheckboxRenderer node={node} viewerContext={viewerContext} />
+
+    case 'button':
+      return <ButtonRenderer node={node} viewerContext={viewerContext} />
+
+    case 'datepicker':
+      return <DatePickerRenderer node={node} viewerContext={viewerContext} />
+
+    case 'dropdown':
+      return <DropdownRenderer node={node} viewerContext={viewerContext} />
+
+    case 'radio':
+      return <RadioGroupRenderer node={node} viewerContext={viewerContext} />
+
+    case 'number':
+      return <NumberFormatRenderer node={node} viewerContext={viewerContext} />
+
+    case 'richtext':
+      return <RichTextRenderer node={node} viewerContext={viewerContext} />
+
+    case 'signature':
+      return <SignatureRenderer node={node} viewerContext={viewerContext} />
+
+    case 'tag':
+      return <TagPickerRenderer node={node} viewerContext={viewerContext} />
+
+    case 'textarea':
+      return <TextAreaRenderer node={node} viewerContext={viewerContext} />
+
+    case 'time':
+      return <TimePickerRenderer node={node} viewerContext={viewerContext} />
+
+    case 'toggle':
+      return <ToggleRenderer node={node} viewerContext={viewerContext} />
+
+    case 'label':
+      return <LabelRenderer node={node} viewerContext={viewerContext} />
+
+    case 'divider':
+      return <DividerRenderer node={node} viewerContext={viewerContext} />
+
+    case 'header':
+      return <HeaderRenderer node={node} viewerContext={viewerContext} />
+
+    case 'image':
+      return <ImageRenderer node={node} viewerContext={viewerContext} />
+
+    case 'link':
+      return <LinkRenderer node={node} viewerContext={viewerContext} />
+
+    case 'menu':
+      return <MenuRenderer node={node} viewerContext={viewerContext} />
+
+    case 'progress-circle':
+      return <ProgressCircleRenderer node={node} viewerContext={viewerContext} />
+
+    case 'progress-line':
+      return <ProgressLineRenderer node={node} viewerContext={viewerContext} />
+
+    case 'card':
+      return <CardRenderer node={node} viewerContext={viewerContext} />
+
+    case 'column-group':
+      return <ColumnGroupRenderer node={node} viewerContext={viewerContext} />
+
+    case 'column':
+      return <ColumnRenderer node={node} viewerContext={viewerContext} />
+
+    case 'cell':
+      return <CellRenderer node={node} viewerContext={viewerContext} />
+
+    case 'header-cell':
+      return <HeaderCellRenderer node={node} viewerContext={viewerContext} />
+
+    case 'breadcrumb':
+      return <BreadcrumbRenderer node={node} viewerContext={viewerContext} />
+
+    case 'table':
+      return <TableRenderer node={node} viewerContext={viewerContext} />
+
+    case 'tab':
+      return <TabRenderer node={node} viewerContext={viewerContext} />
+
+    case 'wizard':
+      return <WizardRenderer node={node} viewerContext={viewerContext} />
+
+    case 'wizard-step':
+      return <WizardStepRenderer node={node} viewerContext={viewerContext} />
+
+    case 'repeater':
+      return <RepeaterRenderer node={node} viewerContext={viewerContext} />
+
+    case 'reportViewer':
+      return <ReportViewerRenderer node={node} viewerContext={viewerContext} />
+
+    case 'autocomplete':
+      return <AutoCompleteRenderer node={node} viewerContext={viewerContext} />
+
+    case 'layout':
+      return <LayoutRenderer node={node} viewerContext={viewerContext} />
+
+    case 'layout-cell':
+      return <LayoutCellRenderer node={node} layoutNode={node} viewerContext={viewerContext} />
+
+    case 'widget':
+      return <ViewerComponentWrapper node={node} viewerContext={viewerContext} />
+
+    default:
+      // fallback to show something for unknown types
+      return (
+        <div style={{ padding: 8, opacity: 0.7 }}>
+          Unknown component: {node.type}
+        </div>
+      )
+  }
+}

package/src/views/builder/viewer/DropZone.jsx

@@ -0,0 +1,60 @@
+import { Box } from '@mui/material'
+import { useState } from 'react'
+
+/**
+ * DropZone component - provides a visual drop zone between components
+ * Shows a blue line indicator when dragging over it
+ */
+export default function DropZone({ onDrop, isEditMode }) {
+  const [isDragOver, setIsDragOver] = useState(false)
+
+  const handleDragOver = e => {
+    if (!isEditMode) return
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragOver(true)
+  }
+
+  const handleDragLeave = e => {
+    if (!isEditMode) return
+    e.stopPropagation()
+    setIsDragOver(false)
+  }
+
+  const handleDrop = e => {
+    if (!isEditMode) return
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragOver(false)
+    onDrop(e)
+  }
+
+  if (!isEditMode) return null
+
+  return (
+    <Box
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      sx={{
+        height: isDragOver ? 32 : 16,
+        minHeight: isDragOver ? 32 : 16,
+        bgcolor: isDragOver ? 'primary.main' : 'transparent',
+        transition: 'all 0.2s ease',
+        borderRadius: isDragOver ? 1 : 0,
+        mx: isDragOver ? -0.5 : 0,
+        my: isDragOver ? 0.5 : 0,
+        border: isDragOver ? '2px dashed' : 'none',
+        borderColor: isDragOver ? 'primary.main' : 'transparent',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: isDragOver ? 'copy' : 'default',
+        ...(isDragOver && {
+          boxShadow: '0 0 12px rgba(25, 118, 210, 0.6)',
+          transform: 'scaleY(1.1)'
+        })
+      }}
+    />
+  )
+}

package/src/views/builder/viewer/ProductionViewer.jsx

@@ -0,0 +1,155 @@
+import { Box } from '@mui/material'
+import { useState, useEffect } from 'react'
+import ComponentRenderer from './ComponentRenderer'
+import { executeActionsByEvent } from 'services/builderHelper/actionExecutor'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+
+/**
+ * Validate form based on component validation rules
+ * @param {object} root - Root node of the schema
+ * @param {object} formData - Current form values
+ * @returns {Promise<object>} - Validation errors keyed by component key
+ */
+async function validateForm(root, formData) {
+  const errors = {}
+
+  async function traverse(node) {
+    if (!node) return
+
+    // Get component key
+    const key = node.props?.main?.key?.value || node.props?.main?.key
+
+    if (key) {
+      const value = formData[key]
+
+      // Check required validation
+      const required = node.props?.advanced?.required?.value ?? node.props?.advanced?.required
+      if (required && (value === undefined || value === null || value === '')) {
+        errors[key] = 'This field is required'
+      }
+
+      // Check custom validation expression
+      const validationField = node.props?.advanced?.validation
+      if (validationField?.valueType === 'expression' && validationField?.expression?.code) {
+        try {
+          const result = await executeJSCode(validationField.expression.code, {
+            form: formData,
+            data: {}
+          })
+
+          // If validation returns false or error message, add error
+          if (result === false) {
+            errors[key] = 'Validation failed'
+          } else if (typeof result === 'string') {
+            errors[key] = result
+          }
+        } catch (e) {
+          console.error(`Validation error for ${key}:`, e)
+        }
+      }
+    }
+
+    // Traverse children
+    if (node.children) {
+      for (const child of node.children) {
+        await traverse(child)
+      }
+    }
+  }
+
+  await traverse(root)
+  return errors
+}
+
+/**
+ * Production Viewer component - self-contained for production/final viewer
+ * Accepts schema as prop and manages its own state
+ * No edit mode features, no BuilderContext dependency
+ *
+ * @param {object} schema - The form schema
+ */
+export default function ProductionViewer({ schema }) {
+  const [data, setData] = useState({})
+  const [form, setForm] = useState({})
+  const [validationErrors, setValidationErrors] = useState({})
+
+  // Execute onLoad actions when component mounts or schema changes
+  useEffect(() => {
+    // Reset form and data for fresh execution
+    setForm({})
+    setData({})
+    setValidationErrors({})
+
+    // Execute onLoad actions with fresh context
+    if (schema?.actions && schema.actions.length > 0) {
+      executeActionsByEvent(schema.actions, 'onLoad', { form: {}, data: {} }, setData).catch(err => {
+        console.error('onLoad actions error:', err)
+      })
+    }
+  }, [schema])
+
+  // Update form field value
+  const updateFormValue = (key, value) => {
+    setForm(prev => ({
+      ...prev,
+      [key]: value
+    }))
+  }
+
+  // Submit form handler
+  const submitForm = async () => {
+    // Execute validation
+    const errors = await validateForm(schema.root, form)
+    setValidationErrors(errors)
+
+    // If validation passes, execute onSubmit actions
+    if (Object.keys(errors).length === 0) {
+      await executeActionsByEvent(schema.actions, 'onSubmit', { form, data }, setData)
+      return true
+    }
+    return false
+  }
+
+  // Reset form handler
+  const resetForm = () => {
+    setForm({})
+    setValidationErrors({})
+  }
+
+  // Create viewer context object to pass down
+  const viewerContext = {
+    schema,
+    mode: 'preview',
+    setMode: () => {}, // No-op in production
+    isEditMode: false,
+    isPreviewMode: true,
+    data,
+    setData,
+    form,
+    setForm,
+    updateFormValue,
+    validationErrors,
+    setValidationErrors,
+    submitForm,
+    resetForm,
+    builderContext: null // No builder context in production
+  }
+
+  if (!schema?.root) {
+    return (
+      <Box sx={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Box sx={{ textAlign: 'center', color: 'text.disabled' }}>
+          No schema provided
+        </Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
+        <ComponentRenderer node={schema.root} viewerContext={viewerContext} />
+      </Box>
+    </Box>
+  )
+}

package/src/views/builder/viewer/SaveViewDialog.jsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  Box
+} from '@mui/material'
+
+export default function SaveViewDialog({ open, onClose, onSave, initialTitle = '' }) {
+  const [title, setTitle] = useState(initialTitle)
+  const [error, setError] = useState('')
+
+  const handleSave = () => {
+    if (!title || title.trim() === '') {
+      setError('Title is required')
+      return
+    }
+    setError('')
+    onSave(title.trim())
+  }
+
+  const handleClose = () => {
+    setTitle(initialTitle)
+    setError('')
+    onClose()
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth='sm' fullWidth>
+      <DialogTitle>Save View</DialogTitle>
+      <DialogContent>
+        <Box sx={{ pt: 1 }}>
+          <TextField
+            autoFocus
+            fullWidth
+            label='Title'
+            value={title}
+            onChange={e => {
+              setTitle(e.target.value)
+              setError('')
+            }}
+            error={!!error}
+            helperText={error || 'Enter a title for this view'}
+            placeholder='e.g., User Management Form'
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button onClick={handleSave} variant='contained' color='primary'>
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+

package/src/views/builder/viewer/SaveWidgetDialog.jsx

@@ -0,0 +1,142 @@
+import { useState } from 'react'
+import { Dialog, DialogTitle,Grid, DialogContent, DialogActions, Button, TextField, Box, Autocomplete } from '@mui/material'
+import * as yup from 'yup'
+import { yupResolver } from '@hookform/resolvers/yup'
+import { useForm } from 'react-hook-form'
+import fetchReportDataByPageId from 'services/reportData/fetchReportData'
+import FormControl from '@mui/material/FormControl'
+import CircularProgress from '@mui/material/CircularProgress'
+
+let defaultItem = {
+  title: '',
+  category: null
+}
+
+export default function SaveWidgetDialog({ open, onClose, onSave, initialTitle = '' }) {
+  const [title, setTitle] = useState(initialTitle)
+  const [error, setError] = useState('')
+  const [categories, setCategories] = useState([])
+  const [IsSubmitting, setIsSubmitting] = useState(false)
+
+  let schema = yup.object().shape({
+    title: yup.string().required(),
+    category: yup.object().required()
+  })
+  const {
+    register,
+    handleSubmit,
+    clearErrors,
+    control,
+    getValues,
+    setValue,
+    reset,
+    watch,
+    formState: { errors }
+  } = useForm({
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+    resolver: yupResolver(schema),
+    defaultValues: defaultItem
+  })
+  const handleSave = values => {
+    setIsSubmitting(true)
+    console.log(values)
+    onSave(values)
+    setIsSubmitting(false)
+  }
+
+  const handleClose = () => {
+    setTitle(initialTitle)
+    setError('')
+    onClose()
+  }
+
+  async function handleGetCategories() {
+    try {
+      let response = await fetchReportDataByPageId({
+        pageId: '48b4e403-6201-408d-a67a-ad8b130e65a2',
+        dataAsObject: true,
+        isDataOnly: true
+      })
+      if (response) setCategories(response)
+      else setCategories([])
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth='sm' fullWidth>
+      <DialogTitle>Save Widget</DialogTitle>
+      <DialogContent>
+        <form
+          onSubmit={() => {
+            console.log(errors)
+            handleSubmit(values => {
+              console.log(values)
+              handleSave(values)
+            })()
+          }}
+        >
+          <Box sx={{ pt: 1 }}>
+            <Grid container size={12} spacing={3}>
+              <Grid item size={12}>
+                <TextField
+                  autoFocus
+                  fullWidth
+                  label='Title'
+                  value={watch('title')}
+                  onChange={e => {
+                    setValue('title', e.target.value)
+                  }}
+                  error={!!error}
+                  helperText={error || 'Enter a title for this view'}
+                  placeholder='e.g., User Management Form'
+                />
+              </Grid>
+              <Grid item size={12}>
+                <FormControl fullWidth>
+                  <Autocomplete
+                    {...register('category')}
+                    value={watch('category')}
+                    fullWidth
+                    options={categories}
+                    onChange={(e, value) => {
+                      setValue('category', value)
+                    }}
+                    getOptionLabel={option => `${option.name}`}
+                    renderInput={params => (
+                      <TextField
+                        label='الصنف'
+                        onFocus={() => {
+                          handleGetCategories()
+                        }}
+                        {...params}
+                        error={Boolean(errors.category)}
+                      />
+                    )}
+                  />
+                </FormControl>
+              </Grid>
+            </Grid>
+          </Box>
+          <DialogActions>
+            <Button onClick={handleClose}>Cancel</Button>
+            <Button type='submit' variant='contained' disabled={IsSubmitting}>
+              {IsSubmitting ? (
+                <CircularProgress
+                  sx={{
+                    color: 'common.white',
+                    width: '20px !important',
+                    height: '20px !important',
+                    mr: theme => theme.spacing(2)
+                  }}
+                />
+              ) : null}
+              حفظ
+            </Button>
+          </DialogActions>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/views/builder/viewer/Viewer.jsx

@@ -0,0 +1,83 @@
+import { Box } from '@mui/material'
+import ViewerToolbar from './ViewerToolbar'
+import ComponentRenderer from './ComponentRenderer'
+import ProductionViewer from './ProductionViewer'
+import { useBuilder } from 'src/context/BuilderContext'
+
+/**
+ * Viewer component for the builder - integrated with BuilderContext
+ * Used within the builder for edit and preview modes
+ * Preview mode now uses ProductionViewer component
+ */
+export default function Viewer() {
+  const {
+    schema,
+    mode,
+    setMode,
+    isEditMode,
+    isPreviewMode,
+    data,
+    setData,
+    form,
+    setForm,
+    updateFormValue,
+    validationErrors,
+    setValidationErrors,
+    submitForm,
+    resetForm,
+    selectedId,
+    setSelectedId,
+    setSchema,
+    draggingNodeId,
+    setDraggingNodeId
+  } = useBuilder()
+
+  // Create viewer context object to pass down (for edit mode)
+  const viewerContext = {
+    schema,
+    mode,
+    setMode,
+    isEditMode,
+    isPreviewMode,
+    data,
+    setData,
+    form,
+    setForm,
+    updateFormValue,
+    validationErrors,
+    setValidationErrors,
+    submitForm,
+    resetForm,
+    // Builder context for edit mode features
+    builderContext: {
+      selectedId,
+      setSelectedId,
+      setSchema,
+      draggingNodeId,
+      setDraggingNodeId
+    }
+  }
+
+  if (!schema?.root) {
+    return (
+      <Box sx={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Box sx={{ textAlign: 'center', color: 'text.disabled' }}>
+          No schema provided
+        </Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+      <ViewerToolbar mode={mode} setMode={setMode} />
+      {isPreviewMode ? (
+        <ProductionViewer schema={schema} />
+      ) : (
+        <Box sx={{ flex: 1, overflow: 'auto', p: 2 }}>
+          <ComponentRenderer node={schema.root} viewerContext={viewerContext} />
+        </Box>
+      )}
+    </Box>
+  )
+}