goobs-frontend 0.7.58 → 0.7.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.58",
+  "version": "0.7.59",
   "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",
@@ -25,29 +25,29 @@
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.15.20",
-    "@mui/material": "^5.15.20",
-    "@types/lodash": "^4.17.5",
-    "goobs-cache": "^1.2.1",
-    "highlight.js": "^11.9.0",
+    "@mui/icons-material": "^5.16.0",
+    "@mui/material": "^5.16.0",
+    "@types/lodash": "^4.17.6",
+    "goobs-cache": "^1.3.1",
+    "highlight.js": "^11.10.0",
     "lodash": "^4.17.21",
-    "next": "14.2.4"
+    "next": "14.2.5"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^14.2.4",
-    "@types/node": "^20.14.9",
-    "@types/react": "18.3.0",
+    "@next/eslint-plugin-next": "^14.2.5",
+    "@types/node": "^20.14.10",
+    "@types/react": "18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.15.0",
-    "@typescript-eslint/parser": "^7.15.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.4",
+    "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "prettier": "^3.3.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.5.2"
+    "typescript": "^5.5.3"
   },
   "files": [
     "src"

package/src/components/Button/index.tsx

@@ -7,46 +7,24 @@ import Typography from '../Typography'
 import { get, JSONValue } from 'goobs-cache'
 import { red } from '../../styles/palette'
 
-/**
- * Defines the possible alignment options for button content.
- */
 export type ButtonAlignment = 'left' | 'center' | 'right'
 
-/**
- * Defines the structure of helper footer messages used for form validation.
- */
 export interface HelperFooterMessage {
-  /** Indicates whether the message represents an error or success state */
   status: 'error' | 'success'
-  /** The message to display in the status area */
   statusMessage: string
-  /** The message to spread across multiple components */
   spreadMessage: string
-  /** Priority of the spread message for determining which message to show */
   spreadMessagePriority: number
-  /** The name of the form this message is associated with */
   formname: string
-  /** Indicates if the field associated with this message is required */
   required: boolean
 }
 
-/**
- * Props for the CustomButton component.
- * Extends ButtonProps from Material-UI, omitting 'color' and 'variant'.
- */
 export interface CustomButtonProps
   extends Omit<ButtonProps, 'color' | 'variant'> {
-  /** Text to display on the button */
   text?: string
-  /** Background color of the button */
   backgroundcolor?: string
-  /** Color of the button's outline */
   outlinecolor?: string
-  /** Color of the button's text */
   fontcolor?: string
-  /** Alignment of the button's text */
   fontlocation?: ButtonAlignment
-  /** Typography variant for the button's text */
   fontvariant?:
     | 'arapeyh1'
     | 'arapeyh2'
@@ -75,32 +53,18 @@ export interface CustomButtonProps
     | 'merriparagraph'
     | 'merrihelperheader'
     | 'merrihelperfooter'
-  /** Icon to display on the button. Set to false to hide the icon */
   icon?: React.ReactNode | false
-  /** Color of the icon */
   iconcolor?: string
-  /** Size of the icon */
   iconsize?: string
-  /** Position of the icon relative to the text */
   iconlocation?: 'left' | 'top' | 'right'
-  /** Style variant of the button */
   variant?: 'text' | 'outlined' | 'contained'
-  /** Function to call when the button is clicked */
   onClick?: () => void
-  /** Helper footer message for form validation */
   helperfooter?: HelperFooterMessage
-  /** Width of the button */
   width?: string
-  /** Name of the form this button is associated with */
   formname?: string
-  /** Name attribute for the button element */
   name?: string
 }
 
-/**
- * CustomButton component renders a customizable button with integrated form validation.
- * It displays error messages based on helper footers and form validation status.
- */
 const CustomButton: React.FC<CustomButtonProps> = props => {
   const {
     text,
@@ -121,24 +85,16 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
     width,
   } = props
 
-  /** State for storing the current error message */
   const [errorMessage, setErrorMessage] = useState<string | undefined>(
     undefined
   )
-  /** State for tracking whether the associated form is valid */
   const [isFormValid, setIsFormValid] = useState<boolean>(true)
-  /** State for storing helper footer messages */
   const [helperFooterValue, setHelperFooterValue] = useState<
     Record<string, HelperFooterMessage>
   >({})
 
-  /**
-   * Updates the form validation status and error message based on helper footers.
-   * This function filters relevant footers, checks for errors and empty required fields,
-   * and updates the error message and form validity accordingly.
-   */
   const updateFormValidation = useCallback(() => {
-    if (formname) {
+    if (formname && helperFooterValue) {
       const relevantFooters = Object.values(helperFooterValue).filter(
         footer => footer?.formname === formname
       )
@@ -168,13 +124,12 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
         setErrorMessage(undefined)
         setIsFormValid(true)
       }
+    } else {
+      setErrorMessage(undefined)
+      setIsFormValid(true)
     }
   }, [formname, helperFooterValue])
 
-  /**
-   * Fetches helper footer data from the cache when formname changes.
-   * This effect runs whenever the formname prop changes.
-   */
   useEffect(() => {
     const fetchHelperFooter = async () => {
       const helperFooterResult = await get('helperFooter', 'client')
@@ -189,28 +144,18 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
             HelperFooterMessage
           >
         )
+      } else {
+        setHelperFooterValue({})
       }
     }
 
     fetchHelperFooter()
   }, [formname])
 
