goobs-frontend 0.7.60 → 0.7.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.60",
+  "version": "0.7.63",
   "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.2",
+    "goobs-cache": "^1.4.0",
     "highlight.js": "^11.10.0",
     "lodash": "^4.17.21",
     "next": "14.2.5"

package/src/components/Button/index.tsx

@@ -1,11 +1,9 @@
-'use client'
-
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { Button, Box, ButtonProps } from '@mui/material'
 import StarIcon from '@mui/icons-material/Star'
 import Typography from '../Typography'
-import { get, JSONValue } from 'goobs-cache'
 import { red } from '../../styles/palette'
+import { get } from 'goobs-cache'
 
 export type ButtonAlignment = 'left' | 'center' | 'right'
 
@@ -88,75 +86,108 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
   const [errorMessage, setErrorMessage] = useState<string | undefined>(
     undefined
   )
-  const [isFormValid, setIsFormValid] = useState<boolean>(true)
-  const [helperFooterValue, setHelperFooterValue] = useState<
-    Record<string, HelperFooterMessage>
-  >({})
-
-  const updateFormValidation = useCallback(() => {
-    if (formname && helperFooterValue) {
-      const relevantFooters = Object.values(helperFooterValue).filter(
-        footer => footer?.formname === formname
-      )
+  const [, setIsFormValid] = useState<boolean>(true)
+  const [hasBeenClicked, setHasBeenClicked] = useState<boolean>(false)
 
-      const errorFooters = relevantFooters.filter(
-        footer => footer?.status === 'error'
-      )
+  const fetchHelperFooters = useCallback(async (): Promise<
+    HelperFooterMessage[]
+  > => {
+    if (!formname) {
+      console.log('CustomButton: No formname provided, returning empty array')
+      return []
+    }
+    console.log('CustomButton: Fetching helper footers for formname:', formname)
+
+    // Wait for 2 seconds before fetching to allow time for cache update
+    await new Promise(resolve => setTimeout(resolve, 3000))
 
-      const emptyRequiredFields = relevantFooters.filter(
-        footer =>
-          footer?.required && (!footer.status || footer.status === 'error')
+    const helperFooterResult = await get('helperfooter', formname, 'client')
+    console.log('CustomButton: Helper footer result:', helperFooterResult)
+
+    if (
+      helperFooterResult &&
+      typeof helperFooterResult === 'object' &&
+      'type' in helperFooterResult &&
+      helperFooterResult.type === 'json' &&
+      'value' in helperFooterResult &&
+      typeof helperFooterResult.value === 'object' &&
+      helperFooterResult.value !== null
+    ) {
+      const helperFooters = Object.entries(
+        helperFooterResult.value as Record<string, unknown>
       )
+        .map(([key, value]): HelperFooterMessage | null => {
+          if (
+            typeof value === 'object' &&
+            value !== null &&
+            'status' in value &&
+            'statusMessage' in value &&
+            'spreadMessage' in value &&
+            'spreadMessagePriority' in value &&
+            'required' in value
+          ) {
+            return {
+              status: value.status as 'error' | 'success',
+              statusMessage: String(value.statusMessage),
+              spreadMessage: String(value.spreadMessage),
+              spreadMessagePriority: Number(value.spreadMessagePriority),
+              required: Boolean(value.required),
+              formname: key,
+            }
+          }
+          return null
+        })
+        .filter((value): value is HelperFooterMessage => value !== null)
 
-      if (errorFooters.length > 0) {
-        const highestPriorityError = errorFooters.reduce((prev, current) =>
-          (prev.spreadMessagePriority || Infinity) <
-          (current.spreadMessagePriority || Infinity)
-            ? prev
-            : current
-        )
-        setErrorMessage(highestPriorityError.spreadMessage)
-        setIsFormValid(false)
-      } else if (emptyRequiredFields.length > 0) {
-        setErrorMessage('Please fill in all required fields.')
-        setIsFormValid(false)
-      } else {
-        setErrorMessage(undefined)
-        setIsFormValid(true)
-      }
-    } else {
+      console.log('CustomButton: Valid helper footers:', helperFooters)
+      return helperFooters
+    }
+
+    console.log('CustomButton: No valid helper footers found in cache')
+    return []
+  }, [formname])
+
+  const updateFormValidation = useCallback(async (): Promise<boolean> => {
+    console.log('CustomButton: Starting form validation')
+    const helperFooters = await fetchHelperFooters()
+    console.log('CustomButton: Fetched helper footers:', helperFooters)
+
+    if (helperFooters.length === 0) {
+      console.log('CustomButton: No helper footers found, form is valid')
       setErrorMessage(undefined)
       setIsFormValid(true)
+      return true
     }
-  }, [formname, helperFooterValue])
 
-  useEffect(() => {
-    const fetchHelperFooter = async () => {
-      const helperFooterResult = await get('helperFooter', 'client')
-      if (
-        helperFooterResult &&
-        typeof helperFooterResult === 'object' &&
-        'value' in helperFooterResult
-      ) {
-        setHelperFooterValue(
-          (helperFooterResult as JSONValue).value as Record<
-            string,
-            HelperFooterMessage
-          >
-        )
-      } else {
-        setHelperFooterValue({})
-      }
+    const errorFooters = helperFooters.filter(
+      footer => footer.status === 'error'
+    )
+    console.log('CustomButton: Error footers:', errorFooters)
+
+    if (errorFooters.length > 0) {
+      console.log('CustomButton: Found error footers, form is invalid')
+      const highestPriorityError = errorFooters.reduce((prev, current) =>
+        prev.spreadMessagePriority < current.spreadMessagePriority
+          ? prev
+          : current
+      )
+      setErrorMessage(highestPriorityError.spreadMessage)
+      setIsFormValid(false)
+      return false
     }
 
-    fetchHelperFooter()
-  }, [formname])
+    console.log('CustomButton: No error footers found, form is valid')
+    setErrorMessage(undefined)
+    setIsFormValid(true)
+    return true
+  }, [fetchHelperFooters])
 
   useEffect(() => {
-    updateFormValidation()
+    console.log('CustomButton: Running effect to update form validation')
+    void updateFormValidation()
   }, [updateFormValidation])
 
-  const renderIcon = () => {
+  const renderIcon = (): React.ReactNode => {
     if (icon === false) {
       return null
     }
@@ -168,13 +199,20 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
     return <StarIcon style={{ fontSize: iconsize }} />
   }
 
-  const handleButtonClick = async () => {
-    if (!isFormValid) {
-      return
-    }
+  const handleButtonClick = async (
+    event: React.MouseEvent<HTMLButtonElement>
+  ): Promise<void> => {
+    console.log('CustomButton: Button clicked')
+    event.preventDefault()
+    setHasBeenClicked(true)
 
-    if (onClick) {
+    const isValid = await updateFormValidation()
+    console.log('CustomButton: Form validation result:', isValid)
+    if (isValid && onClick) {
+      console.log('CustomButton: Form is valid, calling onClick')
       onClick()
+    } else {
+      console.log('CustomButton: Form is invalid or no onClick provided')
     }
   }
 
@@ -216,7 +254,7 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
           {iconlocation === 'right' && renderIcon()}
         </Box>
       </Button>
-      {errorMessage && (
+      {hasBeenClicked && errorMessage && (
         <Typography
           fontvariant="merrihelperfooter"
           fontcolor={red.main}

package/src/components/ConfirmationCodeInput/index.tsx

@@ -80,8 +80,8 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
     if (isValid) {
       set(
         'verificationCode',
-        combinedCode,
-        new Date(Date.now() + 3600000),
+        'codeStore',
+        { type: 'string', value: combinedCode },
         'client'
       )
     }

package/src/components/Content/index.tsx

@@ -65,16 +65,16 @@ export interface ContentSectionProps {
     card?: ExtendedCardProps | ExtendedCardProps[]
     codecopy?: ExtendedCodeCopyProps | ExtendedCodeCopyProps[]
   }>
+  width?: number
 }
 
 /**
  * RenderContent component handles the rendering of various content elements
  * based on the provided configuration.
  */
-const RenderContent: React.FC<ContentSectionProps['grids'][0]> = ({
-  grid,
-  ...props
-}) => {
+const RenderContent: React.FC<
+  ContentSectionProps['grids'][0] & { width?: number }
+> = ({ grid, width, ...props }) => {
   let columnConfigs: columnconfig[] = []
 
   // Helper function to add configurations to columnConfigs
@@ -104,20 +104,26 @@ const RenderContent: React.FC<ContentSectionProps['grids'][0]> = ({
   addToColumnConfigs(useCard(props))
   addToColumnConfigs(useCodeCopy(props))
 
+  const updatedGridConfig: gridconfig = {
+    ...grid.gridconfig,
+    gridwidth: width ? `${width}px` : grid.gridconfig?.gridwidth,
+  }
+
   return (
-    <CustomGrid gridconfig={grid.gridconfig} columnconfig={columnConfigs} />
+    <CustomGrid gridconfig={updatedGridConfig} columnconfig={columnConfigs} />
   )
 }
 
 /**
  * ContentSection component renders multiple grids based on the provided configuration.
  * @param grids An array of ContentSectionProps, each representing a grid to be rendered.
+ * @param width Optional width for the content section, defaults to 450px if not provided.
  */
-export default function ContentSection({ grids }: ContentSectionProps) {
+export default function ContentSection({ grids, width }: ContentSectionProps) {
   return (
     <>
       {grids.map((gridProps, index) => (
-        <RenderContent key={index} {...gridProps} />
+        <RenderContent key={index} {...gridProps} width={width} />
       ))}
     </>
   )

package/src/components/Form/Popup/index.tsx

@@ -8,7 +8,7 @@ import React, {
   useCallback,
 } from 'react'
 import { Close } from '@mui/icons-material'
-import { Dialog, IconButton, Box } from '@mui/material'
+import { Dialog, IconButton, Box, DialogProps } from '@mui/material'
 import ContentSection, { ContentSectionProps } from '../../Content'
 import { formContainerStyle } from './../../../styles/Form'
 import { ExtendedTypographyProps } from '../../Content/Structure/typography/useGridTypography'
@@ -34,6 +34,8 @@ export interface PopupFormProps {
   open?: boolean
   /** Callback function to handle closing the popup (only applicable for 'dialog' type) */
   onClose?: () => void
+  /** The width of the popup form in pixels */
+  width?: number
 }
 
 /**
@@ -52,11 +54,22 @@ export interface PopupFormProps {
  *   onClose={handleClose}
  *   onSubmit={handleSubmit}
  *   content={<LoginForm />}
+ *   width={400}
  * />
  */
 const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
   (
-    { title, description, grids, onSubmit, content, popupType, open, onClose },
+    {
+      title,
+      description,
+      grids,
+      onSubmit,
+      content,
+      popupType,
+      open,
+      onClose,
+      width = 450,
+    },
     ref
   ) => {
     const internalFormRef = useRef<HTMLFormElement>(null)
@@ -151,22 +164,28 @@ const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
       [renderHeader, handleSubmit, content, grids]
     )
 
+    const dialogProps: DialogProps = {
+      open: popupType === 'modal' ? true : open || false,
+      onClose: popupType === 'modal' ? undefined : onClose,
+      fullWidth: true,
+      maxWidth: false,
+      PaperProps: {
+        style: {
+          width: `${width}px`,
+        },
+      },
+    }
+
     if (popupType === 'modal') {
       return (
-        <Dialog
-          open={true}
-          fullWidth
-          maxWidth="sm"
-          disableEscapeKeyDown
-          hideBackdrop
-        >
+        <Dialog {...dialogProps} disableEscapeKeyDown hideBackdrop>
           {renderContent}
         </Dialog>
       )
     }
 
     return (
-      <Dialog open={open || false} onClose={onClose} fullWidth maxWidth="sm">
+      <Dialog {...dialogProps}>
         {onClose && (
           <IconButton
             size="small"

package/src/components/Icons/ShowHideEye.tsx

@@ -1,10 +1,16 @@
-// src/components/Icons/ShowHideEyeIcon.tsx
+'use client'
 
 import React from 'react'
 import VisibilityIcon from '@mui/icons-material/Visibility'
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 
-const ShowHideEyeIcon = ({ visible }: { visible: boolean }) => {
+interface ShowHideEyeIconProps {
+  visible?: boolean
+}
+
+const ShowHideEyeIcon: React.FC<ShowHideEyeIconProps> = ({
+  visible = false,
+}) => {
   const iconStyle = { color: 'black' }
   return visible ? (
     <VisibilityIcon style={iconStyle} />

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,18 +44,32 @@ 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) {
+      const result = await get('activeTabValues', 'tabStore', 'client')
+      if (
+        result &&
+        typeof result === 'object' &&
+        'type' in result &&
+        result.type === 'json' &&
+        'value' in result &&
+        typeof result.value === 'object'
+      ) {
         setActiveTabValues(
-          (result as JSONValue).value as Record<string, ActiveTabValue | null>
+          result.value as Record<string, ActiveTabValue | null>
         )
       }
     }
@@ -111,9 +78,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,18 +93,19 @@ function HorizontalVariant({
       [navname ?? '']: { tabId: newValue },
     }
     setActiveTabValues(updatedActiveTabValues)
-    // Store updated values in cache with 30 minutes expiration
     await set(
       'activeTabValues',
+      'tabStore',
       { type: 'json', value: updatedActiveTabValues } as JSONValue,
-      new Date(Date.now() + 30 * 60 * 1000),
       'client'
     )
   }
 
   /**
-   * 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 +124,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 +151,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>
   )
 }