robobyte-front-builder 1.0.17 → 1.0.21

package/src/pages/mainHome/index.js

@@ -1,181 +0,0 @@
-import React, { useContext } from 'react'
-import { useRouter } from 'next/router';
-import CircularProgress from '@mui/material/CircularProgress';
-import {
-  Box, Grid, Typography, Card, styled, Avatar
-} from '@mui/material';
-import { useState } from 'react';
-import Navigation from '../../../public/navigationTest/Navigation.json'
-import { SystemContext } from 'context/SystemContext'
-
-
-const AnimatedCard = styled(Card)(({ theme }) => ({
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  textAlign: 'center',
-  padding: '16px 16px 16px 16px',
-  borderRadius: '8px',
-  background: 'rgba(255, 255, 255, 0.9)',
-  transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
-  transform: 'translateY(0)',
-  cursor: 'pointer',
-  position: 'relative',
-  overflow: 'hidden',
-  border: '3px solid transparent',
-
-  '&:hover': {
-    border: '3px solid #1abc9c',
-    scale: 1.1,
-  },
-
-  '&:hover .iconContainer.icon': {
-    padding: '1px',
-  },
-  '&:hover .iconContainer': {
-    border: '1px solid #238b34ff',
-    transition: 'all 0.3s',
-  },
-  '&:hover .iconContainer svg': {
-    width: 30,
-    height: 30,
-    transition: 'all 0.3s',
-  },
-
-
-}))
-
-const IconContainer = styled(Box)(({ theme }) => ({
-  border: '1px solid #1abc9c',
-  width: 58,
-  height: 58,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '50%',
-  background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
-  transition: 'transform 0.4s ease',
-  minHeight: 58,
-  minWidth: 58,
-}));
-
-const Title = styled(Typography)(({ theme }) => ({
-  transition: 'all 0.3s ease',
-  fontWeight: 900,
-  color: 'white',
-  fontSize: '0.8rem',
-  marginTop: theme.spacing(1),
-}))
-
-
-const pages = [
-  // { icon: <img width={40} src={'/images/icons/person.png'} />, title: 'المستخدمين', path: '/authModule/users' },
-  { icon: <img width={40} src={'/images/icons/briefcase.png'} />, title: 'ادارة التقارير', path: '/reportModule/reportBuilder/reports' },
-  { icon: <img width={40} src={'/images/icons/briefcase.png'} />, title: 'ادارة الصفحات', path: '/viewBuilder/views' },
-];
-
-const Dashboard = () => {
-  const router = useRouter();
-  const [loadingIdx, setLoadingIdx] = useState(null);
-  const systemContext = useContext(SystemContext)
-  const Navigation = systemContext.nav?.config?.items
-  // const handleCardClick = async (idx, path) => {
-  //   setLoadingIdx(idx);
-  //   setTimeout(() => {
-  //     if (path === '/reportBuilder') {
-  //       window.open(path, 'blank');
-  //     } else {
-  //       router.push(path);
-  //     }
-  //     setLoadingIdx(null);
-  //   }, 500);
-  // };
-  const handleCardClick = (idx, page) => {
-    // Handle different navigation types
-    const navType = page.type || (page.viewId ? 'dynamic' : page.path ? 'static' : null);
-
-    if (!navType && !page.path && !page.viewId) return; // Coming soon / disabled
-
-    setLoadingIdx(idx);
-
-    setTimeout(() => {
-      // Priority: explicit path > registry slug > viewer route
-      if (navType === 'static' && page.path) {
-        // Static route: navigate directly to path
-        router.push(page.path);
-      } else if (navType === 'dynamic' && page.viewId) {
-        // Dynamic route: use registry for friendly URL
-        // Use registry from systemContext
-        const registry = systemContext.nav?.registry || {};
-        const view = registry[page.viewId];
-
-        if (view && view.slug) {
-          // Navigate to friendly slug URL
-          router.push(`/${view.slug}`);
-        } else {
-          // Fallback to viewer route if no registry entry
-          router.push(`/viewer/${page.viewId}`);
-        }
-      } else if (navType === 'external' && page.externalUrl) {
-        // External route: open in new tab
-        window.open(page.externalUrl, page.openInNewTab !== false ? '_blank' : '_self');
-      } else if (page.viewId) {
-        // Fallback: if only viewId exists, try registry first
-        const registry = systemContext.nav?.registry || {};
-        const view = registry[page.viewId];
-
-        if (view && view.slug) {
-          router.push(`/${view.slug}`);
-        } else {
-          router.push(`/viewer/${page.viewId}`);
-        }
-      }
-
-      setLoadingIdx(null);
-    }, 500);
-  };
-
-  const homeRoot = Navigation?.find(
-    item => item.title?.trim() === 'mainHome'
-  )
-  const pages = homeRoot?.children || []
-
-
-
-  return (
-    <Box sx={{ minHeight: '82vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-      <Box sx={{
-        padding: { xs: '20px', md: '40px 20px' },
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center'
-      }}>
-        <Grid container spacing={7} justifyContent="center" sx={{ maxWidth: 600, width: '100%' }}>
-          {pages.map((page, idx) => (
-            <Grid sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '6px' }} item size={3} sm={6} md={4} lg={3} key={idx}>
-              <AnimatedCard onClick={() => handleCardClick(idx, page)}>
-                <IconContainer className="iconContainer">
-                  {loadingIdx === idx ? (
-                    <CircularProgress size={32} thickness={4} sx={{ color: '#1abc9c' }} />
-                  ) : (
-                    page.icon
-                      ? <img width={40} src={`/images/icons/${page.icon}.png`} />
-                      : <Avatar sx={{ bgcolor: '#1abc9c', width: 40, height: 40 }}>
-                        {page.title?.[0]}
-                      </Avatar>
-                  )}
-
-                </IconContainer>
-              </AnimatedCard>
-              <Title className="title" variant="h6">{page.title}</Title>
-            </Grid>
-          ))}
-        </Grid>
-      </Box>
-    </Box>
-  );
-};
-
-export default Dashboard;

