@mistertemp/libs-front-shared 1.1.1

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

@@ -0,0 +1,195 @@
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { render } from '../../../../.jest/reactTestingLibrary.config';
+import { filterOptionsMock } from '../../../mocks/professions';
+import { ProfessionFilter } from '../ProfessionFilter';
+
+const baseProps = {
+    searchConfig: {
+        debounceDelay: 500,
+        forceEmptyValue: true,
+        inputThreshold: 2,
+    },
+    isLoading: false,
+    options: [],
+};
+
+describe('ProfessionFilter', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    describe('component rendering & prop options', () => {
+        it('should render filter and dropdown with empty list and search load state', async () => {
+            render(<ProfessionFilter {...baseProps} isLoading />);
+
+            expect(screen.getByTestId('filters+profession')).toBeInTheDocument();
+            expect(screen.getByTestId('filters+profession+trigger-button-title')).toHaveTextContent(
+                'scc-common-filters:filters.profession.placeholder',
+            );
+
+            fireEvent.click(screen.getByTestId('filters+profession+trigger-button'));
+
+            expect(screen.getByTestId('filters+profession_popup')).toBeInTheDocument();
+            expect(screen.getByTestId('filters+profession-input-container')).toBeInTheDocument();
+            expect(screen.getByTestId('filters+profession+search_input')).toHaveProperty(
+                'placeholder',
+                'scc-common-filters:filters.profession.search.placeholder',
+            );
+            expect(screen.getByTestId('Loading-icon')).toBeInTheDocument();
+            expect(screen.getByTestId('filters+profession-bottom-action-button')).toHaveTextContent(
+                'scc-common-filters:actions.removeFilter',
+            );
+            expect(
+                //eslint-disable-next-line testing-library/no-node-access
+                screen.getByTestId('filters+profession-options').children.length,
+            ).toBe(1);
+        });
+
+        it('should render custom cta title and placeholder', () => {
+            const placeholder = 'Custom placeholder';
+            const ctaTitle = 'Custom title';
+
+            render(
+                <ProfessionFilter {...baseProps} ctaTitle={ctaTitle} placeholder={placeholder} />,
+            );
+
+            expect(screen.getByTestId('filters+profession+trigger-button-title')).toHaveTextContent(
+                `${placeholder}`,
+            );
+
+            fireEvent.click(screen.getByTestId('filters+profession+trigger-button'));
+
+            expect(screen.getByTestId('filters+profession-bottom-action-button')).toHaveTextContent(
+                ctaTitle,
+            );
+        });
+
+        it('should display all profession options', async () => {
+            render(<ProfessionFilter {...baseProps} options={filterOptionsMock} />);
+
+            fireEvent.click(screen.getByTestId('filters+profession+trigger-button'));
+
+            filterOptionsMock
+                // We can't test everything because of the virtualizer
+                .slice(0, 6)
+                .forEach((option) => {
+                    expect(
+                        screen.getByTestId(`filters+profession_option_${option.id}`),
+                    ).toBeInTheDocument();
+                });
+        });
+    });
+
+    describe('dropdown', () => {
+        const onChangeSelectedOptions = jest.fn();
+
+        it('should select two profession options', () => {
+            const { rerender } = render(
+                <ProfessionFilter
+                    {...baseProps}
+                    options={filterOptionsMock}
+                    onChangeSelectedOptions={onChangeSelectedOptions}
+                />,
+            );
+
+            fireEvent.click(screen.getByTestId('filters+profession+trigger-button'));
+            fireEvent.click(
+                screen.getByTestId(
+                    `filters+profession_${filterOptionsMock[0].id}_check_${filterOptionsMock[0].id}`,
+                ),
+            );
+            fireEvent.click(
+                screen.getByTestId(
+                    `filters+profession_${filterOptionsMock[2].id}_check_${filterOptionsMock[2].id}`,
+                ),
+            );
+            // Dropdown needs to be closed for changes to propagate
+            fireEvent.click(screen.getByTestId('filters+profession+trigger-button'));
+
+            const selectedOptions = [filterOptionsMock[0], filterOptionsMock[2]];
+            const { dropdownValue, labels } = selectedOptions.reduce<{
+                dropdownValue: string[];
+                labels: string[];
+            }>(
+                (acc, { id, label }) => {
+                    acc.dropdownValue.push(id);
+                    acc.labels.push(label);
+
+                    return acc;
+                },
+                { labels: [], dropdownValue: [] },
+            );
+
+            expect(onChangeSelectedOptions).toHaveBeenCalledWith(selectedOptions);
+
+            // New dropdownValue needs to loop back down from parent (usually a FilterGroup)
+            rerender(
+                <ProfessionFilter
+                    {...baseProps}
+                    options={filterOptionsMock}
+                    dropdownValue={dropdownValue}
+                    onChangeSelectedOptions={onChangeSelectedOptions}
+                />,
+            );
+
+            expect(screen.getByTestId('filters+profession+trigger-button-title')).toHaveTextContent(
+                `scc-common-filters:filters.profession.placeholder: ${labels.join(', ')}`,
+            );
+        });
+
+        it('should display default dropdown value without profession value (less or equal than min)', async () => {
+            const defaultValue = [filterOptionsMock[1]].map(({ id }) => id);
+
+            render(
+                <ProfessionFilter
+                    {...baseProps}
+                    dropdownValue={defaultValue}
+                    options={filterOptionsMock}
+                    onChangeSelectedOptions={onChangeSelectedOptions}
+                />,
+            );
+
+            expect(screen.getByTestId('filters+profession+trigger-button-title')).toHaveTextContent(
+                `scc-common-filters:filters.profession.placeholder: ${filterOptionsMock[1].label}`,
+            );
+        });
+    });
+
+    describe('search input', () => {
+        it('should trigger handler only if threshold is crossed', async () => {
+            const onChangeSearchText = jest.fn();
+            const searchText = 'fake search';
+
+            render(<ProfessionFilter {...baseProps} onChangeSearchText={onChangeSearchText} />);
+
+            fireEvent.click(screen.getByTestId('filters+profession+trigger-button'));
+            fireEvent.change(screen.getByTestId('filters+profession+search_input'), {
+                target: { value: searchText.slice(0, baseProps.searchConfig.inputThreshold) },
+            });
+            await waitFor(() => {
+                expect(onChangeSearchText).toHaveBeenNthCalledWith(1, '');
+            });
+            fireEvent.change(screen.getByTestId('filters+profession+search_input'), {
+                target: { value: searchText },
+            });
+            await waitFor(() => {
+                expect(onChangeSearchText).toHaveBeenNthCalledWith(2, searchText);
+            });
+        });
+    });
+
+    describe('CTA', () => {
+        it('should click on cta button', () => {
+            const onDropdownCTAClick = jest.fn();
+
+            render(<ProfessionFilter {...baseProps} onDropdownCTAClick={onDropdownCTAClick} />);
+
+            fireEvent.click(screen.getByTestId('filters+profession+trigger-button'));
+            fireEvent.click(screen.getByTestId('filters+profession-bottom-action-button'));
+
+            expect(onDropdownCTAClick).toHaveBeenCalled();
+        });
+    });
+});

