goobs-frontend 0.7.57 → 0.7.59

package/package.json

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

@@ -4,12 +4,16 @@ import { Input, Box } from '@mui/material'
 import { useCodeConfirmation } from './utils/useCodeConfirmation'
 import { columnconfig } from '../../components/Grid'
 import { red, green } from '../../styles/palette'
+import { set } from 'goobs-cache'
 
 export interface ConfirmationCodeInputsProps {
   identifier?: string
   columnconfig?: columnconfig
   isValid: boolean
   codeLength?: number
+  'aria-label'?: string
+  'aria-required'?: boolean
+  'aria-invalid'?: boolean
 }
 
 /**
@@ -21,12 +25,17 @@ export interface ConfirmationCodeInputsProps {
 const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
   codeLength = 6,
   isValid,
+  'aria-label': ariaLabel,
+  'aria-required': ariaRequired,
+  'aria-invalid': ariaInvalid,
   ...props
 }) => {
-  const { handleCodeChange, handleKeyDown } = useCodeConfirmation({
-    codeLength,
-    isValid,
-  })
+  const { handleCodeChange, handleKeyDown, combinedCode } = useCodeConfirmation(
+    {
+      codeLength,
+      isValid,
+    }
+  )
 
   /**
    * handleChange function is called when the value of an input field changes.
@@ -63,8 +72,29 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
     handleKeyDown(event, index)
   }
 
+  /**
+   * useEffect hook is used to set the verification code into an atom using goobs-cache.
+   * It sets the code whenever the combinedCode changes and the code is valid.
+   */
+  React.useEffect(() => {
+    if (isValid) {
+      set(
+        'verificationCode',
+        combinedCode,
+        new Date(Date.now() + 3600000),
+        'memory'
+      )
+    }
+  }, [combinedCode, isValid])
+
   return (
-    <Box display="flex" flexDirection="row" alignItems="center">
+    <Box
+      display="flex"
+      flexDirection="row"
+      alignItems="center"
+      role="group"
+      aria-label={ariaLabel || 'Confirmation Code'}
+    >
       <Box display="flex" gap={1}>
         {Array.from({ length: codeLength }, (_, index) => (
           <Input
@@ -72,6 +102,9 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
             name={`code${index + 1}`}
             inputProps={{
               maxLength: 1,
+              'aria-label': `Code Digit ${index + 1}`,
+              'aria-required': ariaRequired,
+              'aria-invalid': ariaInvalid,
             }}
             sx={{
               border: '1px solid',
@@ -100,6 +133,8 @@ const ConfirmationCodeInputs: React.FC<ConfirmationCodeInputsProps> = ({
         borderRadius="50%"
         bgcolor={isValid ? green.main : red.main}
         ml={2}
+        role="status"
+        aria-label={isValid ? 'Code is valid' : 'Code is invalid'}
       />
     </Box>
   )

package/src/components/Content/Structure/styledcomponent/useStyledComponent.tsx

@@ -42,9 +42,6 @@ const useStyledComponent = (grid: {
       label,
       shrunklabellocation,
       value,
-      onChange,
-      defaultValue,
-      inputRef,
       columnconfig: itemColumnConfig,
       valuestatus,
       cellconfig,
@@ -88,9 +85,6 @@ const useStyledComponent = (grid: {
           label={label}
           shrunklabellocation={shrunklabellocation}
           value={value}
-          onChange={onChange}
-          defaultValue={defaultValue}
-          inputRef={inputRef}
           valuestatus={valuestatus}
           required={required}
           {...restProps}

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

@@ -1,150 +1,187 @@
 '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 */
-  grids: ContentSectionProps['grids']
-  /** Optional function to handle form submission */
-  onSubmit?: () => void
+  /** The grid configuration for the form content */
+  grids?: ContentSectionProps['grids']
+  /** 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 }, 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)
+    const handleSubmit = useCallback(
+      (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+        if (onSubmit) {
+          onSubmit(event)
+        }
+      },
+      [onSubmit]
+    )
 
-      if (onSubmit) {
-        onSubmit()
-      }
-    }
+    /**
+     * Memoized header render function
+     */
+    const renderHeader = useMemo(
+      () => <ContentSection grids={[headerGrid]} />,
+      [headerGrid]
+    )
 
-    return (
-      <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
-        {/* Close button */}
-        <IconButton
-          size="small"
-          onClick={onClose}
-          sx={{
-            position: 'absolute',
-            right: 8,
-            top: 8,
-            color: theme => theme.palette.grey[500],
-          }}
-        >
-          <Close />
-        </IconButton>
-        {/* Form container */}
+    /**
+     * Memoized content render function
+     */
+    const renderContent = useMemo(
+      () => (
         <Box
           // @ts-ignore
           sx={formContainerStyle}
         >
+          <Box mb={0}>{renderHeader}</Box>
           <form onSubmit={handleSubmit} ref={internalFormRef}>
-            {/* Render the form content using ContentSection */}
-            <ContentSection grids={contentSectionGrids} />
+            {React.isValidElement(content)
+              ? React.cloneElement(content as React.ReactElement, {
+                  onSubmit: handleSubmit,
+                })
+              : content || (grids && <ContentSection grids={grids} />)}
           </form>
-          {/* Display submitted data */}
-          {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/{adornments.tsx → adornment/index.tsx}

@@ -1,16 +1,27 @@
 import React, { useState } from 'react'
 import { InputAdornment, Button, Box } from '@mui/material'
-import SearchIcon from '../../components/Icons/Search'
-import ShowHideEyeIcon from '../../components/Icons/ShowHideEye'
-import DownArrowFilledIcon from '../../components/Icons/DownArrowFilled'
-import { AdornmentProps } from './index'
+import SearchIcon from '../../Icons/Search'
+import ShowHideEyeIcon from '../../Icons/ShowHideEye'
+import DownArrowFilledIcon from '../../Icons/DownArrowFilled'
+
+/**
+ * Props interface for the Adornment components
+ */
+export interface AdornmentProps {
+  componentvariant: string
+  iconcolor?: string
+  passwordVisible?: boolean
+  marginRight?: number | string
+  handleIncrement?: () => void
+  handleDecrement?: () => void
+}
 
 /**
  * StartAdornment component renders the start adornment for the input component.
  * @param props The props for the StartAdornment component.
  * @returns The start adornment component or null.
  */
-const StartAdornment: React.FC<AdornmentProps> = props => {
+export const StartAdornment: React.FC<AdornmentProps> = props => {
   const { componentvariant, iconcolor } = props
   // Render the search icon for the search bar variant
   if (componentvariant === 'searchbar') {
@@ -28,26 +39,22 @@ const StartAdornment: React.FC<AdornmentProps> = props => {
  * @param props The props for the EndAdornment component.
  * @returns The end adornment component or null.
  */
-const EndAdornment: React.FC<AdornmentProps> = props => {
+export const EndAdornment: React.FC<AdornmentProps> = props => {
   const {
     componentvariant,
     passwordVisible,
     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 (
@@ -118,5 +125,3 @@ const EndAdornment: React.FC<AdornmentProps> = props => {
   }
   return null
 }
-
-export { StartAdornment, EndAdornment }