goobs-frontend 0.7.61 → 0.7.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.61",
+  "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

@@ -59,10 +59,17 @@ function HorizontalVariant({
      * 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>
         )
       }
     }
@@ -88,8 +95,8 @@ function HorizontalVariant({
     setActiveTabValues(updatedActiveTabValues)
     await set(
       'activeTabValues',
+      'tabStore',
       { type: 'json', value: updatedActiveTabValues } as JSONValue,
-      new Date(Date.now() + 30 * 60 * 1000),
       'client'
     )
   }

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/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>
     )
   }