package/src/components/ProfessionFilter/index.ts

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

package/src/components/TextFilter/TextFilter.module.scss

@@ -0,0 +1,3 @@
+.inputContainer {
+    padding: var(--space-3) var(--space-4);
+}

package/src/components/TextFilter/TextFilter.tsx

@@ -0,0 +1,112 @@
+import {
+    Dropdown,
+    DropdownProps,
+    DropdownSelectorTrigger,
+    DropdownSelectorTriggerProps,
+    Input,
+} from '@mistertemp/design-system';
+import { InputTextProps } from '@mistertemp/design-system/src/components/design-system/Input/InputText';
+import isEmpty from 'lodash/isEmpty';
+import isString from 'lodash/isString';
+import React, { useEffect, useState, VFC } 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 styles from './TextFilter.module.scss';
+
+export type TextFilterProps = Omit<
+    DropdownProps<Record<string, string>>,
+    'id' | 'dropdownValue' | 'onDropdownValueChanged' | 'trigger' | 'withCTA' | 'ctaTitle' | 'size'
+> & {
+    name: string;
+    size?: 'small' | 'medium';
+    placeholder: string;
+    dropdownValue?: string;
+    onDropdownValueChanged?: (value: string | undefined) => void;
+    selectorProps?: Omit<
+        DropdownSelectorTriggerProps,
+        'isSelected' | 'title' | 'data-testid' | 'disabled' | 'size'
+    >;
+    inputProps?: Omit<
+        InputTextProps,
+        | 'placeholder'
+        | 'data-testid'
+        | 'value'
+        | 'size'
+        | 'type'
+        | 'onSubmit'
+        | 'onChange'
+        | 'inputType'
+    >;
+};
+
+export const TextFilter: VFC<TextFilterProps> = ({
+    name,
+    placeholder,
+    dropdownValue,
+    onDropdownValueChanged,
+    'data-testid': dataTestId = `filters+${name}`,
+    onOpenChange,
+    selectorProps,
+    inputProps,
+    size = 'small',
+    ...dropdownProps
+}) => {
+    const { t } = useBundledTranslation('scc-common-filters', { fr, it });
+
+    const [inputValue, setInputValue] = useState('');
+
+    const triggerValueChanged = () => {
+        if (inputValue !== dropdownValue) {
+            onDropdownValueChanged?.(inputValue);
+        }
+    };
+
+    useEffect(() => {
+        setInputValue(isString(dropdownValue) ? dropdownValue : '');
+    }, [dropdownValue]);
+
+    const isValidValue = isString(dropdownValue) && !isEmpty(dropdownValue);
+
+    const displayedValue = isValidValue ? `${placeholder} : ${dropdownValue}` : placeholder;
+
+    return (
+        <Dropdown
+            trigger={
+                <DropdownSelectorTrigger
+                    data-testid={`${dataTestId}+trigger`}
+                    title={displayedValue}
+                    isSelected={isValidValue}
+                    disabled={dropdownProps.disabled}
+                    size={size}
+                    {...selectorProps}
+                />
+            }
+            data-testid={dataTestId}
+            dropdownValue={{ [name]: dropdownValue }}
+            onDropdownValueChanged={(value) => onDropdownValueChanged?.(value[name])}
+            withCTA
+            ctaTitle={t('scc-common-filters:actions.removeFilter')}
+            size={size}
+            onOpenChange={(isOpen) => {
+                onOpenChange?.(isOpen);
+                !isOpen && triggerValueChanged();
+            }}
+            {...dropdownProps}>
+            <div className={styles.inputContainer}>
+                <Input
+                    data-testid={`${dataTestId}+input`}
+                    value={inputValue}
+                    size={size}
+                    type="primary"
+                    onSubmit={triggerValueChanged}
+                    onChange={(e) => setInputValue(e.target.value ?? '')}
+                    inputType="text"
+                    withSubmitIcon={true}
+                    {...inputProps}
+                />
+            </div>
+        </Dropdown>
+    );
+};

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

