goobs-frontend 0.7.61 → 0.7.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.61",
+  "version": "0.7.64",
   "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/hook/useHelperFooter.tsx

@@ -0,0 +1,251 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { get } from 'goobs-cache'
+
+/**
+ * Represents the structure of a helper footer message.
+ * @interface HelperFooterMessage
+ */
+export interface HelperFooterMessage {
+  /** The status of the message, either 'error' or 'success'. */
+  status: 'error' | 'success'
+  /** A message describing the status. */
+  statusMessage: string
+  /** A message to be displayed to the user. */
+  spreadMessage: string
+  /** A number indicating the priority of the message. Lower numbers indicate higher priority. */
+  spreadMessagePriority: number
+  /** The name of the form associated with this message. */
+  formname: string
+  /** Indicates whether this message is required to be addressed. */
+  required: boolean
+}
+
+/**
+ * A type definition for the interval ID returned by setInterval.
+ */
+type IntervalID = ReturnType<typeof setInterval>
+
+/**
+ * A custom hook for managing helper footer messages and form validation.
+ *
+ * @param {string} [initialFormname] - The initial name of the form to fetch helper footers for.
+ * @returns {Object} An object containing the current error message, form validity state, and functions to update and fetch form validation.
+ */
+const useHelperFooter = (initialFormname?: string) => {
+  /**
+   * State for storing the current error message.
+   */
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined
+  )
+
+  /**
+   * State for storing the current form validity.
+   */
+  const [isFormValid, setIsFormValid] = useState<boolean>(true)
+
+  /**
+   * State for storing the current helper footers.
+   */
+  const [helperFooters, setHelperFooters] = useState<HelperFooterMessage[]>([])
+
+  /**
+   * Ref for storing the previous helper footers to compare against.
+   */
+  const prevHelperFooters = useRef<HelperFooterMessage[]>([])
+
+  /**
+   * Ref for storing the previous error message to compare against.
+   */
+  const prevErrorMessage = useRef<string | undefined>(undefined)
+
+  /**
+   * Ref for storing the previous form validity to compare against.
+   */
+  const prevIsFormValid = useRef<boolean>(true)
+
+  /**
+   * Ref for storing the interval ID for periodic helper footer fetching.
+   */
+  const intervalIdRef = useRef<IntervalID | null>(null)
+
+  /**
+   * Fetches helper footer messages from the cache.
+   *
+   * @param {string} [formname] - The name of the form to fetch helper footers for.
+   * @returns {Promise<HelperFooterMessage[]>} A promise that resolves to an array of HelperFooterMessage objects.
+   */
+  const fetchHelperFooters = useCallback(
+    async (formname?: string): Promise<HelperFooterMessage[]> => {
+      const currentFormname = formname || initialFormname
+      if (!currentFormname) {
+        return []
+      }
+
+      const helperFooterResult = await get(
+        'helperfooter',
+        currentFormname,
+        'client'
+      )
+
+      if (
+        helperFooterResult &&
+        typeof helperFooterResult === 'object' &&
+        'type' in helperFooterResult &&
+        helperFooterResult.type === 'json' &&
+        'value' in helperFooterResult &&
+        typeof helperFooterResult.value === 'object' &&
+        helperFooterResult.value !== null
+      ) {
+        const fetchedHelperFooters = 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 (
+          JSON.stringify(fetchedHelperFooters) !==
+          JSON.stringify(prevHelperFooters.current)
+        ) {
+          setHelperFooters(fetchedHelperFooters)
+          prevHelperFooters.current = fetchedHelperFooters
+        }
+        return fetchedHelperFooters
+      }
+
+      if (helperFooters.length > 0) {
+        setHelperFooters([])
+        prevHelperFooters.current = []
+      }
+      return []
+    },
+    [initialFormname, helperFooters]
+  )
+
+  /**
+   * Updates the form validation state based on the fetched helper footers.
+   *
+   * @param {string} [formname] - The name of the form to update validation for.
+   * @returns {Promise<boolean>} A promise that resolves to a boolean indicating whether the form is valid.
+   */
+  const updateFormValidation = useCallback(
+    async (formname?: string): Promise<boolean> => {
+      const fetchedHelperFooters = await fetchHelperFooters(formname)
+
+      if (fetchedHelperFooters.length === 0) {
+        setErrorMessage(undefined)
+        setIsFormValid(true)
+        return true
+      }
+
+      const errorFooters = fetchedHelperFooters.filter(
+        footer => footer.status === 'error' && footer.required
+      )
+
+      if (errorFooters.length > 0) {
+        const highestPriorityError = errorFooters.reduce((prev, current) =>
+          prev.spreadMessagePriority < current.spreadMessagePriority
+            ? prev
+            : current
+        )
+        setErrorMessage(highestPriorityError.spreadMessage)
+        setIsFormValid(false)
+        return false
+      }
+
+      setErrorMessage(undefined)
+      setIsFormValid(true)
+      return true
+    },
+    [fetchHelperFooters]
+  )
+
+  /**
+   * Effect to run form validation when the initial form name changes.
+   */
+  useEffect(() => {
+    void updateFormValidation()
+  }, [initialFormname, updateFormValidation])
+
+  /**
+   * Effect to set up periodic helper footer fetching.
+   */
+  useEffect(() => {
+    if (initialFormname) {
+      const fetchAndUpdateHelperFooters = async () => {
+        await updateFormValidation(initialFormname)
+      }
+
+      void fetchAndUpdateHelperFooters()
+      intervalIdRef.current = setInterval(fetchAndUpdateHelperFooters, 1000)
+
+      return () => {
+        if (intervalIdRef.current) {
+          clearInterval(intervalIdRef.current)
+        }
+      }
+    }
+  }, [initialFormname, updateFormValidation])
+
+  /**
+   * Effect to update refs when error message or form validity changes.
+   */
+  useEffect(() => {
+    if (
+      errorMessage !== prevErrorMessage.current ||
+      isFormValid !== prevIsFormValid.current
+    ) {
+      prevErrorMessage.current = errorMessage
+      prevIsFormValid.current = isFormValid
+    }
+  }, [errorMessage, isFormValid])
+
+  /**
+   * Memoized helper footers to prevent unnecessary re-renders.
+   */
+  const memoizedHelperFooters = useMemo(() => helperFooters, [helperFooters])
+
+  /**
+   * Memoized return value of the hook to prevent unnecessary re-renders.
+   */
+  const returnValue = useMemo(
+    () => ({
+      errorMessage,
+      isFormValid,
+      updateFormValidation,
+      fetchHelperFooters,
+      helperFooters: memoizedHelperFooters,
+    }),
+    [
+      errorMessage,
+      isFormValid,
+      updateFormValidation,
+      fetchHelperFooters,
+      memoizedHelperFooters,
+    ]
+  )
+
+  return returnValue
+}
+
+export default useHelperFooter

