robobyte-front-builder 1.0.0

package/src/@menu/components/horizontal-menu/MenuItem.jsx

@@ -0,0 +1,183 @@
+'use client'
+
+// React Imports
+import { forwardRef, useContext, useEffect, useState } from 'react'
+
+// Next Imports
+import { usePathname } from 'next/navigation'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { useUpdateEffect } from 'react-use'
+import { useFloatingTree } from '@floating-ui/react'
+
+// Context Imports
+import { HorizontalSubMenuContext } from './SubMenu'
+
+// Component Imports
+import MenuButton from './MenuButton'
+
+// Hook Imports
+import useHorizontalMenu from '../../hooks/useHorizontalMenu'
+import useVerticalNav from '../../hooks/useVerticalNav'
+
+// Util Imports
+import { renderMenuIcon } from '../../utils/menuUtils'
+import { menuClasses } from '../../utils/menuClasses'
+
+// Styled Component Imports
+import StyledMenuLabel from '../../styles/StyledMenuLabel'
+import StyledMenuPrefix from '../../styles/StyledMenuPrefix'
+import StyledMenuSuffix from '../../styles/StyledMenuSuffix'
+import StyledHorizontalMenuItem from '../../styles/horizontal/StyledHorizontalMenuItem'
+
+// Style Imports
+import styles from '../../styles/horizontal/horizontalUl.module.css'
+
+const MenuItem = (props, ref) => {
+  // Props
+  const {
+    children,
+    icon,
+    className,
+    prefix,
+    suffix,
+    level = 0,
+    disabled = false,
+    exactMatch = true,
+    activeUrl,
+    component,
+    onActiveChange,
+    rootStyles,
+    ...rest
+  } = props
+
+  // States
+  const [active, setActive] = useState(false)
+
+  // Hooks
+  const tree = useFloatingTree()
+  const pathname = usePathname()
+  const { toggleVerticalNav, isToggled } = useVerticalNav()
+  const { getItemProps } = useContext(HorizontalSubMenuContext)
+  const { menuItemStyles, renderExpandedMenuItemIcon, textTruncate } = useHorizontalMenu()
+
+  const getMenuItemStyles = element => {
+    // If the menuItemStyles prop is provided, get the styles for the specified element.
+    if (menuItemStyles) {
+      // Define the parameters that are passed to the style functions.
+      const params = { level, disabled, active, isSubmenu: false }
+
+      // Get the style function for the specified element.
+      const styleFunction = menuItemStyles[element]
+
+      if (styleFunction) {
+        // If the style function is a function, call it and return the result.
+        // Otherwise, return the style function itself.
+        return typeof styleFunction === 'function' ? styleFunction(params) : styleFunction
+      }
+    }
+  }
+
+  // Handle the click event.
+  const handleClick = () => {
+    if (isToggled) {
+      toggleVerticalNav()
+    }
+  }
+
+  // Change active state when the url changes
+  useEffect(() => {
+    const href = rest.href || (component && typeof component !== 'string' && component.props.href)
+
+    if (href) {
+      // Check if the current url matches any of the children urls
+      if (exactMatch ? pathname === href : activeUrl && pathname.includes(activeUrl)) {
+        setActive(true)
+      } else {
+        setActive(false)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname])
+
+  // Call the onActiveChange callback when the active state changes.
+  useUpdateEffect(() => {
+    onActiveChange?.(active)
+  }, [active])
+
+  return (
+    <StyledHorizontalMenuItem
+      ref={ref}
+      className={classnames(
+        { [menuClasses.menuItemRoot]: level === 0 },
+        { [menuClasses.active]: active },
+        { [menuClasses.disabled]: disabled },
+        styles.li,
+        className
+      )}
+      level={level}
+      disabled={disabled}
+      buttonStyles={getMenuItemStyles('button')}
+      menuItemStyles={getMenuItemStyles('root')}
+      rootStyles={rootStyles}
+    >
+      <MenuButton
+        className={classnames(menuClasses.button, { [menuClasses.active]: active })}
+        component={component}
+        tabIndex={disabled ? -1 : 0}
+        onClick={handleClick}
+        {...getItemProps({
+          onClick(event) {
+            props.onClick?.(event)
+            tree?.events.emit('click')
+          }
+        })}
+        {...rest}
+      >
+        {/* Menu Item Icon */}
+        {renderMenuIcon({
+          icon,
+          level,
+          active,
+          disabled,
+          renderExpandedMenuItemIcon,
+          styles: getMenuItemStyles('icon')
+        })}
+
+        {/* Menu Item Prefix */}
+        {prefix && (
+          <StyledMenuPrefix
+            firstLevel={level === 0}
+            className={menuClasses.prefix}
+            rootStyles={getMenuItemStyles('prefix')}
+          >
+            {prefix}
+          </StyledMenuPrefix>
+        )}
+
+        {/* Menu Item Label */}
+        <StyledMenuLabel
+          className={menuClasses.label}
+          rootStyles={getMenuItemStyles('label')}
+          textTruncate={textTruncate}
+        >
+          {children}
+        </StyledMenuLabel>
+
+        {/* Menu Item Suffix */}
+        {suffix && (
+          <StyledMenuSuffix
+            firstLevel={level === 0}
+            className={menuClasses.suffix}
+            rootStyles={getMenuItemStyles('suffix')}
+          >
+            {suffix}
+          </StyledMenuSuffix>
+        )}
+      </MenuButton>
+    </StyledHorizontalMenuItem>
+  )
+}
+
+export default forwardRef(MenuItem)

package/src/@menu/components/horizontal-menu/SubMenu.jsx

@@ -0,0 +1,418 @@
+'use client'
+
+// React Imports
+import { Children, cloneElement, createContext, forwardRef, useEffect, useRef, useState } from 'react'
+
+// Next Imports
+import { usePathname } from 'next/navigation'
+
+// Third-party Imports
+import classnames from 'classnames'
+import styled from '@emotion/styled'
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useHover,
+  useRole,
+  useInteractions,
+  useClick,
+  safePolygon,
+  useDismiss,
+  useFloatingNodeId,
+  FloatingNode,
+  FloatingPortal,
+  useMergeRefs,
+  useFloatingParentNodeId,
+  useFloatingTree,
+  useTransitionStyles
+} from '@floating-ui/react'
+
+// Component Imports
+import SubMenuContent from './SubMenuContent'
+
+// Hook Imports
+import useHorizontalMenu from '../../hooks/useHorizontalMenu'
+
+// Util Imports
+import { menuClasses } from '../../utils/menuClasses'
+import { confirmUrlInChildren, renderMenuIcon } from '../../utils/menuUtils'
+
+// Styled Component Imports
+import MenuButton, { menuButtonStyles } from './MenuButton'
+import StyledMenuLabel from '../../styles/StyledMenuLabel'
+import StyledMenuPrefix from '../../styles/StyledMenuPrefix'
+import StyledMenuSuffix from '../../styles/StyledMenuSuffix'
+import StyledHorizontalNavExpandIcon, {
+  StyledHorizontalNavExpandIconWrapper
+} from '../../styles/horizontal/StyledHorizontalNavExpandIcon'
+import StyledSubMenuContentWrapper from '../../styles/horizontal/StyledHorizontalSubMenuContentWrapper'
+
+// Style Imports
+import ulStyles from '../../styles/horizontal/horizontalUl.module.css'
+
+// Icon Imports
+import ChevronRight from '../../svg/ChevronRight'
+
+const StyledSubMenu = styled.li`
+  ${({ level }) => level === 0 && { borderRadius: '6px', overflow: 'hidden' }}
+
+  &.${menuClasses.open} > .${menuClasses.button} {
+    background-color: #f3f3f3;
+  }
+
+  ${({ menuItemStyles }) => menuItemStyles};
+  ${({ rootStyles }) => rootStyles};
+
+  > .${menuClasses.button} {
+    ${({ level, disabled, children }) =>
+      menuButtonStyles({
+        level,
+        disabled,
+        children
+      })};
+    ${({ buttonStyles }) => buttonStyles};
+  }
+`
+
+export const HorizontalSubMenuContext = createContext({ getItemProps: () => ({}) })
+
+const SubMenu = (props, ref) => {
+  // Props
+  const {
+    children,
+    className,
+    contentClassName,
+    label,
+    icon,
+    title,
+    prefix,
+    suffix,
+    level = 0,
+    disabled = false,
+    rootStyles,
+    component,
+    onClick,
+    onKeyUp,
+    onOpenChange,
+    ...rest
+  } = props
+
+  // States
+  const [open, setOpen] = useState(false)
+  const [active, setActive] = useState(false)
+
+  // Refs
+  const dir = useRef('ltr')
+  const listItemsRef = useRef([])
+
+  // Hooks
+  const pathname = usePathname()
+  const tree = useFloatingTree()
+  const nodeId = useFloatingNodeId()
+  const parentId = useFloatingParentNodeId()
+
+  const {
+    triggerPopout,
+    renderExpandIcon,
+    menuItemStyles,
+    browserScroll,
+    transitionDuration,
+    renderExpandedMenuItemIcon,
+    popoutMenuOffset,
+    textTruncate
+  } = useHorizontalMenu()
+
+  // Vars
+  // Filter out falsy values from children
+  const childNodes = Children.toArray(children).filter(Boolean)
+
+  const mainAxisOffset =
+    popoutMenuOffset &&
+    popoutMenuOffset.mainAxis &&
+    (typeof popoutMenuOffset.mainAxis === 'function' ? popoutMenuOffset.mainAxis({ level }) : popoutMenuOffset.mainAxis)
+
+  const alignmentAxisOffset =
+    popoutMenuOffset &&
+    popoutMenuOffset.alignmentAxis &&
+    (typeof popoutMenuOffset.alignmentAxis === 'function'
+      ? popoutMenuOffset.alignmentAxis({ level })
+      : popoutMenuOffset.alignmentAxis)
+
+  useEffect(() => {
+    dir.current = window.getComputedStyle(document.documentElement).getPropertyValue('direction')
+  }, [])
+
+  const { y, refs, floatingStyles, context } = useFloating({
+    open,
+    nodeId,
+    onOpenChange: setOpen,
+    placement: level > 0 ? (dir.current !== 'rtl' ? 'right-start' : 'left-start') : 'bottom-start',
+    middleware: [
+      offset({
+        mainAxis: mainAxisOffset,
+        alignmentAxis: alignmentAxisOffset
+      }),
+      flip({ crossAxis: false }),
+      shift()
+    ],
+    whileElementsMounted: autoUpdate
+  })
+
+  // Floating UI Transition Styles
+  const { isMounted, styles } = useTransitionStyles(context, {
+    // Configure both open and close durations:
+    duration: transitionDuration,
+    initial: {
+      opacity: 0,
+      transform: 'translateY(10px)'
+    },
+    open: {
+      opacity: 1,
+      transform: 'translateY(0px)'
+    },
+    close: {
+      opacity: 0,
+      transform: 'translateY(10px)'
+    }
+  })
+
+  const hover = useHover(context, {
+    handleClose: safePolygon({
+      blockPointerEvents: true
+    }), // safePolygon function allows us to reach to submenu
+    restMs: 25, // Only opens submenu when cursor rests for 25ms on a menu
+    enabled: triggerPopout === 'hover', // Only enable hover effect when triggerPopout option is set to 'hover',
+    delay: { open: 75 } // Delay opening submenu by 75ms
+  })
+
+  const click = useClick(context, {
+    enabled: triggerPopout === 'click', // Only enable click effect when triggerPopout option is set to 'click'
+    toggle: false
+  })
+
+  const dismiss = useDismiss(context)
+  const role = useRole(context, { role: 'menu' })
+
+  // Merge all the interactions into prop getters
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([hover, click, dismiss, role])
+
+  const handleOnClick = event => {
+    onClick?.(event)
+    triggerPopout === 'click' && setOpen(!open)
+  }
+
+  const handleOnKeyUp = event => {
+    onKeyUp?.(event)
+
+    if (event.key === 'Enter') {
+      setOpen(!open)
+    }
+  }
+
+  const getSubMenuItemStyles = element => {
+    // If the menuItemStyles prop is provided, get the styles for the specified element.
+    if (menuItemStyles) {
+      // Define the parameters that are passed to the style functions.
+      const params = { level, disabled, active, isSubmenu: true, open: open }
+
+      // Get the style function for the specified element.
+      const styleFunction = menuItemStyles[element]
+
+      if (styleFunction) {
+        // If the style function is a function, call it and return the result.
+        // Otherwise, return the style function itself.
+        return typeof styleFunction === 'function' ? styleFunction(params) : styleFunction
+      }
+    }
+  }
+
+  // Event emitter allows you to communicate across tree components.
+  // This effect closes all menus when an item gets clicked anywhere in the tree.
+  useEffect(() => {
+    const handleTreeClick = () => {
+      setOpen(false)
+    }
+
+    const onSubMenuOpen = event => {
+      if (event.nodeId !== nodeId && event.parentId === parentId) {
+        setOpen(false)
+      }
+    }
+
+    tree?.events.on('click', handleTreeClick)
+    tree?.events.on('menuopen', onSubMenuOpen)
+
+    return () => {
+      tree?.events.off('click', handleTreeClick)
+      tree?.events.off('menuopen', onSubMenuOpen)
+    }
+  }, [tree, nodeId, parentId])
+  useEffect(() => {
+    if (open) {
+      tree?.events.emit('menuopen', {
+        parentId,
+        nodeId
+      })
+    }
+  }, [tree, open, nodeId, parentId])
+
+  // Change active state when the url changes
+  useEffect(() => {
+    // Check if the current url matches any of the children urls
+    if (confirmUrlInChildren(children, pathname)) {
+      setActive(true)
+    } else {
+      setActive(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname])
+
+  // User event handler for open state change
+  useEffect(() => {
+    onOpenChange?.(open)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
+
+  // Merge the reference ref with the ref passed to the component
+  const referenceRef = useMergeRefs([refs.setReference, ref])
+
+  return (
+    <FloatingNode id={nodeId}>
+      {/* Sub Menu */}
+      <StyledSubMenu
+        {...(!disabled && { ref: referenceRef, ...getReferenceProps() })}
+        className={classnames(
+          { [menuClasses.subMenuRoot]: level === 0 },
+          { [menuClasses.active]: active },
+          { [menuClasses.disabled]: disabled },
+          { [menuClasses.open]: open },
+          ulStyles.li,
+          className
+        )}
+        menuItemStyles={getSubMenuItemStyles('root')}
+        level={level}
+        disabled={disabled}
+        active={active}
+        buttonStyles={getSubMenuItemStyles('button')}
+        rootStyles={rootStyles}
+      >
+        {/* Sub Menu */}
+        <MenuButton
+          title={title}
+          className={classnames(menuClasses.button, { [menuClasses.active]: active })}
+          component={component}
+          onClick={handleOnClick}
+          onKeyUp={handleOnKeyUp}
+          {...rest}
+        >
+          {/* Sub Menu Icon */}
+          {renderMenuIcon({
+            icon,
+            level,
+            active,
+            disabled,
+            renderExpandedMenuItemIcon,
+            styles: getSubMenuItemStyles('icon')
+          })}
+
+          {/* Sub Menu Prefix */}
+          {prefix && (
+            <StyledMenuPrefix
+              firstLevel={level === 0}
+              className={menuClasses.prefix}
+              rootStyles={getSubMenuItemStyles('prefix')}
+            >
+              {prefix}
+            </StyledMenuPrefix>
+          )}
+
+          {/* Sub Menu Label */}
+          <StyledMenuLabel
+            className={menuClasses.label}
+            rootStyles={getSubMenuItemStyles('label')}
+            textTruncate={textTruncate}
+          >
+            {label}
+          </StyledMenuLabel>
+
+          {/* Sub Menu Suffix */}
+          {suffix && (
+            <StyledMenuSuffix
+              firstLevel={level === 0}
+              className={menuClasses.suffix}
+              rootStyles={getSubMenuItemStyles('suffix')}
+            >
+              {suffix}
+            </StyledMenuSuffix>
+          )}
+
+          {/* Sub Menu Toggle Icon Wrapper */}
+          <StyledHorizontalNavExpandIconWrapper
+            className={menuClasses.subMenuExpandIcon}
+            rootStyles={getSubMenuItemStyles('subMenuExpandIcon')}
+          >
+            {renderExpandIcon ? (
+              renderExpandIcon({
+                level,
+                disabled,
+                active,
+                open: open
+              })
+            ) : (
+              // eslint-disable-next-line lines-around-comment
+              /* Expanded Arrow Icon */
+              <StyledHorizontalNavExpandIcon level={level}>
+                <ChevronRight fontSize='1rem' />
+              </StyledHorizontalNavExpandIcon>
+            )}
+          </StyledHorizontalNavExpandIconWrapper>
+        </MenuButton>
+
+        <HorizontalSubMenuContext.Provider value={{ getItemProps }}>
+          <FloatingPortal>
+            {isMounted && (
+              <StyledSubMenuContentWrapper
+                ref={refs.setFloating}
+                {...getFloatingProps()}
+                style={floatingStyles}
+                rootStyles={getSubMenuItemStyles('subMenuStyles')}
+              >
+                <SubMenuContent
+                  open={open}
+                  top={y ? y - window.scrollY : 0}
+                  firstLevel={level === 0}
+                  browserScroll={browserScroll}
+                  className={classnames(menuClasses.subMenuContent, contentClassName)}
+                  rootStyles={getSubMenuItemStyles('subMenuContent')}
+                  style={{ ...styles }}
+                >
+                  {childNodes.map((node, index) =>
+                    cloneElement(node, {
+                      ...getItemProps({
+                        ref(node) {
+                          listItemsRef.current[index] = node
+                        },
+                        onClick(event) {
+                          if (node.props.children && !Array.isArray(node.props.children)) {
+                            node.props.onClick?.(event)
+                            tree?.events.emit('click')
+                          }
+                        }
+                      }),
+                      level: level + 1
+                    })
+                  )}
+                </SubMenuContent>
+              </StyledSubMenuContentWrapper>
+            )}
+          </FloatingPortal>
+        </HorizontalSubMenuContext.Provider>
+      </StyledSubMenu>
+    </FloatingNode>
+  )
+}
+
+export default forwardRef(SubMenu)

package/src/@menu/components/horizontal-menu/SubMenuContent.jsx

@@ -0,0 +1,41 @@
+// React Imports
+import { forwardRef } from 'react'
+
+// Third-party Imports
+import PerfectScrollbar from 'react-perfect-scrollbar'
+
+// Styled Component Imports
+import StyledHorizontalSubMenuContent from '../../styles/horizontal/StyledHorizontalSubMenuContent'
+
+// Style Imports
+import styles from '../../styles/styles.module.css'
+
+const SubMenuContent = (props, ref) => {
+  // Props
+  const { children, open, firstLevel, top, browserScroll, ...rest } = props
+
+  return (
+    <StyledHorizontalSubMenuContent
+      ref={ref}
+      firstLevel={firstLevel}
+      open={open}
+      top={top}
+      browserScroll={browserScroll}
+      {...rest}
+    >
+      {/* If browserScroll is false render PerfectScrollbar */}
+      {!browserScroll ? (
+        <PerfectScrollbar
+          options={{ wheelPropagation: false, suppressScrollX: true }}
+          style={{ maxBlockSize: `calc((var(--vh, 1vh) * 100) - ${top}px)` }}
+        >
+          <ul className={styles.ul}>{children}</ul>
+        </PerfectScrollbar>
+      ) : (
+        <ul className={styles.ul}>{children}</ul>
+      )}
+    </StyledHorizontalSubMenuContent>
+  )
+}
+
+export default forwardRef(SubMenuContent)

package/src/@menu/components/horizontal-menu/VerticalNavInHorizontal.jsx

@@ -0,0 +1,20 @@
+// Component Imports
+import VerticalNav from '../../vertical-menu'
+
+const VerticalNavInHorizontal = props => {
+  // Props
+  const { children, className, breakpoint, customBreakpoint, verticalNavProps } = props
+
+  return (
+    <VerticalNav
+      {...verticalNavProps}
+      className={className}
+      breakpoint={breakpoint}
+      customBreakpoint={customBreakpoint}
+    >
+      {children}
+    </VerticalNav>
+  )
+}
+
+export default VerticalNavInHorizontal