goobs-frontend 0.8.13 → 0.8.15

package/src/components/Nav/index.tsx

@@ -1,149 +1,343 @@
 'use client'
-import React, { useState, useMemo } from 'react'
-import type { JSX } from 'react'
-import HorizontalVariant from './HorizontalVariant'
-import VerticalVariant from './VerticalVariant'
+import React, { useState, useCallback, FC } from 'react'
+import { useRouter } from 'next/navigation'
+import { Drawer, Box, Stack, Divider } from '@mui/material'
+import Link from 'next/link'
+import { Typography } from '../Typography'
+import SearchableDropdown from '../SearchableDropdown'
+import { white, ocean, semiTransparentWhite } from '../../styles/palette'
 
-// Type definition for alignment options
-type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
+// Sub-components for mainNav, subNav, viewNav
+import MainNav from './VerticalVariant/mainNav'
+import SubNavComponent from './VerticalVariant/subNav'
+import ViewNav from './VerticalVariant/viewNav'
 
-/**
- * Interface for the props of the Nav component and its sub-components
- */
-export interface NavProps {
-  items?: (NavProps | SubNav | View)[] // Array of navigation items
-  showSearchableNav?: boolean // Flag to show/hide searchable navigation
-  showTitle?: boolean // Flag to show/hide title
-  showLine?: boolean // Flag to show/hide divider line
-  verticalNavTitle?: string // Title for vertical navigation
-  searchableNavLabel?: string // Label for searchable navigation
-  anchor?: 'left' | 'right' // Position of vertical navigation
-  orientation?: 'vertical' | 'horizontal' // Orientation of navigation
-  height?: string // Height of navigation (for horizontal)
-  alignment?: Alignment // Alignment of items (for horizontal)
-  navname?: string // Name of the navigation
-  title?: string // Title of the navigation item
-  route?: string // Route for the navigation item
-  subnavs?: SubNav[] // Sub-navigation items
-  onClick?: () => void // Click handler for the item
-  hasleftborder?: string // Flag for left border
-  hasrightborder?: string // Flag for right border
-  trigger?: 'route' | 'onClick' | 'routeonhorizontal' // Trigger type for the item
-  backgroundcolor?: string
-  shrunkfontcolor?: string // Color of the label when shrunk
-  unshrunkfontcolor?: string // Color of the label when not shrunk
-  titleUrl?: string // Changed from url to titleUrl
-  mobileOpen?: boolean // Controls mobile drawer open state
-  onClose?: () => void // Handler for closing mobile drawer
-  variant?: 'temporary' | 'permanent' // Drawer variant for mobile/desktop
-  spacingfromtopofscreen?: string // Spacing from top of screen
-}
+/* -------------------------------------------------------------------------- */
+/*                                 INTERFACES                                 */
+/* -------------------------------------------------------------------------- */
 
 /**
- * Type definition for sub-navigation items
+ * A single interface that covers all vertical nav items:
+ *   - navType = 'mainNav' => can have subnavs
+ *   - navType = 'subNav' => can have views
+ *   - navType = 'viewNav' => no children
  */
