goobs-frontend 0.7.59 → 0.7.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.59",
+  "version": "0.7.61",
   "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",
   "main": "./src/index.ts",
@@ -28,7 +28,7 @@
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@types/lodash": "^4.17.6",
-    "goobs-cache": "^1.3.1",
+    "goobs-cache": "^1.3.2",
     "highlight.js": "^11.10.0",
     "lodash": "^4.17.21",
     "next": "14.2.5"

package/src/components/ConfirmationCodeInput/index.tsx

@@ -82,7 +82,7 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
         'verificationCode',
         combinedCode,
         new Date(Date.now() + 3600000),
-        'memory'
+        'client'
       )
     }
   }, [combinedCode, isValid])

package/src/components/Content/Structure/link/useLink.tsx

@@ -55,11 +55,12 @@ const useLink = (grid: {
         ...cellconfig,
       },
       component: (
-        <Link key={`link-${index}`} href={link} passHref {...restProps}>
+        <Link key={`link-${index}`} href={link} passHref>
           <Typography
             text={text}
             fontvariant={fontvariant}
             fontcolor={fontcolor}
+            {...restProps}
           />
         </Link>
       ),

package/src/components/Nav/HorizontalVariant/index.tsx

@@ -1,89 +1,42 @@
 'use client'
 import React, { useState, useEffect } from 'react'
-import { Box, Tabs, styled, Tab } from '@mui/material'
+import { Box, Tabs, Tab } from '@mui/material'
 import { get, set, JSONValue } from 'goobs-cache'
 import { NavProps, SubNav, View } from '../index'
 
-// Define the possible alignment values for the navigation
+/**
+ * Represents the possible alignment options for the horizontal navigation.
+ */
 type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
 
 /**
- * Interface representing the active tab value
+ * Represents the structure of an active tab value.
  */
 export interface ActiveTabValue {
+  /** The unique identifier of the active tab. */
   tabId: string
 }
 
 /**
- * Interface for the props of the HorizontalVariant component
+ * Props for the HorizontalVariant component.
  */
 export interface HorizontalVariantProps {
-  items: (NavProps | SubNav | View)[] // Array of navigation items
-  height?: string // Optional height of the navigation
-  alignment?: Alignment // Optional alignment of the navigation
-  navname?: string // Optional name for the navigation
-}
-
-/**
- * Styled component for the Tab, extending MUI's Tab with custom props
- */
-const StyledTab = styled(Tab, {
-  shouldForwardProp: prop =>
-    prop !== 'height' && prop !== 'hasleftborder' && prop !== 'hasrightborder',
-})<NavProps & { height?: string }>(
-  ({ height = '80px', hasleftborder = 'false', hasrightborder = 'false' }) => ({
-    minHeight: 0,
-    textTransform: 'none',
-    border: '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',
-    },
-    ...(hasleftborder === 'true' && {
-      borderLeft: '1px solid white',
-    }),
-    ...(hasrightborder === 'true' && {
-      borderRight: '1px solid white',
-    }),
-  })
-)
-
-/**
- * Styled component for the horizontal navigation container
- */
-const HorizontalNavContainer = styled(Box)<{
+  /** An array of navigation items, sub-navigation items, or views. */
+  items: (NavProps | SubNav | View)[]
+  /** The height of the navigation bar. Defaults to '80px'. */
   height?: string
+  /** The alignment of the navigation items. Defaults to 'left'. */
   alignment?: Alignment
-}>(({ height = '80px', alignment = 'left' }) => ({
-  flexGrow: 1,
-  bgcolor: 'black',
-  display: 'flex',
-  height: height,
-  justifyContent: alignment,
-  paddingLeft: '5px',
-  paddingRight: '5px',
-}))
+  /** A unique name for this navigation component. Used for state management. */
+  navname?: string
+}
 
 /**
- * HorizontalVariant component for rendering a horizontal navigation bar
- * @param {HorizontalVariantProps} props - The props for the component
- * @returns {JSX.Element} The rendered HorizontalVariant component
+ * HorizontalVariant component that renders a horizontal navigation bar.
+ * It supports dynamic tab management, routing, and custom click handlers.
+ *
+ * @param {HorizontalVariantProps} props - The props for the HorizontalVariant component.
+ * @returns {JSX.Element} The rendered HorizontalVariant component.
  */
 function HorizontalVariant({
   items,
@@ -91,13 +44,20 @@ function HorizontalVariant({
   alignment = 'left',
   navname,
 }: HorizontalVariantProps) {
-  // State to store active tab values
+  /**
+   * State to keep track of active tab values for different navigation components.
+   */
   const [activeTabValues, setActiveTabValues] = useState<
     Record<string, ActiveTabValue | null>
   >({})
 
-  // Effect to fetch active tab values from cache on component mount
+  /**
+   * Effect hook to fetch and set the active tab values when the component mounts.
+   */
   useEffect(() => {
+    /**
+     * Asynchronously fetches the active tab values from the cache.
+     */
     const fetchActiveTabValues = async () => {
       const result = await get('activeTabValues', 'client')
       if (result && typeof result === 'object' && 'value' in result) {
@@ -111,9 +71,11 @@ function HorizontalVariant({
   }, [])
 
   /**
-   * Handle tab change event
-   * @param {React.SyntheticEvent} event - The event object
-   * @param {string} newValue - The new value of the selected tab
+   * Handles tab change events.
+   * Updates the active tab values in the state and cache.
+   *
+   * @param {React.SyntheticEvent} event - The event object.
+   * @param {string} newValue - The new value of the selected tab.
    */
   const handleTabChange = async (
     event: React.SyntheticEvent,
@@ -124,7 +86,6 @@ function HorizontalVariant({
       [navname ?? '']: { tabId: newValue },
     }
     setActiveTabValues(updatedActiveTabValues)
-    // Store updated values in cache with 30 minutes expiration
     await set(
       'activeTabValues',
       { type: 'json', value: updatedActiveTabValues } as JSONValue,
@@ -134,8 +95,10 @@ function HorizontalVariant({
   }
 
   /**
-   * Handle tab click event based on the tab's trigger type
-   * @param {NavProps} tab - The tab object that was clicked
+   * Handles click events on individual tabs.
+   * Supports different trigger types: route, onClick, and routeonhorizontal.
+   *
+   * @param {NavProps} tab - The tab object that was clicked.
    */
   const handleTabClick = (tab: NavProps) => {
     if (tab.trigger === 'route') {
@@ -154,9 +117,19 @@ function HorizontalVariant({
   }
 
   return (
-    <HorizontalNavContainer height={height} alignment={alignment}>
+    <Box
+      sx={{
+        flexGrow: 1,
+        bgcolor: 'black',
+        display: 'flex',
+        height: height,
+        justifyContent: alignment,
+        paddingLeft: '5px',
+        paddingRight: '5px',
+      }}
+    >
       <Tabs
-        value={activeTabValues[navname ?? '']?.tabId || false}
+        value={activeTabValues?.[navname ?? '']?.tabId || false}
         onChange={handleTabChange}
         aria-label="nav tabs"
         sx={{
@@ -171,35 +144,56 @@ function HorizontalVariant({
         }}
       >
         {items.map((item: NavProps | SubNav | View) => {
-          // Only render NavProps items as tabs
           if ('orientation' in item) {
             const tab = item as NavProps
             return (
-              <StyledTab
+              <Tab
                 key={tab.title}
                 value={tab.title}
                 label={tab.title}
-                hasleftborder={tab.hasleftborder}
-                hasrightborder={tab.hasrightborder}
-                height={height}
-                orientation={tab.orientation}
+                onClick={() => handleTabClick(tab)}
                 sx={{
+                  minHeight: 0,
+                  textTransform: 'none',
+                  border: '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',
+                  },
+                  ...(tab.hasleftborder === 'true' && {
+                    borderLeft: '1px solid white',
+                  }),
+                  ...(tab.hasrightborder === 'true' && {
+                    borderRight: '1px solid white',
+                  }),
                   width: 'auto',
                   justifyContent: 'center',
                   alignItems: 'center',
                   px: 4,
                 }}
-                onClick={() => handleTabClick(tab)}
-                title={tab.title}
-                route={tab.route}
-                navname={tab.navname}
               />
             )
           }
           return null
         })}
       </Tabs>
-    </HorizontalNavContainer>
+    </Box>
   )
 }
 

package/src/components/Nav/VerticalVariant/index.tsx

@@ -4,7 +4,6 @@ import React from 'react'
 import {
   Drawer,
   Box,
-  Typography,
   Stack,
   Divider,
   MenuItem,
@@ -24,32 +23,48 @@ import {
   ocean,
   semiTransparentWhite,
 } from '../../../styles/palette'
+import { Typography } from './../../Typography'
 
 /**
- * Interface for the props of the VerticalVariant component
+ * Props for the VerticalVariant component.
  */
 export interface VerticalVariantProps {
-  items: (NavProps | SubNav | View)[] // Array of navigation items
-  showSearchbar: boolean // Flag to show/hide search bar
-  showDropdown: boolean // Flag to show/hide dropdown
-  showTitle: boolean // Flag to show/hide title
-  showLine: boolean // Flag to show/hide divider line
-  verticalNavTitle: string // Title for the vertical navigation
-  dropdownLabel: string // Label for the dropdown
-  searchbarLabel: string // Label for the search bar
-  anchor: 'left' | 'right' // Position of the drawer
-  expandedNavs: string[] // Array of expanded navigation items
-  setExpandedNavs: React.Dispatch<React.SetStateAction<string[]>> // Function to set expanded navs
-  expandedSubnavs: string[] // Array of expanded subnavigation items
-  setExpandedSubnavs: React.Dispatch<React.SetStateAction<string[]>> // Function to set expanded subnavs
-  verticalNavWidth: string // Width of the vertical navigation
-  selectedNav?: string // Currently selected navigation item
+  /** An array of navigation items, sub-navigation items, or views. */
+  items: (NavProps | SubNav | View)[]
+  /** Determines whether to show the search bar. */
+  showSearchbar: boolean
+  /** Determines whether to show the dropdown. */
+  showDropdown: boolean
+  /** Determines whether to show the title. */
+  showTitle: boolean
+  /** Determines whether to show a divider line. */
+  showLine: boolean
+  /** The title of the vertical navigation. */
+  verticalNavTitle: string
+  /** The label for the dropdown. */
+  dropdownLabel: string
+  /** The label for the search bar. */
+  searchbarLabel: string
+  /** The anchor position of the drawer ('left' or 'right'). */
+  anchor: 'left' | 'right'
+  /** An array of expanded navigation items. */
+  expandedNavs: string[]
+  /** Function to set the expanded navigation items. */
+  setExpandedNavs: React.Dispatch<React.SetStateAction<string[]>>
+  /** An array of expanded sub-navigation items. */
+  expandedSubnavs: string[]
+  /** Function to set the expanded sub-navigation items. */
+  setExpandedSubnavs: React.Dispatch<React.SetStateAction<string[]>>
+  /** The width of the vertical navigation drawer. */
+  verticalNavWidth: string
 }
 
 /**
- * VerticalVariant component for rendering a vertical navigation drawer
- * @param {VerticalVariantProps} props - The props for the component
- * @returns {JSX.Element} The rendered VerticalVariant component
+ * VerticalVariant component that renders a vertical navigation drawer.
+ * It supports nested navigation items, sub-navigation items, and views.
+ *
+ * @param {VerticalVariantProps} props - The props for the VerticalVariant component.
+ * @returns {JSX.Element} The rendered VerticalVariant component.
  */
 function VerticalVariant({
   items,
@@ -66,29 +81,21 @@ function VerticalVariant({
   expandedSubnavs,
   setExpandedSubnavs,
   verticalNavWidth,
-  selectedNav,
 }: VerticalVariantProps) {
   const router = useRouter()
 
-  // Filter and map navigation options for the dropdown
+  /**
+   * Extracts navigation options from the items array.
+   */
   const navOptions = items
     .filter((item): item is NavProps => 'title' in item && 'subnavs' in item)
     .map(nav => nav.title ?? '')
 
   /**
-   * Handle dropdown change event
-   * @param {React.ChangeEvent<{ value: unknown }>} event - The change event
-   */
-  const handleDropdownChange = (
-    event: React.ChangeEvent<{ value: unknown }>
-  ) => {
-    const selectedOption = event.target.value as string
-    console.log('handleDropdownChange - selectedOption:', selectedOption)
-  }
-
-  /**
-   * Handle navigation item click event
-   * @param {NavProps} nav - The clicked navigation item
+   * Handles click events on navigation items.
+   * Supports different trigger types: route and onClick.
+   *
+   * @param {NavProps} nav - The navigation item that was clicked.
    */
   const handleNavClick = (nav: NavProps) => {
     console.log('Clicked Nav:', nav.title)
@@ -104,11 +111,12 @@ function VerticalVariant({
   }
 
   /**
-   * Render a navigation item (NavProps, SubNav, or View)
-   * @param {NavProps | SubNav | View} item - The item to render
-   * @param {number} level - The nesting level of the item
-   * @param {string} activeAndHoverColor - The color for active and hover states
-   * @returns {JSX.Element | null} The rendered item
+   * Recursively renders navigation items, sub-navigation items, and views.
+   *
+   * @param {NavProps | SubNav | View} item - The item to render.
+   * @param {number} level - The nesting level of the item.
+   * @param {string} [activeAndHoverColor] - The color to use for active and hover states.
+   * @returns {JSX.Element | null} The rendered item or null if the item type is not recognized.
    */
   const renderItem = (
     item: NavProps | SubNav | View,
@@ -116,7 +124,6 @@ function VerticalVariant({
     activeAndHoverColor = semiTransparentWhite.main
   ) => {
     if ('title' in item && 'subnavs' in item) {
-      // Render NavProps item
       const nav = item as NavProps
       const isExpanded = expandedNavs.includes(nav.title ?? '')
       return (
@@ -180,15 +187,12 @@ function VerticalVariant({
             }}
             onClick={() => handleNavClick(nav)}
           >
-            {nav.trigger === 'route' || nav.trigger === 'onClick' ? (
-              <Typography variant="merrih5" color={white.main} pl={4 * level}>
-                {nav.title}
-              </Typography>
-            ) : (
-              <Typography variant="merrih5" color={white.main} pl={4 * level}>
-                {nav.title}
-              </Typography>
-            )}
+            <Typography
+              fontvariant="merrih5"
+              fontcolor={white.main}
+              text={nav.title ?? ''}
+              marginLeft={4 * level}
+            />
           </AccordionSummary>
           <AccordionDetails sx={{ border: 'none', p: 0 }}>
             <List sx={{ py: 0 }}>
@@ -200,7 +204,6 @@ function VerticalVariant({
         </MuiAccordion>
       )
     } else if ('title' in item && 'views' in item) {
-      // Render SubNav item
       const subnav = item as SubNav
       const isExpanded = expandedSubnavs.includes(subnav.title ?? '')
       if (subnav.views?.length === 0) {
@@ -225,7 +228,11 @@ function VerticalVariant({
                 },
               }}
             >
-              <Typography variant="merrih6">{subnav.title}</Typography>
+              <Typography
+                fontvariant="merrih6"
+                text={subnav.title ?? ''}
+                fontcolor={white.main}
+              />
             </MenuItem>
           </Link>
         )
@@ -290,9 +297,12 @@ function VerticalVariant({
                 },
               }}
             >
-              <Typography variant="merrih6" color={white.main} pl={4}>
-                {subnav.title}
-              </Typography>
+              <Typography
+                fontvariant="merrih6"
+                fontcolor={white.main}
+                text={subnav.title ?? ''}
+                marginLeft={4}
+              />
             </AccordionSummary>
             <AccordionDetails sx={{ border: 'none', p: 0 }}>
               <List sx={{ py: 0 }}>
@@ -305,7 +315,6 @@ function VerticalVariant({
         )
       }
     } else if ('title' in item && 'route' in item) {
-      // Render View item
       const view = item as View
       return (
         <Link
@@ -328,7 +337,11 @@ function VerticalVariant({
               },
             }}
           >
-            <Typography variant="merriparagraph">{view.title}</Typography>
+            <Typography
+              fontvariant="merriparagraph"
+              text={view.title ?? ''}
+              fontcolor={white.main}
+            />
           </MenuItem>
         </Link>
       )
@@ -359,7 +372,6 @@ function VerticalVariant({
         // @ts-ignore
         px={`15px`}
       >
-        {/* Render title if showTitle is true */}
         {showTitle && (
           <Box pt="0px" pb="0px">
             <Link
@@ -367,13 +379,14 @@ function VerticalVariant({
               passHref
               style={{ textDecoration: 'none' }}
             >
-              <Typography variant="merrih4" color={white.main}>
-                {verticalNavTitle}
-              </Typography>
+              <Typography
+                fontvariant="merrih4"
+                fontcolor={white.main}
+                text={verticalNavTitle}
+              />
             </Link>
           </Box>
         )}
-        {/* Render dropdown and searchbar if either showDropdown or showSearchbar is true */}
         {(showDropdown || showSearchbar) && (
           <Stack mt={1} spacing={1}>
             {showDropdown && (
@@ -382,8 +395,6 @@ function VerticalVariant({
                 componentvariant="dropdown"
                 outlinecolor="none"
                 options={navOptions}
-                value={selectedNav || navOptions[0]}
-                onChange={handleDropdownChange}
                 backgroundcolor={white.main}
                 shrunklabellocation="above"
                 shrunkfontcolor={white.main}
@@ -404,7 +415,6 @@ function VerticalVariant({
           </Stack>
         )}
       </Box>
-      {/* Render divider line if showLine is true */}
       {showLine && (
         <Divider
           sx={{
@@ -414,7 +424,6 @@ function VerticalVariant({
           }}
         />
       )}
-      {/* Render navigation items */}
       {items.map(item => renderItem(item, 0))}
     </Drawer>
   )