robobyte-front-builder 1.0.19 → 1.0.23

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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