goobs-frontend 0.7.60 → 0.7.63

package/src/components/StyledComponent/hooks/useDropdown.tsx

@@ -3,6 +3,9 @@ import { StyledComponentProps } from '..'
 import { styled, Menu, MenuItem } from '@mui/material'
 import React from 'react'
 
+/**
+ * Styled MenuItem component for the dropdown menu.
+ */
 const StyledSelectMenu = styled(MenuItem)({
   backgroundColor: 'white',
   color: 'black',
@@ -13,41 +16,83 @@ const StyledSelectMenu = styled(MenuItem)({
   },
 })
 
+/**
+ * Custom hook for managing a dropdown component.
+ *
+ * @param {StyledComponentProps} props - The props passed to the StyledComponent.
+ * @param {React.RefObject<HTMLDivElement>} inputBoxRef - Ref to the input box element.
+ * @param {(option: string) => void} [onOptionSelect] - Optional callback function when an option is selected.
+ * @returns {Object} An object containing state and handlers for the dropdown.
+ */
 export const useDropdown = (
   props: StyledComponentProps,
-  inputBoxRef: React.RefObject<HTMLDivElement>
+  inputBoxRef: React.RefObject<HTMLDivElement>,
+  onOptionSelect?: (option: string) => void
 ) => {
+  /** State to control if the dropdown is open */
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  /** State to store the anchor element for the dropdown */
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  /** State to store the filtered options */
   const [filteredOptions, setFilteredOptions] = useState<string[]>([])
+  /** State to store the currently selected option */
   const [selectedOption, setSelectedOption] = useState('')
+  /** State to track if the dropdown is focused */
   const [isDropdownFocused, setIsDropdownFocused] = useState(false)
-  const { componentvariant, options, value } = props
 
+  const { componentvariant, options, value, defaultOption } = props
+
+  /**
+   * Effect to set filtered options when component variant is dropdown and options are provided
+   */
   useEffect(() => {
     if (componentvariant === 'dropdown' && options) {
       setFilteredOptions([...options])
     }
   }, [componentvariant, options])
 
+  /**
+   * Effect to set the selected option based on value, defaultOption, or first option
+   */
   useEffect(() => {
     if (value !== undefined) {
       setSelectedOption(value)
+    } else if (defaultOption !== undefined) {
+      setSelectedOption(defaultOption)
+    } else if (options && options.length > 0) {
+      setSelectedOption(options[0])
     }
-  }, [value])
+  }, [value, defaultOption, options])
 
+  /**
+   * Handle click on the dropdown to open/close it
+   */
   const handleDropdownClick = useCallback(() => {
     if (componentvariant === 'dropdown') {
       setAnchorEl(inputBoxRef.current)
-      setIsDropdownOpen(!isDropdownOpen)
+      setIsDropdownOpen(prev => !prev)
     }
-  }, [componentvariant, inputBoxRef, isDropdownOpen])
+  }, [componentvariant, inputBoxRef])
 
-  const handleOptionSelect = useCallback((option: string) => {
-    setSelectedOption(option)
-    setIsDropdownOpen(false)
-  }, [])
+  /**
+   * Handle selection of an option from the dropdown
+   * @param {string} option - The selected option
+   */
+  const handleOptionSelect = useCallback(
+    (option: string) => {
+      setSelectedOption(option)
+      setIsDropdownOpen(false)
+      if (onOptionSelect) {
+        onOptionSelect(option)
+      }
+    },
+    [onOptionSelect]
+  )
 
