robobyte-front-builder 1.0.0

package/src/layouts/components/UserIcon.js

@@ -0,0 +1,40 @@
+const UserIcon = props => {
+  // ** Props
+  const { icon, iconProps, componentType } = props;
+
+  // Return null if no valid componentType
+  if (!componentType) return null;
+
+  const IconTag = icon;
+
+  // Return null if no valid icon provided
+  if (!IconTag) return null;
+
+  let styles;
+  if (componentType === 'search') {
+    // Conditional Props based on component type
+    /* styles = {
+          color: 'blue',
+          fontSize: '2rem'
+        } */
+  } else if (componentType === 'vertical-menu') {
+    // Conditional Props based on component type
+    /* styles = {
+          color: 'red',
+          fontSize: '1.5rem'
+        } */
+  } else if (componentType === 'horizontal-menu') {
+    // Conditional Props based on component type
+    /* styles = {
+          color: 'green',
+          fontSize: '1rem'
+        } */
+  } else {
+    return null;
+  }
+
+  // @ts-ignore
+  return <IconTag {...iconProps} style={{ ...styles }} />;
+};
+
+export default UserIcon;

package/src/layouts/components/acl/Can.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+import { createContextualCan } from '@casl/react'
+
+export const AbilityContext = createContext(undefined)
+
+export default createContextualCan(AbilityContext.Consumer)

package/src/layouts/components/acl/CanViewNavGroup.js

@@ -0,0 +1,36 @@
+// ** React Imports
+import { useContext } from 'react'
+
+// ** Component Imports
+import { AbilityContext } from 'src/layouts/components/acl/Can'
+
+const CanViewNavGroup = props => {
+  // ** Props
+  const { children, navGroup } = props
+
+  // ** Hook
+  const ability = useContext(AbilityContext)
+
+  const checkForVisibleChild = arr => {
+    return arr.some(i => {
+      if (i.children) {
+        return checkForVisibleChild(i.children)
+      } else {
+        return ability?.can(i.action, i.subject)
+      }
+    })
+  }
+
+  const canViewMenuGroup = item => {
+    const hasAnyVisibleChild = item.children && checkForVisibleChild(item.children)
+    if (!(item.action && item.subject)) {
+      return hasAnyVisibleChild
+    }
+
+    return ability && ability.can(item.action, item.subject) && hasAnyVisibleChild
+  }
+
+  return navGroup && canViewMenuGroup(navGroup) ? <>{children}</> : null
+}
+
+export default CanViewNavGroup

package/src/layouts/components/acl/CanViewNavLink.js

@@ -0,0 +1,17 @@
+// ** React Imports
+import { useContext } from 'react'
+
+// ** Component Imports
+import { AbilityContext } from 'src/layouts/components/acl/Can'
+
+const CanViewNavLink = props => {
+  // ** Props
+  const { children, navLink } = props
+
+  // ** Hook
+  const ability = useContext(AbilityContext)
+
+  return ability && ability.can(navLink?.action, navLink?.subject) ? <>{children}</> : null
+}
+
+export default CanViewNavLink

package/src/layouts/components/acl/CanViewNavSectionTitle.js

@@ -0,0 +1,17 @@
+// ** React Imports
+import { useContext } from 'react'
+
+// ** Component Imports
+import { AbilityContext } from 'src/layouts/components/acl/Can'
+
+const CanViewNavSectionTitle = props => {
+  // ** Props
+  const { children, navTitle } = props
+
+  // ** Hook
+  const ability = useContext(AbilityContext)
+
+  return ability && ability.can(navTitle?.action, navTitle?.subject) ? <>{children}</> : null
+}
+
+export default CanViewNavSectionTitle

package/src/layouts/components/horizontal/AppBarContent.js

