goobs-frontend 0.7.58 → 0.7.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.7.58",
+  "version": "0.7.60",
   "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.2",
+    "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/ConfirmationCodeInput/index.tsx

@@ -82,7 +82,7 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
         'verificationCode',
         combinedCode,
         new Date(Date.now() + 3600000),
-        'memory'
+        'client'
       )
     }
   }, [combinedCode, isValid])

package/src/components/Content/Structure/link/useLink.tsx

@@ -55,11 +55,12 @@ const useLink = (grid: {
         ...cellconfig,
       },
       component: (
-        <Link key={`link-${index}`} href={link} passHref {...restProps}>
+        <Link key={`link-${index}`} href={link} passHref>
           <Typography
             text={text}
             fontvariant={fontvariant}
             fontcolor={fontcolor}
+            {...restProps}
           />
         </Link>
       ),

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