-export type SubNav = {
-  title?: string // Title of the sub-nav
-  route?: string // Route for the sub-nav
-  subtitle?: string // Subtitle for the sub-nav
-  views?: View[] // Views within the sub-nav
-  navname?: string // Name of the sub-nav
+export interface NavItem {
+  navType: 'mainNav' | 'subNav' | 'viewNav'
+  title: string
+  route?: string
+  trigger?: 'route' | 'onClick'
+  onClick?: () => void
+  // For mainNav items only:
+  subnavs?: NavItem[]
+  // For subNav items only:
+  views?: NavItem[]
 }
 
 /**
- * Type definition for view items
+ * NavProps for the vertical nav component.
  */
-export type View = {
-  route?: string // Route for the view
-  title?: string // Title of the view
-  subtitle?: string // Subtitle for the view
-  navname?: string // Name of the view
+export interface NavProps {
+  /** The entire nav data array (mainNav, subNav, viewNav items). */
+  items?: NavItem[]
+
+  /** Whether to show the search box. */
+  showSearchableNav?: boolean
+
+  /** Whether to show the nav title. */
+  showTitle?: boolean
+
+  /** Whether to show a horizontal divider line. */
+  showLine?: boolean
+
+  /** Title text for the nav. */
+  verticalNavTitle?: string
+
+  /** Label for the search box. */
+  searchableNavLabel?: string
+
+  /** Side on which the Drawer anchors. */
+  anchor?: 'left' | 'right'
+
+  /** Background color (drawer or items). */
+  backgroundcolor?: string
+
+  /** Label color when shrunk (search box). */
+  shrunkfontcolor?: string
+
+  /** Label color when not shrunk (search box). */
+  unshrunkfontcolor?: string
+
+  /** Destination route if user clicks the nav title. */
+  titleUrl?: string
+
+  /** Controls mobile drawer open state. */
+  mobileOpen?: boolean
+
+  /** Handler for closing the mobile drawer. */
+  onClose?: () => void
+
+  /** MUI Drawer variant: 'temporary' or 'permanent'. */
+  variant?: 'temporary' | 'permanent'
+
+  /** Spacing from the top of the screen. */
+  spacingfromtopofscreen?: string
+
+  /** Margin above the nav title. */
+  marginabovetitle?: string
+
+  /** Margin below the nav title. */
+  marginbelowtitle?: string
 }
 
-/**
- * Nav component that renders either a vertical or horizontal navigation
- * @param {NavProps} props - The props for the component
- * @returns {JSX.Element} The rendered Nav component
- */
-function Nav({
+/* -------------------------------------------------------------------------- */
+/*                         SINGLE CONST NAV COMPONENT                         */
+/* -------------------------------------------------------------------------- */
+
+const Nav: FC<NavProps> = ({
   items = [],
-  showSearchableNav = true, // Combined showSearchbar and showDropdown
+  showSearchableNav = true,
   showTitle = true,
   showLine = true,
   verticalNavTitle = 'Navigation',
-  searchableNavLabel = 'Search or select a nav', // Combined label
+  searchableNavLabel = 'Search or select a nav',
   anchor = 'left',
-  orientation,
-  height = '80px',
-  alignment = 'left',
-  navname,
   shrunkfontcolor = 'black',
   unshrunkfontcolor = 'black',
   backgroundcolor,
-  titleUrl, // Changed from url to titleUrl
+  titleUrl,
   mobileOpen = false,
   onClose,
   variant = 'permanent',
   spacingfromtopofscreen,
-}: NavProps): JSX.Element {
-  // State for expanded navigation items
+  marginabovetitle = '0px',
+  marginbelowtitle = '0px',
+}) => {
+  // States for expanded mainNavs and subNavs
   const [expandedNavs, setExpandedNavs] = useState<string[]>([])
   const [expandedSubnavs, setExpandedSubnavs] = useState<string[]>([])
-  const [verticalNavWidth] = useState<number>(250) // Default width
-
-  // Memoized navigation items
-  const navs = useMemo(() => {
-    const navs: NavProps[] = []
-    const subnavs: SubNav[] = []
-    const views: View[] = []
-    items.forEach((item: NavProps | SubNav | View) => {
-      if ('title' in item && 'subnavs' in item) {
-        navs.push(item as NavProps)
-      } else if ('title' in item && 'views' in item) {
-        subnavs.push(item as SubNav)
-      } else if ('title' in item && 'route' in item) {
-        views.push(item as View)
+
+  // Default width for the vertical nav
+  const [verticalNavWidth] = useState<string>('250px')
+
+  // For route triggers
+  const router = useRouter()
+
+  // For search dropdown
+  const [selectedNav, setSelectedNav] = useState<string | null>(null)
+
+  // Build search dropdown options from mainNav items
+  const navOptions = items
+    .filter(item => item.navType === 'mainNav')
+    .map(item => ({ value: item.title }))
+
+  /**
+   * Handle route or onClick triggers for mainNav/subNav/viewNav
+   */
+  const handleNavClick = useCallback(
+    (item: NavItem) => {
+      if (item.trigger === 'route' && item.route) {
+        router.push(item.route)
+        if (variant === 'temporary' && onClose) {
+          onClose()
+        }
+      } else if (item.trigger === 'onClick' && item.onClick) {
+        item.onClick()
+        if (variant === 'temporary' && onClose) {
+          onClose()
+        }
       }
-    })
-    return navs
-  }, [items])
-
-  // Render vertical or horizontal variant based on orientation
-  if (orientation === 'vertical') {
-    return (
-      <VerticalVariant
-        items={navs}
-        showSearchableNav={showSearchableNav}
-        showTitle={showTitle}
-        showLine={showLine}
-        verticalNavTitle={verticalNavTitle}
-        searchableNavLabel={searchableNavLabel}
-        anchor={anchor}
-        expandedNavs={expandedNavs}
-        setExpandedNavs={setExpandedNavs}
-        expandedSubnavs={expandedSubnavs}
-        setExpandedSubnavs={setExpandedSubnavs}
-        verticalNavWidth={`${verticalNavWidth}px`}
-        shrunkfontcolor={shrunkfontcolor}
-        unshrunkfontcolor={unshrunkfontcolor}
-        backgroundcolor={backgroundcolor}
-        titleUrl={titleUrl}
-        mobileOpen={mobileOpen}
-        onClose={onClose}
-        variant={variant}
-        spacingfromtopofscreen={spacingfromtopofscreen}
-      />
-    )
-  } else {
-    return (
-      <HorizontalVariant
-        items={items}
-        height={height}
-        alignment={alignment}
-        navname={navname}
-      />
-    )
-  }
+    },
+    [router, variant, onClose]
+  )
+
+  /**
+   * When user selects a mainNav from the search dropdown
+   */
+  const handleSearchableNavChange = useCallback(
+    (newValue: { value: string } | null) => {
+      setSelectedNav(newValue?.value || null)
+    },
+    []
+  )
+
+  /**
+   * Recursively render mainNav -> subNav -> viewNav
+   */
+  const renderItem = useCallback(
+    (
+      item: NavItem,
+      level: number,
+      activeAndHoverColor = semiTransparentWhite.main
+    ) => {
+      switch (item.navType) {
+        case 'mainNav': {
+          const hasChildren = !!item.subnavs?.length
+          return (
+            <MainNav
+              key={item.title}
+              title={item.title}
+              hasChildren={hasChildren}
+              expandedNavs={expandedNavs}
+              setExpandedNavs={setExpandedNavs}
+              onClick={() => handleNavClick(item)}
+              level={level}
+              activeAndHoverColor={activeAndHoverColor}
+            >
+              {item.subnavs?.map(subItem =>
+                renderItem(subItem, level + 1, activeAndHoverColor)
+              )}
+            </MainNav>
+          )
+        }
+        case 'subNav': {
+          const hasChildren = !!item.views?.length
+          return (
+            <SubNavComponent
+              key={item.title}
+              title={item.title}
+              route={item.route}
+              trigger={item.trigger}
+              expandedSubnavs={expandedSubnavs}
+              setExpandedSubnavs={setExpandedSubnavs}
+              activeAndHoverColor={activeAndHoverColor}
+              onClose={onClose}
+              variant={variant}
+              hasChildren={hasChildren}
+            >
+              {item.views?.map(view =>
+                renderItem(view, level + 2, activeAndHoverColor)
+              )}
+            </SubNavComponent>
+          )
+        }
+        case 'viewNav': {
+          return (
+            <ViewNav
+              key={item.title}
+              title={item.title}
+              route={item.route}
+              trigger={item.trigger}
+              onClick={item.onClick}
+              level={level}
+              activeAndHoverColor={activeAndHoverColor}
+              onClose={onClose}
+              variant={variant}
+            />
+          )
+        }
+        default:
+          return null
+      }
+    },
+    [
+      expandedNavs,
+      setExpandedNavs,
+      expandedSubnavs,
+      setExpandedSubnavs,
+      handleNavClick,
+      onClose,
+      variant,
+    ]
+  )
+
+  // Drawer Content: Title, optional search, optional divider, then items
+  const drawerContent = (
+    <>
+      <Box px="15px" sx={{ whiteSpace: 'nowrap' /* no text wrapping */ }}>
+        {showTitle && (
+          <Box mt={marginabovetitle} mb={marginbelowtitle}>
+            <Link
+              href={titleUrl || '/'}
+              passHref
+              style={{ textDecoration: 'none' }}
+              onClick={variant === 'temporary' ? onClose : undefined}
+            >
+              <Typography
+                fontvariant="merrih4"
+                fontcolor={white.main}
+                text={verticalNavTitle}
+              />
+            </Link>
+          </Box>
+        )}
+
+        {showSearchableNav && (
+          <Stack mt={{ xs: '10px', md: '10px', lg: 0 }} spacing={0}>
+            <Box
+              sx={{
+                position: 'relative',
+                zIndex: theme => theme.zIndex.drawer + 1,
+                width: '100%',
+                minHeight: '40px',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              <SearchableDropdown
+                label={searchableNavLabel}
+                options={navOptions}
+                backgroundcolor={backgroundcolor || semiTransparentWhite.main}
+                outlinecolor="none"
+                fontcolor={white.main}
+                shrunkfontcolor={shrunkfontcolor}
+                unshrunkfontcolor={unshrunkfontcolor}
+                shrunklabelposition="aboveNotch"
+                onChange={handleSearchableNavChange}
+                placeholder="Search..."
+              />
+            </Box>
+          </Stack>
+        )}
+      </Box>
+
+      {showLine && (
+        <Divider
+          sx={{
+            width: '100%',
+            backgroundColor: white.main,
+            mt: 2.5,
+          }}
+        />
+      )}
+
+      {selectedNav
+        ? items.filter(i => i.title === selectedNav).map(i => renderItem(i, 0))
+        : items.map(i => renderItem(i, 0))}
+    </>
+  )
+
+  // Render the Drawer
+  return (
+    <Drawer
+      variant={variant}
+      anchor={anchor}
+      open={variant === 'temporary' ? mobileOpen : true}
+      onClose={onClose}
+      elevation={0}
+      sx={{
+        width: 'auto',
+        height: '100%',
+        flexShrink: 0,
+        '& .MuiDrawer-paper': {
+          minWidth: verticalNavWidth,
+          width: 'auto',
+          whiteSpace: 'nowrap',
+          overflowX: 'auto',
+          border: 0,
+          zIndex: theme =>
+            variant === 'temporary'
+              ? theme.zIndex.drawer + 2
+              : theme.zIndex.drawer - 1,
+          backgroundColor: ocean.main,
+          pt: '17px',
+          boxSizing: 'border-box',
+          marginTop: spacingfromtopofscreen,
+        },
+      }}
+    >
+      {drawerContent}
+    </Drawer>
+  )
 }
 
 export default Nav

package/src/components/PricingTable/defaultconfig.tsx

@@ -307,6 +307,15 @@ const defaultConfig: PricingProps = {
       row: 7,
       column: 1,
       mobilewidth: '100%',
+      margintop: {
+        xs: 2,
+        sm: 2,
+        md: 2,
+        ms: 2,
+        ml: 2,
+        lg: 2,
+        xl: 2,
+      },
       marginbottom: {
         xs: 1,
         sm: 1,

package/src/components/Tabs/index.tsx

@@ -0,0 +1,195 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import { AppBar, Toolbar, Box, Tabs as MuiTabs, Tab } from '@mui/material'
+import { usePathname } from 'next/navigation'
+
+/** Represents the shape of each tab item in the horizontal nav. */
+export interface TabsItem {
+  /** The text/title displayed on the tab */
+  title?: string
+
+  /** The URL route */
+  route?: string
+
+  /** The trigger type: 'route' | 'onClick' */
+  trigger?: 'route' | 'onClick'
+
+  /** OnClick callback */
+  onClick?: () => void
+
+  /** Optional left border */
+  hasleftborder?: string
+
+  /** Optional right border */
+  hasrightborder?: string
+}
+
+/** Represents the currently active/selected tab */
+export interface ActiveTabValue {
+  tabId: string | false
+}
+
+/** Props for the horizontal Tabs component. */
+export interface TabsProps {
+  /** Array of horizontal items (TabsItem). */
+  items: TabsItem[]
+
+  /** Height of the tabs bar. */
+  height?: string
+
+  /** MUI alignment. */
+  alignment?: 'left' | 'center' | 'right' | 'inherit' | 'justify'
+
+  /** Unique name for this tab set (for managing active tab). */
+  navname?: string
+}
+
+/**
+ * A horizontal navigation component, built with MUI Tabs.
+ */
+function Tabs({
+  items,
+  height = '48px',
+  alignment = 'left',
+  navname = '',
+}: TabsProps) {
+  const [activeTabValues, setActiveTabValues] = useState<
+    Record<string, ActiveTabValue>
+  >({})
+  const pathname = usePathname()
+
+  useEffect(() => {
+    /**
+     * Find the item whose route matches the current path
+     */
+    const currentTab = items.find(item => item.route === pathname)
+
+    setActiveTabValues(prev => ({
+      ...prev,
+      [navname]: { tabId: currentTab?.title || false },
+    }))
+  }, [items, navname, pathname])
+
+  /**
+   * When user changes tab via click,
+   * update the activeTabValues record.
+   */
+  const handleTabChange = (event: React.SyntheticEvent, newValue: string) => {
+    setActiveTabValues(prev => ({
+      ...prev,
+      [navname]: { tabId: newValue },
+    }))
+  }
+
+  /**
+   * Called when a tab is clicked:
+   * - if trigger='route', navigate to the route
+   * - if trigger='onClick', call onClick
+   */
+  const handleTabClick = (tab: TabsItem) => {
+    if (tab.trigger === 'route' && tab.route) {
+      window.location.href = tab.route
+    } else if (tab.trigger === 'onClick' && tab.onClick) {
+      tab.onClick()
+    }
+  }
+
+  return (
+    <AppBar
+      position="sticky"
+      sx={{
+        backgroundColor: 'black',
+        color: 'white',
+      }}
+    >
+      <Toolbar
+        disableGutters
+        sx={{
+          paddingLeft: 0,
+          paddingRight: 0,
+          height: `${height} !important`,
+          minHeight: `${height} !important`,
+          borderTop: '1px solid white',
+        }}
+      >
+        <Box
+          sx={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: alignment === 'left' ? 'flex-start' : alignment,
+          }}
+        >
+          <Box
+            sx={{
+              flexGrow: 1,
+              display: 'flex',
+              height: height,
+              justifyContent: 'flex-start',
+              paddingLeft: 0,
+              paddingRight: 0,
+            }}
+          >
+            <MuiTabs
+              value={activeTabValues[navname]?.tabId || false}
+              onChange={handleTabChange}
+              aria-label="nav tabs"
+              variant="fullWidth"
+              sx={{
+                height: height,
+                '& .MuiTabs-flexContainer': {
+                  height: '100%',
+                },
+                '& .MuiTab-root': {
+                  height: '100%',
+                  minHeight: 'unset',
+                },
+              }}
+            >
+              {items.map(item => (
+                <Tab
+                  key={item.title}
+                  value={item.title || ''}
+                  label={item.title || ''}
+                  onClick={() => handleTabClick(item)}
+                  sx={{
+                    flex: 1,
+                    textTransform: 'none',
+                    boxSizing: 'border-box',
+                    backgroundColor: 'black',
+                    color: '#fff',
+                    fontWeight: 500,
+                    fontFamily: 'Merriweather',
+                    fontSize: 16,
+                    height: height,
+                    '&:hover': {
+                      backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                    },
+                    '& .MuiTouchRipple-root': {
+                      color: '#fff',
+                    },
+                    '&.Mui-selected': {
+                      color: '#fff',
+                      backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                    },
+                    '& .MuiSvgIcon-root': {
+                      color: '#fff',
+                    },
+                    ...(item.hasleftborder === 'true' && {
+                      borderLeft: '1px solid white',
+                    }),
+                    ...(item.hasrightborder === 'true' && {
+                      borderRight: '1px solid white',
+                    }),
+                  }}
+                />
+              ))}
+            </MuiTabs>
+          </Box>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  )
+}
+
+export default Tabs