@@ -0,0 +1,39 @@
+// ** MUI Imports
+import Box from '@mui/material/Box'
+
+// ** Components
+import ModeToggler from 'src/@core/layouts/components/shared-components/ModeToggler'
+import UserDropdown from 'src/layouts/components/UserDropdown'
+import Navigation from "src/@core/layouts/components/horizontal/navigation";
+import Toolbar from "@mui/material/Toolbar";
+
+const AppBarContent = props => {
+  // ** Props
+  const { hidden,
+    children,
+    settings,
+    scrollToTop,
+    saveSettings,
+    horizontalNavMenuContent: userHorizontalNavMenuContent } = props
+  const { skin, appBar, navHidden, appBarBlur, contentWidth } = settings
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      {/*<ModeToggler settings={settings} saveSettings={saveSettings} />*/}
+        <Box className='layout-horizontal-nav' sx={{ width: '100%' }}>
+          <Toolbar
+            className='horizontal-nav-content-container'
+            sx={{
+              mx: 'auto',
+              ...(contentWidth === 'boxed' && { '@media (min-width:1440px)': { maxWidth: 1440 } }),
+              minHeight: theme => `${theme.mixins.toolbar.minHeight - (skin === 'bordered' ? 1 : 0)}px !important`
+            }}
+          >
+            {(userHorizontalNavMenuContent && userHorizontalNavMenuContent(props)) || <Navigation {...props} />}
+          </Toolbar>
+        </Box>
+      <UserDropdown settings={settings} />
+    </Box>
+  )
+}
+
+export default AppBarContent

package/src/layouts/components/horizontal/ServerSideNavItems.js

@@ -0,0 +1,44 @@
+// ** React Imports
+import { useEffect, useState } from 'react'
+
+// ** Import All Icons
+import * as Icons from 'mdi-material-ui'
+
+// ** Axios Import
+import axios from 'axios'
+
+const ServerSideNavItems = () => {
+  // ** State
+  const [menuItems, setMenuItems] = useState([])
+  useEffect(() => {
+    axios.get('/api/horizontal-nav/data').then(response => {
+      const menuArray = response.data
+
+      /**
+       *  Replace the icon string with the component
+       *  If you don't want to import the whole icon library
+       *  you can create a static object and replace the icons using that object
+       */
+      const finalMenuArray = items => {
+        return items.map(item => {
+          if (item.icon) {
+            // @ts-ignore
+            item.icon = Icons[item.icon]
+            if (item.children) {
+              finalMenuArray(item.children)
+            }
+
+            return item
+          }
+
+          return item
+        })
+      }
+      setMenuItems(finalMenuArray(menuArray))
+    })
+  }, [])
+
+  return menuItems
+}
+
+export default ServerSideNavItems

package/src/layouts/components/mui/StepperComps.js

