robobyte-front-builder 1.0.0

package/src/@menu/components/vertical-menu/Menu.jsx

@@ -0,0 +1,161 @@
+'use client'
+
+// React Imports
+import { createContext, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+
+// Next Imports
+import { usePathname } from 'next/navigation'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { FloatingTree } from '@floating-ui/react'
+
+// Hook Imports
+import useVerticalNav from '../../hooks/useVerticalNav'
+
+// Util Imports
+import { menuClasses } from '../../utils/menuClasses'
+
+// Styled Component Imports
+import StyledVerticalMenu from '../../styles/vertical/StyledVerticalMenu'
+
+// Style Imports
+import styles from '../../styles/styles.module.css'
+
+// Default Config Imports
+import { verticalSubMenuToggleDuration } from '../../defaultConfigs'
+
+export const VerticalMenuContext = createContext({})
+
+const Menu = (props, ref) => {
+  // Props
+  const {
+    children,
+    className,
+    rootStyles,
+    menuItemStyles,
+    renderExpandIcon,
+    renderExpandedMenuItemIcon,
+    menuSectionStyles,
+    browserScroll = false,
+    triggerPopout = 'hover',
+    popoutWhenCollapsed = false,
+    subMenuOpenBehavior = 'accordion', // accordion, collapse
+    transitionDuration = verticalSubMenuToggleDuration,
+    collapsedMenuSectionLabel = '-',
+    popoutMenuOffset = { mainAxis: 0 },
+    textTruncate = true,
+    ...rest
+  } = props
+
+  // States
+  const [openSubmenu, setOpenSubmenu] = useState([])
+
+  // Refs
+  const openSubmenusRef = useRef([])
+
+  // Hooks
+  const pathname = usePathname()
+  const { updateVerticalNavState } = useVerticalNav()
+
+  const toggleOpenSubmenu = useCallback(
+    (...submenus) => {
+      if (!submenus.length) return
+      const openSubmenuCopy = [...openSubmenu]
+
+      submenus.forEach(({ level, label, active = false, id }) => {
+        const submenuIndex = openSubmenuCopy.findIndex(submenu => submenu.id === id)
+        const submenuExists = submenuIndex >= 0
+        const isAccordion = subMenuOpenBehavior === 'accordion'
+        const inactiveSubmenuIndex = openSubmenuCopy.findIndex(submenu => !submenu.active && submenu.level === 0)
+
+        // Delete submenu if it exists
+        if (submenuExists) {
+          openSubmenuCopy.splice(submenuIndex, 1)
+        }
+
+        if (isAccordion) {
+          // Add submenu if it doesn't exist
+          if (!submenuExists) {
+            if (inactiveSubmenuIndex >= 0 && !active && level === 0) {
+              openSubmenuCopy.splice(inactiveSubmenuIndex, 1, { level, label, active, id })
+            } else {
+              openSubmenuCopy.push({ level, label, active, id })
+            }
+          }
+        } else {
+          // Add submenu if it doesn't exist
+          if (!submenuExists) {
+            openSubmenuCopy.push({ level, label, active, id })
+          }
+        }
+      })
+      setOpenSubmenu(openSubmenuCopy)
+    },
+    [openSubmenu, subMenuOpenBehavior]
+  )
+
+  useEffect(() => {
+    setOpenSubmenu([...openSubmenusRef.current])
+    openSubmenusRef.current = []
+  }, [pathname])
+
+  // UseEffect, update verticalNav state to set initial values and update values on change
+  useEffect(() => {
+    updateVerticalNavState({
+      isPopoutWhenCollapsed: popoutWhenCollapsed
+    })
+  }, [popoutWhenCollapsed, updateVerticalNavState])
+
+  const providerValue = useMemo(
+    () => ({
+      browserScroll,
+      triggerPopout,
+      transitionDuration,
+      menuItemStyles,
+      menuSectionStyles,
+      renderExpandIcon,
+      renderExpandedMenuItemIcon,
+      openSubmenu,
+      openSubmenusRef,
+      toggleOpenSubmenu,
+      subMenuOpenBehavior,
+      collapsedMenuSectionLabel,
+      popoutMenuOffset,
+      textTruncate
+    }),
+    [
+      browserScroll,
+      triggerPopout,
+      transitionDuration,
+      menuItemStyles,
+      menuSectionStyles,
+      renderExpandIcon,
+      renderExpandedMenuItemIcon,
+      openSubmenu,
+      openSubmenusRef,
+      toggleOpenSubmenu,
+      subMenuOpenBehavior,
+      collapsedMenuSectionLabel,
+      popoutMenuOffset,
+      textTruncate
+    ]
+  )
+
+  return (
+    <VerticalMenuContext.Provider value={providerValue}>
+      <FloatingTree>
+        <StyledVerticalMenu
+          ref={ref}
+          className={classnames(menuClasses.root, className)}
+          rootStyles={rootStyles}
+          {...rest}
+        >
+          <ul className={styles.ul}>{children}</ul>
+        </StyledVerticalMenu>
+      </FloatingTree>
+    </VerticalMenuContext.Provider>
+  )
+}
+
+export default forwardRef(Menu)

package/src/@menu/components/vertical-menu/MenuButton.jsx

@@ -0,0 +1,95 @@
+// React Imports
+import { cloneElement, createElement, forwardRef } from 'react'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { css } from '@emotion/react'
+
+// Component Imports
+import { RouterLink } from '../RouterLink'
+
+// Util Imports
+import { menuClasses } from '../../utils/menuClasses'
+
+export const menuButtonStyles = props => {
+  // Props
+  const { level, disabled, children, isCollapsed, isPopoutWhenCollapsed } = props
+
+  return css({
+    display: 'flex',
+    alignItems: 'center',
+    minBlockSize: '30px',
+    textDecoration: 'none',
+    color: 'inherit',
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    paddingInlineEnd: '20px',
+    paddingInlineStart: `${level === 0 ? 20 : (isPopoutWhenCollapsed && isCollapsed ? level : level + 1) * 20}px`,
+    '&:hover, &[aria-expanded="true"]': {
+      backgroundColor: '#f3f3f3'
+    },
+    '&:focus-visible': {
+      outline: 'none',
+      backgroundColor: '#f3f3f3'
+    },
+    ...(disabled && {
+      pointerEvents: 'none',
+      cursor: 'default',
+      color: '#adadad'
+    }),
+
+    // All the active styles are applied to the button including menu items or submenu
+    [`&.${menuClasses.active}`]: {
+      ...(!children && { color: 'white' }),
+      backgroundColor: children ? '#f3f3f3' : '#765feb'
+    }
+  })
+}
+
+const MenuButton = ({ className, component, children, ...rest }, ref) => {
+  if (component) {
+    // If component is a string, create a new element of that type
+    if (typeof component === 'string') {
+      return createElement(
+        component,
+        {
+          className: classnames(className),
+          ...rest,
+          ref
+        },
+        children
+      )
+    } else {
+      // Otherwise, clone the element
+      const { className: classNameProp, ...props } = component.props
+
+      return cloneElement(
+        component,
+        {
+          className: classnames(className, classNameProp),
+          ...rest,
+          ...props,
+          ref
+        },
+        children
+      )
+    }
+  } else {
+    // If there is no component but href is defined, render RouterLink
+    if (rest.href) {
+      return (
+        <RouterLink ref={ref} className={className} href={rest.href} {...rest}>
+          {children}
+        </RouterLink>
+      )
+    } else {
+      return (
+        <a ref={ref} className={className} {...rest}>
+          {children}
+        </a>
+      )
+    }
+  }
+}
+
+export default forwardRef(MenuButton)

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

@@ -0,0 +1,180 @@
+'use client'
+
+// React Imports
+import { forwardRef, useEffect, useState } from 'react'
+
+// Next Imports
+import { usePathname } from 'next/navigation'
+
+// Third-party Imports
+import classnames from 'classnames'
+import { useUpdateEffect } from 'react-use'
+
+// Component Imports
+import MenuButton from './MenuButton'
+
+// Hook Imports
+import useVerticalNav from '../../hooks/useVerticalNav'
+import useVerticalMenu from '../../hooks/useVerticalMenu'
+
+// 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 StyledVerticalMenuItem from '../../styles/vertical/StyledVerticalMenuItem'
+
+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 pathname = usePathname()
+  const { menuItemStyles, renderExpandedMenuItemIcon, textTruncate } = useVerticalMenu()
+
+  const { isCollapsed, isHovered, isPopoutWhenCollapsed, toggleVerticalNav, isToggled, isBreakpointReached } =
+    useVerticalNav()
+
+  // Get the styles for the specified element.
+  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 (
+    <StyledVerticalMenuItem
+      ref={ref}
+      className={classnames(
+        menuClasses.menuItemRoot,
+        { [menuClasses.disabled]: disabled },
+        { [menuClasses.active]: active },
+        className
+      )}
+      level={level}
+      isCollapsed={isCollapsed}
+      isPopoutWhenCollapsed={isPopoutWhenCollapsed}
+      disabled={disabled}
+      buttonStyles={getMenuItemStyles('button')}
+      menuItemStyles={getMenuItemStyles('root')}
+      rootStyles={rootStyles}
+    >
+      <MenuButton
+        className={classnames(menuClasses.button, { [menuClasses.active]: active })}
+        component={component}
+        tabIndex={disabled ? -1 : 0}
+        {...rest}
+        onClick={e => {
+          handleClick()
+          rest.onClick && rest.onClick(e)
+        }}
+      >
+        {/* Menu Item Icon */}
+        {renderMenuIcon({
+          icon,
+          level,
+          active,
+          disabled,
+          renderExpandedMenuItemIcon,
+          styles: getMenuItemStyles('icon'),
+          isBreakpointReached
+        })}
+
+        {/* Menu Item Prefix */}
+        {prefix && (
+          <StyledMenuPrefix
+            isHovered={isHovered}
+            isCollapsed={isCollapsed}
+            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
+            isHovered={isHovered}
+            isCollapsed={isCollapsed}
+            firstLevel={level === 0}
+            className={menuClasses.suffix}
+            rootStyles={getMenuItemStyles('suffix')}
+          >
+            {suffix}
+          </StyledMenuSuffix>
+        )}
+      </MenuButton>
+    </StyledVerticalMenuItem>
+  )
+}
+
+export default forwardRef(MenuItem)

