goobs-frontend 0.7.57 → 0.7.58

package/package.json

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

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,3 +1,4 @@
+// File: src/components/PopupForm/index.tsx
 'use client'
 import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 import { Close } from '@mui/icons-material'
@@ -20,9 +21,11 @@ export interface PopupFormProps {
   /** Function to call when closing the dialog */
   onClose: () => void
   /** ContentSectionProps to render the form content */
-  grids: ContentSectionProps['grids']
+  grids?: ContentSectionProps['grids']
   /** Optional function to handle form submission */
   onSubmit?: () => void
+  /** Optional direct content to render */
+  content?: React.ReactNode
 }
 
 /**
@@ -35,7 +38,7 @@ export interface PopupFormProps {
  * @returns The rendered popup form.
  */
 const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
-  ({ title, description, open, onClose, grids, onSubmit }, ref) => {
+  ({ title, description, open, onClose, grids, onSubmit, content }, ref) => {
     const [submittedData, setSubmittedData] = React.useState<
       Record<string, string>
     >({})
@@ -84,7 +87,7 @@ const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
     /** Combine the header grid with the provided content grids */
     const contentSectionGrids: ContentSectionProps['grids'] = [
       headerGrid,
-      ...grids,
+      ...(grids || []),
     ]
 
     /**
@@ -107,9 +110,24 @@ const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
       }
     }
 
+    /**
+     * Renders the header typography elements
+     */
+    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
+    }
+
     return (
       <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
-        {/* Close button */}
         <IconButton
           size="small"
           onClick={onClose}
@@ -122,16 +140,20 @@ const PopupForm = forwardRef<HTMLFormElement, PopupFormProps>(
         >
           <Close />
         </IconButton>
-        {/* Form container */}
         <Box
           // @ts-ignore
           sx={formContainerStyle}
         >
           <form onSubmit={handleSubmit} ref={internalFormRef}>
-            {/* Render the form content using ContentSection */}
-            <ContentSection grids={contentSectionGrids} />
+            {content ? (
+              <>
+                {renderHeaderTypography()}
+                {content}
+              </>
+            ) : (
+              <ContentSection grids={contentSectionGrids} />
+            )}
           </form>
-          {/* Display submitted data */}
           {Object.keys(submittedData).length > 0 && (
             <Box mt={2}>
               <Typography fontvariant="merrih6" text="Submitted Data:" />

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 }

package/src/components/StyledComponent/index.tsx

@@ -1,12 +1,6 @@
 'use client'
 
-import React, {
-  useCallback,
-  useState,
-  useRef,
-  useEffect,
-  RefObject,
-} from 'react'
+import React, { useState, useRef } from 'react'
 import { Box, InputLabel, OutlinedInput, styled } from '@mui/material'
 import { useDropdown } from './hooks/useDropdown'
 import { usePhoneNumber } from './hooks/usePhoneNumber'
@@ -14,22 +8,19 @@ import { usePassword } from './hooks/usePassword'
 import { useSplitButton } from './hooks/useSplitButton'
 import { Typography } from './../Typography'
 import { red, green } from '../../styles/palette'
-import { StartAdornment, EndAdornment } from './adornments'
-import { useHelperFooter } from './helperfooter/useHelperFooter'
+import { StartAdornment, EndAdornment } from './adornment'
+import {
+  useHelperFooter,
+  HelperFooterMessage,
+} from './helperfooter/useHelperFooter'
 import labelStyles from '../../styles/StyledComponent/Label'
-import { get, JSONValue } from 'goobs-cache'
-
-/**
- * Interface for helper footer messages
- */
-export interface HelperFooterMessage {
-  status: 'error' | 'success'
-  statusMessage: string
-  spreadMessage: string
-  spreadMessagePriority: number
-  formname: string
-  required: boolean
-}
+import {
+  useHelperFooterEffect,
+  useHasInputEffect,
+  usePreventAutocompleteEffect,
+  useValidateRequiredEffect,
+  useShowErrorEffect,
+} from './useEffects'
 
 /**
  * Props interface for the StyledComponent
@@ -70,26 +61,13 @@ export interface StyledComponentProps {
   shrunklabellocation?: 'onnotch' | 'above'
   value?: string
   valuestatus?: boolean
-  defaultValue?: string
-  inputRef?: RefObject<HTMLInputElement>
   focused?: boolean
   required?: boolean
   formSubmitted?: boolean
-  onChange?: (
-    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => void
-}
-
-/**
- * Props interface for the Adornment components
- */
-export interface AdornmentProps {
-  componentvariant: string
-  iconcolor?: string
-  passwordVisible?: boolean
-  marginRight?: number | string
-  handleIncrement?: () => void
-  handleDecrement?: () => void
+  'aria-label'?: string
+  'aria-required'?: boolean
+  'aria-invalid'?: boolean
+  'aria-describedby'?: string
 }
 
 /**
@@ -121,7 +99,6 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
   const {
     label,
     componentvariant,
-    inputRef,
     name,
     backgroundcolor,
     iconcolor,
@@ -135,7 +112,10 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     required = false,
     formname,
     formSubmitted = false,
-    onChange,
+    'aria-label': ariaLabel,
+    'aria-required': ariaRequired,
+    'aria-invalid': ariaInvalid,
+    'aria-describedby': ariaDescribedBy,
   } = props
 
   const { validateField } = useHelperFooter()
@@ -148,50 +128,7 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
   const inputRefInternal = useRef<HTMLInputElement>(null)
   const inputBoxRef = useRef<HTMLDivElement>(null)
 
-  // Fetch helper footer values from cache
-  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()
-  }, [])
-
-  // Update hasInput state when value or valuestatus changes
-  useEffect(() => {
-    setHasInput(!!value || !!valuestatus)
-  }, [value, valuestatus])
-
-  // Set input attributes to prevent autocomplete and related features
-  useEffect(() => {
-    const input = inputRefInternal.current || inputRef?.current
-    if (input) {
-      input.setAttribute('autocomplete', 'new-password')
-      input.setAttribute('autocorrect', 'off')
-      input.setAttribute('autocapitalize', 'none')
-      input.setAttribute('spellcheck', 'false')
-    }
-  }, [inputRef])
-
-  // Validate field if required and necessary props are provided
-  useEffect(() => {
-    if (required && formname && name && label) {
-      const emptyFormData = new FormData()
-      emptyFormData.append(name, '')
-      validateField(name, emptyFormData, label, required, formname)
-    }
-  }, [required, formname, name, label, validateField])
-
-  // Update showError state based on form submission and input state
-  useEffect(() => {
-    setShowError(formSubmitted || (hasInput && !isFocused))
-  }, [formSubmitted, hasInput, isFocused])
-
-  // Custom hooks for specific component variants
+  // Custom hooks
   const { renderMenu, selectedOption, isDropdownOpen } = useDropdown(
     props,
     inputBoxRef
@@ -204,106 +141,38 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     handleDecrement,
   } = useSplitButton(props)
 
+  // useEffect hooks
+  useHelperFooterEffect(setHelperFooterValue)
+  useHasInputEffect(value, valuestatus, setHasInput)
+  usePreventAutocompleteEffect(inputRefInternal)
+  useValidateRequiredEffect(required, formname, name, label)
+  useShowErrorEffect(formSubmitted, hasInput, isFocused, setShowError)
+
+  const currentHelperFooter = name ? helperFooterValue[name] : undefined
+
   /**
    * Handle the change event of the input element.
    * @param e The change event.
    */
-  const handleChange = useCallback(
-    async (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      if (componentvariant === 'phonenumber') {
-        handlePhoneNumberChange(e)
-      } else if (componentvariant === 'splitbutton') {
-        // Only allow numbers for splitbutton
-        const numValue = e.target.value.replace(/[^0-9]/g, '')
-        e.target.value = numValue
-      }
-
-      if (onChange) {
-        onChange(e)
-      }
-
-      setHasInput(!!e.target.value)
-
-      const formData = new FormData()
-      formData.append(e.target.name, e.target.value)
-
-      if (name && label && formname) {
-        validateField(name, formData, label, required, formname)
-      }
-
-      // Implement validation logic directly
-      if (name) {
-        let result: HelperFooterMessage | undefined
-
-        // Basic validation logic (you can expand this based on your requirements)
-        if (required && !e.target.value) {
-          result = {
-            status: 'error',
-            statusMessage: `${label} is required.`,
-            spreadMessage: `${label} is required.`,
-            spreadMessagePriority: 1,
-            formname: formname || '',
-            required: true,
-          }
-        } else if (
-          componentvariant === 'email' &&
-          !/\S+@\S+\.\S+/.test(e.target.value)
-        ) {
-          result = {
-            status: 'error',
-            statusMessage: 'Invalid email format.',
-            spreadMessage: 'Invalid email format.',
-            spreadMessagePriority: 1,
-            formname: formname || '',
-            required: required,
-          }
-        }
-        // Add more validation rules here as needed
-
-        if (result) {
-          setHelperFooterValue(prevState => ({
-            ...prevState,
-            [name]: result,
-          }))
-        } else {
-          // Clear any existing error for this field
-          setHelperFooterValue(prevState => {
-            const newState = { ...prevState }
-            delete newState[name]
-            return newState
-          })
-        }
-      }
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    if (componentvariant === 'phonenumber') {
+      handlePhoneNumberChange(e)
+    } else if (componentvariant === 'splitbutton') {
+      // Only allow numbers for splitbutton
+      const numValue = e.target.value.replace(/[^0-9]/g, '')
+      e.target.value = numValue
+    }
 
-      // Fetch updated helper footer state
-      const helperFooterResult = await get('helperFooter', 'client')
-      if (
-        helperFooterResult &&
-        typeof helperFooterResult === 'object' &&
-        'value' in helperFooterResult
-      ) {
-        setHelperFooterValue(prevState => ({
-          ...prevState,
-          ...((helperFooterResult as JSONValue).value as Record<
-            string,
-            HelperFooterMessage
-          >),
-        }))
-      }
-    },
-    [
-      componentvariant,
-      handlePhoneNumberChange,
-      onChange,
-      validateField,
-      name,
-      label,
-      required,
-      formname,
-    ]
-  )
+    setHasInput(!!e.target.value)
 
-  const currentHelperFooter = name ? helperFooterValue[name] : undefined
+    const formData = new FormData()
+    formData.append(e.target.name, e.target.value)
+    if (name && label && formname) {
+      validateField(name, formData, label, required, formname)
+    }
+  }
 
   /**
    * Handle the focus event of the input element.
@@ -376,13 +245,14 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
               focused: shouldShrinkLabel,
             })}
             shrink={shouldShrinkLabel}
+            htmlFor={name}
           >
             {label}
           </InputLabel>
         )}
         <Box ref={inputBoxRef} sx={{ width: '100%' }}>
           <NoAutofillOutlinedInput
-            ref={inputRef || inputRefInternal}
+            ref={inputRefInternal}
             style={{
               backgroundColor: backgroundcolor || 'inherit',
               width: '100%',
@@ -409,6 +279,13 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
                     : 'text',
               },
               placeholder: placeholder || '',
+              'aria-label': ariaLabel,
+              'aria-invalid': ariaInvalid,
+              'aria-required': ariaRequired,
+              'aria-describedby':
+                ariaDescribedBy || currentHelperFooter?.statusMessage
+                  ? `${name}-helper-text`
+                  : undefined,
             }}
             type={
               componentvariant === 'password' && !passwordVisible
@@ -459,6 +336,7 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
       </Box>
       {showError && currentHelperFooter?.statusMessage && (
         <Typography
+          id={`${name}-helper-text`}
           fontvariant="merrihelperfooter"
           fontcolor={
             currentHelperFooter?.status === 'error'

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

@@ -0,0 +1,76 @@
+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])
+}
+
+export const useHasInputEffect = (
+  value: string | undefined,
+  valuestatus: boolean | undefined,
+  setHasInput: React.Dispatch<React.SetStateAction<boolean>>
+) => {
+  useEffect(() => {
+    setHasInput(!!value || !!valuestatus)
+  }, [value, valuestatus, setHasInput])
+}
+
+export const usePreventAutocompleteEffect = (
+  inputRefInternal: React.RefObject<HTMLInputElement>
+) => {
+  useEffect(() => {
+    const input = inputRefInternal.current
+    if (input) {
+      input.setAttribute('autocomplete', 'new-password')
+      input.setAttribute('autocorrect', 'off')
+      input.setAttribute('autocapitalize', 'none')
+      input.setAttribute('spellcheck', 'false')
+    }
+  }, [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])
+}

package/src/index.ts

@@ -9,7 +9,6 @@ import CustomGrid, {
 } from './components/Grid'
 import StyledComponent, {
   StyledComponentProps,
-  AdornmentProps,
 } from './components/StyledComponent'
 import Typography, {
   FontFamily,
@@ -172,7 +171,7 @@ export type { CustomButtonProps }
 export type { ButtonAlignment }
 export type { CustomGridProps }
 export type { Alignment, BorderProp, columnconfig, gridconfig, cellconfig }
-export type { StyledComponentProps, AdornmentProps }
+export type { StyledComponentProps }
 export type {
   FontFamily,
   TypographyVariant,