robobyte-front-builder 1.0.17 → 1.0.21

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

@@ -1,161 +0,0 @@
-'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

@@ -1,95 +0,0 @@
-// 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

@@ -1,180 +0,0 @@
-'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

@@ -1,124 +0,0 @@
-'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

@@ -1,70 +0,0 @@
-'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

@@ -1,39 +0,0 @@
-// 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