goobs-frontend 0.7.57 → 0.7.59

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, useEffect } from 'react'
 import { Box, InputLabel, OutlinedInput, styled } from '@mui/material'
 import { useDropdown } from './hooks/useDropdown'
 import { usePhoneNumber } from './hooks/usePhoneNumber'
@@ -14,22 +8,13 @@ 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 { useHasInputEffect, usePreventAutocompleteEffect } from './useEffects'
 
 /**
  * Props interface for the StyledComponent
@@ -70,26 +55,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 +93,6 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
   const {
     label,
     componentvariant,
-    inputRef,
     name,
     backgroundcolor,
     iconcolor,
@@ -135,63 +106,29 @@ 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()
-  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)
   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,111 +141,67 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     handleDecrement,
   } = useSplitButton(props)
 
-  /**
-   * 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
-      }
+  // useEffect hooks
+  useHasInputEffect(value, valuestatus, setHasInput)
+  usePreventAutocompleteEffect(inputRefInternal)
 
-      if (onChange) {
-        onChange(e)
-      }
-
-      setHasInput(!!e.target.value)
+  useEffect(() => {
+    if (required && formname && name && label) {
+      validateRequiredField(required, formname, name, label)
+    }
+  }, [required, formname, name, label, validateRequiredField])
 
-      const formData = new FormData()
-      formData.append(e.target.name, e.target.value)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowError(formSubmitted || hasInput)
+    }, 1000)
 
-      if (name && label && formname) {
-        validateField(name, formData, label, required, formname)
-      }
+    return () => clearTimeout(timer)
+  }, [formSubmitted, hasInput])
 
-      // Implement validation logic directly
-      if (name) {
-        let result: HelperFooterMessage | undefined
+  const currentHelperFooter = name ? helperFooterValue[name] : undefined
+  console.log('StyledComponent: Current helper footer', currentHelperFooter)
 
-        // 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
+  /**
+   * Handle the change event of the input element.
+   * @param e The change event.
+   */
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    console.log('StyledComponent: handleChange called', {
+      name: e.target.name,
+      value: e.target.value,
+    })
 
-        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
-          })
-        }
-      }
+    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) {
+      console.log('StyledComponent: Calling validateField', {
+        name,
+        label,
+        required,
+        formname,
+      })
+      validateField(name, formData, label, required, formname)
+    }
+  }
 
   /**
    * Handle the focus event of the input element.
    */
   const handleFocus = () => {
+    console.log('StyledComponent: handleFocus called')
     setIsFocused(true)
   }
 
@@ -316,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)
@@ -344,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={{
@@ -376,13 +284,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 +318,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 +375,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,54 @@
+import React, { useEffect } from 'react'
+
+/**
+ * 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(() => {
+    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])
+}

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,