package/src/views/builder/inspector/definitions/cell/main.js

@@ -1,4 +0,0 @@
-export const CELL_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  { name: 'padding', label: 'Padding', type: 'expression' }
-]

package/src/views/builder/inspector/definitions/column/main.js

@@ -1,9 +0,0 @@
-export const COLUMN_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  { name: 'xs', label: 'Width (xs)', type: 'number' },
-  { name: 'sm', label: 'Width (sm)', type: 'number' },
-  { name: 'md', label: 'Width (md)', type: 'number' },
-  { name: 'lg', label: 'Width (lg)', type: 'number' },
-  { name: 'xl', label: 'Width (xl)', type: 'number' },
-  { name: 'size', label: 'Size', type: 'number' },
-]

package/src/views/builder/inspector/definitions/column-group/main.js

@@ -1,18 +0,0 @@
-export const COLUMN_GROUP_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  { name: 'spacing', label: 'Spacing', type: 'number' },
-  {
-    name: 'direction',
-    label: 'Direction',
-    type: 'select',
-    options: ['row', 'row-reverse', 'column', 'column-reverse']
-  },
-  {
-    name: 'wrap',
-    label: 'Wrap',
-    type: 'select',
-    options: ['nowrap', 'wrap', 'wrap-reverse']
-  },
-  { name: 'size', label: 'Size', type: 'number' },
-  { name: 'container', type: 'boolean',label: 'Container' },
-]

package/src/views/builder/inspector/definitions/header-cell/main.js

@@ -1,5 +0,0 @@
-export const HEADER_CELL_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  { name: 'label', label: 'Label', type: 'expression' },
-  { name: 'padding', label: 'Padding', type: 'expression' }
-]

package/src/views/builder/inspector/definitions/table/main.js

@@ -1,9 +0,0 @@
-export const TABLE_MAIN_FIELDS = [
-  { name: 'key', label: 'Key', type: 'expression' },
-  {
-    name: 'size',
-    label: 'Size',
-    type: 'select',
-    options: ['small', 'medium']
-  }
-]

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