+  /**
+   * Handle focus/blur of the dropdown input
+   * @param {boolean} focused - Whether the input is focused
+   */
   const handleInputFocus = useCallback(
     (focused: boolean) => {
       if (componentvariant === 'dropdown') {
@@ -57,11 +102,10 @@ export const useDropdown = (
     [componentvariant]
   )
 
-  if (componentvariant !== 'dropdown') {
-    return {}
-  }
-
-  const renderMenu = anchorEl !== null && isDropdownOpen !== undefined && (
+  /**
+   * Render the dropdown menu
+   */
+  const renderMenu = (
     <Menu
       anchorEl={anchorEl}
       open={isDropdownOpen}
@@ -77,12 +121,13 @@ export const useDropdown = (
           <StyledSelectMenu
             key={option}
             onClick={() => handleOptionSelect(option)}
+            selected={option === selectedOption}
           >
             {option}
           </StyledSelectMenu>
         ))
       ) : (
-        <div>No Options Found</div>
+        <MenuItem disabled>No Options Found</MenuItem>
       )}
     </Menu>
   )

package/src/components/StyledComponent/hooks/usePhoneNumber.tsx

@@ -1,25 +1,25 @@
-import React, { useCallback } from 'react'
+import React, { useState, useCallback } from 'react'
 
 /**
- * formatPhoneNumber function formats a given string of digits into a standard US phone number format.
- * It ensures the number starts with "+1" and adds the appropriate dashes for area code and subsequent digits.
- * @param value The string of digits to format.
- * @returns The formatted phone number string.
+ * Formats a string of digits into a US phone number format with a "+1" country code.
+ *
+ * @param {string} value - The input string to be formatted.
+ * @returns {string} A formatted phone number string in the format "+1 xxx-xxx-xxxx".
+ *
+ * @example
+ * formatPhoneNumber("1234567890") // returns "+1 123-456-7890"
+ * formatPhoneNumber("12345") // returns "+1 123-45"
  */
 export const formatPhoneNumber = (value: string): string => {
-  // Remove all non-digit characters
   const digits = value.replace(/\D/g, '')
-  // Ensure the number starts with +1
+  const limitedDigits = digits.slice(0, 10)
   let formattedNumber = '+1 '
-  if (digits.length > 0) {
-    // Add the area code
-    formattedNumber += digits.slice(0, 3)
-    if (digits.length > 3) {
-      // Add first dash and next three digits
-      formattedNumber += '-' + digits.slice(3, 6)
-      if (digits.length > 6) {
-        // Add second dash and last four digits
-        formattedNumber += '-' + digits.slice(6, 10)
+  if (limitedDigits.length > 0) {
+    formattedNumber += limitedDigits.slice(0, 3)
+    if (limitedDigits.length > 3) {
+      formattedNumber += '-' + limitedDigits.slice(3, 6)
+      if (limitedDigits.length > 6) {
+        formattedNumber += '-' + limitedDigits.slice(6)
       }
     }
   }
@@ -27,28 +27,54 @@ export const formatPhoneNumber = (value: string): string => {
 }
 
 /**
- * usePhoneNumber hook provides functionality for handling phone number input changes.
- * It formats the input value using the formatPhoneNumber function.
- * @param props The props for the phone number input component.
- * @returns An object containing the handlePhoneNumberChange function.
+ * A custom React hook for managing and formatting a phone number input.
+ *
+ * @param {string} [initialValue=''] - The initial value of the phone number.
+ * @returns {Object} An object containing the current phone number state and functions to update it.
+ * @property {string} phoneNumber - The current formatted phone number.
+ * @property {function} handlePhoneNumberChange - A function to handle changes to the phone number input.
+ * @property {function} updatePhoneNumber - A function to directly update the phone number.
+ *
+ * @example
+ * const { phoneNumber, handlePhoneNumberChange, updatePhoneNumber } = usePhoneNumber();
  */
-export const usePhoneNumber = () => {
+export const usePhoneNumber = (initialValue: string = '') => {
   /**
-   * handlePhoneNumberChange function is called when the phone number input value changes.
-   * It formats the input value using the formatPhoneNumber function.
-   * @param e The change event triggered by the phone number input.
+   * The current state of the formatted phone number.
+   * @type {[string, function]}
+   */
+  const [phoneNumber, setPhoneNumber] = useState(
+    formatPhoneNumber(initialValue)
+  )
+
+  /**
+   * Handles changes to the phone number input.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>} e - The change event.
    */
   const handlePhoneNumberChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       const input = e.target.value
-      const digitsOnly = input.replace(/\D/g, '')
-      const formattedValue = formatPhoneNumber(digitsOnly)
-      e.target.value = formattedValue
+      // Remove the "+1 " prefix if it exists
+      const strippedInput = input.startsWith('+1 ') ? input.slice(3) : input
+      const formattedValue = formatPhoneNumber(strippedInput)
+      setPhoneNumber(formattedValue)
     },
     []
   )
 
+  /**
+   * Updates the phone number state with a new value.
+   *
+   * @param {string} newValue - The new phone number value to set.
+   */
+  const updatePhoneNumber = useCallback((newValue: string) => {
+    setPhoneNumber(formatPhoneNumber(newValue))
+  }, [])
+
   return {
+    phoneNumber,
     handlePhoneNumberChange,
+    updatePhoneNumber,
   }
 }

package/src/components/StyledComponent/index.tsx

@@ -4,7 +4,6 @@ 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'
-import { usePassword } from './hooks/usePassword'
 import { useSplitButton } from './hooks/useSplitButton'
 import { Typography } from './../Typography'
 import { red, green } from '../../styles/palette'
@@ -17,18 +16,29 @@ import labelStyles from '../../styles/StyledComponent/Label'
 import { useHasInputEffect, usePreventAutocompleteEffect } from './useEffects'
 
 /**
- * Props interface for the StyledComponent
+ * Props interface for the StyledComponent.
+ * @interface
  */
 export interface StyledComponentProps {
+  /** Name attribute for the input element */
   name?: string
+  /** Color of the input outline */
   outlinecolor?: string
+  /** Color of the icon */
   iconcolor?: string
+  /** Background color of the input */
   backgroundcolor?: string
+  /** Whether the input is notched */
   notched?: boolean
+  /** Combined font color for the input */
   combinedfontcolor?: string
+  /** Font color when the label is not shrunk */
   unshrunkfontcolor?: string
+  /** Font color when the label is shrunk */
   shrunkfontcolor?: string
+  /** Autocomplete attribute for the input */
   autoComplete?: string
+  /** Variant of the component */
   componentvariant?:
     | 'multilinetextfield'
     | 'dropdown'
@@ -46,26 +56,48 @@ export interface StyledComponentProps {
     | 'time'
     | 'date'
     | 'splitbutton'
+  /** Options for dropdown variant */
   options?: readonly string[]
+  /** Default option for dropdown variant */
+  defaultOption?: string
+  /** Helper footer message */
   helperfooter?: HelperFooterMessage
+  /** Placeholder text for the input */
   placeholder?: string
+  /** Minimum number of rows for multiline text field */
   minRows?: number
+  /** Name of the form the input belongs to */
   formname?: string
+  /** Label text for the input */
   label?: string
+  /** Location of the shrunk label */
   shrunklabellocation?: 'onnotch' | 'above'
+  /** Value of the input */
   value?: string
+  /** Status of the value */
   valuestatus?: boolean
+  /** Whether the input is focused */
   focused?: boolean
+  /** Whether the input is required */
   required?: boolean
+  /** Whether the form has been submitted */
   formSubmitted?: boolean
+  /** ARIA label for the input */
   'aria-label'?: string
+  /** ARIA required attribute */
   'aria-required'?: boolean
+  /** ARIA invalid attribute */
   'aria-invalid'?: boolean
+  /** ARIA describedby attribute */
   'aria-describedby'?: string
+  /** Callback function when an option is selected (for dropdown variant) */
+  onOptionSelect?: (option: string) => void
+  /** Callback function when the input value changes */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 /**
- * Styled component to prevent autofill styles
+ * Styled OutlinedInput component that prevents autofill styling.
  */
 const NoAutofillOutlinedInput = styled(OutlinedInput)(() => ({
   '& .MuiInputBase-input': {
@@ -85,9 +117,9 @@ const NoAutofillOutlinedInput = styled(OutlinedInput)(() => ({
 }))
 
 /**
- * StyledComponent is a customizable input component with various variants and features.
- * @param props The props for the StyledComponent.
- * @returns The rendered StyledComponent.
+ * StyledComponent is a versatile input component that can render various types of inputs based on the provided props.
+ * @param {StyledComponentProps} props - The props for the StyledComponent
+ * @returns {React.ReactElement} The rendered StyledComponent
  */
 const StyledComponent: React.FC<StyledComponentProps> = props => {
   const {
@@ -110,47 +142,60 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     'aria-required': ariaRequired,
     'aria-invalid': ariaInvalid,
     'aria-describedby': ariaDescribedBy,
+    onOptionSelect,
+    onChange,
   } = props
 
-  console.log('StyledComponent: Initializing with props', {
-    name,
-    label,
-    required,
-    formname,
-    formSubmitted,
-  })
-
-  const { validateField, validateRequiredField, helperFooterValue } =
-    useHelperFooter()
+  const {
+    validateField,
+    validateRequiredField,
+    helperFooterValue,
+    initializeRequiredFields,
+  } = useHelperFooter()
   const [isFocused, setIsFocused] = useState(false)
   const [hasInput, setHasInput] = useState(false)
   const [showError, setShowError] = useState(false)
+  const [passwordVisible, setPasswordVisible] = useState(false)
   const inputRefInternal = useRef<HTMLInputElement>(null)
   const inputBoxRef = useRef<HTMLDivElement>(null)
 
-  // Custom hooks
-  const { renderMenu, selectedOption, isDropdownOpen } = useDropdown(
+  const { renderMenu, selectedOption, handleDropdownClick } = useDropdown(
     props,
-    inputBoxRef
+    inputBoxRef,
+    onOptionSelect
   )
-  const { handlePhoneNumberChange } = usePhoneNumber()
-  const { passwordVisible } = usePassword()
+  const { phoneNumber, handlePhoneNumberChange, updatePhoneNumber } =
+    usePhoneNumber(value || '')
   const {
     value: splitButtonValue,
     handleIncrement,
     handleDecrement,
   } = useSplitButton(props)
 
-  // useEffect hooks
   useHasInputEffect(value, valuestatus, setHasInput)
   usePreventAutocompleteEffect(inputRefInternal)
 
+  /**
+   * Initialize required fields when the form name changes
+   */
+  useEffect(() => {
+    if (formname) {
+      initializeRequiredFields(formname)
+    }
+  }, [formname, initializeRequiredFields])
+
+  /**
+   * Validate required field when relevant props change
+   */
   useEffect(() => {
     if (required && formname && name && label) {
       validateRequiredField(required, formname, name, label)
     }
   }, [required, formname, name, label, validateRequiredField])
 
+  /**
+   * Show error after a delay when form is submitted or input has value
+   */
   useEffect(() => {
     const timer = setTimeout(() => {
       setShowError(formSubmitted || hasInput)
@@ -159,27 +204,37 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     return () => clearTimeout(timer)
   }, [formSubmitted, hasInput])
 
+  /**
+   * Update phone number when componentvariant is 'phonenumber' and value changes
+   */
+  useEffect(() => {
+    if (componentvariant === 'phonenumber' && value) {
+      updatePhoneNumber(value)
+    }
+  }, [componentvariant, value, updatePhoneNumber])
+
   const currentHelperFooter = name ? helperFooterValue[name] : undefined
-  console.log('StyledComponent: Current helper footer', currentHelperFooter)
 
   /**
-   * Handle the change event of the input element.
-   * @param e The change event.
+   * Handle change event for the input
+   * @param {React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>} 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 (componentvariant === 'phonenumber') {
       handlePhoneNumberChange(e)
+      if (onChange) {
+        onChange(e as React.ChangeEvent<HTMLInputElement>)
+      }
     } 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 as React.ChangeEvent<HTMLInputElement>)
+      }
+    } else if (onChange) {
+      onChange(e as React.ChangeEvent<HTMLInputElement>)
     }
 
     setHasInput(!!e.target.value)
@@ -187,43 +242,36 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     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.
+   * Handle focus event for the input
    */
   const handleFocus = () => {
-    console.log('StyledComponent: handleFocus called')
     setIsFocused(true)
   }
 
   /**
-   * Handle the blur event of the input element.
+   * Handle blur event for the input
    */
   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)
     }
   }
 
+  /**
+   * Toggle password visibility for password input
+   */
+  const togglePasswordVisibility = () => {
+    setPasswordVisible(!passwordVisible)
+  }
+
   const isDropdownVariant = componentvariant === 'dropdown'
   const isSplitButtonVariant = componentvariant === 'splitbutton'
   const isNotchedVariant =
@@ -233,24 +281,13 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
     !!label
   const hasPlaceholder = !!placeholder
 
-  /**
-   * Determine if the label should be shrunk based on various conditions.
-   */
   const shouldShrinkLabel =
     isFocused ||
     isDropdownVariant ||
     isSplitButtonVariant ||
     hasPlaceholder ||
     hasInput ||
-    componentvariant === 'phonenumber'
-
-  console.log('StyledComponent: Rendering', {
-    name,
-    showError,
-    hasHelperFooter: !!currentHelperFooter,
-    helperFooterStatus: currentHelperFooter?.status,
-    helperFooterMessage: currentHelperFooter?.statusMessage,
-  })
+    (componentvariant === 'phonenumber' && phoneNumber !== '')
 
   return (
     <Box
@@ -341,6 +378,7 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
               <EndAdornment
                 componentvariant={componentvariant || ''}
                 passwordVisible={passwordVisible}
+                togglePasswordVisibility={togglePasswordVisibility}
                 iconcolor={iconcolor}
                 handleIncrement={handleIncrement}
                 handleDecrement={handleDecrement}
@@ -349,17 +387,20 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
             onChange={handleChange}
             onFocus={handleFocus}
             onBlur={handleBlur}
+            onClick={isDropdownVariant ? handleDropdownClick : undefined}
             fullWidth
             multiline={componentvariant === 'multilinetextfield'}
             label={label}
             autoComplete="off"
             name={name}
             value={
-              isDropdownVariant
-                ? selectedOption
-                : isSplitButtonVariant
-                  ? splitButtonValue
-                  : value
+              componentvariant === 'phonenumber'
+                ? phoneNumber
+                : isDropdownVariant
+                  ? selectedOption
+                  : isSplitButtonVariant
+                    ? splitButtonValue
+                    : value
             }
             readOnly={isDropdownVariant}
             notched={
@@ -367,10 +408,10 @@ const StyledComponent: React.FC<StyledComponentProps> = props => {
               ((isDropdownVariant || isSplitButtonVariant) &&
                 shrunklabellocation !== 'above') ||
               hasPlaceholder ||
-              componentvariant === 'phonenumber'
+              (componentvariant === 'phonenumber' && phoneNumber !== '')
             }
           />
-          {isDropdownVariant && isDropdownOpen && renderMenu}
+          {isDropdownVariant && renderMenu}
         </Box>
       </Box>
       {showError && currentHelperFooter?.statusMessage && (

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

@@ -18,7 +18,6 @@ export const useHasInputEffect = (
 ) => {
   useEffect(() => {
     const hasInput = !!value || !!valuestatus
-    console.log('useHasInputEffect: Setting hasInput to', hasInput)
     setHasInput(hasInput)
   }, [value, valuestatus, setHasInput])
 }
@@ -39,16 +38,12 @@ 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/components/StyledComponent/hooks/usePassword.tsx

@@ -1,23 +0,0 @@
-import { useState } from 'react'
-
-/**
- * usePassword hook provides functionality for managing password visibility state.
- * It allows toggling the visibility of the password field between masked and unmasked states.
- * @returns An object containing the passwordVisible state and the togglePasswordVisibility function.
- */
-export const usePassword = () => {
-  const [passwordVisible, setPasswordVisible] = useState(false)
-
-  /**
-   * togglePasswordVisibility function toggles the visibility state of the password field.
-   * It switches between the masked and unmasked states.
-   */
-  const togglePasswordVisibility = () => {
-    setPasswordVisible(!passwordVisible)
-  }
-
-  return {
-    passwordVisible,
-    togglePasswordVisibility,
-  }
-}