chore: add documentation to adapter props interfaces

Author: serikjensen

src/components/Common/FieldLayout/FieldLayoutTypes.ts

@@ -2,19 +2,52 @@ import type { ReactNode } from 'react'
 import type { DataAttributes } from '@/types/Helpers'
 
 export interface SharedFieldLayoutProps extends DataAttributes {
+  /**
+   * Optional description text for the field
+   */
   description?: ReactNode
+  /**
+   * Error message to display when the field is invalid
+   */
   errorMessage?: string
+  /**
+   * Indicates if the field is required
+   */
   isRequired?: boolean
+  /**
+   * Label text for the field
+   */
   label: ReactNode
+  /**
+   * Hides the label visually while keeping it accessible to screen readers
+   */
   shouldVisuallyHideLabel?: boolean
 }
 
 export interface InternalFieldLayoutProps {
+  /**
+   * Content to be rendered inside the field layout
+   */
   children: React.ReactNode
+  /**
+   * ID of the form control that this label is associated with
+   */
   htmlFor: string
+  /**
+   * ID of the error message element
+   */
   errorMessageId: string
+  /**
+   * ID of the description element
+   */
   descriptionId: string
+  /**
+   * Additional CSS class name
+   */
   className?: string
+  /**
+   * Whether to show the error icon
+   */
   withErrorIcon?: boolean
 }
 

src/components/Common/HorizontalFieldLayout/HorizontalFieldLayoutTypes.ts

@@ -3,6 +3,14 @@ import type {
   SharedFieldLayoutProps,
 } from '../FieldLayout/FieldLayoutTypes'
 
+/**
+ * Props shared by all horizontal field layouts
+ * Extends SharedFieldLayoutProps to include common field properties
+ */
 export type SharedHorizontalFieldLayoutProps = SharedFieldLayoutProps
 
+/**
+ * Props for the horizontal field layout component
+ * Combines shared field layout props with internal layout props
+ */
 export type HorizontalFieldLayoutProps = SharedHorizontalFieldLayoutProps & InternalFieldLayoutProps

src/components/Common/UI/Alert/Alert.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useId, useRef } from 'react'
+import classNames from 'classnames'
 import { type AlertProps } from './AlertTypes'
 import styles from './Alert.module.scss'
 import InfoIcon from '@/assets/icons/info.svg?react'
 import SuccessIcon from '@/assets/icons/success_check.svg?react'
 import WarningIcon from '@/assets/icons/warning.svg?react'
 import ErrorIcon from '@/assets/icons/error.svg?react'
 