@@ -0,0 +1,75 @@
+import { fireEvent, screen } from '@testing-library/react';
+import React from 'react';
+
+import { render } from '../../../../.jest/reactTestingLibrary.config';
+import { TextFilter } from '../TextFilter';
+
+describe('TextFilter', () => {
+    it('should have default value', () => {
+        render(<TextFilter name="test" placeholder="placeholder" dropdownValue="value1" />);
+
+        expect(screen.getByTestId('filters+test+trigger-button')).toHaveTextContent(
+            'placeholder : value1',
+        );
+
+        fireEvent.click(screen.getByTestId('filters+test+trigger-button'));
+
+        expect(screen.getByTestId('filters+test+input_input')).toHaveValue('value1');
+    });
+
+    it('should handle submit', () => {
+        const onChange = jest.fn();
+
+        render(
+            <TextFilter
+                name="test"
+                placeholder="placeholder"
+                dropdownValue="value1"
+                onDropdownValueChanged={onChange}
+            />,
+        );
+
+        fireEvent.click(screen.getByTestId('filters+test+trigger-button'));
+
+        const input = screen.getByTestId('filters+test+input_input');
+
+        expect(input).toHaveValue('value1');
+
+        fireEvent.change(input, {
+            target: { value: 'value2' },
+        });
+
+        expect(input).toHaveValue('value2');
+
+        fireEvent.click(screen.getByTestId('filters+test+input_icon-button'));
+
+        expect(onChange).toHaveBeenLastCalledWith('value2');
+    });
+
+    it('should trigger change on close', () => {
+        const onChange = jest.fn();
+
+        render(
+            <TextFilter
+                name="test"
+                placeholder="placeholder"
+                dropdownValue="value1"
+                onDropdownValueChanged={onChange}
+            />,
+        );
+
+        const trigger = screen.getByTestId('filters+test+trigger-button');
+
+        fireEvent.click(trigger);
+
+        const input = screen.getByTestId('filters+test+input_input');
+
+        expect(input).toHaveValue('value1');
+
+        fireEvent.change(input, { target: { value: 'value2' } });
+
+        fireEvent.click(trigger);
+
+        expect(onChange).toHaveBeenLastCalledWith('value2');
+    });
+});

