robobyte-front-builder 1.0.0

package/src/views/builder/inspector/fields/TabsEditor.jsx

@@ -0,0 +1,128 @@
+import { Box, TextField, IconButton, Button, Typography, Checkbox, FormControlLabel } from '@mui/material'
+import { Add, Close } from '@mui/icons-material'
+import { useState, useEffect } from 'react'
+import JSEditor from '../../JSEditor'
+
+export default function TabsEditor({ field, onChange }) {
+  const safeField = field ?? { valueType: 'value', value: [] }
+  const isExpression = safeField.valueType === 'expression'
+  // Initialize tabs from field value
+  const [tabs, setTabs] = useState([])
+
+  useEffect(() => {
+    if (!isExpression && Array.isArray(safeField.value)) {
+      setTabs(safeField.value.length > 0 ? safeField.value : [{ label: 'Tab 1', icon: '', disabled: false }])
+    } else {
+      setTabs([{ label: 'Tab 1', icon: '', disabled: false }])
+    }
+  }, [isExpression, JSON.stringify(safeField.value)])
+
+  const handleAddTab = () => {
+    const newTabs = [...tabs, { label: `Tab ${tabs.length + 1}`, icon: '', disabled: false }]
+    setTabs(newTabs)
+    onChange?.({ valueType: 'value', value: newTabs })
+  }
+
+  const handleRemoveTab = (index) => {
+    const newTabs = tabs.filter((_, i) => i !== index)
+    setTabs(newTabs)
+    onChange?.({ valueType: 'value', value: newTabs })
+  }
+
+  const handleTabChange = (index, field, value) => {
+    const newTabs = [...tabs]
+    newTabs[index] = { ...newTabs[index], [field]: value }
+    setTabs(newTabs)
+    onChange?.({ valueType: 'value', value: newTabs })
+  }
+
+  return (
+    <Box>
+      {/* Header with JS Editor toggle */}
+      <Box display="flex" alignItems="center" justifyContent="space-between" mb={1}>
+        <Typography variant="subtitle2" sx={{ opacity: 0.9 }}>
+          {isExpression ? 'Using JS Expression' : 'Manual Entry'}
+        </Typography>
+        <JSEditor
+          value={tabs}
+          expression={safeField.expression}
+          mode={isExpression ? 'expression' : 'value'}
+          onChange={payload => onChange?.(payload)}
+        />
+      </Box>
+
+      {/* Show manual entry fields only when NOT in expression mode */}
+      {!isExpression && (
+        <>
+          {/* Column headers */}
+          <Box display="flex" gap={1} mb={1} alignItems="center">
+            <Typography variant="caption" sx={{ flex: 2, opacity: 0.7 }}>
+              Label
+            </Typography>
+            <Typography variant="caption" sx={{ flex: 1, opacity: 0.7 }}>
+              Icon
+            </Typography>
+            <Typography variant="caption" sx={{ width: 80, opacity: 0.7 }}>
+              Disabled
+            </Typography>
+            <Box sx={{ width: 40 }} />
+          </Box>
+
+          {/* Tabs rows */}
+          {tabs.map((tab, index) => (
+            <Box key={index} display="flex" gap={1} mb={1} alignItems="center">
+              <TextField
+                size="small"
+                value={tab.label || ''}
+                onChange={(e) => handleTabChange(index, 'label', e.target.value)}
+                placeholder="Tab label"
+                sx={{ flex: 2 }}
+              />
+              <TextField
+                size="small"
+                value={tab.icon || ''}
+                onChange={(e) => handleTabChange(index, 'icon', e.target.value)}
+                placeholder="Icon (optional)"
+                sx={{ flex: 1 }}
+              />
+              <Box sx={{ width: 80, display: 'flex', justifyContent: 'center' }}>
+                <Checkbox
+                  size="small"
+                  checked={tab.disabled || false}
+                  onChange={(e) => handleTabChange(index, 'disabled', e.target.checked)}
+                />
+              </Box>
+              <IconButton
+                size="small"
+                onClick={() => handleRemoveTab(index)}
+                disabled={tabs.length === 1}
+                sx={{ width: 40, height: 40 }}
+              >
+                <Close fontSize="small" />
+              </IconButton>
+            </Box>
+          ))}
+
+          {/* Add button */}
+          <Button
+            size="small"
+            startIcon={<Add />}
+            onClick={handleAddTab}
+            sx={{ mt: 1 }}
+          >
+            Add Tab
+          </Button>
+        </>
+      )}
+
+      {/* Show message when in expression mode */}
+      {isExpression && (
+        <Box sx={{ p: 2, bgcolor: 'action.hover', borderRadius: 1, mt: 1 }}>
+          <Typography variant="body2" color="text.secondary">
+            Tabs are defined by a JavaScript expression. Click the code icon above to edit.
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/src/views/builder/inspector/fields/TextEditor.jsx

@@ -0,0 +1,28 @@
+import { TextField, Box } from '@mui/material'
+import JSEditor from '../../JSEditor'
+
+export default function TextEditor({ field, onChange, placeholder, type = 'text' }) {
+  const safeField = field ?? { valueType: 'value', value: undefined }
+  const isExpression = safeField.valueType === 'expression'
+
+  return (
+    <Box display='flex' alignItems='center' gap={0.5}>
+      <TextField
+        size="small"
+        fullWidth
+        type={type}
+        disabled={isExpression}
+        value={isExpression ? '' : (safeField.value ?? '')}
+        placeholder={isExpression ? 'Using expression' : placeholder}
+        onChange={e => onChange?.({ valueType: 'value', value: e.target.value })}
+      />
+
+      <JSEditor
+        value={isExpression ? undefined : safeField.value}
+        expression={safeField.expression}
+        mode={isExpression ? 'expression' : 'value'}
+        onChange={payload => onChange?.(payload)}
+      />
+    </Box>
+  )
+}

package/src/views/builder/sidebar/Sidebar.jsx

@@ -0,0 +1,20 @@
+import { Box } from '@mui/material'
+import SidebarTabs from './SidebarTabs'
+import { BuilderProvider, useBuilder } from 'context/BuilderContext'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { Endpoints, Services } from 'services/Endpoints'
+
+export default function Sidebar() {
+
+  return (
+    <Box
+      style={{
+        height: '100%',
+        borderRight: '1px solid #3a3f45'
+      }}
+    >
+      <SidebarTabs />
+    </Box>
+  )
+}

package/src/views/builder/sidebar/SidebarTabs.jsx

@@ -0,0 +1,50 @@
+import { Tabs, Tab } from '@mui/material'
+import { useState } from 'react'
+import ComponentsTab from './tabs/Components/ComponentsTab'
+import TreeTab from './tabs/TreeTab'
+import ActionsTab from './tabs/ActionsTab'
+import ViewTab from 'views/builder/sidebar/tabs/ViewTab'
+
+export default function SidebarTabs() {
+  const [tab, setTab] = useState(0)
+
+  return (
+    <>
+      <Tabs
+        value={tab}
+        onChange={(e, v) => setTab(v)}
+        variant="scrollable"
+        scrollButtons="auto"
+        sx={{
+          bgcolor: '#3a3f45',
+          minHeight: 48,
+          '& .MuiTab-root': {
+            color: 'rgba(255, 255, 255, 0.7)',
+            minHeight: 48,
+            textTransform: 'none',
+            fontSize: '0.875rem',
+            fontWeight: 500,
+            '&.Mui-selected': {
+              color: '#fff'
+            }
+          },
+          '& .MuiTabs-indicator': {
+            backgroundColor: '#9c27b0',
+            height: 3
+          }
+        }}
+      >
+        <Tab label="Components" />
+        <Tab label="Tree" />
+        <Tab label="Actions" />
+        <Tab label="Settings" />
+        <Tab label="View" />
+      </Tabs>
+
+      {tab === 0 && <ComponentsTab />}
+      {tab === 1 && <TreeTab />}
+      {tab === 2 && <ActionsTab />}
+      {tab === 4 && <ViewTab />}
+    </>
+  )
+}

package/src/views/builder/sidebar/tabs/ActionsTab.jsx

@@ -0,0 +1,94 @@
+import { Box, Typography } from '@mui/material'
+import { useBuilder } from 'src/context/BuilderContext'
+import FieldWrapper from '../../inspector/fields/FieldWrapper'
+import JSEditor from '../../JSEditor'
+
+const DEFAULT_ACTION_CODE = `/**
+ * @param {IFormData} form
+ * @param {object} data
+ * @return {any}
+ */
+async function Calculation(form, data) {
+  return {}
+}
+`
+
+export default function ActionsTab() {
+  const { schema, setSchema } = useBuilder()
+
+  // Get static actions (onLoad and onSubmit)
+  const onLoadAction = schema.actions?.find(a => a.event === 'onLoad') || {
+    event: 'onLoad',
+    code: DEFAULT_ACTION_CODE
+  }
+
+  const onSubmitAction = schema.actions?.find(a => a.event === 'onSubmit') || {
+    event: 'onSubmit',
+    code: DEFAULT_ACTION_CODE
+  }
+
+  const updateAction = (event, code) => {
+    const otherActions = (schema.actions || []).filter(a => a.event !== event)
+    const updatedAction = {
+      id: `action_${event}`,
+      event,
+      code
+    }
+
+    setSchema(prev => ({
+      ...prev,
+      actions: [...otherActions, updatedAction]
+    }))
+  }
+
+  return (
+    <Box sx={{ p: 2, height: '100%', display: 'flex', flexDirection: 'column', gap: 3 }}>
+      <Box>
+        <Typography variant="h6" sx={{ mb: 2 }}>
+          Form Actions
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          Define static actions that execute on form events
+        </Typography>
+      </Box>
+
+      {/* onLoad Action */}
+      <FieldWrapper label="onLoad">
+        <Box>
+          <Typography variant="caption" display="block" sx={{ mb: 1, opacity: 0.7 }}>
+            Executes when form is loaded (preview mode)
+          </Typography>
+          <JSEditor
+            value={onLoadAction.code}
+            expression={{ type: 'js', code: onLoadAction.code }}
+            mode="expression"
+            onChange={payload => {
+              if (payload.expression?.code) {
+                updateAction('onLoad', payload.expression.code)
+              }
+            }}
+          />
+        </Box>
+      </FieldWrapper>
+
+      {/* onSubmit Action */}
+      <FieldWrapper label="onSubmit">
+        <Box>
+          <Typography variant="caption" display="block" sx={{ mb: 1, opacity: 0.7 }}>
+            Executes when form is submitted (after validation passes)
+          </Typography>
+          <JSEditor
+            value={onSubmitAction.code}
+            expression={{ type: 'js', code: onSubmitAction.code }}
+            mode="expression"
+            onChange={payload => {
+              if (payload.expression?.code) {
+                updateAction('onSubmit', payload.expression.code)
+              }
+            }}
+          />
+        </Box>
+      </FieldWrapper>
+    </Box>
+  )
+}

package/src/views/builder/sidebar/tabs/Components/ComponentItem.jsx

@@ -0,0 +1,69 @@
+import { Box, Typography } from '@mui/material'
+
+export function ComponentItem({ component }) {
+  return (
+    <Box
+      draggable
+      onDragStart={e => {
+        console.log(component)
+        e.dataTransfer.effectAllowed = 'copy'
+        e.dataTransfer.setData('application/builder-component', JSON.stringify(component))
+      }}
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1,
+        p: 1,
+        borderRadius: 1,
+        cursor: 'grab',
+        userSelect: 'none',
+        border: '1px solid',
+        borderColor: 'divider',
+        bgcolor: 'background.paper',
+        '&:hover': {
+          bgcolor: 'action.hover'
+        }
+      }}
+    >
+      <Box sx={{ width: 22, textAlign: 'center' }}>{component.icon}</Box>
+
+      <Typography
+        variant="body2"
+        sx={{
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis'
+        }}
+      >
+        {component.label}
+      </Typography>
+    </Box>
+  )
+}
+
+export function Section({ title, children }) {
+  return (
+    <Box sx={{ mb: 2 }}>
+      <Typography
+        sx={{
+          fontSize: 13,
+          fontWeight: 700,
+          mb: 1,
+          color: 'text.secondary'
+        }}
+      >
+        {title}
+      </Typography>
+
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: 1
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+}

package/src/views/builder/sidebar/tabs/Components/ComponentsTab.jsx

@@ -0,0 +1,89 @@
+import { Box, TextField } from '@mui/material'
+import { useEffect, useMemo, useState } from 'react'
+import { ComponentItem, Section } from 'views/builder/sidebar/tabs/Components/ComponentItem'
+import { COMPONENT_SECTIONS } from 'views/builder/sidebar/tabs/Components/componentCatalog'
+import PostService from 'services/PostService'
+import { Endpoints } from 'services/Endpoints'
+import fetchReportDataByPageId from 'services/reportData/fetchReportData'
+
+export default function ComponentsTab() {
+  const [q, setQ] = useState('')
+  const [widgets, setWidgets] = useState([])
+
+  async function handleGetWidgets() {
+    try {
+      let response = await fetchReportDataByPageId({
+        pageId: '13f0eb83-a7db-4e5d-96bf-64e958324c52',
+        dataAsObject: true,
+        isDataOnly: true,
+        isPagination: false
+      })
+      if (response) setWidgets(response)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const sections = useMemo(() => {
+    // 1) Group widgets
+    const grouped = Object.groupBy(widgets, x => x.widgetCategory?.name ?? 'Widgets')
+    // 2) Convert grouped → sections
+    const newSections = Object.entries(grouped).map(([key, items]) => ({
+      key,
+      title: key,
+      items: items.map(item => ({
+        id: item.id,
+        label: item.name,
+        type: key,
+        value: item.value
+      }))
+    }))
+    console.log(newSections)
+
+    // 3) Merge with existing sections
+    const components = [...COMPONENT_SECTIONS, ...newSections]
+
+    // 4) If no search → return all
+    if (!q) return components
+
+    // 5) Filter
+    const v = q.toLowerCase().trim()
+
+    return components
+      .map(section => ({
+        ...section,
+        items: section.items.filter(x => x.label.toLowerCase().includes(v) || x.type.toLowerCase().includes(v))
+      }))
+      .filter(section => section.items.length > 0)
+  }, [q, widgets])
+
+  useEffect(() => {
+    handleGetWidgets()
+  }, [])
+  return (
+    <Box
+      sx={{
+        p: 1.5,
+        height: 'calc(100vh - 48px)',
+        overflowY: 'auto'
+      }}
+    >
+      <TextField
+        value={q}
+        onChange={e => setQ(e.target.value)}
+        placeholder='Search...'
+        size='small'
+        fullWidth
+        sx={{ mb: 2 }}
+      />
+
+      {sections.map(section => (
+        <Section key={section.key} title={section.title}>
+          {section.items.map(item => (
+            <ComponentItem key={item.type} component={item} />
+          ))}
+        </Section>
+      ))}
+    </Box>
+  )
+}