@mistertemp/libs-front-shared 1.1.2 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.2.1](https://github.com/mistertemp/shared-libs-front/compare/@mistertemp/libs-front-shared@1.2.0...@mistertemp/libs-front-shared@1.2.1) (2025-08-08)
+
+
+### Bug Fixes
+
+* fix initial value of input in TextFilter ([#592](https://github.com/mistertemp/shared-libs-front/issues/592)) ([e3ca8a6](https://github.com/mistertemp/shared-libs-front/commit/e3ca8a690999ae365d904a980eef2283d7811346))
+
+## [1.2.0](https://github.com/mistertemp/shared-libs-front/compare/@mistertemp/libs-front-shared@1.1.2...@mistertemp/libs-front-shared@1.2.0) (2025-07-25)
+
+
+### Features
+
+* **Filters:** add accountFilter ([#580](https://github.com/mistertemp/shared-libs-front/issues/580)) ([1179a39](https://github.com/mistertemp/shared-libs-front/commit/1179a39832cd57ced44dd3f79322ea6b7b72af66))
+
 ## [1.1.2](https://github.com/mistertemp/shared-libs-front/compare/@mistertemp/libs-front-shared@1.1.1...@mistertemp/libs-front-shared@1.1.2) (2025-05-06)
 
 

package/index.ts

@@ -1,3 +1,9 @@
+/**
+ * @module @mistertemp/libs-front-shared
+ * @description Main entry point for the shared front-end library
+ * Exports all components, hooks, and type definitions
+ */
+
 export * from './src/components';
 export * from './src/hooks';
 export * from './src/typings';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mistertemp/libs-front-shared",
-    "version": "1.1.2",
+    "version": "1.2.1",
     "main": "index.ts",
     "license": "UNLICENSED",
     "scripts": {
@@ -22,9 +22,9 @@
     },
     "devDependencies": {
         "@axe-core/react": "4.10.0",
-        "@mistertemp/design-system": "12.0.0",
+        "@mistertemp/design-system": "12.3.0",
         "@mistertemp/libs-work-environments": "0.8.1",
-        "@mistertemp/types-shared": "2.2.0",
+        "@mistertemp/types-shared": "2.3.0",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.6.2",
         "@testing-library/react": "12.1.5",
@@ -38,13 +38,13 @@
         "@types/react-transition-group": "4.4.10",
         "@typescript-eslint/eslint-plugin": "7.18.0",
         "@typescript-eslint/parser": "7.18.0",
-        "@vitejs/plugin-react-swc": "3.9.0",
+        "@vitejs/plugin-react-swc": "3.10.0",
         "date-fns": "2.30.0",
         "eslint": "8.57.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-jsx-a11y": "6.10.0",
-        "eslint-plugin-prettier": "5.2.1",
+        "eslint-plugin-prettier": "5.4.0",
         "eslint-plugin-react": "7.37.1",
         "eslint-plugin-react-hooks": "4.6.0",
         "eslint-plugin-simple-import-sort": "12.1.0",
@@ -56,21 +56,21 @@
         "identity-obj-proxy": "3.0.0",
         "jest-environment-jsdom": "29.7.0",
         "lodash": "4.17.21",
-        "prettier": "3.4.1",
+        "prettier": "3.5.3",
         "react": "17.0.2",
         "react-dom": "17.0.2",
-        "react-hook-form": "7.53.0",
+        "react-hook-form": "7.57.0",
         "react-i18next": "14.1.0",
-        "react-router-dom": "6.28.0",
+        "react-router-dom": "6.30.0",
         "react-transition-group": "4.4.5",
-        "sass": "1.87.0",
-        "stylelint": "16.19.1",
+        "sass": "1.89.0",
+        "stylelint": "16.20.0",
         "stylelint-config-idiomatic-order": "10.0.0",
         "stylelint-config-standard-scss": "14.0.0",
         "stylelint-prettier": "5.0.3",
-        "ts-jest": "29.2.3",
+        "ts-jest": "29.3.2",
         "ts-node": "10.9.1",
-        "typescript": "5.7.2",
+        "typescript": "5.8.3",
         "vite": "6.3.4",
         "vite-plugin-environment": "1.1.3",
         "vite-plugin-svgr": "4.3.0"

package/src/components/AccountFilter/AccountFilter.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+
+import { useBundledTranslation } from '../../hooks';
+import fr from '../../locales/fr/scc-common-filters.json';
+import it from '../../locales/it/scc-common-filters.json';
+import { Filter, FilterDropdownOption, FilterProps } from '../Filter';
+
+export type AccountFilterProps = Omit<FilterProps, 'name' | 'options'> & {
+    name?: string;
+    onInputValueChanged?: (value: string | undefined) => void;
+    isLoading?: boolean;
+    options: FilterDropdownOption[];
+};
+
+export const AccountFilter = ({
+    name = 'account',
+    onInputValueChanged,
+    isLoading = false,
+    options,
+    ...props
+}: AccountFilterProps) => {
+    const { t } = useBundledTranslation('scc-common-filters', { fr, it });
+    const [inputValue, setInputValue] = useState('');
+
+    return (
+        <Filter
+            name={name}
+            placeholder={props.placeholder}
+            options={options}
+            listProps={{
+                search: {
+                    value: inputValue,
+                    isLoading,
+                    onInputValueChanged: (value) => {
+                        setInputValue(value ?? '');
+                        onInputValueChanged?.(value);
+                    },
+                    placeholder: t('scc-common-filters:filters.account.placeholder'),
+                },
+                withSelectedTags: true,
+            }}
+            {...props}
+        />
+    );
+};

package/src/components/AccountFilter/__tests__/AccountFilter.unit.test.tsx

@@ -0,0 +1,70 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { render } from '../../../../.jest/reactTestingLibrary.config';
+import { AccountFilter } from '../AccountFilter';
+
+describe('AccountFilter', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should display all account options', async () => {
+        render(
+            <AccountFilter
+                options={[
+                    { id: 'testId', label: 'label' },
+                    { id: 'testId2', label: 'label2' },
+                ]}
+            />,
+        );
+
+        fireEvent.click(screen.getByTestId('filters+account+trigger-button'));
+
+        expect(screen.getByTestId(`filters+account_option_testId`)).toBeInTheDocument();
+        expect(screen.getByTestId(`filters+account_option_testId2`)).toBeInTheDocument();
+    });
+
+    it('should select one account', async () => {
+        const mock = jest.fn();
+
+        render(
+            <AccountFilter
+                onDropdownValueChanged={mock}
+                options={[
+                    { id: 'testId', label: 'label' },
+                    { id: 'testId2', label: 'label2' },
+                ]}
+            />,
+        );
+
+        fireEvent.click(screen.getByTestId('filters+account+trigger-button'));
+
+        fireEvent.click(screen.getByTestId(`filters+account_option_testId`));
+
+        await userEvent.click(document.body);
+
+        await waitFor(() => {
+            expect(mock).toHaveBeenCalledWith(['testId']);
+        });
+    });
+
+    it('should set placeholder title', async () => {
+        const newPlaceholder = 'New placeholder';
+
+        render(
+            <AccountFilter
+                placeholder={newPlaceholder}
+                options={[
+                    { id: 'testId', label: 'label' },
+                    { id: 'testId2', label: 'label2' },
+                ]}
+            />,
+        );
+
+        expect(screen.getByTestId('filters+account+trigger-button-title')).toHaveTextContent(
+            newPlaceholder,
+        );
+    });
+});

package/src/components/AccountFilter/index.ts

@@ -0,0 +1 @@
+export * from './AccountFilter';

package/src/components/ControlledInputDate/ControlledInputDate.tsx

@@ -3,16 +3,44 @@ import { format, parse } from 'date-fns';
 import React from 'react';
 import { Controller, FieldPath, FieldValues, UseControllerProps } from 'react-hook-form';
 
+/**
+ * Default date format used for the date input
+ */
 const controlledInputDateDefaultFormat = 'dd/MM/yyyy';
 
+/**
+ * Converts a form date value string to the format expected by the date input
+ *
+ * @param {string | null | undefined} formDateValue - The date value from the form
+ * @param {string} dateFormat - The format of the date in the form
+ * @returns {string} The formatted date string for the input
+ */
 const toDateInputValue = (formDateValue: string | null | undefined, dateFormat: string) =>
     formDateValue
         ? format(parse(formDateValue, dateFormat, new Date()), controlledInputDateDefaultFormat)
         : '';
 
+/**
+ * Converts a Date object to a formatted string for the form
+ *
+ * @param {Date | null | undefined} valueAsDate - The date object from the input
+ * @param {string} dateFormat - The target format for the form value
+ * @returns {string} The formatted date string
+ */
 const toDateFormValue = (valueAsDate: Date | null | undefined, dateFormat: string) =>
     valueAsDate ? format(valueAsDate, dateFormat) : '';
 
+/**
+ * Props for the ControlledInputDate component
+ *
+ * @template TFieldValues - Type of the form values
+ * @template TName - Type of the field name
+ * @typedef {Object} ControlledInputDateProps
+ * @property {Omit<InputProps, 'inputType' | 'value'>} inputProps - Props for the underlying Input component
+ * @property {string} [format='dd/MM/yyyy'] - Date format to use
+ * @property {string} [minErrorMessage='min exceeded'] - Error message for minimum date validation
+ * @property {string} [maxErrorMessage='max exceeded'] - Error message for maximum date validation
+ */
 export type ControlledInputDateProps<
     TFieldValues extends FieldValues,
     TName extends FieldPath<TFieldValues>,
@@ -23,6 +51,17 @@ export type ControlledInputDateProps<
     maxErrorMessage?: string;
 };
 
+/**
+ * A controlled date input component for use with react-hook-form
+ *
+ * This component provides a date input that integrates with react-hook-form's
+ * Controller component, handling the conversion between form values and input values.
+ *
+ * @template TFieldValues - Type of the form values
+ * @template TName - Type of the field name
+ * @param {ControlledInputDateProps<TFieldValues, TName>} props - Component props
+ * @returns {JSX.Element} Controlled date input component
+ */
 export const ControlledInputDate = <
     TFieldValues extends FieldValues = FieldValues,
     TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

package/src/components/ControlledInputTime/ControlledInputTime.tsx

@@ -3,8 +3,19 @@ import { DEFAULT_TIME_SEPARATOR } from '@mistertemp/design-system/src/components
 import React from 'react';
 import { Controller, FieldPath, FieldValues, UseControllerProps } from 'react-hook-form';
 
+/**
+ * Default separator used for time values in form data
+ */
 const controlledInputTimeDefaultSeparator = ':';
 
+/**
+ * Converts a form time value to the format expected by the time input
+ *
+ * @param {string | null | undefined} formTimeValue - The time value from the form
+ * @param {string} inputSeparator - The separator used in the input component
+ * @param {string} dataSeparator - The separator used in the form data
+ * @returns {string} The formatted time string for the input
+ */
 const toTimeInputValue = (
     formTimeValue: string | null | undefined,
     inputSeparator: string,
@@ -13,6 +24,14 @@ const toTimeInputValue = (
     return formTimeValue?.replace(dataSeparator, inputSeparator) ?? '';
 };
 
+/**
+ * Converts an input time value to the format expected by the form
+ *
+ * @param {string | null | undefined} inputValue - The time value from the input
+ * @param {string} inputSeparator - The separator used in the input component
+ * @param {string} dataSeparator - The separator used in the form data
+ * @returns {string} The formatted time string for the form
+ */
 const toTimeFormValue = (
     inputValue: string | null | undefined,
     inputSeparator: string,
@@ -21,6 +40,15 @@ const toTimeFormValue = (
     return inputValue?.replace(inputSeparator, dataSeparator) ?? '';
 };
 
+/**
+ * Props for the ControlledInputTime component
+ *
+ * @template TFieldValues - Type of the form values
+ * @template TName - Type of the field name
+ * @typedef {Object} ControlledInputTimeProps
+ * @property {Omit<InputProps, 'inputType' | 'value'>} inputProps - Props for the underlying Input component
+ * @property {string} [separator=':'] - Separator to use in the form data
+ */
 export type ControlledInputTimeProps<
     TFieldValues extends FieldValues,
     TName extends FieldPath<TFieldValues>,
@@ -29,6 +57,17 @@ export type ControlledInputTimeProps<
     separator?: string;
 };
 
+/**
+ * A controlled time input component for use with react-hook-form
+ *
+ * This component provides a time input that integrates with react-hook-form's
+ * Controller component, handling the conversion between form values and input values.
+ *
+ * @template TFieldValues - Type of the form values
+ * @template TName - Type of the field name
+ * @param {ControlledInputTimeProps<TFieldValues, TName>} props - Component props
+ * @returns {JSX.Element} Controlled time input component
+ */
 export const ControlledInputTime = <
     TFieldValues extends FieldValues = FieldValues,
     TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,

package/src/components/CopyToClipboard/CopyToClipboard.tsx

@@ -8,6 +8,17 @@ import {
 } from '@mistertemp/design-system';
 import React, { MouseEvent, useContext } from 'react';
 
+/**
+ * Props for the CopyToClipboard component
+ *
+ * @typedef {Object} CopyToClipboardProps
+ * @property {string | null} [value] - The text value to copy to clipboard
+ * @property {string} [className] - Additional CSS class name
+ * @property {SvgIcon} [icon=DuplicateSvg] - Icon to display on the button
+ * @property {string | Omit<ToastProps, 'id'>} [toast] - Toast message or props to show after copying
+ * @property {Function} [onCopy] - Callback function triggered after copying
+ * @property {string} [data-testid='copyToClipboard'] - Test ID for testing
+ */
 export type CopyToClipboardProps = {
     value?: string | null;
     className?: string;
@@ -17,6 +28,15 @@ export type CopyToClipboardProps = {
     'data-testid'?: string;
 };
 
+/**
+ * A button component that copies text to the clipboard when clicked
+ *
+ * This component provides a simple way to add copy-to-clipboard functionality
+ * with optional toast notification and callback.
+ *
+ * @param {CopyToClipboardProps} props - Component props
+ * @returns {JSX.Element} Copy to clipboard button
+ */
 export const CopyToClipboard = ({
     value,
     className,

package/src/components/DateFilter/DateFilter.tsx

@@ -22,6 +22,18 @@ import itFilters from '../../locales/it/scc-common-filters.json';
 import styles from './DateFilter.module.scss';
 import { deduceMode, defaultDateFormat, getDisplayValue, sanitizeValue } from './DateFilter.utils';
 
+/**
+ * Props for the DateFilter component
+ *
+ * @typedef {Object} DateFilterProps
+ * @property {string} [name='date'] - Name of the filter
+ * @property {string} [format] - Date format to use for display
+ * @property {Locale} [locale] - Date-fns locale to use
+ * @property {Object} [selectorProps] - Props for the dropdown selector trigger
+ * @property {MixedDatePickerSelection} [dropdownValue] - Currently selected date(s)
+ * @property {Function} [onDropdownValueChanged] - Callback when date selection changes
+ * @property {DatePickerProps['availableModes']} [modes] - Available date picker modes
+ */
 export type DateFilterProps = Omit<
     DropdownProps,
     'trigger' | 'onOpenChange' | 'dropdownValue' | 'onDropdownValueChanged' | 'withCTA' | 'ctaTitle'
@@ -35,6 +47,15 @@ export type DateFilterProps = Omit<
     modes?: DatePickerProps['availableModes'];
 };
 
+/**
+ * A date filter component with dropdown selection
+ *
+ * This component provides a date picker in a dropdown format, supporting
+ * single date, multiple dates, and date range selection modes.
+ *
+ * @param {DateFilterProps} props - Component props
+ * @returns {JSX.Element} Date filter component
+ */
 export const DateFilter: VFC<DateFilterProps> = ({
     name = 'date',
     'data-testid': dataTestId = `filters+${name}`,

package/src/components/DateFilter/DateFilter.utils.tsx

@@ -6,16 +6,44 @@ import {
 import { format, isDate as isDateFn, min } from 'date-fns';
 import { DateRange } from 'react-day-picker';
 
+/**
+ * Default date format used for displaying dates
+ */
 export const defaultDateFormat = 'dd/MM/yy';
 
+/**
+ * Type guard to check if a selection is an array of dates
+ *
+ * @param {MixedDatePickerSelection} selection - The date selection to check
+ * @returns {boolean} True if selection is an array of dates
+ */
 const isMultiple = (selection: MixedDatePickerSelection): selection is Date[] =>
     Array.isArray(selection);
 
+/**
+ * Type guard to check if a selection is a date range
+ *
+ * @param {MixedDatePickerSelection} selection - The date selection to check
+ * @returns {boolean} True if selection is a date range
+ */
 const isRange = (selection: MixedDatePickerSelection): selection is DateRange =>
     typeof selection === 'object' && 'from' in selection;
 
+/**
+ * Type guard to check if a selection is a single date
+ *
+ * @param {MixedDatePickerSelection} selection - The date selection to check
+ * @returns {boolean} True if selection is a single date
+ */
 const isDate = (selection: MixedDatePickerSelection): selection is Date => isDateFn(selection);
 
+/**
+ * Determines the appropriate date picker mode based on the selection type
+ *
+ * @param {MixedDatePickerSelection} selection - The current date selection
+ * @param {DatePickerProps['availableModes']} availableModes - Available picker modes
+ * @returns {DatePickerMode} The appropriate date picker mode
+ */
 export const deduceMode = (
     selection: MixedDatePickerSelection,
     availableModes: DatePickerProps['availableModes'],
@@ -32,6 +60,12 @@ export const deduceMode = (
     }
 };
 
+/**
+ * Sanitizes a date selection value, handling empty objects
+ *
+ * @param {MixedDatePickerSelection | object} value - The value to sanitize
+ * @returns {MixedDatePickerSelection} The sanitized value
+ */
 export const sanitizeValue = (
     value: MixedDatePickerSelection | object,
 ): MixedDatePickerSelection => {
@@ -46,6 +80,13 @@ export const sanitizeValue = (
     return value as MixedDatePickerSelection;
 };
 
+/**
+ * Generates a display string for the current date selection
+ *
+ * @param {MixedDatePickerSelection} selection - The date selection
+ * @param {string} dateFormat - The format to use for displaying dates
+ * @returns {string | undefined} The formatted display string or undefined if no selection
+ */
 export const getDisplayValue = (
     selection: MixedDatePickerSelection,
     dateFormat: string,

package/src/components/EnvironmentFilter/EnvironmentFilter.tsx

@@ -9,6 +9,9 @@ import fr from '../../locales/fr/scc-common-filters.json';
 import it from '../../locales/it/scc-common-filters.json';
 import { Filter, FilterDropdownOption, FilterProps } from '../Filter';
 
+/**
+ * Default fuzzy search options for environment filtering
+ */
 const DEFAULT_FUSE_OPTIONS: IFuseOptions<FilterDropdownOption<ENVIRONMENTS_CODE>> = {
     isCaseSensitive: false,
     shouldSort: true,
@@ -18,16 +21,35 @@ const DEFAULT_FUSE_OPTIONS: IFuseOptions<FilterDropdownOption<ENVIRONMENTS_CODE>
     threshold: 0.2,
 };
 
+/**
+ * Props for the EnvironmentFilter component
+ *
+ * @typedef {Object} EnvironmentFilterProps
+ * @property {string} [name='environment'] - Name of the filter
+ * @property {IFuseOptions<FilterDropdownOption<ENVIRONMENTS_CODE>>} [fuseOptions] - Custom fuzzy search options
+ */
 export type EnvironmentFilterProps = Omit<FilterProps<ENVIRONMENTS_CODE>, 'name' | 'options'> & {
     name?: string;
     fuseOptions?: IFuseOptions<FilterDropdownOption<ENVIRONMENTS_CODE>>;
 };
 
+/**
+ * List of all available environment options
+ */
 const options = getAllFlattenedEnvironments().map((env) => ({
     id: env.code,
     label: env.label,
 }));
 
+/**
+ * A filter component for selecting work environments
+ *
+ * This component provides a searchable dropdown for selecting one or more
+ * work environments from a predefined list.
+ *
+ * @param {EnvironmentFilterProps} props - Component props
+ * @returns {JSX.Element} Environment filter component
+ */
 export const EnvironmentFilter = ({
     listProps,
     name = 'environment',

package/src/components/Filter/Filter.tsx

@@ -16,12 +16,37 @@ import { useBundledTranslation } from '../../hooks';
 import fr from '../../locales/fr/scc-common-filters.json';
 import it from '../../locales/it/scc-common-filters.json';
 
+/**
+ * Option type for filter dropdown items
+ *
+ * @template T - Type of the option ID
+ * @typedef {Object} FilterDropdownOption
+ * @property {T} id - Unique identifier for the option
+ * @property {string} label - Display label for the option
+ * @property {boolean} [disabled] - Whether the option is disabled
+ */
 export type FilterDropdownOption<T extends string = string> = {
     id: T;
     label: string;
     disabled?: boolean;
 };
 
+/**
+ * Props for the Filter component
+ *
+ * @template T - Type of the option ID
+ * @typedef {Object} FilterProps
+ * @property {Object} [listProps] - Props for the dropdown list provider
+ * @property {Object} [selectorProps] - Props for the dropdown selector trigger
+ * @property {string} name - Name of the filter
+ * @property {string} [data-testid] - Test ID for testing
+ * @property {string} [placeholder] - Placeholder text when no selection
+ * @property {Array<FilterDropdownOption<T>>} options - Available filter options
+ * @property {'single' | 'multiple'} [mode='single'] - Selection mode
+ * @property {T[]} [dropdownValue] - Currently selected values
+ * @property {Function} [onDropdownValueChanged] - Callback when selection changes
+ * @property {string} [ctaTitle] - Title for the CTA button
+ */
 export type FilterProps<T extends string = string> = Omit<
     DropdownProps,
     'trigger' | 'dropdownValue' | 'onDropdownValueChanged' | 'onOpenChange'
@@ -41,6 +66,16 @@ export type FilterProps<T extends string = string> = Omit<
     ctaTitle?: string;
 };
 
+/**
+ * A generic filter component with dropdown selection
+ *
+ * This component provides a base for creating dropdown filters with
+ * single or multiple selection modes.
+ *
+ * @template T - Type of the option ID
+ * @param {FilterProps<T>} props - Component props
+ * @returns {JSX.Element} Filter component
+ */
 export function Filter<T extends string = string>({
     name,
     'data-testid': dataTestId = `filters+${name}`,

package/src/components/ProfessionFilter/ProfessionFilter.tsx

@@ -13,10 +13,28 @@ import { SearchableFilterProps } from '../../typings';
 import type { FilterDropdownOption, FilterProps } from '../Filter';
 import styles from './ProfessionFilter.module.scss';
 
+/**
+ * Props for parent components that use ProfessionFilter
+ *
+ * @typedef {Omit<FilterProps, 'name' | 'options'>} ProfessionFilterParentProps
+ */
 export type ProfessionFilterParentProps = Omit<FilterProps, 'name' | 'options'>;
 
+/**
+ * Type alias for profession filter dropdown options
+ *
+ * @typedef {FilterDropdownOption} ProfessionFilterDropdownOption
+ */
 export type ProfessionFilterDropdownOption = FilterDropdownOption;
 
+/**
+ * Props for the ProfessionFilter component
+ *
+ * @typedef {Object} ProfessionFilterProps
+ * @property {string} [placeholder] - Placeholder text when no selection
+ * @property {FilterDropdownOption[]} options - Available profession options
+ * @property {Function} [onChangeSelectedOptions] - Callback when selection changes
+ */
 type ProfessionFilterProps = Omit<ProfessionFilterParentProps, 'onDropdownValueChanged'> &
     SearchableFilterProps & {
         placeholder?: string;
@@ -24,6 +42,15 @@ type ProfessionFilterProps = Omit<ProfessionFilterParentProps, 'onDropdownValueC
         onChangeSelectedOptions?: (options: FilterDropdownOption[]) => void;
     };
 
+/**
+ * A filter component for selecting professions/qualifications
+ *
+ * This component provides a searchable dropdown for selecting one or more
+ * professions from a provided list, with support for debounced search.
+ *
+ * @param {ProfessionFilterProps} props - Component props
+ * @returns {JSX.Element} Profession filter component
+ */
 export const ProfessionFilter = ({
     dropdownValue,
     onDropdownCTAClick,

package/src/components/TextFilter/TextFilter.tsx

@@ -15,6 +15,18 @@ import fr from '../../locales/fr/scc-common-filters.json';
 import it from '../../locales/it/scc-common-filters.json';
 import styles from './TextFilter.module.scss';
 
+/**
+ * Props for the TextFilter component
+ *
+ * @typedef {Object} TextFilterProps
+ * @property {string} name - Name of the filter
+ * @property {'small' | 'medium'} [size='small'] - Size of the filter
+ * @property {string} placeholder - Placeholder text when no value
+ * @property {string} [dropdownValue] - Current filter value
+ * @property {Function} [onDropdownValueChanged] - Callback when value changes
+ * @property {Object} [selectorProps] - Props for the dropdown selector trigger
+ * @property {Object} [inputProps] - Props for the input component
+ */
 export type TextFilterProps = Omit<
     DropdownProps<Record<string, string>>,
     'id' | 'dropdownValue' | 'onDropdownValueChanged' | 'trigger' | 'withCTA' | 'ctaTitle' | 'size'
@@ -41,6 +53,15 @@ export type TextFilterProps = Omit<
     >;
 };
 
+/**
+ * A text input filter component with dropdown
+ *
+ * This component provides a text input in a dropdown format,
+ * allowing users to filter by entering text.
+ *
+ * @param {TextFilterProps} props - Component props
+ * @returns {JSX.Element} Text filter component
+ */
 export const TextFilter: VFC<TextFilterProps> = ({
     name,
     placeholder,
@@ -55,7 +76,7 @@ export const TextFilter: VFC<TextFilterProps> = ({
 }) => {
     const { t } = useBundledTranslation('scc-common-filters', { fr, it });
 
-    const [inputValue, setInputValue] = useState('');
+    const [inputValue, setInputValue] = useState(dropdownValue ?? '');
 
     const triggerValueChanged = () => {
         if (inputValue !== dropdownValue) {

package/src/components/index.ts

@@ -1,3 +1,9 @@
+/**
+ * @module Components
+ * @description Exports all shared UI components
+ */
+
+export * from './AccountFilter';
 export * from './ControlledInputDate';
 export * from './ControlledInputTime';
 export * from './CopyToClipboard';

package/src/hooks/index.ts

@@ -1,3 +1,8 @@
+/**
+ * @module Hooks
+ * @description Exports all shared React hooks
+ */
+
 export * from './useBundledTranslation';
 export * from './useDebouncedSearchInput';
 export * from './usePrevious';

package/src/hooks/useBundledTranslation.ts

@@ -2,11 +2,30 @@ import type { KeyPrefix, Namespace, TFunction } from 'i18next';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+/**
+ * Response type for the useBundledTranslation hook
+ *
+ * @template N - Namespace type
+ * @template TKPrefix - Key prefix type
+ * @typedef {Object} UseBundedTranslationResponse
+ * @property {TFunction<N, TKPrefix> | Function} t - Translation function
+ * @property {boolean} isReady - Whether translations are ready to use
+ */
 export type UseBundedTranslationResponse<N extends Namespace, TKPrefix> = {
     t: TFunction<N, TKPrefix> | ((key: string) => string);
     isReady: boolean;
 };
 
+/**
+ * Hook for handling bundled translations with i18next
+ * Allows loading translations from a provided object rather than fetching them
+ *
+ * @template N - Namespace type
+ * @template TKPrefix - Key prefix type
+ * @param {N | Readonly<N>} namespace - The translation namespace
+ * @param {Record<string, unknown>} translations - Object containing translations for different languages
+ * @returns {UseBundedTranslationResponse<N, TKPrefix>} Translation function and ready state
+ */
 export const useBundledTranslation = <
     N extends Namespace,
     TKPrefix extends KeyPrefix<N> = undefined,

package/src/hooks/useDebouncedSearchInput.ts

@@ -3,12 +3,31 @@ import { useMemo } from 'react';
 
 import { usePrevious } from './usePrevious';
 
+/**
+ * Configuration options for debounced search input
+ *
+ * @typedef {Object} DebouncedSearchConfig
+ * @property {number} [debounceDelay=100] - Delay in milliseconds before search is triggered
+ * @property {boolean} [forceEmptyValue] - Whether to force empty value when input is below threshold
+ * @property {number} [inputThreshold=2] - Minimum number of characters required to trigger search
+ */
 export type DebouncedSearchConfig = {
     debounceDelay?: number;
     forceEmptyValue?: boolean;
     inputThreshold?: number;
 };
 
+/**
+ * Hook for handling debounced search input with threshold control
+ *
+ * This hook provides a debounced search value that only updates when:
+ * 1. The input exceeds the threshold length
+ * 2. The input falls below threshold and forceEmptyValue is true
+ *
+ * @param {string} inputValue - The current input value
+ * @param {DebouncedSearchConfig} [config] - Configuration options
+ * @returns {string} The debounced search value
+ */
 export function useDebouncedSearchInput(
     inputValue: string,
     config?: DebouncedSearchConfig,

package/src/hooks/usePrevious.ts

@@ -1,5 +1,15 @@
 import { useRef } from 'react';
 
+/**
+ * Hook to keep track of the previous value of a variable
+ *
+ * This hook stores the previous value of a variable across renders,
+ * only updating when the value actually changes.
+ *
+ * @template T - Type of the value to track
+ * @param {T} value - The current value
+ * @returns {T | undefined} The previous value, or undefined on first render
+ */
 export const usePrevious = <T>(value: T) => {
     const currentRef = useRef<T>(value);
     const previousRef = useRef<T>();

package/src/locales/fr/scc-common-filters.json

@@ -1,5 +1,8 @@
 {
     "filters": {
+        "account":{
+            "placeholder": "Rechercher un client"
+        },
         "profession": {
             "label": "Qualification",
             "placeholder": "Qualification",

package/src/locales/it/scc-common-filters.json

@@ -1,5 +1,8 @@
 {
     "filters": {
+        "account":{
+            "placeholder": "Trova un cliente"
+        },
         "profession": {
             "label": "Qualificazione",
             "placeholder": "Qualificazione",

package/src/mocks/professions.ts

@@ -1,5 +1,13 @@
 import { FilterDropdownOption } from '../components';
 
+/**
+ * Mock data for profession filter options
+ *
+ * This array contains sample profession data for use in tests and demos.
+ * Each profession has a unique ID and display label.
+ *
+ * @type {FilterDropdownOption[]}
+ */
 export const filterOptionsMock: FilterDropdownOption[] = [
     { id: '00270025-6f9e-4e98-83da-4e7c9409653a', label: 'Webmaster' },
     { id: '21960b88-c606-4daa-b100-1fbc88834f7d', label: 'Carreleur' },

package/src/typings/filters.ts

@@ -1,5 +1,13 @@
 import { DebouncedSearchConfig } from '../hooks';
 
+/**
+ * Props for components that support searchable filtering
+ *
+ * @typedef {Object} SearchableFilterProps
+ * @property {boolean} [isLoading] - Indicates if search results are loading
+ * @property {Function} [onChangeSearchText] - Callback triggered when search text changes
+ * @property {DebouncedSearchConfig} searchConfig - Configuration for debounced search behavior
+ */
 export type SearchableFilterProps = {
     isLoading?: boolean;
     onChangeSearchText?: (text: string) => void;

package/src/typings/index.ts

@@ -1 +1,6 @@
+/**
+ * @module Typings
+ * @description Exports all shared TypeScript type definitions
+ */
+
 export * from './filters';