package/src/components/TextFilter/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './ControlledInputDate';
+export * from './ControlledInputTime';
+export * from './CopyToClipboard';
+export * from './DateFilter';
+export * from './EnvironmentFilter';
+export * from './Filter';
+export * from './ProfessionFilter';
+export * from './TextFilter';

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useBundledTranslation';
+export * from './useDebouncedSearchInput';
+export * from './usePrevious';

package/src/hooks/useBundledTranslation.ts

@@ -0,0 +1,35 @@
+import type { KeyPrefix, Namespace, TFunction } from 'i18next';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type UseBundedTranslationResponse<N extends Namespace, TKPrefix> = {
+    t: TFunction<N, TKPrefix> | ((key: string) => string);
+    isReady: boolean;
+};
+
+export const useBundledTranslation = <
+    N extends Namespace,
+    TKPrefix extends KeyPrefix<N> = undefined,
+>(
+    namespace: N | Readonly<N>,
+    translations: Record<string, unknown>,
+): UseBundedTranslationResponse<N, TKPrefix> => {
+    const { i18n, t, ready: initReady } = useTranslation<N, TKPrefix>();
+    const [isBundleAdded, setIsBundleAdded] = useState(false);
+
+    const ready = initReady && isBundleAdded;
+
+    useEffect(() => {
+        if (i18n.language) {
+            const lang = i18n.language.slice(0, 2);
+
+            if (!i18n.hasResourceBundle(lang, namespace as string) && lang in translations) {
+                i18n.addResourceBundle(lang, namespace as string, translations[lang]);
+            }
+            setIsBundleAdded(true);
+        }
+    }, [i18n, namespace, ready, translations]);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return { t: ready ? t : (key: any) => key, isReady: ready };
+};

package/src/hooks/useDebouncedSearchInput.ts

@@ -0,0 +1,36 @@
+import { useDebounce } from '@mistertemp/design-system';
+import { useMemo } from 'react';
+
+import { usePrevious } from './usePrevious';
+
+export type DebouncedSearchConfig = {
+    debounceDelay?: number;
+    forceEmptyValue?: boolean;
+    inputThreshold?: number;
+};
+
+export function useDebouncedSearchInput(
+    inputValue: string,
+    config?: DebouncedSearchConfig,
+): string {
+    const debouncedInputValue = useDebounce(inputValue, config?.debounceDelay ?? 100);
+    const previousInputValue = usePrevious(debouncedInputValue);
+
+    const searchValue = useMemo(() => {
+        const threshold = config?.inputThreshold ?? 2;
+
+        if (debouncedInputValue.length > threshold) {
+            return debouncedInputValue;
+        } else if (
+            config?.forceEmptyValue &&
+            debouncedInputValue.length <= threshold &&
+            (previousInputValue === undefined || previousInputValue.length > threshold)
+        ) {
+            return '';
+        }
+
+        return previousInputValue;
+    }, [debouncedInputValue, previousInputValue, config?.inputThreshold, config?.forceEmptyValue]);
+
+    return searchValue ?? '';
+}

package/src/hooks/usePrevious.ts

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+
+export const usePrevious = <T>(value: T) => {
+    const currentRef = useRef<T>(value);
+    const previousRef = useRef<T>();
+
+    if (currentRef.current !== value) {
+        previousRef.current = currentRef.current;
+        currentRef.current = value;
+    }
+
+    return previousRef.current;
+};

package/src/locales/fr/date-picker.json

@@ -0,0 +1,11 @@
+{
+    "modes": {
+        "single": "Jour",
+        "multiple": "Jours",
+        "range": "Période"
+    },
+    "actions": {
+        "validate": "Valider",
+        "cancel": "Annuler"
+    }
+}

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

@@ -0,0 +1,22 @@
+{
+    "filters": {
+        "profession": {
+            "label": "Qualification",
+            "placeholder": "Qualification",
+            "search": {
+                "placeholder": "Rechercher une qualification"
+            }
+        },
+        "environment": {
+            "placeholder": "Environment"
+        },
+        "date": {
+            "placeholder": "Date"
+        },
+        "noResult": "Pas de résultat"
+    },
+    "actions": {
+        "removeFilter": "Supprimer le filtre",
+        "resetFilter": "Réinitialiser le filtre"
+    }
+}

