robobyte-front-builder 1.0.0

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

@@ -0,0 +1,216 @@
+'use client'
+
+// React Imports
+import { useEffect, useRef } from 'react'
+
+// Third-party Imports
+import classnames from 'classnames'
+
+// Hook Imports
+import useMediaQuery from '../../hooks/useMediaQuery'
+import useVerticalNav from '../../hooks/useVerticalNav'
+
+// Util Imports
+import { verticalNavClasses } from '../../utils/menuClasses'
+
+// Styled Component Imports
+import StyledBackdrop from '../../styles/StyledBackdrop'
+import StyledVerticalNav from '../../styles/vertical/StyledVerticalNav'
+import StyledVerticalNavContainer from '../../styles/vertical/StyledVerticalNavContainer'
+import StyledVerticalNavBgColorContainer from '../../styles/vertical/StyledVerticalNavBgColorContainer'
+
+// Style Imports
+import styles from '../../styles/vertical/verticalNavBgImage.module.css'
+
+// Default Config Imports
+import { defaultBreakpoints, verticalNavToggleDuration } from '../../defaultConfigs'
+
+const VerticalNav = props => {
+  // Props
+  const {
+    width = 260,
+    collapsedWidth = 80,
+    defaultCollapsed = false,
+    backgroundColor = 'white',
+    backgroundImage,
+    breakpoint = 'lg',
+    customBreakpoint,
+    breakpoints,
+    transitionDuration = verticalNavToggleDuration,
+    backdropColor,
+    scrollWithContent = false,
+    className,
+    customStyles,
+    children,
+    ...rest
+  } = props
+
+  // Vars
+  const mergedBreakpoints = { ...defaultBreakpoints, ...breakpoints }
+
+  // Refs
+  const verticalNavCollapsedRef = useRef(false)
+
+  // Hooks
+  const {
+    updateVerticalNavState,
+    isCollapsed: isCollapsedContext,
+    width: widthContext,
+    isBreakpointReached: isBreakpointReachedContext,
+    isToggled: isToggledContext,
+    isHovered: isHoveredContext,
+    collapsing: collapsingContext,
+    expanding: expandingContext,
+    isScrollWithContent: isScrollWithContentContext,
+    transitionDuration: transitionDurationContext,
+    isPopoutWhenCollapsed: isPopoutWhenCollapsedContext
+  } = useVerticalNav()
+
+  // Find the breakpoint from which screen size responsive behavior should enable and if its reached or not
+  const breakpointReached = useMediaQuery(customBreakpoint ?? (breakpoint ? mergedBreakpoints[breakpoint] : breakpoint))
+
+  // UseEffect, update verticalNav state to set initial values and update values on change
+  useEffect(() => {
+    updateVerticalNavState({
+      width,
+      collapsedWidth,
+      transitionDuration,
+      isScrollWithContent: scrollWithContent,
+      isBreakpointReached: breakpointReached
+    })
+
+    if (!breakpointReached) {
+      updateVerticalNavState({ isToggled: false })
+      verticalNavCollapsedRef.current && updateVerticalNavState({ isCollapsed: true })
+    } else {
+      if (isCollapsedContext && !verticalNavCollapsedRef.current) {
+        verticalNavCollapsedRef.current = true
+      }
+
+      isCollapsedContext && updateVerticalNavState({ isCollapsed: false })
+      isHoveredContext && updateVerticalNavState({ isHovered: false })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [width, collapsedWidth, scrollWithContent, breakpointReached, updateVerticalNavState])
+  useEffect(() => {
+    if (defaultCollapsed) {
+      updateVerticalNavState({
+        isCollapsed: defaultCollapsed,
+        isToggled: false
+      })
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultCollapsed])
+  useEffect(() => {
+    setTimeout(() => {
+      updateVerticalNavState({
+        expanding: false,
+        collapsing: false
+      })
+    }, transitionDuration)
+
+    if (!isCollapsedContext && !breakpointReached && verticalNavCollapsedRef.current) {
+      verticalNavCollapsedRef.current = false
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCollapsedContext])
+
+  // Handle Backdrop(Content Overlay) Click
+  const handleBackdropClick = () => {
+    // Close the verticalNav
+    updateVerticalNavState({ isToggled: false })
+  }
+
+  // Handle VerticalNav Hover Event
+  const handleVerticalNavHover = () => {
+    /* If verticalNav is collapsed then only hover class should be added to verticalNav
+          and hover functionality should work (expand verticalNav width) */
+    if (isCollapsedContext && !isHoveredContext) {
+      updateVerticalNavState({ isHovered: true })
+    }
+  }
+
+  // Handle VerticalNav Hover Out Event
+  const handleVerticalNavHoverOut = () => {
+    // If verticalNav is collapsed then only remove hover class should contract verticalNav width
+    if (isCollapsedContext && isHoveredContext) {
+      updateVerticalNavState({ isHovered: false })
+    }
+  }
+
+  return (
+    <StyledVerticalNav
+      width={defaultCollapsed && !widthContext ? collapsedWidth : width}
+      isBreakpointReached={isBreakpointReachedContext}
+      collapsedWidth={collapsedWidth}
+      collapsing={collapsingContext}
+      expanding={expandingContext}
+      customStyles={customStyles}
+      scrollWithContent={isScrollWithContentContext}
+      transitionDuration={transitionDurationContext}
+      className={classnames(
+        verticalNavClasses.root,
+        {
+          [verticalNavClasses.collapsed]: isCollapsedContext,
+          [verticalNavClasses.toggled]: isToggledContext,
+          [verticalNavClasses.hovered]: isHoveredContext,
+          [verticalNavClasses.breakpointReached]: isBreakpointReachedContext,
+          [verticalNavClasses.scrollWithContent]: isScrollWithContentContext,
+          [verticalNavClasses.collapsing]: collapsingContext,
+          [verticalNavClasses.expanding]: expandingContext
+        },
+        className
+      )}
+      {...rest}
+    >
+      {/* VerticalNav Container for hover effect when verticalNav is collapsed */}
+      <StyledVerticalNavContainer
+        width={widthContext}
+        className={verticalNavClasses.container}
+        transitionDuration={transitionDurationContext}
+        {...(!isPopoutWhenCollapsedContext &&
+          isCollapsedContext &&
+          !breakpointReached && {
+            onMouseEnter: handleVerticalNavHover,
+            onMouseLeave: handleVerticalNavHoverOut
+          })}
+      >
+        {/* VerticalNav Container to apply styling like background */}
+        <StyledVerticalNavBgColorContainer
+          className={verticalNavClasses.bgColorContainer}
+          backgroundColor={backgroundColor}
+        >
+          {children}
+        </StyledVerticalNavBgColorContainer>
+
+        {/* Display verticalNav background image if provided by user through props */}
+        {backgroundImage && (
+          // eslint-disable-next-line lines-around-comment
+          /* VerticalNav Background Image */
+          <img
+            className={classnames(verticalNavClasses.image, styles.root)}
+            src={backgroundImage}
+            alt='verticalNav background'
+          />
+        )}
+      </StyledVerticalNavContainer>
+
+      {/* When verticalNav is toggled on smaller screen, show/hide verticalNav backdrop */}
+      {isToggledContext && breakpointReached && (
+        // eslint-disable-next-line lines-around-comment
+        /* VerticalNav Backdrop */
+        <StyledBackdrop
+          role='button'
+          tabIndex={0}
+          aria-label='backdrop'
+          onClick={handleBackdropClick}
+          onKeyPress={handleBackdropClick}
+          className={verticalNavClasses.backdrop}
+          backdropColor={backdropColor}
+        />
+      )}
+    </StyledVerticalNav>
+  )
+}
+
+export default VerticalNav

package/src/@menu/contexts/horizontalNavContext.jsx

@@ -0,0 +1,29 @@
+'use client'
+
+// React Imports
+import { createContext, useMemo, useState } from 'react'
+
+const HorizontalNavContext = createContext({})
+
+export const HorizontalNavProvider = ({ children }) => {
+  // States
+  const [isBreakpointReached, setIsBreakpointReached] = useState(false)
+
+  // update isBreakpointReached value
+  const updateIsBreakpointReached = isBreakpointReached => {
+    setIsBreakpointReached(isBreakpointReached)
+  }
+
+  // Hooks
+  const HorizontalNavProviderValue = useMemo(
+    () => ({
+      isBreakpointReached,
+      updateIsBreakpointReached
+    }),
+    [isBreakpointReached]
+  )
+
+  return <HorizontalNavContext.Provider value={HorizontalNavProviderValue}>{children}</HorizontalNavContext.Provider>
+}
+
+export default HorizontalNavContext

package/src/@menu/contexts/verticalNavContext.jsx

@@ -0,0 +1,65 @@
+'use client'
+
+// React Imports
+import { createContext, useCallback, useMemo, useState } from 'react'
+
+const VerticalNavContext = createContext({})
+
+export const VerticalNavProvider = ({ children }) => {
+  // States
+  const [verticalNavState, setVerticalNavState] = useState({
+    isCollapsed: false,
+    isHovered: false,
+    isToggled: false,
+    collapsing: false,
+    expanding: false
+  })
+  // Hooks
+  const updateVerticalNavState = useCallback(values => {
+    setVerticalNavState(prevState => ({
+      ...prevState,
+      ...values,
+      collapsing: values.isCollapsed === true,
+      expanding: values.isCollapsed === false
+    }))
+  }, [])
+
+  const collapseVerticalNav = useCallback(value => {
+    setVerticalNavState(prevState => ({
+      ...prevState,
+      isHovered: value !== undefined && false,
+      isCollapsed: value !== undefined ? Boolean(value) : !Boolean(prevState?.isCollapsed),
+      collapsing: value === true,
+      expanding: value !== true
+    }))
+  }, [])
+
+  const hoverVerticalNav = useCallback(value => {
+    setVerticalNavState(prevState => ({
+      ...prevState,
+      isHovered: value !== undefined ? Boolean(value) : !Boolean(prevState?.isHovered)
+    }))
+  }, [])
+
+  const toggleVerticalNav = useCallback(value => {
+    setVerticalNavState(prevState => ({
+      ...prevState,
+      isToggled: value !== undefined ? Boolean(value) : !Boolean(prevState?.isToggled)
+    }))
+  }, [])
+
+  const verticalNavProviderValue = useMemo(
+    () => ({
+      ...verticalNavState,
+      updateVerticalNavState,
+      collapseVerticalNav,
+      hoverVerticalNav,
+      toggleVerticalNav
+    }),
+    [verticalNavState, updateVerticalNavState, collapseVerticalNav, hoverVerticalNav, toggleVerticalNav]
+  )
+
+  return <VerticalNavContext.Provider value={verticalNavProviderValue}>{children}</VerticalNavContext.Provider>
+}
+
+export default VerticalNavContext

package/src/@menu/defaultConfigs.js

@@ -0,0 +1,12 @@
+export const defaultBreakpoints = {
+  xs: '480px',
+  sm: '600px',
+  md: '900px',
+  lg: '1200px',
+  xl: '1536px',
+  xxl: '1920px',
+  always: 'always'
+}
+export const verticalNavToggleDuration = 300
+export const verticalSubMenuToggleDuration = 300
+export const horizontalSubMenuToggleDuration = 200

package/src/@menu/hooks/useHorizontalMenu.jsx

@@ -0,0 +1,19 @@
+// React Imports
+import { useContext } from 'react'
+
+// Context Imports
+import { HorizontalMenuContext } from '../components/horizontal-menu/Menu'
+
+const useHorizontalMenu = () => {
+  // Hooks
+  const context = useContext(HorizontalMenuContext)
+
+  if (context === undefined) {
+    //TODO: set better error message
+    throw new Error('Menu Component is required!')
+  }
+
+  return context
+}
+
+export default useHorizontalMenu

package/src/@menu/hooks/useHorizontalNav.jsx

@@ -0,0 +1,19 @@
+// React Imports
+import { useContext } from 'react'
+
+// Context Imports
+import HorizontalNavContext from '../contexts/horizontalNavContext'
+
+const useHorizontalNav = () => {
+  // Hooks
+  const context = useContext(HorizontalNavContext)
+
+  if (context === undefined) {
+    //TODO: set better error message
+    throw new Error('HorizontalNav Component is required!')
+  }
+
+  return context
+}
+
+export default useHorizontalNav

package/src/@menu/hooks/useMediaQuery.jsx

@@ -0,0 +1,29 @@
+'use client'
+
+// React Imports
+import { useEffect, useState } from 'react'
+
+const useMediaQuery = breakpoint => {
+  // States
+  const [matches, setMatches] = useState(breakpoint === 'always')
+
+  useEffect(() => {
+    if (breakpoint && breakpoint !== 'always') {
+      const media = window.matchMedia(`(max-width: ${breakpoint})`)
+
+      if (media.matches !== matches) {
+        setMatches(media.matches)
+      }
+
+      const listener = () => setMatches(media.matches)
+
+      window.addEventListener('resize', listener)
+
+      return () => window.removeEventListener('resize', listener)
+    }
+  }, [matches, breakpoint])
+
+  return matches
+}
+
+export default useMediaQuery

package/src/@menu/hooks/useVerticalMenu.jsx

@@ -0,0 +1,19 @@
+// React Imports
+import { useContext } from 'react'
+
+// Context Imports
+import { VerticalMenuContext } from '../components/vertical-menu/Menu'
+
+const useVerticalMenu = () => {
+  // Hooks
+  const context = useContext(VerticalMenuContext)
+
+  if (context === undefined) {
+    //TODO: set better error message
+    throw new Error('Menu Component is required!')
+  }
+
+  return context
+}
+
+export default useVerticalMenu

package/src/@menu/hooks/useVerticalNav.jsx

@@ -0,0 +1,19 @@
+// React Imports
+import { useContext } from 'react'
+
+// Context Imports
+import VerticalNavContext from '../contexts/verticalNavContext'
+
+const useVerticalNav = () => {
+  // Hooks
+  const context = useContext(VerticalNavContext)
+
+  if (context === undefined) {
+    //TODO: set better error message
+    throw new Error('VerticalNav Component is required!')
+  }
+
+  return context
+}
+
+export default useVerticalNav

package/src/@menu/horizontal-menu/index.jsx

@@ -0,0 +1,8 @@
+// Import all Horizontal Nav components and export them
+import Menu from '../components/horizontal-menu/Menu'
+import SubMenu from '../components/horizontal-menu/SubMenu'
+import MenuItem from '../components/horizontal-menu/MenuItem'
+import HorizontalNav from '../components/horizontal-menu/HorizontalNav'
+
+export default HorizontalNav
+export { Menu, MenuItem, SubMenu }

package/src/@menu/styles/StyledBackdrop.jsx

@@ -0,0 +1,15 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+const StyledBackdrop = styled.div`
+  position: fixed;
+  inset-inline-start: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  z-index: 1;
+  background-color: ${({ backdropColor }) => backdropColor || 'rgba(0, 0, 0, 0.3)'};
+  touch-action: none;
+`
+
+export default StyledBackdrop

package/src/@menu/styles/StyledMenuIcon.jsx

@@ -0,0 +1,12 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+const StyledMenuIcon = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-inline-end: 10px;
+  ${({ rootStyles }) => rootStyles};
+`
+
+export default StyledMenuIcon

package/src/@menu/styles/StyledMenuLabel.jsx

@@ -0,0 +1,16 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+const StyledMenuLabel = styled.span`
+  flex-grow: 1;
+  ${({ textTruncate }) =>
+    textTruncate &&
+    `
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    `};
+  ${({ rootStyles }) => rootStyles};
+`
+
+export default StyledMenuLabel

package/src/@menu/styles/StyledMenuPrefix.jsx

@@ -0,0 +1,10 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+const StyledMenuPrefix = styled.span`
+  margin-inline-end: 5px;
+  display: ${({ firstLevel, isCollapsed, isHovered }) => (firstLevel && isCollapsed && !isHovered ? 'none' : 'flex')};
+  ${({ rootStyles }) => rootStyles};
+`
+
+export default StyledMenuPrefix

package/src/@menu/styles/StyledMenuSectionLabel.jsx

@@ -0,0 +1,21 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+const StyledMenuSectionLabel = styled.span`
+  ${({ textTruncate }) =>
+    textTruncate &&
+    `
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `};
+  ${({ isCollapsed, isHovered }) =>
+    !isCollapsed || (isCollapsed && isHovered)
+      ? `
+flex-grow: 1;
+`
+      : ''}
+  ${({ rootStyles }) => rootStyles};
+`
+
+export default StyledMenuSectionLabel

package/src/@menu/styles/StyledMenuSuffix.jsx

@@ -0,0 +1,10 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+const StyledMenuSuffix = styled.span`
+  margin-inline-start: 5px;
+  display: ${({ firstLevel, isCollapsed, isHovered }) => (firstLevel && isCollapsed && !isHovered ? 'none' : 'flex')};
+  ${({ rootStyles }) => rootStyles};
+`
+
+export default StyledMenuSuffix

package/src/@menu/styles/StyledSubMenuContent.jsx

@@ -0,0 +1,43 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+const StyledSubMenuContent = styled.div`
+  display: none;
+  overflow: hidden;
+  z-index: 999;
+  transition: ${({ transitionDuration }) => `block-size ${transitionDuration}ms ease-in-out`};
+  box-sizing: border-box;
+
+  ${({ isCollapsed, level, isPopoutWhenCollapsed, isHovered }) =>
+    isCollapsed &&
+    level === 0 &&
+    !isPopoutWhenCollapsed &&
+    !isHovered &&
+    `
+      block-size: 0 !important;
+    `}
+
+  ${({ isCollapsed, level, isPopoutWhenCollapsed }) =>
+    isCollapsed && level === 0 && isPopoutWhenCollapsed
+      ? `
+      display: block;
+      padding-inline-start: 0px;
+      inline-size: 260px;
+      border-radius: 4px;
+      block-size: auto !important;
+      transition: none !important;
+      background-color: white;
+      box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
+     `
+      : `
+      position: static !important;
+      transform: none !important;
+      `}
+
+  ${({ browserScroll }) => browserScroll && `overflow-y: auto; max-block-size: calc((var(--vh, 1vh) * 100));`}
+
+
+  ${({ rootStyles }) => rootStyles};
+`
+
+export default StyledSubMenuContent

package/src/@menu/styles/horizontal/StyledHorizontalMenu.jsx

@@ -0,0 +1,13 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+// Util Imports
+import { menuClasses } from '../../utils/menuClasses'
+
+const StyledHorizontalMenu = styled.nav`
+  &.${menuClasses.root} {
+    ${({ rootStyles }) => rootStyles}
+  }
+`
+
+export default StyledHorizontalMenu

package/src/@menu/styles/horizontal/StyledHorizontalMenuItem.jsx

@@ -0,0 +1,26 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+// Util Imports
+import { menuClasses } from '../../utils/menuClasses'
+
+// Style Imports
+import { menuButtonStyles } from '../../components/horizontal-menu/MenuButton'
+
+const StyledHorizontalMenuItem = styled.li`
+  position: relative;
+  ${({ level }) => level === 0 && { borderRadius: '6px', overflow: 'hidden' }}
+  ${({ menuItemStyles }) => menuItemStyles};
+  ${({ rootStyles }) => rootStyles};
+
+  > .${menuClasses.button} {
+    ${({ level, disabled }) =>
+      menuButtonStyles({
+        level,
+        disabled
+      })};
+    ${({ buttonStyles }) => buttonStyles};
+  }
+`
+
+export default StyledHorizontalMenuItem

package/src/@menu/styles/horizontal/StyledHorizontalNav.jsx

@@ -0,0 +1,11 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+const StyledHorizontalNav = styled.div`
+  inline-size: 100%;
+  overflow: hidden;
+  position: relative;
+  ${({ customStyles }) => customStyles}
+`
+
+export default StyledHorizontalNav

package/src/@menu/styles/horizontal/StyledHorizontalNavExpandIcon.jsx

@@ -0,0 +1,33 @@
+// Third-party Imports
+import styled from '@emotion/styled'
+
+export const StyledHorizontalNavExpandIconWrapper = styled.span`
+  display: flex;
+  margin-inline-start: 5px;
+  ${({ rootStyles }) => rootStyles};
+`
+
+const StyledHorizontalNavExpandIcon = styled.span`
+  display: flex;
+
+  ${({ level }) =>
+    level === 0 &&
+    `
+    & > i,
+    & > svg {
+      transform: rotate(90deg);
+    }
+  `}
+
+  ${({ level }) =>
+    level &&
+    level > 0 &&
+    `
+    [dir='rtl'] & > i,
+    [dir='rtl'] & > svg {
+      transform: rotate(180deg);
+    }
+  `}
+`
+
+export default StyledHorizontalNavExpandIcon