@@ -0,0 +1,55 @@
+import { Icon, StepConnector, stepConnectorClasses, styled } from '@mui/material'
+
+export const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
+  [`&.${stepConnectorClasses.alternativeLabel}`]: {
+    top: 14
+  },
+  [`&.${stepConnectorClasses.active}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      backgroundImage: 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)'
+    }
+  },
+  [`&.${stepConnectorClasses.completed}`]: {
+    [`& .${stepConnectorClasses.line}`]: {
+      backgroundImage: 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)'
+    }
+  },
+  [`& .${stepConnectorClasses.line}`]: {
+    height: 3,
+    border: 0,
+    backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0',
+    borderRadius: 1
+  }
+}))
+
+export const ColorlibStepIconRoot = styled('div')(({ theme, ownerState, borderColor }) => ({
+  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
+  zIndex: 1,
+  color: '#fff',
+  width: 30,
+  height: 30,
+  display: 'flex',
+  borderRadius: '50%',
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...(ownerState.active && {
+    backgroundImage: 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
+    boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
+    border: 'solid 4px',
+    borderColor: borderColor
+  }),
+  ...(ownerState.completed && {
+    backgroundImage: 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)'
+  })
+}))
+
+export function ColorlibStepIcon(props, icon, borderColor) {
+  const { active, completed, className } = props
+  const icons = <Icon sx={{ fontSize: '16px !important' }}>{icon}</Icon>
+
+  return (
+    <ColorlibStepIconRoot ownerState={{ completed, active }} className={className} borderColor={borderColor}>
+      {icons}
+    </ColorlibStepIconRoot>
+  )
+}

package/src/layouts/components/vertical/AppBarContent.js

@@ -0,0 +1,35 @@
+// ** MUI Imports
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+
+// ** Icons Imports
+import MenuIcon from 'mdi-material-ui/Menu'
+
+// ** Components
+import ModeToggler from 'src/@core/layouts/components/shared-components/ModeToggler'
+import UserDropdown from 'src/layouts/components/UserDropdown'
+
+const AppBarContent = props => {
+  // ** Props
+  const { hidden, settings, saveSettings, toggleNavVisibility } = props
+
+  return (
+    <Box sx={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+      <Box className='actions-left' sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>
+        {hidden ? (
+          <IconButton color='inherit' sx={{ ml: -2.75 }} onClick={toggleNavVisibility}>
+            <MenuIcon />
+          </IconButton>
+        ) : null}
+
+        <ModeToggler settings={settings} saveSettings={saveSettings} />
+        {/* <UserLanguageDropdown settings={settings} saveSettings={saveSettings} /> */}
+      </Box>
+      <Box className='actions-right' sx={{ display: 'flex', alignItems: 'center' }}>
+        <UserDropdown settings={settings} />
+      </Box>
+    </Box>
+  )
+}
+
+export default AppBarContent

package/src/layouts/components/vertical/ServerSideNavItems.js

@@ -0,0 +1,44 @@
+// ** React Imports
+import { useEffect, useState } from 'react'
+
+// ** Import All Icons
+import * as Icons from 'mdi-material-ui'
+
+// ** Axios Import
+import axios from 'axios'
+
+const ServerSideNavItems = () => {
+  // ** State
+  const [menuItems, setMenuItems] = useState([])
+  useEffect(() => {
+    axios.get('/api/vertical-nav/data').then(response => {
+      const menuArray = response.data
+
+      /**
+       *  Replace the icon string with the component
+       *  If you don't want to import the whole icon library
+       *  you can create a static object and replace the icons using that object
+       */
+      const finalMenuArray = items => {
+        return items.map(item => {
+          if (item.icon) {
+            // @ts-ignore
+            item.icon = Icons[item.icon]
+            if (item.children) {
+              finalMenuArray(item.children)
+            }
+
+            return item
+          }
+
+          return item
+        })
+      }
+      setMenuItems(finalMenuArray(menuArray))
+    })
+  }, [])
+
+  return menuItems
+}
+
+export default ServerSideNavItems

package/src/lib/index.js

@@ -0,0 +1,75 @@
+/**
+ * @robobyte/front-builder — Public Package API
+ *
+ * This file is the single entry point for the package.
+ * Host Next.js apps import from here.
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ * QUICK START
+ * ─────────────────────────────────────────────────────────────────────────────
+ *
+ * 1. Install (private npm registry):
+ *      npm install @robobyte/front-builder
+ *
+ * 2. In the host app's next.config.js, add transpilePackages so Next.js
+ *    can compile this source-first package:
+ *
+ *      const nextConfig = {
+ *        transpilePackages: ['@robobyte/front-builder'],
+ *      }
+ *
+ * 3. In the host app's _app.js, wrap the tree with RoboByteFrontBuilderProvider:
+ *
+ *      import { RoboByteFrontBuilderProvider } from '@robobyte/front-builder'
+ *
+ *      export default function App({ Component, pageProps }) {
+ *        return (
+ *          <RoboByteFrontBuilderProvider navExtensions={[...]}>
+ *            <Component {...pageProps} />
+ *          </RoboByteFrontBuilderProvider>
+ *        )
+ *      }
+ *
+ * 4. Add builder pages to your Next.js app (e.g. pages/ui-builder/[id].js):
+ *
+ *      export { default } from '@robobyte/front-builder/UIBuilderPage'
+ *      // or:
+ *      import { UIBuilderPage } from '@robobyte/front-builder'
+ *      export default UIBuilderPage
+ *
+ * ─────────────────────────────────────────────────────────────────────────────
+ */
+
+// ── Navigation Extension API ──────────────────────────────────────────────────
+// NavigationExtensionProvider  : Wrap your app to enable nav injection
+// useNavigationExtensionContext: Internal context accessor (used by the nav renderer)
+// useNavExtension              : Hook to register nav items from any component
+export {
+  NavigationExtensionProvider,
+  useNavigationExtensionContext
+} from './navigation/NavigationExtensionContext'
+
+export { default as useNavExtension } from './navigation/useNavExtension'
+
+// ── Convenience Root Provider ─────────────────────────────────────────────────
+// Combines NavigationExtensionProvider with any future package-level providers.
+// Prefer this over using NavigationExtensionProvider directly.
+export { default as RoboByteFrontBuilderProvider } from './providers/RoboByteFrontBuilderProvider'
+
+// ── Page Components ───────────────────────────────────────────────────────────
+// These are full Next.js page components.
+// To embed them in your app, create a page file that re-exports the component:
+//
+//   // pages/ui-builder/[id].js  (in the HOST app)
+//   export { default } from '@robobyte/front-builder'
+//   // then override via named export if needed:
+//   import { UIBuilderPage } from '@robobyte/front-builder'
+//
+export { default as UIBuilderPage } from '../pages/viewBuilder/index'
+export { default as ReportBuilderPage } from '../pages/reportModule/reportBuilder/index'
+
+// ── Core Contexts & Hooks (advanced use) ─────────────────────────────────────
+// Useful when you need to read or drive builder state from the host app.
+export { BuilderProvider, useBuilder } from '../context/BuilderContext'
+export { SystemContext, SystemProvider } from '../context/SystemContext'
+export { AuthContext, AuthProvider } from '../context/AuthContext'

package/src/lib/navigation/NavigationExtensionContext.jsx

@@ -0,0 +1,81 @@
+/**
+ * NavigationExtensionContext
+ *
+ * Allows host Next.js applications to inject additional navigation items
+ * into the RoboByteFrontBuilder sidebar at runtime — without modifying
+ * the server-stored navigation config.
+ *
+ * USAGE in host app's _app.js:
+ *
+ *   import { NavigationExtensionProvider } from '@robobyte/front-builder'
+ *
+ *   <NavigationExtensionProvider items={[
+ *     {
+ *       id: 'host-analytics',
+ *       title: 'Analytics',
+ *       icon: 'ChartBar',          // mdi-material-ui icon name
+ *       type: 'static',
+ *       path: '/analytics',
+ *       insertAt: 'end',           // 'start' | 'end' | number | { afterId } | { beforeId }
+ *     }
+ *   ]}>
+ *     <App />
+ *   </NavigationExtensionProvider>
+ *
+ * Or dynamically from any component using the hook:
+ *
+ *   import { useNavExtension } from '@robobyte/front-builder'
+ *
+ *   useNavExtension([
+ *     { id: 'my-item', title: 'My Page', type: 'static', path: '/my-page', icon: 'Cog' }
+ *   ], 'my-plugin')
+ */
+
+import { createContext, useCallback, useContext, useState } from 'react'
+
+const NavigationExtensionContext = createContext({
+  extensionItems: [],
+  registerItems: () => {},
+  unregisterItems: () => {}
+})
+
+/**
+ * Provider that makes extension items available to the navigation system.
+ * Wrap your app (or just the pages that need extended navigation) with this.
+ *
+ * @param {Object[]} items   - Static extension items declared on the provider
+ * @param {ReactNode} children
+ */
+export const NavigationExtensionProvider = ({ children, items = [] }) => {
+  // Dynamic items registered at runtime via useNavExtension()
+  const [dynamicGroups, setDynamicGroups] = useState({})
+
+  const registerItems = useCallback((pluginId, pluginItems) => {
+    setDynamicGroups(prev => ({ ...prev, [pluginId]: pluginItems }))
+  }, [])
+
+  const unregisterItems = useCallback(pluginId => {
+    setDynamicGroups(prev => {
+      const next = { ...prev }
+      delete next[pluginId]
+      return next
+    })
+  }, [])
+
+  // Merge static (prop) items + all dynamic groups into one flat list
+  const extensionItems = [
+    ...items,
+    ...Object.values(dynamicGroups).flat()
+  ]
+
+  return (
+    <NavigationExtensionContext.Provider value={{ extensionItems, registerItems, unregisterItems }}>
+      {children}
+    </NavigationExtensionContext.Provider>
+  )
+}
+
+/** Internal hook — used by the navigation renderer to read extension items */
+export const useNavigationExtensionContext = () => useContext(NavigationExtensionContext)
+
+export default NavigationExtensionContext

package/src/lib/navigation/mergeNavExtensions.js

@@ -0,0 +1,66 @@
+/**
+ * mergeNavExtensions
+ *
+ * Merges host-app extension items into the server-fetched navigation data array.
+ * Each extension item may specify an `insertAt` field to control placement:
+ *
+ *   insertAt: 'end'              → append (default)
+ *   insertAt: 'start'            → prepend
+ *   insertAt: 2                  → insert at index 2
+ *   insertAt: { afterId: 'xyz' } → insert after the item whose id === 'xyz'
+ *   insertAt: { beforeId: 'xyz' }→ insert before the item whose id === 'xyz'
+ *
+ * The `insertAt` key is stripped before the item is added to the tree so that
+ * the nav renderer never sees it.
+ */
+
+const mergeNavExtensions = (navData, extensionItems) => {
+  if (!extensionItems || extensionItems.length === 0) return navData
+
+  let result = [...navData]
+
+  for (const extItem of extensionItems) {
+    // Strip internal fields before inserting into the tree
+    const { insertAt = 'end', _pluginId, ...navItem } = extItem
+
+    // Don't add duplicates (match by id)
+    if (navItem.id && result.some(existing => existing.id === navItem.id)) {
+      // Update in place if already present
+      result = result.map(existing => (existing.id === navItem.id ? navItem : existing))
+      continue
+    }
+
+    if (insertAt === 'start') {
+      result = [navItem, ...result]
+    } else if (insertAt === 'end') {
+      result = [...result, navItem]
+    } else if (typeof insertAt === 'number') {
+      const idx = Math.max(0, Math.min(insertAt, result.length))
+      result = [...result.slice(0, idx), navItem, ...result.slice(idx)]
+    } else if (insertAt && typeof insertAt === 'object') {
+      if (insertAt.afterId) {
+        const idx = result.findIndex(i => i.id === insertAt.afterId)
+        if (idx !== -1) {
+          result = [...result.slice(0, idx + 1), navItem, ...result.slice(idx + 1)]
+        } else {
+          result = [...result, navItem]
+        }
+      } else if (insertAt.beforeId) {
+        const idx = result.findIndex(i => i.id === insertAt.beforeId)
+        if (idx !== -1) {
+          result = [...result.slice(0, idx), navItem, ...result.slice(idx)]
+        } else {
+          result = [...result, navItem]
+        }
+      } else {
+        result = [...result, navItem]
+      }
+    } else {
+      result = [...result, navItem]
+    }
+  }
+
+  return result
+}
+
+export default mergeNavExtensions

package/src/lib/navigation/useNavExtension.js

@@ -0,0 +1,54 @@
+/**
+ * useNavExtension
+ *
+ * Hook for dynamically registering navigation items from anywhere inside the
+ * host application. Items are automatically cleaned up on unmount.
+ *
+ * USAGE:
+ *
+ *   import { useNavExtension } from '@robobyte/front-builder'
+ *
+ *   function MyFeaturePlugin() {
+ *     useNavExtension(
+ *       [
+ *         {
+ *           id: 'my-reports',
+ *           title: 'My Reports',
+ *           icon: 'FileChartOutline',   // any mdi-material-ui icon name
+ *           type: 'static',
+ *           path: '/my-reports',
+ *           insertAt: 'end',            // optional, defaults to 'end'
+ *         }
+ *       ],
+ *       'my-feature-plugin'   // stable plugin ID — use a unique string per feature
+ *     )
+ *     return null
+ *   }
+ *
+ * @param {Object[]} items    - Nav item descriptors (see NavigationExtensionContext for shape)
+ * @param {string}   pluginId - Stable unique ID for this set of items (prevents duplicates)
+ */
+
+import { useEffect, useRef } from 'react'
+import { useNavigationExtensionContext } from './NavigationExtensionContext'
+
+let _counter = 0
+
+const useNavExtension = (items, pluginId) => {
+  const { registerItems, unregisterItems } = useNavigationExtensionContext()
+
+  // Generate a stable ID once per hook call when none is provided
+  const stableId = useRef(pluginId || `nav-ext-${++_counter}`).current
+
+  // Serialize items to detect changes without referential equality issues
+  const itemsKey = JSON.stringify(items)
+
+  useEffect(() => {
+    if (!items || items.length === 0) return
+    registerItems(stableId, items)
+    return () => unregisterItems(stableId)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stableId, itemsKey])
+}
+
+export default useNavExtension

package/src/lib/providers/RoboByteFrontBuilderProvider.jsx

@@ -0,0 +1,57 @@
+/**
+ * RoboByteFrontBuilderProvider
+ *
+ * Root provider for the @robobyte/front-builder package.
+ * Wrap your host app's _app.js with this component.
+ *
+ * It currently wires up the NavigationExtensionProvider so that
+ * nav items you pass via `navExtensions` (or register via useNavExtension)
+ * are merged into the sidebar automatically.
+ *
+ * EXAMPLE (_app.js in the host Next.js app):
+ *
+ *   import { RoboByteFrontBuilderProvider } from '@robobyte/front-builder'
+ *
+ *   export default function App({ Component, pageProps }) {
+ *     return (
+ *       <RoboByteFrontBuilderProvider
+ *         navExtensions={[
+ *           {
+ *             id: 'host-settings',
+ *             title: 'Settings',
+ *             icon: 'CogOutline',        // any mdi-material-ui icon name
+ *             type: 'static',
+ *             path: '/settings',
+ *             insertAt: 'end',           // 'start' | 'end' | number | { afterId } | { beforeId }
+ *           },
+ *           {
+ *             id: 'host-analytics',
+ *             title: 'Analytics',
+ *             icon: 'ChartBar',
+ *             type: 'static',
+ *             path: '/analytics',
+ *             insertAt: { afterId: 'host-settings' },
+ *           }
+ *         ]}
+ *       >
+ *         <Component {...pageProps} />
+ *       </RoboByteFrontBuilderProvider>
+ *     )
+ *   }
+ */
+
+import { NavigationExtensionProvider } from '../navigation/NavigationExtensionContext'
+
+/**
+ * @param {Object[]} navExtensions  - Static nav items to inject into the sidebar
+ * @param {ReactNode} children
+ */
+const RoboByteFrontBuilderProvider = ({ children, navExtensions = [] }) => {
+  return (
+    <NavigationExtensionProvider items={navExtensions}>
+      {children}
+    </NavigationExtensionProvider>
+  )
+}
+
+export default RoboByteFrontBuilderProvider