package/src/locales/it/date-picker.json

@@ -0,0 +1,11 @@
+{
+    "modes": {
+        "single": "Giorno",
+        "multiple": "Giorni",
+        "range": "Periodo"
+    },
+    "actions": {
+        "validate": "Convalidare",
+        "cancel": "Annullare"
+    }
+}

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

@@ -0,0 +1,22 @@
+{
+    "filters": {
+        "profession": {
+            "label": "Qualificazione",
+            "placeholder": "Qualificazione",
+            "search": {
+                "placeholder": "Rechercher una qualificazione"
+            }
+        },
+        "environment": {
+            "placeholder": "Ambiente"
+        },
+        "date": {
+            "placeholder": "Data"
+        },
+        "noResult": "Nessun risultato"
+    },
+    "actions": {
+        "removeFilter": "Rimuovi il filtro",
+        "resetFilter": "Reimposta filtro"
+    }
+}

package/src/mocks/professions.ts

@@ -0,0 +1,24 @@
+import { FilterDropdownOption } from '../components';
+
+export const filterOptionsMock: FilterDropdownOption[] = [
+    { id: '00270025-6f9e-4e98-83da-4e7c9409653a', label: 'Webmaster' },
+    { id: '21960b88-c606-4daa-b100-1fbc88834f7d', label: 'Carreleur' },
+    { id: '006ff3e2-3ad7-4180-bba1-c3e19c847bf2', label: 'Jointeur' },
+    { id: '0e5482de-f123-45b2-b2d7-41ba0d85300c', label: 'Valet de chambre' },
+    { id: '126db8fc-27c5-4aaf-8d7e-75e23a4b2f59', label: 'Chocolatier' },
+    { id: '13cfe3f8-717f-4609-aa42-76f8896f5e69', label: 'Charpentier industriel' },
+    { id: '092f2514-de90-4ce4-934d-eb71453325e0', label: 'Dessinateur en construction métallique' },
+    { id: '0974d4f2-e245-4e77-ac67-47f10888baed', label: 'Maroquinier industriel' },
+    { id: '0f37e3e0-f4f8-40d9-a27b-fdf41e371fb8', label: 'Règleur de machine de production' },
+    { id: '0faf2779-fb6d-4648-90f6-427ce10ff19f', label: 'Maraîcher' },
+    {
+        id: '117124f1-4699-44dd-8e8a-4e7a48445c47',
+        label: "Gestionnaire de l'administration du personnel",
+    },
+    { id: '0e4e9f86-eb76-4897-ae67-abc1b972b8e7', label: "Chargé d'affaires en industrie" },
+    { id: '10fbc798-bae7-4f57-bac1-ce6ea4d026f9', label: 'Conducteur de tombereau' },
+    { id: '14c12ca9-2a5e-4294-8f47-17fe03305754', label: 'Conducteur PL' },
+    { id: '156121c5-e766-4de7-af79-4b1858d482e2', label: 'Gardien-Conciergerie' },
+    { id: '0804eb04-21df-4fda-a2be-a7a470e7e9cb', label: 'Masseur kinésithérapeute' },
+    { id: '09f1f51c-9cc1-48bb-95f7-ae693eb76103', label: 'Vendeur en prêt-à-porter' },
+];

package/src/typings/filters.ts

@@ -0,0 +1,7 @@
+import { DebouncedSearchConfig } from '../hooks';
+
+export type SearchableFilterProps = {
+    isLoading?: boolean;
+    onChangeSearchText?: (text: string) => void;
+    searchConfig: DebouncedSearchConfig;
+};

package/src/typings/index.ts

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

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "include": ["./src", "./.jest", "./demo", "index.d.ts", "index.ts"],
+    "exclude": ["node_modules", ".jest"],
+    "compilerOptions": {
+        "target": "ESNext",
+        "useDefineForClassFields": true,
+        "lib": ["DOM", "DOM.Iterable", "ESNext"],
+        "allowJs": false,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "strictNullChecks": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "noImplicitAny": true,
+        "types": ["node", "jest"],
+        "typeRoots": ["./node_modules/@types"]
+    }
+}