goobs-frontend 0.7.59 → 0.7.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.59",
+  "version": "0.7.60",
   "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/VerticalVariant/index.tsx

@@ -4,7 +4,6 @@ import React from 'react'
 import {
   Drawer,
   Box,
-  Typography,
   Stack,
   Divider,
   MenuItem,
@@ -24,33 +23,25 @@ import {
   ocean,
   semiTransparentWhite,
 } from '../../../styles/palette'
+import { Typography } from './../../Typography'
 
-/**
- * Interface for the props of 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
+  items: (NavProps | SubNav | View)[]
+  showSearchbar: boolean
+  showDropdown: boolean
+  showTitle: boolean
+  showLine: boolean
+  verticalNavTitle: string
+  dropdownLabel: string
+  searchbarLabel: string
+  anchor: 'left' | 'right'
+  expandedNavs: string[]
+  setExpandedNavs: React.Dispatch<React.SetStateAction<string[]>>
+  expandedSubnavs: string[]
+  setExpandedSubnavs: React.Dispatch<React.SetStateAction<string[]>>
+  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
- */
 function VerticalVariant({
   items,
   showSearchbar,
@@ -66,30 +57,13 @@ function VerticalVariant({
   expandedSubnavs,
   setExpandedSubnavs,
   verticalNavWidth,
-  selectedNav,
 }: VerticalVariantProps) {
   const router = useRouter()
 
-  // Filter and map navigation options for the dropdown
   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
-   */
   const handleNavClick = (nav: NavProps) => {
     console.log('Clicked Nav:', nav.title)
     if (nav.trigger === 'route') {
@@ -103,20 +77,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
-   */
   const renderItem = (
     item: NavProps | SubNav | View,
     level: number,
     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 +146,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 +163,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 +187,11 @@ function VerticalVariant({
                 },
               }}
             >
-              <Typography variant="merrih6">{subnav.title}</Typography>
+              <Typography
+                fontvariant="merrih6"
+                text={subnav.title ?? ''}
+                fontcolor={white.main}
+              />
             </MenuItem>
           </Link>
         )
@@ -290,9 +256,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 +274,6 @@ function VerticalVariant({
         )
       }
     } else if ('title' in item && 'route' in item) {
-      // Render View item
       const view = item as View
       return (
         <Link
@@ -328,7 +296,11 @@ function VerticalVariant({
               },
             }}
           >
-            <Typography variant="merriparagraph">{view.title}</Typography>
+            <Typography
+              fontvariant="merriparagraph"
+              text={view.title ?? ''}
+              fontcolor={white.main}
+            />
           </MenuItem>
         </Link>
       )
@@ -359,7 +331,6 @@ function VerticalVariant({
         // @ts-ignore
         px={`15px`}
       >
-        {/* Render title if showTitle is true */}
         {showTitle && (
           <Box pt="0px" pb="0px">
             <Link
@@ -367,13 +338,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 +354,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 +374,6 @@ function VerticalVariant({
           </Stack>
         )}
       </Box>
-      {/* Render divider line if showLine is true */}
       {showLine && (
         <Divider
           sx={{
@@ -414,7 +383,6 @@ function VerticalVariant({
           }}
         />
       )}
-      {/* Render navigation items */}
       {items.map(item => renderItem(item, 0))}
     </Drawer>
   )

package/src/components/PricingTable/index.tsx

@@ -88,9 +88,7 @@ const PricingTable: React.FC<PricingProps> = props => {
   const config: PricingProps = { ...defaultConfig, ...props }
 
   // State for selected package
-  const [selectedPackage, setSelectedPackage] = useState<string>(
-    'goobs-frontend-unlimited'
-  )
+  const [selectedPackage] = useState<string>('goobs-frontend-unlimited')
 
   const router = useRouter()
 
@@ -130,8 +128,7 @@ const PricingTable: React.FC<PricingProps> = props => {
             value={selectedPackage}
             outlinecolor={black.main}
             backgroundcolor={semiTransparentBlack.main}
-            options={['goobs-frontend-unlimited']}
-            onChange={e => setSelectedPackage(e.target.value)}
+            options={['ThothOS']}
           />
         ),
       })

package/src/components/StyledComponent/hooks/useDropdown.tsx

@@ -13,12 +13,6 @@ const StyledSelectMenu = styled(MenuItem)({
   },
 })
 
-/**
- * useDropdown hook provides functionality for rendering a dropdown menu and handling option selection.
- * @param props The props for the dropdown component.
- * @param inputBoxRef A reference to the input box element.
- * @returns An object containing the necessary state and handlers for the dropdown.
- */
 export const useDropdown = (
   props: StyledComponentProps,
   inputBoxRef: React.RefObject<HTMLDivElement>
@@ -26,39 +20,22 @@ export const useDropdown = (
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
   const [filteredOptions, setFilteredOptions] = useState<string[]>([])
-  const [selectedOption, setSelectedOption] = useState(props.defaultValue || '')
+  const [selectedOption, setSelectedOption] = useState('')
   const [isDropdownFocused, setIsDropdownFocused] = useState(false)
-  const { componentvariant, options, defaultValue, onChange, value } = props
+  const { componentvariant, options, value } = props
 
-  /**
-   * useEffect hook to update the filtered options and handle default value selection.
-   */
   useEffect(() => {
     if (componentvariant === 'dropdown' && options) {
       setFilteredOptions([...options])
-      if (defaultValue && options.includes(defaultValue) && !selectedOption) {
-        setSelectedOption(defaultValue)
-        if (onChange) {
-          onChange({
-            target: { value: defaultValue },
-          } as React.ChangeEvent<HTMLInputElement>)
-        }
-      }
     }
-  }, [componentvariant, options, defaultValue, onChange, selectedOption])
+  }, [componentvariant, options])
 
-  /**
-   * useEffect hook to update the selected option when the value prop changes.
-   */
   useEffect(() => {
     if (value !== undefined) {
       setSelectedOption(value)
     }
   }, [value])
 
-  /**
-   * handleDropdownClick function toggles the dropdown menu when the input box is clicked.
-   */
   const handleDropdownClick = useCallback(() => {
     if (componentvariant === 'dropdown') {
       setAnchorEl(inputBoxRef.current)
@@ -66,28 +43,11 @@ export const useDropdown = (
     }
   }, [componentvariant, inputBoxRef, isDropdownOpen])
 
-  /**
-   * handleOptionSelect function is called when an option is selected from the dropdown menu.
-   * It updates the selected option and calls the onChange callback.
-   * @param option The selected option.
-   */
-  const handleOptionSelect = useCallback(
-    (option: string) => {
-      setSelectedOption(option)
-      if (onChange) {
-        onChange({
-          target: { value: option },
-        } as React.ChangeEvent<HTMLInputElement>)
-      }
-      setIsDropdownOpen(false)
-    },
-    [onChange]
-  )
+  const handleOptionSelect = useCallback((option: string) => {
+    setSelectedOption(option)
+    setIsDropdownOpen(false)
+  }, [])
 
-  /**
-   * handleInputFocus function updates the isDropdownFocused state when the input box is focused or blurred.
-   * @param focused A boolean indicating whether the input box is focused.
-   */
   const handleInputFocus = useCallback(
     (focused: boolean) => {
       if (componentvariant === 'dropdown') {
@@ -101,9 +61,6 @@ export const useDropdown = (
     return {}
   }
 
-  /**
-   * renderMenu variable renders the dropdown menu when the anchor element is available and the dropdown is open.
-   */
   const renderMenu = anchorEl !== null && isDropdownOpen !== undefined && (
     <Menu
       anchorEl={anchorEl}

package/src/components/Typography/index.tsx

@@ -3,18 +3,11 @@
 import {
   Typography as MuiTypography,
   TypographyProps as MuiTypographyProps,
-  TypographyPropsVariantOverrides as MuiTypographyPropsVariantOverrides,
 } from '@mui/material'
 import React from 'react'
 
-/**
- * Type definition for supported font families
- */
 export type FontFamily = 'arapey' | 'inter' | 'merri'
 
-/**
- * Type definition for typography variants
- */
 export type TypographyVariant =
   | 'h1'
   | 'h2'
@@ -26,33 +19,15 @@ export type TypographyVariant =
   | 'helperheader'
   | 'helperfooter'
 
-/**
- * Extend Material-UI's TypographyPropsVariantOverrides to include custom variants
- */
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides
-    extends Record<`${FontFamily}${TypographyVariant}`, true> {}
-}
-
-/**
- * Custom type for TypographyPropsVariantOverrides
- */
-export type TypographyPropsVariantOverrides =
-  MuiTypographyPropsVariantOverrides &
-    Record<`${FontFamily}${TypographyVariant}`, true>
+type CustomTypographyVariant = `${FontFamily}${TypographyVariant}`
 
-/**
- * Props interface for the custom Typography component
- */
-export interface TypographyProps {
+export interface TypographyProps extends Omit<MuiTypographyProps, 'variant'> {
   text?: string
-  fontvariant?: keyof TypographyPropsVariantOverrides
+  fontvariant?: CustomTypographyVariant
   fontcolor?: string
+  variant?: CustomTypographyVariant | MuiTypographyProps['variant']
 }
 
-/**
- * arapeyStyles object contains the styles for typography variants using the Arapey font family.
- */
 const arapeyStyles: Record<TypographyVariant, React.CSSProperties> = {
   h1: {
     fontFamily: 'Arapey, serif',
@@ -110,9 +85,6 @@ const arapeyStyles: Record<TypographyVariant, React.CSSProperties> = {
   },
 }
 
-/**
- * interStyles object contains the styles for typography variants using the Inter font family.
- */
 const interStyles: Record<TypographyVariant, React.CSSProperties> = {
   h1: {
     fontFamily: 'Inter, sans-serif',
@@ -170,9 +142,6 @@ const interStyles: Record<TypographyVariant, React.CSSProperties> = {
   },
 }
 
-/**
- * merriStyles object contains the styles for typography variants using the Merriweather font family.
- */
 const merriStyles: Record<TypographyVariant, React.CSSProperties> = {
   h1: {
     fontFamily: 'Merriweather, serif',
@@ -230,43 +199,38 @@ const merriStyles: Record<TypographyVariant, React.CSSProperties> = {
   },
 }
 
-/**
- * Typography component is a wrapper around MuiTypography that applies custom styles based on the fontvariant prop.
- * It supports different font families (Arapey, Inter, Merriweather) and typography variants (h1, h2, h3, h4, h5, h6, paragraph, helperheader, helperfooter).
- * @param {TypographyProps & MuiTypographyProps} props - The props for the Typography component.
- * @returns {JSX.Element} The rendered Typography component.
- */
-export const Typography: React.FC<TypographyProps & MuiTypographyProps> = ({
+export const Typography: React.FC<TypographyProps> = ({
   text,
   fontcolor,
   fontvariant,
+  variant,
   ...rest
 }) => {
   let variantStyle: React.CSSProperties = {}
+  const actualVariant = fontvariant || variant
 
-  if (fontvariant) {
-    // Determine the font family based on the fontvariant prefix
-    const fontFamily = fontvariant.startsWith('arapey')
+  if (typeof actualVariant === 'string') {
+    const fontFamily = actualVariant.startsWith('arapey')
       ? 'arapey'
-      : fontvariant.startsWith('inter')
+      : actualVariant.startsWith('inter')
         ? 'inter'
-        : fontvariant.startsWith('merri')
+        : actualVariant.startsWith('merri')
           ? 'merri'
           : null
 
     if (fontFamily) {
-      // Extract the variant part from the fontvariant string
-      const variant = fontvariant.slice(fontFamily.length) as TypographyVariant
-      // Apply the appropriate style based on the font family
+      const variantPart = actualVariant.slice(
+        fontFamily.length
+      ) as TypographyVariant
       switch (fontFamily) {
         case 'arapey':
-          variantStyle = arapeyStyles[variant] || {}
+          variantStyle = arapeyStyles[variantPart] || {}
           break
         case 'inter':
-          variantStyle = interStyles[variant] || {}
+          variantStyle = interStyles[variantPart] || {}
           break
         case 'merri':
-          variantStyle = merriStyles[variant] || {}
+          variantStyle = merriStyles[variantPart] || {}
           break
       }
     }
@@ -278,7 +242,7 @@ export const Typography: React.FC<TypographyProps & MuiTypographyProps> = ({
         color: fontcolor,
         ...variantStyle,
       }}
-      variant={fontvariant}
+      variant={actualVariant as MuiTypographyProps['variant']}
       {...rest}
     >
       {text}

package/src/index.ts

@@ -13,7 +13,6 @@ import StyledComponent, {
 import Typography, {
   FontFamily,
   TypographyVariant,
-  TypographyPropsVariantOverrides,
   TypographyProps,
 } from './components/Typography'
 import ConfirmationCodeInput, {
@@ -172,12 +171,7 @@ export type { ButtonAlignment }
 export type { CustomGridProps }
 export type { Alignment, BorderProp, columnconfig, gridconfig, cellconfig }
 export type { StyledComponentProps }
-export type {
-  FontFamily,
-  TypographyVariant,
-  TypographyPropsVariantOverrides,
-  TypographyProps,
-}
+export type { FontFamily, TypographyVariant, TypographyProps }
 export type { ConfirmationCodeInputsProps }
 export type { RadioOption, RadioGroupProps }
 export type { PopupFormProps }