package/src/@menu/components/vertical-menu/MenuSection.jsx

@@ -0,0 +1,124 @@
+'use client'
+
+// React Imports
+import { forwardRef } from 'react'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Hook Imports
+import useVerticalNav from '../../hooks/useVerticalNav'
+import useVerticalMenu from '../../hooks/useVerticalMenu'
+
+// Util Imports
+import { menuClasses } from '../../utils/menuClasses'
+
+// Styled Component Imports
+import StyledMenuIcon from '../../styles/StyledMenuIcon'
+import StyledMenuPrefix from '../../styles/StyledMenuPrefix'
+import StyledMenuSuffix from '../../styles/StyledMenuSuffix'
+import StyledMenuSectionLabel from '../../styles/StyledMenuSectionLabel'
+import StyledVerticalMenuSection from '../../styles/vertical/StyledVerticalMenuSection'
+
+const menuSectionWrapperStyles = {
+  display: 'inline-block',
+  inlineSize: '100%',
+  position: 'relative',
+  listStyle: 'none',
+  padding: 0,
+  overflow: 'hidden'
+}
+
+const menuSectionContentStyles = {
+  display: 'flex',
+  alignItems: 'center',
+  inlineSize: '100%',
+  position: 'relative',
+  paddingBlock: '0.75rem',
+  paddingInline: '1.25rem',
+  overflow: 'hidden'
+}
+
+const MenuSection = (props, ref) => {
+  // Props
+  const { children, icon, className, prefix, suffix, label, rootStyles, ...rest } = props
+
+  // Hooks
+  const { isCollapsed, isHovered } = useVerticalNav()
+  const { menuSectionStyles, collapsedMenuSectionLabel, textTruncate } = useVerticalMenu()
+
+  const getMenuSectionStyles = element => {
+    // If the menuSectionStyles prop is provided, get the styles for the element from the prop
+    if (menuSectionStyles) {
+      return menuSectionStyles[element]
+    }
+  }
+
+  return (
+    // eslint-disable-next-line lines-around-comment
+    // Menu Section
+    <StyledVerticalMenuSection
+      ref={ref}
+      rootStyles={rootStyles}
+      menuSectionStyles={getMenuSectionStyles('root')}
+      className={classnames(menuClasses.menuSectionRoot, className)}
+    >
+      {/* Menu Section Content Wrapper */}
+      <ul className={menuClasses.menuSectionWrapper} {...rest} style={menuSectionWrapperStyles}>
+        {/* Menu Section Content */}
+        <li className={menuClasses.menuSectionContent} style={menuSectionContentStyles}>
+          {icon && (
+            <StyledMenuIcon className={menuClasses.icon} rootStyles={getMenuSectionStyles('icon')}>
+              {icon}
+            </StyledMenuIcon>
+          )}
+          {prefix && (
+            <StyledMenuPrefix
+              isCollapsed={isCollapsed}
+              className={menuClasses.prefix}
+              rootStyles={getMenuSectionStyles('prefix')}
+            >
+              {prefix}
+            </StyledMenuPrefix>
+          )}
+          {collapsedMenuSectionLabel && isCollapsed && !isHovered ? (
+            <StyledMenuSectionLabel
+              isCollapsed={isCollapsed}
+              isHovered={isHovered}
+              className={menuClasses.menuSectionLabel}
+              rootStyles={getMenuSectionStyles('label')}
+              textTruncate={textTruncate}
+            >
+              {collapsedMenuSectionLabel}
+            </StyledMenuSectionLabel>
+          ) : (
+            label && (
+              <StyledMenuSectionLabel
+                isCollapsed={isCollapsed}
+                isHovered={isHovered}
+                className={menuClasses.menuSectionLabel}
+                rootStyles={getMenuSectionStyles('label')}
+                textTruncate={textTruncate}
+              >
+                {label}
+              </StyledMenuSectionLabel>
+            )
+          )}
+          {suffix && (
+            <StyledMenuSuffix
+              isCollapsed={isCollapsed}
+              className={menuClasses.suffix}
+              rootStyles={getMenuSectionStyles('suffix')}
+            >
+              {suffix}
+            </StyledMenuSuffix>
+          )}
+        </li>
+        {/* Render Child */}
+        {children}
+      </ul>
+    </StyledVerticalMenuSection>
+  )
+}
+
+export default forwardRef(MenuSection)