package/src/components/Button/index.tsx

@@ -1,30 +1,32 @@
-'use client'
-
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useMemo, 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 useHelperFooter from './hook/useHelperFooter'
 
+/**
+ * Defines the possible alignment options for the button text.
+ */
 export type ButtonAlignment = 'left' | 'center' | 'right'
 
-export interface HelperFooterMessage {
-  status: 'error' | 'success'
-  statusMessage: string
-  spreadMessage: string
-  spreadMessagePriority: number
-  formname: string
-  required: boolean
-}
-
+/**
+ * Interface for the CustomButton component props.
+ * Extends ButtonProps from Material-UI, omitting 'color' and 'variant'.
+ */
 export interface CustomButtonProps
   extends Omit<ButtonProps, 'color' | 'variant'> {
+  /** The text to display on the button */
   text?: string
+  /** The background color of the button */
   backgroundcolor?: string
+  /** The outline color of the button */
   outlinecolor?: string
+  /** The font color of the button text */
   fontcolor?: string
+  /** The alignment of the button text */
   fontlocation?: ButtonAlignment
+  /** The variant of the font to use for the button text */
   fontvariant?:
     | 'arapeyh1'
     | 'arapeyh2'
@@ -53,18 +55,32 @@ export interface CustomButtonProps
     | 'merriparagraph'
     | 'merrihelperheader'
     | 'merrihelperfooter'
+  /** The icon to display on the button */
   icon?: React.ReactNode | false
+  /** The color of the icon */
   iconcolor?: string
+  /** The size of the icon */
   iconsize?: string
+  /** The location of the icon relative to the text */
   iconlocation?: 'left' | 'top' | 'right'
+  /** The variant of the button */
   variant?: 'text' | 'outlined' | 'contained'
+  /** The function to call when the button is clicked */
   onClick?: () => void
-  helperfooter?: HelperFooterMessage
+  /** The width of the button */
   width?: string
+  /** The name of the form associated with this button */
   formname?: string
+  /** The name attribute of the button */
   name?: string
 }
 
+/**
+ * CustomButton component that extends Material-UI's Button with additional styling and functionality.
+ *
+ * @param props - The props for the CustomButton component
+ * @returns A React functional component
+ */
 const CustomButton: React.FC<CustomButtonProps> = props => {
   const {
     text,
@@ -85,78 +101,15 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
     width,
   } = 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 errorFooters = relevantFooters.filter(
-        footer => footer?.status === 'error'
-      )
+  const { errorMessage, isFormValid, updateFormValidation } =
+    useHelperFooter(formname)
 
-      const emptyRequiredFields = relevantFooters.filter(
-        footer =>
-          footer?.required && (!footer.status || footer.status === 'error')
-      )
-
-      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 {
-      setErrorMessage(undefined)
-      setIsFormValid(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({})
-      }
-    }
-
-    fetchHelperFooter()
-  }, [formname])
-
-  useEffect(() => {
-    updateFormValidation()
-  }, [updateFormValidation])
-
-  const renderIcon = () => {
+  /**
+   * Renders the icon for the button based on the provided props.
+   *
+   * @returns {React.ReactNode} The rendered icon or null
+   */
+  const renderIcon = useCallback((): React.ReactNode => {
     if (icon === false) {
       return null
     }
@@ -166,17 +119,80 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
       })
     }
     return <StarIcon style={{ fontSize: iconsize }} />