-  /**
-   * Triggers form validation whenever helperFooterValue changes.
-   * This effect ensures that the form validation is updated whenever
-   * the helper footer messages change.
-   */
   useEffect(() => {
     updateFormValidation()
   }, [updateFormValidation])
 
-  /**
-   * Renders the icon element based on the provided icon prop.
-   * If the icon prop is false, it returns null.
-   * If the icon is a valid React element, it clones it with the specified size.
-   * Otherwise, it renders a default StarIcon.
-   * @returns The rendered icon element or null.
-   */
   const renderIcon = () => {
     if (icon === false) {
       return null
@@ -223,10 +168,6 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
     return <StarIcon style={{ fontSize: iconsize }} />
   }
 
-  /**
-   * Handles the button click event.
-   * If the form is valid and an onClick handler is provided, it calls the handler.
-   */
   const handleButtonClick = async () => {
     if (!isFormValid) {
       return

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

@@ -1,172 +1,187 @@
-// File: src/components/PopupForm/index.tsx
 'use client'
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useMemo,
+  useCallback,
+} from 'react'
 import { Close } from '@mui/icons-material'
 import { Dialog, IconButton, Box } from '@mui/material'
 import ContentSection, { ContentSectionProps } from '../../Content'
 import { formContainerStyle } from './../../../styles/Form'
 import { ExtendedTypographyProps } from '../../Content/Structure/typography/useGridTypography'
-import Typography from '../../Typography'
 
 /**
  * Props for the PopupForm component.
+ * @interface PopupFormProps
  */
 export interface PopupFormProps {
-  /** Title of the popup form */
+  /** The title of the popup form */
   title?: string
-  /** Description of the popup form */
+  /** The description of the popup form */
   description?: string
-  /** Boolean to control the open state of the dialog */
-  open: boolean
-  /** Function to call when closing the dialog */
-  onClose: () => void
-  /** ContentSectionProps to render the form content */
+  /** The grid configuration for the form content */
   grids?: ContentSectionProps['grids']
-  /** Optional function to handle form submission */
-  onSubmit?: () => void
-  /** Optional direct content to render */
+  /** Callback function to handle form submission */
+  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void
+  /** Custom content to render inside the form */
   content?: React.ReactNode
+  /** The type of popup to render ('dialog' or 'modal') */
+  popupType: 'dialog' | 'modal'
+  /** Whether the popup is open (only applicable for 'dialog' type) */
+  open?: boolean
+  /** Callback function to handle closing the popup (only applicable for 'dialog' type) */
+  onClose?: () => void
 }
 
 /**
- * PopupForm component renders a popup form with a title, description, and content sections.
- * It uses the ContentSection component to render the form content within a Material-UI Dialog.
- * Handles form submission and displays submitted data internally.
+ * PopupForm Component
+ *
+ * A flexible popup form component that can be rendered as either a dialog or a modal.
+ * It supports custom content, grids, and header configuration.
  *
- * @param props The props for the PopupForm component.
- * @param ref Ref forwarded to the form element.
- * @returns The rendered popup form.
+ * @component
+ * @example
+ * <PopupForm
+ *   title="Login"
+ *   description="Please enter your credentials"
+ *   popupType="dialog"
+ *   open={isOpen}
+ *   onClose={handleClose}
+ *   onSubmit={handleSubmit}
+ *   content={<LoginForm />}
+ * />
  */
 const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
-  ({ title, description, open, onClose, grids, onSubmit, content }, ref) => {
-    const [submittedData, setSubmittedData] = React.useState<
-      Record<string, string>
-    >({})
+  (
+    { title, description, grids, onSubmit, content, popupType, open, onClose },
+    ref
+  ) => {
     const internalFormRef = useRef<HTMLFormElement>(null)
 
+    // Expose the internal form ref to the parent component
     useImperativeHandle(ref, () => internalFormRef.current as HTMLFormElement)
 
     /**
-     * headerGrid contains the grid configuration for the form header.
-     * It includes the title and description as typography items.
+     * Memoized header grid configuration
      */
-    const headerGrid: ContentSectionProps['grids'][0] = {
-      grid: {
-        gridconfig: {
-          gridname: 'formHeader',
-          marginbottom: 1,
-          gridwidth: '100%',
-        },
-      },
-      typography: [
-        {
-          text: title,
-          fontvariant: 'merrih5',
-          fontcolor: 'black',
-          columnconfig: {
-            column: 1,
+    const headerGrid: ContentSectionProps['grids'][0] = useMemo(
+      () => ({
+        grid: {
+          gridconfig: {
             gridname: 'formHeader',
-            columnwidth: '100%',
-            alignment: 'left',
-            marginbottom: 0.5,
+            marginbottom: 1,
+            gridwidth: '100%',
           },
         },
-        {
-          text: description,
-          fontvariant: 'merriparagraph',
-          fontcolor: 'black',
-          columnconfig: {
-            column: 1,
-            gridname: 'formHeader',
-            columnwidth: '100%',
+        typography: [
+          {
+            text: title,
+            fontvariant: 'merrih5',
+            fontcolor: 'black',
+            columnconfig: {
+              row: 1,
+              column: 1,
+              gridname: 'formHeader',
+              columnwidth: '100%',
+              alignment: 'left',
+              marginbottom: 1.5,
+            },
           },
-        },
-      ] as ExtendedTypographyProps[],
-    }
-
-    /** Combine the header grid with the provided content grids */
-    const contentSectionGrids: ContentSectionProps['grids'] = [
-      headerGrid,
-      ...(grids || []),
-    ]
+          {
+            text: description,
+            fontvariant: 'merriparagraph',
+            fontcolor: 'black',
+            columnconfig: {
+              row: 2,
+              column: 1,
+              alignment: 'left',
+              gridname: 'formHeader',
+              columnwidth: '100%',
+            },
+          },
+        ] as ExtendedTypographyProps[],
+      }),
+      [title, description]
+    )
 
     /**
-     * Handles form submission and processes form data internally.
-     * @param event - The form submission event
+     * Handle form submission
+     * @param {React.FormEvent<HTMLFormElement>} event - The form submission event
      */
-    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault()
-      const formData = new FormData(event.currentTarget)
-      const data: Record<string, string> = {}
-
-      formData.forEach((value, key) => {
-        data[key] = value.toString()
-      })
-
-      setSubmittedData(data)
-
-      if (onSubmit) {
-        onSubmit()
-      }
-    }
+    const handleSubmit = useCallback(
+      (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        if (onSubmit) {
+          onSubmit(event)
+        }
+      },
+      [onSubmit]
+    )
 
     /**
-     * Renders the header typography elements
+     * Memoized header render function
      */
-    const renderHeaderTypography = () => {
-      if (Array.isArray(headerGrid.typography)) {
-        return headerGrid.typography.map(
-          (typo: ExtendedTypographyProps, index: number) => (
-            <Typography key={index} {...typo} />
-          )
-        )
-      } else if (headerGrid.typography) {
-        return <Typography {...headerGrid.typography} />
-      }
-      return null
-    }
+    const renderHeader = useMemo(
+      () => <ContentSection grids={[headerGrid]} />,
+      [headerGrid]
+    )
 
-    return (
-      <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
-        <IconButton
-          size="small"
-          onClick={onClose}
-          sx={{
-            position: 'absolute',
-            right: 8,
-            top: 8,
-            color: theme => theme.palette.grey[500],
-          }}
-        >
-          <Close />
-        </IconButton>
+    /**
+     * Memoized content render function
+     */
+    const renderContent = useMemo(
+      () => (
         <Box
           // @ts-ignore
           sx={formContainerStyle}
         >
+          <Box mb={0}>{renderHeader}</Box>
           <form onSubmit={handleSubmit} ref={internalFormRef}>
-            {content ? (
-              <>
-                {renderHeaderTypography()}
-                {content}
-              </>
-            ) : (
-              <ContentSection grids={contentSectionGrids} />
-            )}
+            {React.isValidElement(content)
+              ? React.cloneElement(content as React.ReactElement, {
+                  onSubmit: handleSubmit,
+                })
+              : content || (grids && <ContentSection grids={grids} />)}
           </form>
-          {Object.keys(submittedData).length > 0 && (
-            <Box mt={2}>
-              <Typography fontvariant="merrih6" text="Submitted Data:" />
-              {Object.entries(submittedData).map(([key, value]) => (
-                <Typography
-                  key={key}
-                  fontvariant="merriparagraph"
-                  text={`${key}: ${value}`}
-                />
-              ))}
-            </Box>
-          )}
         </Box>
+      ),
+      [renderHeader, handleSubmit, content, grids]
+    )
+
+    if (popupType === 'modal') {
+      return (
+        <Dialog
+          open={true}
+          fullWidth
+          maxWidth="sm"
+          disableEscapeKeyDown
+          hideBackdrop
+        >
+          {renderContent}
+        </Dialog>
+      )
+    }
+
+    return (
+      <Dialog open={open || false} onClose={onClose} fullWidth maxWidth="sm">
+        {onClose && (
+          <IconButton
+            size="small"
+            onClick={onClose}
+            sx={{
+              position: 'absolute',
+              right: 8,
+              top: 8,
+              color: theme => theme.palette.grey[500],
+            }}
+          >
+            <Close />
+          </IconButton>
+        )}
+        {renderContent}
       </Dialog>
     )
   }

package/src/components/StyledComponent/helperfooter/useHelperFooter.tsx

@@ -1,22 +1,31 @@
 'use client'
 
-import { useCallback } from 'react'
+import { useCallback, useState, useMemo, useRef, useEffect } from 'react'
 import { debounce } from 'lodash'
-import { get, set, StringValue, JSONValue } from 'goobs-cache'
+import React from 'react'
+import { get, set, StringValue } from 'goobs-cache'
 
 /**
- * Validates if the given string is in a valid email format
- * @param {string} email - The email string to validate
- * @returns {boolean} True if the email is valid, false otherwise
+ * Validates if the given string is a valid email format.
+ *
+ * @param {string} email - The email string to validate.
+ * @returns {boolean} True if the email is valid, false otherwise.
  */
 const isValidEmailFormat = (email: string): boolean => {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
-  const result = emailRegex.test(email)
-  return result
+  return emailRegex.test(email)
 }
 
 /**
- * Interface for helper footer messages
+ * Represents a message for the helper footer.
+ *
+ * @interface HelperFooterMessage
+ * @property {('error' | 'success')} status - The status of the message.
+ * @property {string} statusMessage - The detailed status message.
+ * @property {string} spreadMessage - A condensed version of the message for spreading.
+ * @property {number} spreadMessagePriority - The priority of the spread message.
+ * @property {string} formname - The name of the form this message is associated with.
+ * @property {boolean} required - Indicates if the field associated with this message is required.
  */
 export interface HelperFooterMessage {
   status: 'error' | 'success'
@@ -28,12 +37,25 @@ export interface HelperFooterMessage {
 }
 
 /**
- * Custom hook for form validation and helper footer messages
- * @returns {Object} An object containing the validateField function
+ * A custom hook for managing form validation and helper messages.
+ *
+ * @returns {Object} An object containing validation functions and helper footer state.
  */
 export const useHelperFooter = () => {
+  const [helperFooterValue, setHelperFooterValue] = useState<
+    Record<string, HelperFooterMessage>
+  >({})
+  const helperFooterRef = useRef<Record<string, HelperFooterMessage>>({})
+
   /**
-   * Handles generic error creation for form fields
+   * Handles creation of generic error messages for form fields.
+   *
+   * @param {FormData} formData - The form data to validate.
+   * @param {string} name - The name of the form field.
+   * @param {string} label - The label of the form field.
+   * @param {boolean} required - Whether the field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {HelperFooterMessage | undefined} An error message object if there's an error, undefined otherwise.
    */
   const handleGenericErrorCreation = useCallback(
     (
@@ -43,9 +65,10 @@ export const useHelperFooter = () => {
       required: boolean,
       formname: string
     ): HelperFooterMessage | undefined => {
+      console.log(`Handling generic error creation for ${name}`)
       const value = formData.get(name) as string
-
       if (required && (!value || !value.trim())) {
+        console.log(`Error: ${label} is required`)
         return {
           status: 'error',
           statusMessage: `${label} is required. Please enter a ${label.toLowerCase()}.`,
@@ -55,14 +78,19 @@ export const useHelperFooter = () => {
           required,
         }
       }
-
+      console.log(`No error for ${name}`)
       return undefined
     },
     []
   )
 
   /**
-   * Handles email validation and error creation
+   * Handles creation of email-specific error messages.
+   *
+   * @param {FormData} formData - The form data to validate.
+   * @param {boolean} required - Whether the email field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {HelperFooterMessage | undefined} An error or success message object, or undefined if no message is needed.
    */
   const handleEmailErrorCreation = useCallback(
     (
@@ -70,9 +98,10 @@ export const useHelperFooter = () => {
       required: boolean,
       formname: string
     ): HelperFooterMessage | undefined => {
+      console.log('Handling email error creation')
       const email = formData.get('email') as string
-
       if (required && (!email || !email.trim())) {
+        console.log('Error: Email is required')
         return {
           status: 'error',
           statusMessage: 'Please enter an email address.',
@@ -82,12 +111,9 @@ export const useHelperFooter = () => {
           required,
         }
       }
-
-      if (!email) {
-        return undefined
-      }
-
+      if (!email) return undefined
       if (email && !isValidEmailFormat(email)) {
+        console.log('Error: Invalid email format')
         return {
           status: 'error',
           statusMessage: 'Please enter a valid email address.',
@@ -97,7 +123,7 @@ export const useHelperFooter = () => {
           required,
         }
       }
-
+      console.log('Email is valid')
       return {
         status: 'success',
         statusMessage: 'Email is valid.',
@@ -111,25 +137,61 @@ export const useHelperFooter = () => {
   )
 
   /**
-   * Handles password validation and error creation
+   * Handles creation of password-specific error messages and stores the password in the client cache.
+   *
+   * @param {FormData} formData - The form data to validate.
+   * @param {boolean} required - Whether the password field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {HelperFooterMessage | undefined} An error or success message object, or undefined if no message is needed.
    */
   const handlePasswordErrorCreation = useCallback(
-    async (
+    (
       formData: FormData,
       required: boolean,
       formname: string
-    ): Promise<HelperFooterMessage | undefined> => {
+    ): HelperFooterMessage | undefined => {
+      console.log('Handling password error creation')
       const password = formData.get('verifyPassword') as string
+      console.log('Password received:', password)
+
+      const debouncedPasswordStorage = debounce(async () => {
+        console.log('Attempting to store password in goobs-cache client store')
+        try {
+          if (password) {
+            console.log('Setting password in goobs-cache:', password)
+            await set(
+              'verifyPassword',
+              { type: 'string', value: password } as StringValue,
+              new Date(Date.now() + 30 * 60 * 1000),
+              'client'
+            )
+            console.log('Password set operation completed')
+
+            // Immediately retrieve the password to verify it was stored
+            console.log('Attempting to retrieve password from client store')
+            const storedPassword = await get('verifyPassword', 'client')
+            console.log('Raw stored password result:', storedPassword)
+
+            if (storedPassword && storedPassword.value) {
+              console.log(
+                'Immediately retrieved password from client store:',
+                storedPassword.value
+              )
+            } else {
+              console.log('Retrieved password is null or undefined')
+            }
+          } else {
+            console.log('Password is null or empty, not storing in goobs-cache')
+          }
+        } catch (error) {
+          console.error('Error interacting with goobs-cache:', error)
+        }
+      }, 2000)
 
-      // Store the password in the cache
-      await set(
-        'verifyPassword',
-        { type: 'string', value: password } as StringValue,
-        new Date(Date.now() + 30 * 60 * 1000),
-        'client'
-      )
+      debouncedPasswordStorage()
 
       if (required && (!password || !password.trim())) {
+        console.log('Error: Password is required')
         return {
           status: 'error',
           statusMessage: 'Password is required.',
@@ -139,11 +201,7 @@ export const useHelperFooter = () => {
           required,
         }
       }
-
-      if (!password) {
-        return undefined
-      }
-
+      if (!password) return undefined
       const passwordRegex =
         /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
       const passwordComplexityStatus: 'error' | 'success' = passwordRegex.test(
@@ -151,8 +209,8 @@ export const useHelperFooter = () => {
       )
         ? 'success'
         : 'error'
-
       if (passwordComplexityStatus === 'error') {
+        console.log('Error: Invalid password complexity')
         return {
           status: 'error',
           statusMessage:
@@ -163,7 +221,7 @@ export const useHelperFooter = () => {
           required,
         }
       }
-
+      console.log('Password meets all requirements')
       return {
         status: 'success',
         statusMessage: 'Password meets all requirements.',
@@ -177,7 +235,12 @@ export const useHelperFooter = () => {
   )
 
   /**
-   * Handles password confirmation validation and error creation
+   * Handles creation of confirm password error messages by comparing with the stored password.
+   *
+   * @param {FormData} formData - The form data to validate.
+   * @param {boolean} required - Whether the confirm password field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {Promise<HelperFooterMessage | undefined>} A promise that resolves to an error or success message object, or undefined if no message is needed.
    */
   const handleConfirmPasswordErrorCreation = useCallback(
     async (
@@ -185,9 +248,12 @@ export const useHelperFooter = () => {
       required: boolean,
       formname: string
     ): Promise<HelperFooterMessage | undefined> => {
+      console.log('Handling confirm password error creation')
       const confirmPassword = formData.get('confirmPassword') as string
+      console.log('Confirm password received:', confirmPassword)
 
       if (required && (!confirmPassword || !confirmPassword.trim())) {
+        console.log('Error: Password confirmation is required')
         return {
           status: 'error',
           statusMessage: 'Please confirm your password.',
@@ -197,23 +263,38 @@ export const useHelperFooter = () => {
           required,
         }
       }
+      if (!confirmPassword) return undefined
 
-      if (!confirmPassword) {
-        return undefined
+      console.log(
+        'Attempting to retrieve verify password from goobs-cache client store'
+      )
+      let verifyPasswordResult
+      try {
+        verifyPasswordResult = await get('verifyPassword', 'client')
+        console.log('Retrieved verify password result:', verifyPasswordResult)
+      } catch (error) {
+        console.error('Error retrieving password from goobs-cache:', error)
       }
 
-      const verifyPasswordResult = await get('verifyPassword', 'client')
       let verifyPassword: string | undefined
-
       if (
         verifyPasswordResult &&
         typeof verifyPasswordResult === 'object' &&
-        'value' in verifyPasswordResult
+        'value' in verifyPasswordResult &&
+        verifyPasswordResult.value &&
+        typeof verifyPasswordResult.value === 'object' &&
+        'value' in verifyPasswordResult.value
       ) {
-        verifyPassword = (verifyPasswordResult as StringValue).value
+        verifyPassword = verifyPasswordResult.value.value
+        console.log('Verify password from client store:', verifyPassword)
+      } else {
+        console.log(
+          'Verify password not found in client store or in unexpected format'
+        )
       }
 
       if (!verifyPassword) {
+        console.log('Error: Password not set')
         return {
           status: 'error',
           statusMessage: 'Please enter your password first.',
@@ -225,6 +306,7 @@ export const useHelperFooter = () => {
       }
 
       if (confirmPassword !== verifyPassword) {
+        console.log('Error: Passwords do not match')
         return {
           status: 'error',
           statusMessage: 'Passwords do not match.',
@@ -235,6 +317,7 @@ export const useHelperFooter = () => {
         }
       }
 
+      console.log('Passwords match')
       return {
         status: 'success',
         statusMessage: 'Passwords match.',
@@ -248,7 +331,12 @@ export const useHelperFooter = () => {
   )
 
   /**
-   * Handles phone number validation and error creation
+   * Handles creation of phone number error messages.
+   *
+   * @param {FormData} formData - The form data to validate.
+   * @param {boolean} required - Whether the phone number field is required.
+   * @param {string} formname - The name of the form.
+   * @returns {HelperFooterMessage | undefined} An error or success message object, or undefined if no message is needed.
    */
   const handlePhoneNumberErrorCreation = useCallback(
     (
@@ -256,9 +344,10 @@ export const useHelperFooter = () => {
       required: boolean,
       formname: string
     ): HelperFooterMessage | undefined => {
+      console.log('Handling phone number error creation')
       const phoneNumber = formData.get('phoneNumber') as string
-
       if (required && (!phoneNumber || !phoneNumber.trim())) {
+        console.log('Error: Phone number is required')
         return {
           status: 'error',
           statusMessage:
@@ -269,18 +358,14 @@ export const useHelperFooter = () => {
           required,
         }
       }
-
-      if (!phoneNumber) {
-        return undefined
-      }
-
+      if (!phoneNumber) return undefined
       const digitsOnly = phoneNumber.replace(/[^\d]/g, '')
       const length = digitsOnly.length
-
       if (
         (length === 10 && !digitsOnly.startsWith('1')) ||
         (length === 11 && digitsOnly.startsWith('1'))
       ) {
+        console.log('Phone number is valid')
         return {
           status: 'success',
           statusMessage: 'Phone number is valid.',
@@ -290,6 +375,7 @@ export const useHelperFooter = () => {
           required,
         }
       } else {
+        console.log('Error: Invalid phone number format')
         return {
           status: 'error',
           statusMessage:
@@ -305,7 +391,13 @@ export const useHelperFooter = () => {
   )
 
   /**
-   * Validates a form field and updates the helper footer messages
+   * Validates a specific field in the form.
+   *
+   * @param {string} name - The name of the field to validate.
+   * @param {FormData} formData - The form data to validate.
+   * @param {string} label - The label of the field.
+   * @param {boolean} required - Whether the field is required.
+   * @param {string} formname - The name of the form.
    */
   const validateField = useCallback(
     (
@@ -315,10 +407,9 @@ export const useHelperFooter = () => {
       required: boolean,
       formname: string
     ) => {
-      const debouncedValidation = debounce(async () => {
+      console.log(`Validating field: ${name}`)
+      const validation = () => {
         let validationResult: HelperFooterMessage | undefined
-
-        // Determine which validation function to use based on the field name
         switch (name) {
           case 'email':
             validationResult = handleEmailErrorCreation(
@@ -328,19 +419,22 @@ export const useHelperFooter = () => {
             )
             break
           case 'verifyPassword':
-            validationResult = await handlePasswordErrorCreation(
+            validationResult = handlePasswordErrorCreation(
               formData,
               required,
               formname
             )
             break
           case 'confirmPassword':
-            validationResult = await handleConfirmPasswordErrorCreation(
+            handleConfirmPasswordErrorCreation(
               formData,
               required,
               formname
-            )
-            break
+            ).then(result => {
+              validationResult = result
+              updateHelperFooter(name, validationResult)
+            })
+            return
           case 'phoneNumber':
             validationResult = handlePhoneNumberErrorCreation(
               formData,
@@ -358,33 +452,10 @@ export const useHelperFooter = () => {
             )
         }
 
-        // Update the helper footer messages in the cache
-        const helperFooterResult = await get('helperFooter', 'client')
-        let currentHelperFooter: Record<string, HelperFooterMessage> = {}
-        if (
-          helperFooterResult &&
-          typeof helperFooterResult === 'object' &&
-          'value' in helperFooterResult
-        ) {
-          currentHelperFooter = (helperFooterResult as JSONValue)
-            .value as Record<string, HelperFooterMessage>
-        }
-
-        if (validationResult) {
-          currentHelperFooter[name] = validationResult
-        } else {
-          delete currentHelperFooter[name]
-        }
-
-        await set(
-          'helperFooter',
-          { type: 'json', value: currentHelperFooter } as JSONValue,
-          new Date(Date.now() + 30 * 60 * 1000), // 30 minutes expiration
-          'client'
-        )
-      }, 300)
+        updateHelperFooter(name, validationResult)
+      }
 
-      debouncedValidation()
+      validation()
     },
     [
       handleEmailErrorCreation,
@@ -395,7 +466,72 @@ export const useHelperFooter = () => {
     ]
   )
 
-  return {
-    validateField,
+  const updateHelperFooter = (
+    name: string,
+    validationResult: HelperFooterMessage | undefined
+  ) => {
+    if (validationResult) {
+      helperFooterRef.current = {
+        ...helperFooterRef.current,
+        [name]: validationResult,
+      }
+    } else {
+      helperFooterRef.current = Object.fromEntries(
+        Object.entries(helperFooterRef.current).filter(([key]) => key !== name)
+      )
+    }
+
+    console.log('Updated helperFooterRef:', helperFooterRef.current)
+    setHelperFooterValue({ ...helperFooterRef.current })
+    console.log('Helper footer updated in state')
+  }
+
+  const validateRequiredField = useCallback(
+    (required: boolean, formname: string, name: string, label: string) => {
+      console.log('validateRequiredField: Starting', {
+        required,
+        formname,
+        name,
+        label,
+      })
+      if (required && formname && name && label) {
+        console.log('validateRequiredField: Validating required field')
+        const emptyFormData = new FormData()
+        emptyFormData.append(name, '')
+        validateField(name, emptyFormData, label, required, formname)
+      } else {
+        console.log(
+          'validateRequiredField: Not validating (missing required props)'
+        )
+      }
+    },
+    [validateField]
+  )
+
+  const useShowErrorEffect = (
+    formSubmitted: boolean,
+    hasInput: boolean,
+    isFocused: boolean,
+    setShowError: React.Dispatch<React.SetStateAction<boolean>>
+  ) => {
+    useEffect(() => {
+      const showError = formSubmitted || (hasInput && !isFocused)
+      console.log('useShowErrorEffect: Setting showError to', showError, {
+        formSubmitted,
+        hasInput,
+        isFocused,
+      })
+      setShowError(showError)
+    }, [formSubmitted, hasInput, isFocused, setShowError])
   }
+
+  return useMemo(
+    () => ({
+      validateField,
+      validateRequiredField,
+      helperFooterValue,
+      useShowErrorEffect,
+    }),
+    [validateField, validateRequiredField, helperFooterValue]
+  )
 }

package/src/components/StyledComponent/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { Box, InputLabel, OutlinedInput, styled } from '@mui/material'
 import { useDropdown } from './hooks/useDropdown'
 import { usePhoneNumber } from './hooks/usePhoneNumber'
@@ -14,13 +14,7 @@ import {
   HelperFooterMessage,
 } from './helperfooter/useHelperFooter'
 import labelStyles from '../../styles/StyledComponent/Label'
-import {
-  useHelperFooterEffect,
-  useHasInputEffect,
-  usePreventAutocompleteEffect,
-  useValidateRequiredEffect,
-  useShowErrorEffect,
-} from './useEffects'
+import { useHasInputEffect, usePreventAutocompleteEffect } from './useEffects'
 
 /**
  * Props interface for the StyledComponent
@@ -118,10 +112,16 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     'aria-describedby': ariaDescribedBy,
   } = props
 
-  const { validateField } = useHelperFooter()
-  const [helperFooterValue, setHelperFooterValue] = useState<
-    Record<string, HelperFooterMessage>
-  >({})
+  console.log('StyledComponent: Initializing with props', {
+    name,
+    label,
+    required,
+    formname,
+    formSubmitted,
+  })
+
+  const { validateField, validateRequiredField, helperFooterValue } =
+    useHelperFooter()
   const [isFocused, setIsFocused] = useState(false)
   const [hasInput, setHasInput] = useState(false)
   const [showError, setShowError] = useState(false)
@@ -142,13 +142,25 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
   } = useSplitButton(props)
 
   // useEffect hooks
-  useHelperFooterEffect(setHelperFooterValue)
   useHasInputEffect(value, valuestatus, setHasInput)
   usePreventAutocompleteEffect(inputRefInternal)
-  useValidateRequiredEffect(required, formname, name, label)
-  useShowErrorEffect(formSubmitted, hasInput, isFocused, setShowError)
+
+  useEffect(() => {
+    if (required && formname && name && label) {
+      validateRequiredField(required, formname, name, label)
+    }
+  }, [required, formname, name, label, validateRequiredField])
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowError(formSubmitted || hasInput)
+    }, 1000)
+
+    return () => clearTimeout(timer)
+  }, [formSubmitted, hasInput])
 
   const currentHelperFooter = name ? helperFooterValue[name] : undefined
+  console.log('StyledComponent: Current helper footer', currentHelperFooter)
 
   /**
    * Handle the change event of the input element.
@@ -157,6 +169,11 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
   const handleChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
+    console.log('StyledComponent: handleChange called', {
+      name: e.target.name,
+      value: e.target.value,
+    })
+
     if (componentvariant === 'phonenumber') {
       handlePhoneNumberChange(e)
     } else if (componentvariant === 'splitbutton') {
@@ -170,6 +187,12 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     const formData = new FormData()
     formData.append(e.target.name, e.target.value)
     if (name && label && formname) {
+      console.log('StyledComponent: Calling validateField', {
+        name,
+        label,
+        required,
+        formname,
+      })
       validateField(name, formData, label, required, formname)
     }
   }
@@ -178,6 +201,7 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
    * Handle the focus event of the input element.
    */
   const handleFocus = () => {
+    console.log('StyledComponent: handleFocus called')
     setIsFocused(true)
   }
 
@@ -185,8 +209,15 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
    * Handle the blur event of the input element.
    */
   const handleBlur = () => {
+    console.log('StyledComponent: handleBlur called')
     setIsFocused(false)
     if (name && label && !hasInput && formname) {
+      console.log('StyledComponent: Calling validateField on blur', {
+        name,
+        label,
+        required,
+        formname,
+      })
       const formData = new FormData()
       formData.append(name, '')
       validateField(name, formData, label, required, formname)
@@ -213,6 +244,14 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     hasInput ||
     componentvariant === 'phonenumber'
 
+  console.log('StyledComponent: Rendering', {
+    name,
+    showError,
+    hasHelperFooter: !!currentHelperFooter,
+    helperFooterStatus: currentHelperFooter?.status,
+    helperFooterMessage: currentHelperFooter?.statusMessage,
+  })
+
   return (
     <Box
       sx={{

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

@@ -1,76 +1,54 @@
 import React, { useEffect } from 'react'
-import { get, JSONValue } from 'goobs-cache'
-import {
-  HelperFooterMessage,
-  useHelperFooter,
-} from '../helperfooter/useHelperFooter'
-
-export const useHelperFooterEffect = (
-  setHelperFooterValue: React.Dispatch<
-    React.SetStateAction<Record<string, HelperFooterMessage>>
-  >
-) => {
-  useEffect(() => {
-    const fetchHelperFooter = async () => {
-      const result = await get('helperFooter', 'client')
-      if (result && typeof result === 'object' && 'value' in result) {
-        setHelperFooterValue(
-          (result as JSONValue).value as Record<string, HelperFooterMessage>
-        )
-      }
-    }
-    fetchHelperFooter()
-  }, [setHelperFooterValue])
-}
 
+/**
+ * Custom hook that tracks whether an input field has a value or a specific status.
+ *
+ * @param {string | undefined} value - The current value of the input field.
+ * @param {boolean | undefined} valuestatus - A boolean status associated with the input field.
+ * @param {React.Dispatch<React.SetStateAction<boolean>>} setHasInput - State setter function to update the hasInput state.
+ *
+ * @example
+ * const [hasInput, setHasInput] = useState(false);
+ * useHasInputEffect(inputValue, inputStatus, setHasInput);
+ */
 export const useHasInputEffect = (
   value: string | undefined,
   valuestatus: boolean | undefined,
   setHasInput: React.Dispatch<React.SetStateAction<boolean>>
 ) => {
   useEffect(() => {
-    setHasInput(!!value || !!valuestatus)
+    const hasInput = !!value || !!valuestatus
+    console.log('useHasInputEffect: Setting hasInput to', hasInput)
+    setHasInput(hasInput)
   }, [value, valuestatus, setHasInput])
 }
 
+/**
+ * Custom hook that prevents autocomplete, autocorrect, autocapitalize, and spellcheck on an input field.
+ * This is particularly useful for password fields or other sensitive inputs.
+ *
+ * @param {React.RefObject<HTMLInputElement>} inputRefInternal - React ref object for the input element.
+ *
+ * @example
+ * const inputRef = useRef<HTMLInputElement>(null);
+ * usePreventAutocompleteEffect(inputRef);
+ * // In your JSX:
+ * <input ref={inputRef} ... />
+ */
 export const usePreventAutocompleteEffect = (
   inputRefInternal: React.RefObject<HTMLInputElement>
 ) => {
   useEffect(() => {
+    console.log('usePreventAutocompleteEffect: Starting effect')
     const input = inputRefInternal.current
     if (input) {
+      console.log('usePreventAutocompleteEffect: Setting input attributes')
       input.setAttribute('autocomplete', 'new-password')
       input.setAttribute('autocorrect', 'off')
       input.setAttribute('autocapitalize', 'none')
       input.setAttribute('spellcheck', 'false')
+    } else {
+      console.log('usePreventAutocompleteEffect: Input ref is null')
     }
   }, [inputRefInternal])
 }
-
-export const useValidateRequiredEffect = (
-  required: boolean | undefined,
-  formname: string | undefined,
-  name: string | undefined,
-  label: string | undefined
-) => {
-  const { validateField } = useHelperFooter()
-
-  useEffect(() => {
-    if (required && formname && name && label) {
-      const emptyFormData = new FormData()
-      emptyFormData.append(name, '')
-      validateField(name, emptyFormData, label, required, formname)
-    }
-  }, [required, formname, name, label, validateField])
-}
-
-export const useShowErrorEffect = (
-  formSubmitted: boolean,
-  hasInput: boolean,
-  isFocused: boolean,
-  setShowError: React.Dispatch<React.SetStateAction<boolean>>
-) => {
-  useEffect(() => {
-    setShowError(formSubmitted || (hasInput && !isFocused))
-  }, [formSubmitted, hasInput, isFocused, setShowError])
-}