goobs-frontend 0.7.60 → 0.7.63

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

@@ -25,23 +25,47 @@ import {
 } from '../../../styles/palette'
 import { Typography } from './../../Typography'
 
+/**
+ * Props for the VerticalVariant component.
+ */
 export interface VerticalVariantProps {
+  /** 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 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,
   showSearchbar,
@@ -60,10 +84,19 @@ function VerticalVariant({
 }: VerticalVariantProps) {
   const router = useRouter()
 
+  /**
+   * 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 ?? '')
 
+  /**
+   * 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)
     if (nav.trigger === 'route') {
@@ -77,6 +110,14 @@ function VerticalVariant({
     }
   }
 
+  /**
+   * 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,
     level: number,

package/src/components/Nav/index.tsx

@@ -1,9 +1,8 @@
 'use client'
-import React, { useState, useEffect, useMemo } from 'react'
+import React, { useState, useMemo } from 'react'
 import type { JSX } from 'react'
 import HorizontalVariant from './HorizontalVariant'
 import VerticalVariant from './VerticalVariant'
-import { get, JSONValue } from 'goobs-cache'
 
 // Type definition for alignment options
 type Alignment = 'left' | 'center' | 'right' | 'inherit' | 'justify'
@@ -78,7 +77,7 @@ function Nav({
   // State for expanded navigation items
   const [expandedNavs, setExpandedNavs] = useState<string[]>([])
   const [expandedSubnavs, setExpandedSubnavs] = useState<string[]>([])
-  const [verticalNavWidth, setVerticalNavWidth] = useState<number>(250) // Default width
+  const [verticalNavWidth] = useState<number>(250) // Default width, no longer using goobs-cache
 
   // Memoized navigation items
   const navs = useMemo(() => {
@@ -97,17 +96,6 @@ function Nav({
     return navs
   }, [items])
 
-  // Effect to fetch vertical nav width from cache
-  useEffect(() => {
-    const fetchVerticalNavWidth = async () => {
-      const result = await get('verticalNavWidth', 'client')
-      if (result && typeof result === 'object' && 'value' in result) {
-        setVerticalNavWidth((result as JSONValue).value as number)
-      }
-    }
-    fetchVerticalNavWidth()
-  }, [])
-
   // Render vertical or horizontal variant based on orientation
   if (orientation === 'vertical') {
     return (

package/src/components/PricingTable/defaultconfig.tsx

@@ -12,7 +12,6 @@ const defaultConfig: PricingProps = {
     gridname: 'pricingtableheader',
     alignment: 'center' as Alignment,
     margintop: 1,
-    marginbottom: 0,
     gridwidth: '100%',
   },
   // Configuration for the table title
@@ -23,15 +22,11 @@ const defaultConfig: PricingProps = {
       column: 1,
       gridname: 'pricingtableheader',
       alignment: 'left' as Alignment,
-      marginleft: 1,
+      marginleft: 3,
+      marginbottom: 1,
       mobilewidth: '100%',
       tabletwidth: '100%',
       computerwidth: '100%',
-      cellconfig: {
-        border: 'none',
-        minHeight: '40px',
-        width: '100%',
-      },
     },
   },
   // Configuration for package columns
@@ -41,16 +36,9 @@ const defaultConfig: PricingProps = {
       column: 2,
       gridname: 'pricingtableheader',
       alignment: 'center' as Alignment,
-      marginleft: 1,
-      marginbottom: 1,
       mobilewidth: '80%',
-      tabletwidth: '45%',
-      computerwidth: '45%',
-      cellconfig: {
-        border: 'none',
-        minHeight: '40px',
-        width: '100%',
-      },
+      tabletwidth: '48%',
+      computerwidth: '48%',
     },
   },
   // Configuration for monthly pricing
@@ -60,15 +48,10 @@ const defaultConfig: PricingProps = {
       row: 2,
       column: 1,
       mobilewidth: '100%',
-      tabletwidth: '45%',
-      computerwidth: '45%',
+      tabletwidth: '48%',
+      computerwidth: '48%',
       gridname: 'pricingtableheader',
       alignment: 'center' as Alignment,
-      cellconfig: {
-        border: 'none',
-        minHeight: '40px',
-        width: '100%',
-      },
     },
   },
   // Configuration for annual pricing
@@ -78,15 +61,10 @@ const defaultConfig: PricingProps = {
       row: 2,
       column: 2,
       mobilewidth: '100%',
-      tabletwidth: '45%',
-      computerwidth: '45%',
+      tabletwidth: '48%',
+      computerwidth: '48%',
       gridname: 'pricingtableheader',
       alignment: 'center' as Alignment,
-      cellconfig: {
-        border: 'none',
-        minHeight: '40px',
-        width: '100%',
-      },
     },
   },
   // Configuration for the feature grid
@@ -105,15 +83,10 @@ const defaultConfig: PricingProps = {
         row: 1,
         column: 1,
         mobilewidth: '80%',
-        tabletwidth: '50%',
-        computerwidth: '50%',
+        tabletwidth: '48%',
+        computerwidth: '48%',
         gridname: 'pricingtablefeatures',
         alignment: 'left' as Alignment,
-        marginleft: 1,
-        cellconfig: {
-          border: 'solid',
-          minHeight: '40px',
-        },
       },
       tiedtopackage: {
         tiedtopackages: 'true',
@@ -121,34 +94,24 @@ const defaultConfig: PricingProps = {
           row: 1,
           column: 2,
           mobilewidth: '20%',
-          tabletwidth: '50%',
-          computerwidth: '50%',
+          tabletwidth: '48%',
+          computerwidth: '48%',
           gridname: 'pricingtablefeatures',
           alignment: 'center' as Alignment,
-          cellconfig: {
-            border: 'solid',
-            minHeight: '40px',
-          },
         },
       },
       subfeatures: [
         {
           title: 'Pricing Table',
-          titlelink: '',
           infopopuptext: 'Pricing table subfeature info',
           columnconfig: {
             row: 2,
             column: 1,
             mobilewidth: '80%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            tabletwidth: '48%',
+            computerwidth: '48%',
             gridname: 'pricingtablefeatures',
             alignment: 'left' as Alignment,
-            marginleft: 3,
-            cellconfig: {
-              border: 'solid',
-              minHeight: '40px',
-            },
           },
           tiedtopackage: {
             tiedtopackages: 'true',
@@ -156,14 +119,10 @@ const defaultConfig: PricingProps = {
               row: 2,
               column: 2,
               mobilewidth: '20%',
-              tabletwidth: '50%',
-              computerwidth: '50%',
+              tabletwidth: '48%',
+              computerwidth: '48%',
               gridname: 'pricingtablefeatures',
               alignment: 'center' as Alignment,
-              cellconfig: {
-                border: 'solid',
-                minHeight: '40px',
-              },
             },
           },
         },
@@ -175,15 +134,10 @@ const defaultConfig: PricingProps = {
             row: 3,
             column: 1,
             mobilewidth: '80%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            tabletwidth: '48%',
+            computerwidth: '48%',
             gridname: 'pricingtablefeatures',
             alignment: 'left' as Alignment,
-            marginleft: 3,
-            cellconfig: {
-              border: 'solid',
-              minHeight: '40px',
-            },
           },
           tiedtopackage: {
             tiedtopackages: 'true',
@@ -191,14 +145,10 @@ const defaultConfig: PricingProps = {
               row: 3,
               column: 2,
               mobilewidth: '20%',
-              tabletwidth: '50%',
-              computerwidth: '50%',
+              tabletwidth: '48%',
+              computerwidth: '48%',
               gridname: 'pricingtablefeatures',
               alignment: 'center' as Alignment,
-              cellconfig: {
-                border: 'solid',
-                minHeight: '40px',
-              },
             },
           },
         },
@@ -211,15 +161,10 @@ const defaultConfig: PricingProps = {
         row: 4,
         column: 1,
         mobilewidth: '80%',
-        tabletwidth: '50%',
-        computerwidth: '50%',
+        tabletwidth: '48%',
+        computerwidth: '48%',
         gridname: 'pricingtablefeatures',
         alignment: 'left' as Alignment,
-        marginleft: 1,
-        cellconfig: {
-          border: 'solid',
-          minHeight: '40px',
-        },
       },
       tiedtopackage: {
         tiedtopackages: 'true',
@@ -227,14 +172,10 @@ const defaultConfig: PricingProps = {
           row: 4,
           column: 2,
           mobilewidth: '20%',
-          tabletwidth: '50%',
-          computerwidth: '50%',
+          tabletwidth: '48%',
+          computerwidth: '48%',
           gridname: 'pricingtablefeatures',
           alignment: 'center' as Alignment,
-          cellconfig: {
-            border: 'solid',
-            minHeight: '40px',
-          },
         },
       },
       subfeatures: [
@@ -247,14 +188,9 @@ const defaultConfig: PricingProps = {
             column: 1,
             mobilewidth: '80%',
             tabletwidth: '50%',
-            computerwidth: '50%',
+            computerwidth: '48%',
             gridname: 'pricingtablefeatures',
             alignment: 'left' as Alignment,
-            marginleft: 3,
-            cellconfig: {
-              border: 'solid',
-              minHeight: '40px',
-            },
           },
           tiedtopackage: {
             tiedtopackages: 'true',
@@ -262,14 +198,10 @@ const defaultConfig: PricingProps = {
               row: 5,
               column: 2,
               mobilewidth: '20%',
-              tabletwidth: '50%',
-              computerwidth: '50%',
+              tabletwidth: '48%',
+              computerwidth: '48%',
               gridname: 'pricingtablefeatures',
               alignment: 'center' as Alignment,
-              cellconfig: {
-                border: 'solid',
-                minHeight: '40px',
-              },
             },
           },
         },
@@ -281,15 +213,10 @@ const defaultConfig: PricingProps = {
             row: 6,
             column: 1,
             mobilewidth: '80%',
-            tabletwidth: '50%',
-            computerwidth: '50%',
+            tabletwidth: '48%',
+            computerwidth: '48%',
             gridname: 'pricingtablefeatures',
             alignment: 'left' as Alignment,
-            marginleft: 3,
-            cellconfig: {
-              border: 'solid',
-              minHeight: '40px',
-            },
           },
           tiedtopackage: {
             tiedtopackages: 'true',
@@ -297,14 +224,10 @@ const defaultConfig: PricingProps = {
               row: 6,
               column: 2,
               mobilewidth: '20%',
-              tabletwidth: '50%',
-              computerwidth: '50%',
+              tabletwidth: '48%',
+              computerwidth: '48%',
               gridname: 'pricingtablefeatures',
               alignment: 'center' as Alignment,
-              cellconfig: {
-                border: 'solid',
-                minHeight: '40px',
-              },
             },
           },
         },
@@ -319,15 +242,12 @@ const defaultConfig: PricingProps = {
       row: 7,
       column: 2,
       mobilewidth: '100%',
-      tabletwidth: '50%',
-      computerwidth: '50%',
+      marginbottom: 1,
+      marginright: 1,
+      tabletwidth: '100%',
+      computerwidth: '48%',
       gridname: 'pricingtablefeatures',
       alignment: 'center' as Alignment,
-      cellconfig: {
-        border: 'none',
-        minHeight: '50px',
-        width: '50%',
-      },
     },
   },
 }

package/src/components/PricingTable/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useState } from 'react'
+import React from 'react'
 import { Box, Paper } from '@mui/material'
 import InfoIcon from '@mui/icons-material/Info'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
@@ -87,9 +87,6 @@ const PricingTable: React.FC<PricingProps> = props => {
   // Merge default config with provided props
   const config: PricingProps = { ...defaultConfig, ...props }
 
-  // State for selected package
-  const [selectedPackage] = useState<string>('goobs-frontend-unlimited')
-
   const router = useRouter()
 
   /**
@@ -125,10 +122,10 @@ const PricingTable: React.FC<PricingProps> = props => {
             shrunklabellocation="above"
             componentvariant="dropdown"
             shrunkfontcolor={black.main}
-            value={selectedPackage}
             outlinecolor={black.main}
             backgroundcolor={semiTransparentBlack.main}
-            options={['ThothOS']}
+            defaultOption="ThothOS"
+            options={['ThothOS', 'ThothOS Pro', 'ThothOS Enterprise']}
           />
         ),
       })
@@ -142,7 +139,7 @@ const PricingTable: React.FC<PricingProps> = props => {
           <Typography
             text={config.monthlyprice.prices}
             fontcolor={black.main}
-            fontvariant="merrih6"
+            fontvariant="merrih5"
           />
         ),
       })
@@ -156,7 +153,7 @@ const PricingTable: React.FC<PricingProps> = props => {
           <Typography
             text={config.annualprice.annualprices}
             fontcolor={black.main}
-            fontvariant="merrih6"
+            fontvariant="merrih5"
           />
         ),
       })
@@ -203,7 +200,6 @@ const PricingTable: React.FC<PricingProps> = props => {
         const tiedConfig: columnconfig = {
           ...feature.tiedtopackage.columnconfig,
           cellconfig: {
-            border: 'solid',
             minHeight: '40px',
           },
           component: feature.tiedtopackage.tiedtopackages ? (
@@ -225,7 +221,7 @@ const PricingTable: React.FC<PricingProps> = props => {
                 <Typography
                   text={subFeature.title}
                   fontcolor={black.main}
-                  fontvariant="merrih6"
+                  fontvariant="merriparagraph"
                   noWrap
                 />
                 {subFeature.infopopuptext && (
@@ -252,7 +248,6 @@ const PricingTable: React.FC<PricingProps> = props => {
           const tiedConfig: columnconfig = {
             ...subFeature.tiedtopackage.columnconfig,
             cellconfig: {
-              border: 'solid',
               minHeight: '40px',
             },
             component: subFeature.tiedtopackage.tiedtopackages ? (
@@ -281,6 +276,7 @@ const PricingTable: React.FC<PricingProps> = props => {
             fontcolor={white.main}
             backgroundcolor={black.main}
             href={buttonLink}
+            width="100%"
             onClick={() => router.push(buttonLink)}
             text={config.buttoncolumns.buttontexts}
           />

package/src/components/StyledComponent/adornment/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { InputAdornment, Button, Box } from '@mui/material'
 import SearchIcon from '../../Icons/Search'
 import ShowHideEyeIcon from '../../Icons/ShowHideEye'
@@ -11,6 +11,7 @@ export interface AdornmentProps {
   componentvariant: string
   iconcolor?: string
   passwordVisible?: boolean
+  togglePasswordVisibility?: () => void
   marginRight?: number | string
   handleIncrement?: () => void
   handleDecrement?: () => void
@@ -43,18 +44,15 @@ export const EndAdornment: React.FC<AdornmentProps> = props => {
   const {
     componentvariant,
     passwordVisible,
+    togglePasswordVisibility,
     handleIncrement,
     handleDecrement,
   } = props
-  const [isPasswordVisible, setIsPasswordVisible] = useState(
-    passwordVisible || false
-  )
+
   const adornmentStyle = {
     cursor: 'pointer',
   }
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible)
-  }
+
   // Render the show/hide eye icon for the password variant
   if (componentvariant === 'password') {
     return (
@@ -63,7 +61,7 @@ export const EndAdornment: React.FC<AdornmentProps> = props => {
         onClick={togglePasswordVisibility}
         style={adornmentStyle}
       >
-        <ShowHideEyeIcon visible={isPasswordVisible} />
+        <ShowHideEyeIcon visible={passwordVisible} />
       </InputAdornment>
     )
   }