-export function Alert({ label, children, status = 'info', icon }: AlertProps) {
+export function Alert({ label, children, status = 'info', icon, className }: AlertProps) {
   const id = useId()
   const alertRef = useRef<HTMLDivElement>(null)
   const defaultIcon =
@@ -25,7 +26,7 @@ export function Alert({ label, children, status = 'info', icon }: AlertProps) {
   }, [])
 
   return (
-    <div className={styles.root}>
+    <div className={classNames(styles.root, className)}>
       <div
         className={styles.alert}
         role="alert"

src/components/Common/UI/Alert/AlertTypes.ts

@@ -1,12 +1,24 @@
 import type { ReactNode } from 'react'
 
 export interface AlertProps {
-  /** The variant of the alert */
+  /**
+   * The visual status that the alert should convey
+   */
   status?: 'info' | 'success' | 'warning' | 'error'
-  /** The label text for the alert */
+  /**
+   * The label text for the alert
+   */
   label: string
-  /** Optional children to be rendered inside the alert */
+  /**
+   * Optional children to be rendered inside the alert
+   */
   children?: ReactNode
-  /** Optional custom icon component to override the default icon */
+  /**
+   * Optional custom icon component to override the default icon
+   */
   icon?: ReactNode
+  /**
+   * CSS className to be applied
+   */
+  className?: string
 }

src/components/Common/UI/Badge/BadgeTypes.ts

@@ -2,6 +2,12 @@ import type { HTMLAttributes, ReactNode } from 'react'
 
 export interface BadgeProps
   extends Pick<HTMLAttributes<HTMLSpanElement>, 'className' | 'id' | 'aria-label'> {
+  /**
+   * Content to be displayed inside the badge
+   */
   children: ReactNode
+  /**
+   * Visual style variant of the badge
+   */
   status?: 'success' | 'warning' | 'error' | 'info'
 }

src/components/Common/UI/Button/ButtonTypes.ts

@@ -20,16 +20,43 @@ export interface ButtonProps
     | 'title'
     | 'tabIndex'
   > {
+  /**
+   * React ref for the button element
+   */
   ref?: Ref<HTMLButtonElement>
+  /**
+   * Visual style variant of the button
+   */
   variant?: 'primary' | 'secondary' | 'tertiary' | 'icon'
+  /**
+   * Indicates if the button is in an error state
+   */
   isError?: boolean
+  /**
+   * Shows a loading spinner and disables the button
+   */
   isLoading?: boolean
+  /**
+   * Disables the button and prevents interaction
+   */
   isDisabled?: boolean
+  /**
+   * Content to be rendered inside the button
+   */
   children?: ReactNode
+  /**
+   * Handler for blur events
+   */
   onBlur?: ButtonFocusHandler
+  /**
+   * Handler for focus events
+   */
   onFocus?: ButtonFocusHandler
 }
 
 export type ButtonIconProps = Omit<ButtonProps, 'variant'> & {
+  /**
+   * Required aria-label for icon buttons to ensure accessibility
+   */
   'aria-label': string
 }

src/components/Common/UI/CalendarPreview/CalendarPreviewTypes.ts

@@ -1,12 +1,36 @@
 export type CalendarPreviewProps = {
+  /**
+   * Array of dates to highlight with custom colors and labels
+   */
   highlightDates?: Array<{
+    /**
+     * Date to highlight
+     */
     date: Date
+    /**
+     * Color to use for highlighting
+     */
     highlightColor: 'primary' | 'secondary'
+    /**
+     * Label text for the highlighted date
+     */
     label: string
   }>
+  /**
+   * Date range to display in the calendar preview
+   */
   dateRange: {
+    /**
+     * Start date of the range
+     */
     start: Date
+    /**
+     * End date of the range
+     */
     end: Date
+    /**
+     * Label text for the date range
+     */
     label: string
   }
 }

src/components/Common/UI/Card/CardTypes.ts

@@ -1,12 +1,20 @@
 import type { ReactNode } from 'react'
 
 export interface CardProps {
-  /** Callback function when the card is selected */
+  /**
+   * Callback function when the card is selected
+   */
   onSelect?: (checked: boolean) => void
-  /** Content to be displayed inside the card */
+  /**
+   * Content to be displayed inside the card
+   */
   children: ReactNode
-  /** Optional menu component to be displayed on the right side of the card */
+  /**
+   * Optional menu component to be displayed on the right side of the card
+   */
   menu?: ReactNode
-  /** Additional CSS class name */
+  /**
+   * CSS className to be applied
+   */
   className?: string
 }

src/components/Common/UI/Checkbox/CheckboxTypes.ts

@@ -4,9 +4,24 @@ import type { SharedHorizontalFieldLayoutProps } from '@/components/Common/Horiz
 export interface CheckboxProps
   extends SharedHorizontalFieldLayoutProps,
     Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'id' | 'className' | 'onBlur'> {
+  /**
+   * Current checked state of the checkbox
+   */
   value?: boolean
+  /**
+   * Callback when checkbox state changes
+   */
   onChange?: (value: boolean) => void
+  /**
+   * React ref for the checkbox input element
+   */
   inputRef?: Ref<HTMLInputElement>
+  /**
+   * Indicates if the checkbox is in an invalid state
+   */
   isInvalid?: boolean
+  /**
+   * Disables the checkbox and prevents interaction
+   */
   isDisabled?: boolean
 }

src/components/Common/UI/CheckboxGroup/CheckboxGroupTypes.ts

@@ -2,19 +2,49 @@ import type { FieldsetHTMLAttributes, Ref } from 'react'
 import type { SharedFieldLayoutProps } from '@/components/Common/FieldLayout/FieldLayoutTypes'
 
 export type CheckboxGroupOption = {
+  /**
+   * Label text or content for the checkbox option
+   */
   label: React.ReactNode
+  /**
+   * Value of the option that will be passed to onChange
+   */
   value: string
+  /**
+   * Disables this specific checkbox option
+   */
   isDisabled?: boolean
+  /**
+   * Optional description text for the checkbox option
+   */
   description?: React.ReactNode
 }
 
 export interface CheckboxGroupProps
   extends SharedFieldLayoutProps,
     Pick<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'className'> {
+  /**
+   * Indicates if the checkbox group is in an invalid state
+   */
   isInvalid?: boolean
+  /**
+   * Disables all checkbox options in the group
+   */
   isDisabled?: boolean
+  /**
+   * Array of checkbox options to display
+   */
   options: Array<CheckboxGroupOption>
+  /**
+   * Array of currently selected values
+   */
   value?: string[]
+  /**
+   * Callback when selection changes
+   */
   onChange?: (value: string[]) => void
+  /**
+   * React ref for the first checkbox input element
+   */
   inputRef?: Ref<HTMLInputElement>
 }

src/components/Common/UI/ComboBox/ComboBoxTypes.ts

@@ -2,19 +2,49 @@ import type { InputHTMLAttributes, Ref, FocusEvent } from 'react'
 import type { SharedFieldLayoutProps } from '@/components/Common/FieldLayout/FieldLayoutTypes'
 
 export interface ComboBoxOption {
+  /**
+   * Display text for the option
+   */
   label: string
+  /**
+   * Value of the option that will be passed to onChange
+   */
   value: string
 }
 
 export interface ComboBoxProps
   extends SharedFieldLayoutProps,
     Pick<InputHTMLAttributes<HTMLInputElement>, 'className' | 'id' | 'name' | 'placeholder'> {
+  /**
+   * Disables the combo box and prevents interaction
+   */
   isDisabled?: boolean
+  /**
+   * Indicates if the combo box is in an invalid state
+   */
   isInvalid?: boolean
+  /**
+   * Label text for the combo box field
+   */
   label: string
+  /**
+   * Callback when selection changes
+   */
   onChange?: (value: string) => void
+  /**
+   * Handler for blur events
+   */
   onBlur?: (e: FocusEvent) => void
+  /**
+   * Array of options to display in the dropdown
+   */
   options: ComboBoxOption[]
+  /**
+   * Currently selected value
+   */
   value?: string
+  /**
+   * React ref for the combo box input element
+   */
   inputRef?: Ref<HTMLInputElement>
 }