-  }
+  }, [icon, iconsize])
+
+  /**
+   * Handles the button click event. Prevents default behavior, validates the form,
+   * and calls the onClick prop if the form is valid.
+   *
+   * @param event - The mouse event from clicking the button
+   */
+  const handleButtonClick = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
+      event.preventDefault()
+      const validationResult = await updateFormValidation(formname)
+      if (validationResult && onClick) {
+        onClick()
+      }
+    },
+    [updateFormValidation, onClick, formname]
+  )
 
-  const handleButtonClick = async () => {
-    if (!isFormValid) {
-      return
-    }
+  /**
+   * Memoized style object for the button.
+   */
+  const buttonStyle = useMemo(
+    () => ({
+      minWidth: text ? 'auto' : 'fit-content',
+      paddingLeft: text ? '8px' : '0',
+      paddingRight: text ? '8px' : '0',
+      justifyContent: fontlocation || 'center',
+      backgroundColor: backgroundcolor,
+      border: outlinecolor ? `1px solid ${outlinecolor}` : undefined,
+      color: iconcolor,
+      width: width,
+    }),
+    [text, fontlocation, backgroundcolor, outlinecolor, iconcolor, width]
+  )
 
-    if (onClick) {
-      onClick()
-    }
-  }
+  /**
+   * Memoized content for the button, including icon and text.
+   */
+  const buttonContent = useMemo(
+    () => (
+      <Box display="flex" alignItems="center">
+        {iconlocation === 'left' && renderIcon()}
+        {text && (
+          <Typography
+            fontvariant={fontvariant}
+            fontcolor={fontcolor}
+            text={text}
+          />
+        )}
+        {iconlocation === 'right' && renderIcon()}
+      </Box>
+    ),
+    [iconlocation, renderIcon, text, fontvariant, fontcolor]
+  )
+
+  /**
+   * Memoized error message component that displays when the form is invalid.
+   */
+  const errorMessageComponent = useMemo(
+    () =>
+      !isFormValid && errorMessage ? (
+        <Typography
+          fontvariant="merrihelperfooter"
+          fontcolor={red.main}
+          text={errorMessage}
+          marginTop={0.5}
+          marginBottom={0}
+          align="center"
+          width="100%"
+        />
+      ) : null,
+    [errorMessage, isFormValid]
+  )
 
   return (
     <Box
@@ -193,42 +209,13 @@ const CustomButton: React.FC<CustomButtonProps> = props => {
         type={type}
         name={name}
         onClick={handleButtonClick}
-        style={{
-          minWidth: text ? 'auto' : 'fit-content',
-          paddingLeft: text ? '8px' : '0',
-          paddingRight: text ? '8px' : '0',
-          justifyContent: fontlocation || 'center',
-          backgroundColor: backgroundcolor,
-          border: outlinecolor ? `1px solid ${outlinecolor}` : undefined,
-          color: iconcolor,
-          width: width,
-        }}
+        style={buttonStyle}
       >
-        <Box display="flex" alignItems="center">
-          {iconlocation === 'left' && renderIcon()}
-          {text && (
-            <Typography
-              fontvariant={fontvariant}
-              fontcolor={fontcolor}
-              text={text}
-            />
-          )}
-          {iconlocation === 'right' && renderIcon()}
-        </Box>
+        {buttonContent}
       </Button>
-      {errorMessage && (
-        <Typography
-          fontvariant="merrihelperfooter"
-          fontcolor={red.main}
-          text={errorMessage}
-          marginTop={0.5}
-          marginBottom={0}
-          align="center"
-          width="100%"
-        />
-      )}
+      {errorMessageComponent}
     </Box>
   )
 }
 
-export default CustomButton
+export default React.memo(CustomButton)

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/Structure/button/useButton.tsx

@@ -33,7 +33,6 @@ const useButton = (grid: {
       iconlocation,
       variant,
       onClick,
-      helperfooter,
       columnconfig: itemColumnConfig,
       cellconfig,
       ...restProps
@@ -72,7 +71,6 @@ const useButton = (grid: {
           iconlocation={iconlocation}
           variant={variant}
           onClick={onClick}
-          helperfooter={helperfooter}
           {...restProps}
         />
       ),

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