@@ -1,71 +0,0 @@
-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 CellRenderer({ 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)
-    }
-  }
-
-  return (
-    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Box sx={{ minHeight: 40, p: main.padding || 1, border: '1px solid #eee' }}>
-        {node.children?.length > 0 ? (
-          <>
-            {node.children.map((child, index) => (
-              <Box key={child.id}>
-                {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(0)} isEditMode={isEditMode} />}
-            <Box sx={{ fontSize: 10, color: 'text.disabled', textAlign: 'center' }}>
-              {isEditMode ? 'Cell' : ''}
-            </Box>
-          </>
-        )}
-      </Box>
-    </ViewerComponentWrapper>
-  )
-}

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

@@ -1,96 +0,0 @@
-import { Grid } 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'
-import { useEffect } from 'react'
-import { Box } from '@mui/system'
-
-export default function ColumnGroupRenderer({ node, viewerContext }) {
-  const { data, form, isEditMode, builderContext } = viewerContext
-  const main = resolveProps(node, 'main', { form, data })
-  const children = node.children.map(child => ({
-    ...child,
-    props: {
-      ...child.props,
-      main: {
-        ...child.props.main,
-        size:
-          child.props?.main?.size != null
-            ? child.props.main?.size?.value != ''
-              ? child.props.main?.size?.value
-              : 12
-            : 12
-      }
-    }
-  }))
-  // child.props?.main = resolveProps(child, '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(componentData)
-        builderContext.setDraggingNodeId(null)
-      }
-    } catch (err) {
-      builderContext.setDraggingNodeId(null)
-      console.error(err)
-    }
-  }
-
-  return (
-    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Grid item container={main?.container} size={main?.size ?? 12} spacing={main.spacing ?? 2} direction={main.direction} wrap={main.wrap}>
-        {node.children?.length > 0 ? (
-          <>
-            {children.map((child, index) => {
-              console.log('Child:', child)
-              console.log(parseInt(child.props?.main?.size))
-              return (
-                <Box key={child.id}>
-                  {isEditMode && <DropZone onDrop={handleDropAtIndex(index)} isEditMode={isEditMode} />}
-                  <ComponentRenderer node={child} viewerContext={viewerContext} />
-                </Box>
-              )
-            })}
-            {isEditMode && (
-              <Grid item size={12}>
-                <DropZone onDrop={handleDropAtIndex(node.children.length)} isEditMode={isEditMode} />
-              </Grid>
-            )}
-          </>
-        ) : (
-          <Grid item size={12}>
-            {isEditMode && <DropZone onDrop={handleDropAtIndex(0)} isEditMode={isEditMode} />}
-            <div style={{ fontSize: 12, color: 'text.disabled', textAlign: 'center', py: 1 }}>
-              {isEditMode ? 'Drop columns here' : 'Empty group'}
-            </div>
-          </Grid>
-        )}
-      </Grid>
-    </ViewerComponentWrapper>
-  )
-}

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

@@ -1,71 +0,0 @@
-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 ColumnRenderer({ 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)
-    }
-  }
-
-  return (
-    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Box sx={{ minHeight: 48 }}>
-        {node.children?.length > 0 ? (
-          <>
-            {node.children.map((child, index) => (
-              <Box key={child.id}>
-                {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(0)} isEditMode={isEditMode} />}
-            <Box sx={{ fontSize: 12, color: 'text.disabled', textAlign: 'center', py: 1 }}>
-              {isEditMode ? 'Drop components here' : 'Empty column'}
-            </Box>
-          </>
-        )}
-      </Box>
-    </ViewerComponentWrapper>
-  )
-}

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

@@ -1,78 +0,0 @@
-import { Box, Typography } 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 HeaderCellRenderer({ 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)
-    }
-  }
-
-  return (
-    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
-      <Box sx={{ minHeight: 40, p: main.padding || 1, bgcolor: 'action.hover', borderBottom: '2px solid #ddd' }}>
-        {main.label && (
-           <Typography variant="subtitle2" sx={{ fontWeight: 'bold', mb: 0.5 }}>
-             {main.label}
-           </Typography>
-        )}
-        {node.children?.length > 0 ? (
-          <>
-            {node.children.map((child, index) => (
-              <Box key={child.id}>
-                {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(0)} isEditMode={isEditMode} />}
-            {!main.label && isEditMode && (
-              <Box sx={{ fontSize: 10, color: 'text.disabled', textAlign: 'center' }}>
-                Header Cell
-              </Box>
-            )}
-          </>
-        )}
-      </Box>
-    </ViewerComponentWrapper>
-  )
-}

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

@@ -1,82 +0,0 @@
-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>
-  )
-}