robobyte-front-builder 1.0.0

package/src/libs/styles/AppReactDropzone.js

@@ -0,0 +1,76 @@
+// MUI imports
+import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
+
+const AppReactDropzone = styled(Box)(({ theme }) => ({
+  '& .dropzone': {
+    minHeight: 300,
+    display: 'flex',
+    flexWrap: 'wrap',
+    cursor: 'pointer',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(4),
+    borderRadius: theme.shape.borderRadius,
+    border: '2px dashed var(--mui-palette-divider)',
+    [theme.breakpoints.down('xs')]: {
+      textAlign: 'center'
+    },
+    '&:focus': {
+      outline: 'none'
+    },
+    '& + .MuiList-root': {
+      padding: 0,
+      marginTop: theme.spacing(6.25),
+      '& .MuiListItem-root': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(2.5, 2.4, 2.5, 6),
+        border: '1px solid var(--mui-palette-divider)',
+        '& .file-details': {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        '& .file-preview': {
+          display: 'flex',
+          marginRight: theme.spacing(3.75),
+          '& svg': {
+            fontSize: '2rem'
+          }
+        },
+        '& img': {
+          width: 38,
+          height: 38,
+          padding: theme.spacing(0.75),
+          borderRadius: theme.shape.borderRadius,
+          border: '1px solid var(--mui-palette-divider)'
+        },
+        '& .file-name': {
+          fontWeight: 600
+        },
+        '& + .MuiListItem-root': {
+          marginTop: theme.spacing(3.5)
+        }
+      },
+      '& + .buttons': {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        marginTop: theme.spacing(6.25),
+        '& > :first-of-type': {
+          marginRight: theme.spacing(3.5)
+        }
+      }
+    },
+    '& img.single-file-image': {
+      objectFit: 'cover',
+      position: 'absolute',
+      width: 'calc(100% - 1rem)',
+      height: 'calc(100% - 1rem)',
+      borderRadius: theme.shape.borderRadius
+    }
+  }
+}))
+
+export default AppReactDropzone

package/src/libs/styles/AppReactToastify.jsx

@@ -0,0 +1,108 @@
+'use client'
+
+// MUI Imports
+import Box from '@mui/material/Box'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { styled } from '@mui/material/styles'
+
+// Third-party Imports
+import 'react-toastify/dist/ReactToastify.css'
+import { ToastContainer } from 'react-toastify'
+
+// Config Imports
+import themeConfig from '../../configs/themeConfig'
+
+// Styled Components
+const ToastifyWrapper = styled(Box)(({ theme }) => {
+  const isSmallScreen = useMediaQuery(theme => theme.breakpoints.down(480))
+
+  return {
+    ...(isSmallScreen && {
+      '& .Toastify__toast-container': {
+        marginBlockStart: theme.spacing(3),
+        marginInline: theme.spacing(3),
+        width: 'calc(100dvw - 1.5rem)'
+      }
+    }),
+    '& .Toastify__toast': {
+      minBlockSize: 46,
+      borderRadius: 'var(--mui-shape-customBorderRadius-lg)',
+      padding: theme.spacing(1.5, 2.5),
+      backgroundColor: 'var(--mui-palette-background-paper)',
+      boxShadow: 'var(--mui-customShadows-md)',
+      '[data-skin="bordered"] &': {
+        boxShadow: 'none',
+        border: '1px solid var(--mui-palette-divider)'
+      },
+      ...(isSmallScreen && {
+        marginBlockEnd: theme.spacing(4)
+      }),
+      '&:not(.custom-toast)': {
+        '& .Toastify__toast-body': {
+          color: 'var(--mui-palette-text-primary)'
+        },
+        '&.Toastify__toast--success': {
+          '& .Toastify__toast-icon svg': {
+            fill: 'var(--mui-palette-success-main)'
+          }
+        },
+        '&.Toastify__toast--error': {
+          '& .Toastify__toast-icon svg': {
+            fill: 'var(--mui-palette-error-main)'
+          }
+        },
+        '&.Toastify__toast--warning': {
+          '& .Toastify__toast-icon svg': {
+            fill: 'var(--mui-palette-warning-main)'
+          }
+        },
+        '&.Toastify__toast--info': {
+          '& .Toastify__toast-icon svg': {
+            fill: 'var(--mui-palette-info-main)'
+          }
+        }
+      }
+    },
+    '& .Toastify__toast-body': {
+      margin: 0,
+      lineHeight: 1.467,
+      fontSize: theme.typography.body1.fontSize
+    },
+    '& .Toastify__toast-icon': {
+      marginRight: theme.spacing(3),
+      height: 20,
+      width: 20,
+      '& .Toastify__spinner': {
+        margin: 3,
+        height: 14,
+        width: 14
+      }
+    },
+    '& .Toastify__close-button': {
+      color: 'var(--mui-palette-text-primary)'
+    }
+  }
+})
+
+const AppReactToastify = props => {
+  const { boxProps, direction = 'ltr', ...rest } = props
+
+  const positionMap = {
+    'top-right': 'top-left',
+    'top-left': 'top-right',
+    'bottom-left': 'bottom-right',
+    'bottom-right': 'bottom-left',
+    'top-center': 'top-center',
+    'bottom-center': 'bottom-center'
+  }
+
+  const position = direction === 'rtl' ? positionMap[themeConfig.toastPosition] : themeConfig.toastPosition
+
+  return (
+    <ToastifyWrapper {...boxProps}>
+      <ToastContainer rtl={direction === 'rtl'} position={position} {...rest} />
+    </ToastifyWrapper>
+  )
+}
+
+export default AppReactToastify