package/src/@menu/components/vertical-menu/NavCollapseIcons.jsx

@@ -0,0 +1,70 @@
+'use client'
+
+// Hook Imports
+import useVerticalNav from '../../hooks/useVerticalNav'
+
+// Icon Imports
+import CloseIcon from '../../svg/Close'
+import RadioCircleIcon from '../../svg/RadioCircle'
+import RadioCircleMarkedIcon from '../../svg/RadioCircleMarked'
+
+const NavCollapseIcons = props => {
+  // Props
+  const { closeIcon, lockedIcon, unlockedIcon, onClick, onClose, ...rest } = props
+
+  // Hooks
+  const { isCollapsed, collapseVerticalNav, isBreakpointReached, toggleVerticalNav } = useVerticalNav()
+
+  // Handle Lock / Unlock Icon Buttons click
+  const handleClick = action => {
+    // Setup the verticalNav to be locked or unlocked
+    const collapse = action === 'lock' ? false : true
+
+    // Tell the verticalNav to lock or unlock
+    collapseVerticalNav(collapse)
+
+    // Call onClick function if passed
+    onClick && onClick()
+  }
+
+  // Handle Close button click
+  const handleClose = () => {
+    // Close verticalNav using toggle verticalNav function
+    toggleVerticalNav(false)
+
+    // Call onClose function if passed
+    onClose && onClose()
+  }
+
+  return (
+    <>
+      {isBreakpointReached ? (
+        <span role='button' tabIndex={0} style={{ display: 'flex', cursor: 'pointer' }} onClick={handleClose} {...rest}>
+          {closeIcon ?? <CloseIcon />}
+        </span>
+      ) : isCollapsed ? (
+        <span
+          role='button'
+          tabIndex={0}
+          style={{ display: 'flex', cursor: 'pointer' }}
+          onClick={() => handleClick('lock')}
+          {...rest}
+        >
+          {unlockedIcon ?? <RadioCircleIcon />}
+        </span>
+      ) : (
+        <span
+          role='button'
+          tabIndex={0}
+          style={{ display: 'flex', cursor: 'pointer' }}
+          onClick={() => handleClick('unlock')}
+          {...rest}
+        >
+          {lockedIcon ?? <RadioCircleMarkedIcon />}
+        </span>
+      )}
+    </>
+  )
+}
+
+export default NavCollapseIcons

package/src/@menu/components/vertical-menu/NavHeader.jsx

@@ -0,0 +1,39 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+// Hook Imports
+import useVerticalNav from '../../hooks/useVerticalNav'
+
+// Util Imports
+import { verticalNavClasses } from '../../utils/menuClasses'
+
+const StyledNavHeader = styled.div`
+  padding: 15px;
+  padding-inline-start: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: ${({ transitionDuration }) => `padding-inline ${transitionDuration}ms ease-in-out`};
+
+  ${({ isHovered, isCollapsed, collapsedWidth }) =>
+    isCollapsed && !isHovered && `padding-inline: calc((${collapsedWidth}px - 1px - 22px) / 2);`}
+`
+
+const NavHeader = ({ children }) => {
+  // Hooks
+  const { isHovered, isCollapsed, collapsedWidth, transitionDuration } = useVerticalNav()
+
+  return (
+    <StyledNavHeader
+      className={verticalNavClasses.header}
+      isHovered={isHovered}
+      isCollapsed={isCollapsed}
+      collapsedWidth={collapsedWidth}
+      transitionDuration={transitionDuration}
+    >
+      {children}
+    </StyledNavHeader>
+  )
+}
+
+export default NavHeader