package/src/libs/styles/AppRecharts.js

@@ -0,0 +1,55 @@
+'use client'
+
+// MUI imports
+import { styled } from '@mui/material/styles'
+
+// Styled Components
+const AppRecharts = styled('div')(({ theme }) => ({
+  '& .recharts-cartesian-grid-vertical, & .recharts-cartesian-grid-horizontal, & .recharts-polar-grid-angle, & .recharts-polar-radius-axis, & .recharts-cartesian-axis':
+    {
+      '& line': {
+        stroke: 'var(--mui-palette-divider)'
+      }
+    },
+  '& .recharts-polar-grid-concentric-polygon': {
+    stroke: 'var(--mui-palette-divider)'
+  },
+  '& .recharts-tooltip-wrapper': {
+    outline: 'none'
+  },
+  '& .recharts-default-tooltip': {
+    border: 'none !important',
+    boxShadow: 'var(--mui-customShadows-xs)',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: 'var(--mui-palette-background-paper) !important'
+  },
+  '& .recharts-custom-tooltip': {
+    padding: theme.spacing(2.5),
+    boxShadow: 'var(--mui-customShadows-xs)',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: 'var(--mui-palette-background-paper)'
+  },
+  '& .recharts-tooltip-cursor': {
+    fill: 'var(--mui-palette-action-hover)'
+  },
+  '& .recharts-yAxis .recharts-cartesian-axis-ticks .recharts-cartesian-axis-tick .recharts-cartesian-axis-tick-value':
+    {
+      textAnchor: theme.direction === 'rtl' ? 'end' : undefined
+    },
+  '& .recharts-active-dot .recharts-dot': {
+    fill: 'var(--mui-palette-secondary-main)'
+  },
+  '& .recharts-tooltip-item': {
+    fontSize: '0.875rem',
+    color: 'var(--mui-palette-text-primary) !important'
+  },
+  '& .recharts-text': {
+    fontSize: '0.8125rem',
+    fill: 'var(--mui-palette-text-disabled)'
+  },
+  '& .recharts-pie .recharts-sector, & .recharts-layer': {
+    outline: 'none !important'
+  }
+}))
+
+export default AppRecharts

package/src/libs/styles/inputOtp.module.css

@@ -0,0 +1,39 @@
+.slot {
+  position: relative;
+  inline-size: 100%;
+  block-size: 3.5rem;
+  font-size: 1.25rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 100ms;
+  border-width: 1px;
+  border-radius: var(--border-radius);
+}
+
+.slotActive {
+  outline: 1px solid var(--mui-palette-primary-main);
+  border-color: var(--mui-palette-primary-main);
+}
+
+@keyframes caret-blink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+  20%,
+  50% {
+    opacity: 0;
+  }
+}
+
+.fakeCaret {
+  position: absolute;
+  pointer-events: none;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: caret-blink 1.2s ease-out infinite;
+}

package/src/libs/styles/tiptapEditor.css

@@ -0,0 +1,72 @@
+/* Basic editor styles */
+.ProseMirror {
+  outline: none;
+  min-block-size: 100px;
+  overflow-y: auto;
+  padding: 1.25rem;
+  inline-size: 100%;
+
+  > * + * {
+    margin-block-start: 0.75em;
+  }
+  p.is-editor-empty:first-child::before {
+    block-size: 0;
+    color: var(--mui-palette-text-disabled);
+    content: attr(data-placeholder);
+    float: inline-start;
+    pointer-events: none;
+  }
+
+  ul,
+  ol {
+    padding-block: 0;
+    padding-inline: 1rem;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
+  code {
+    background-color: rgba(#616161, 0.1);
+    color: #616161;
+  }
+
+  pre {
+    background: #0d0d0d;
+    color: #fff;
+    font-family: 'JetBrainsMono', monospace;
+    padding-block: 0.75rem;
+    padding-inline: 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
+    }
+  }
+
+  img {
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  blockquote {
+    padding-inline-start: 1rem;
+    border-inline-start: 2px solid var(--mui-palette-divider);
+  }
+
+  hr {
+    border: none;
+    border-block-start: 2px solid var(--mui-palette-divider);
+    margin-block: 2rem;
+    margin-inline: 0;
+  }
+}

package/src/navigation/horizontal/index.js

@@ -0,0 +1,246 @@
+// ** Icon imports
+import {
+  HomeOutline,
+  Account,
+} from "mdi-material-ui";
+import { useRouter } from 'next/router';
+import { useContext } from 'react';
+import * as Icons from 'mdi-material-ui';
+import { SystemContext } from 'context/SystemContext';
+
+/**
+ * Get path for a navigation item (uses registry for dynamic items)
+ */
+const getItemPath = (item, registry = {}) => {
+  // Explicit path takes priority
+  if (item.path) return item.path;
+
+  // For dynamic items, check registry for slug or path
+  if (item.viewId && registry[item.viewId]) {
+    const view = registry[item.viewId];
+
+    // Use slug for friendly route if available
+    if (view.slug) return `/${view.slug}`;
+
+    // Use custom path if available
+    if (view.path) return view.path;
+  }
+
+  // Fallback to viewer route
+  if (item.viewId) return `/viewer/${item.viewId}`;
+
+  return null;
+}
+
+/**
+ * Find module node that matches current path (like static startsWith logic)
+ * This replaces: if (currentPath.startsWith('/userManagement/')) return UserManagementNavItem
+ *
+ * Strategy:
+ * 1. Find node where path matches exactly OR currentPath.startsWith(node.path + '/')
+ * 2. Uses registry to resolve viewIds to paths (slugs)
+ * 3. If current node is a leaf, return its parent (to show siblings)
+ * 4. If current node has children, return current node (to show its children)
+ */
+const findModuleForPath = (items, path, registry = {}) => {
+  if (!items || !Array.isArray(items)) return null;
+
+  // Helper to find node with parent context
+  const findNodeWithParent = (items, matcher, parent = null) => {
+    for (const item of items) {
+      // Check if this node matches
+      if (matcher(item)) {
+        return { node: item, parent };
+      }
+
+      // Recursively check children
+      if (item.children && Array.isArray(item.children)) {
+        const found = findNodeWithParent(item.children, matcher, item);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
+  // Matcher function: path matches exactly OR currentPath starts with node.path + '/'
+  // Also checks registry for slug-based paths
+  const pathMatcher = (item) => {
+    const itemPath = getItemPath(item, registry);
+    if (!itemPath) return false;
+
+    // Exact match
+    if (itemPath === path) return true;
+
+    // Starts with match (like static: currentPath.startsWith('/userManagement/'))
+    if (path.startsWith(itemPath + '/')) return true;
+
+    return false;
+  };
+
+  // First, try to find by path (including registry-resolved paths)
+  let result = findNodeWithParent(items, pathMatcher);
+
+  // If no path match, try by viewId (for /viewer/[id] routes)
+  if (!result && path.startsWith('/viewer/')) {
+    const viewIdMatch = path.match(/\/viewer\/(\d+)/);
+    if (viewIdMatch) {
+      const viewId = Number(viewIdMatch[1]);
+      result = findNodeWithParent(items, item => item.viewId === viewId);
+    }
+  }
+
+  // Also try matching by slug from registry
+  if (!result) {
+    // Check if current path matches any slug in registry
+    const matchingView = Object.values(registry).find(view => {
+      if (view.slug && path === `/${view.slug}`) return true;
+      if (view.path && (path === view.path || path.startsWith(view.path + '/'))) return true;
+      return false;
+    });
+
+    if (matchingView) {
+      result = findNodeWithParent(items, item => item.viewId === matchingView.id);
+    }
+  }
+
+  if (!result) return null;
+
+  const { node, parent } = result;
+
+  // Decision: What to show?
+  // - If current node has children → show its children
+  // - If current node is a leaf → show parent's children (siblings)
+  if (node.children && Array.isArray(node.children) && node.children.length > 0) {
+    return node; // Show this node's children
+  } else if (parent && parent.children && Array.isArray(parent.children)) {
+    return parent; // Show parent's children (siblings)
+  }
+
+  return node;
+}
+
+/**
+ * Convert icon string to component
+ */
+const getIconComponent = (iconName) => {
+  if (!iconName) return HomeOutline;
+  if (Icons[iconName]) {
+    return Icons[iconName];
+  }
+  return HomeOutline; // Default fallback
+}
+
+/**
+ * Convert navigation items to format expected by menu system
+ * Handles icon conversion and structure normalization
+ * This matches the static navigation format exactly
+ */
+const normalizeNavItems = (items, registry = {}) => {
+  if (!items || !Array.isArray(items)) return [];
+
+  return items.map(item => {
+    const navItem = {
+      title: item.title || '',
+      icon: item.icon ? getIconComponent(item.icon) : HomeOutline,
+    };
+
+    // Determine path: explicit path takes priority, then registry, then viewer route
+    if (item.path) {
+      // Explicit path provided - use it (works for both static and dynamic with explicit paths)
+      navItem.path = item.path;
+    } else {
+      // No explicit path - resolve from registry or use viewer route
+      const itemPath = getItemPath(item, registry);
+      if (itemPath) {
+        navItem.path = itemPath;
+      }
+    }
+
+    // Include viewId if it exists (for dynamic items)
+    if (item.viewId) {
+      navItem.viewId = item.viewId;
+    }
+
+    // Include type if it exists
+    if (item.type) {
+      navItem.type = item.type;
+    }
+
+    // Handle external URLs
+    if (item.externalUrl) {
+      navItem.path = item.externalUrl;
+      navItem.openInNewTab = item.openInNewTab || true;
+    }
+
+    // Add action/subject if they exist (for permissions)
+    if (item.action) {
+      navItem.action = item.action;
+    }
+    if (item.subject) {
+      navItem.subject = item.subject;
+    }
+
+    // Add children if they exist (preserve structure, don't flatten)
+    if (item.children && Array.isArray(item.children) && item.children.length > 0) {
+      navItem.children = normalizeNavItems(item.children, registry);
+    }
+
+    return navItem;
+  });
+};
+
+const Navigation = () => {
+  const router = useRouter();
+  const currentPath = router.pathname;
+  const systemContext = useContext(SystemContext);
+
+  // Use registry from system context
+  const effectiveRegistry = systemContext.nav?.registry || {};
+
+  // Get navigation data from system context
+  const navigationConfig = systemContext.nav?.config || null;
+
+  // Extract items from config (handle mainHome root)
+  let navigationData = navigationConfig?.items || [];
+
+  // Unwrap mainHome root if it exists
+  // Navigation structure: { items: [{ title: "mainHome", children: [...actual nav items...] }] }
+  // We need to extract the children from mainHome root
+  if (navigationData.length > 0 && navigationData[0].title === 'mainHome' && navigationData[0].children) {
+    navigationData = navigationData[0].children;
+  }
+
+  // If no navigation data, return empty array
+  if (!navigationData || navigationData.length === 0) {
+    return [];
+  }
+
+  // Special case: mainHome page should not render navigation
+  if (currentPath === '/mainHome' || currentPath === '/mainHome/') {
+    return [];
+  }
+
+  // Get actual path (router.pathname is '/viewer/[id]' for dynamic routes)
+  // Use router.asPath to get the actual URL path
+  let actualPath = router.asPath?.split('?')[0] || currentPath;
+
+  // Remove trailing slash for consistent matching (except for root '/')
+  if (actualPath !== '/' && actualPath.endsWith('/')) {
+    actualPath = actualPath.slice(0, -1);
+  }
+
+  // Find the module node (like static: if (currentPath.startsWith('/userManagement/')) return UserManagementNavItem)
+  const moduleNode = findModuleForPath(navigationData, actualPath, effectiveRegistry);
+
+  if (!moduleNode || !moduleNode.children || !Array.isArray(moduleNode.children) || moduleNode.children.length === 0) {
+    // No matching module or no children to show
+    return [];
+  }
+
+  // Normalize children for menu (like static version - direct children only, no flattening)
+  const navItems = normalizeNavItems(moduleNode.children, effectiveRegistry);
+
+  return navItems;
+}
+
+export default Navigation