@mistertemp/libs-front-shared 1.1.1

package/src/components/DateFilter/DateFilter.tsx

@@ -0,0 +1,117 @@
+import {
+    DatePicker,
+    Dropdown,
+    DropdownProps,
+    DropdownSelectorTrigger,
+    DropdownSelectorTriggerProps,
+} from '@mistertemp/design-system';
+import {
+    DatePickerProps,
+    MixedDatePickerSelection,
+} from '@mistertemp/design-system/src/components/design-system/DatePicker/DatePicker';
+import { Locale } from 'date-fns';
+import { fr } from 'date-fns/locale';
+import { TFunction } from 'i18next';
+import React, { useEffect, useRef, useState, VFC } from 'react';
+
+import { useBundledTranslation } from '../../hooks';
+import frDate from '../../locales/fr/date-picker.json';
+import frFilters from '../../locales/fr/scc-common-filters.json';
+import itDate from '../../locales/it/date-picker.json';
+import itFilters from '../../locales/it/scc-common-filters.json';
+import styles from './DateFilter.module.scss';
+import { deduceMode, defaultDateFormat, getDisplayValue, sanitizeValue } from './DateFilter.utils';
+
+export type DateFilterProps = Omit<
+    DropdownProps,
+    'trigger' | 'onOpenChange' | 'dropdownValue' | 'onDropdownValueChanged' | 'withCTA' | 'ctaTitle'
+> & {
+    name?: string;
+    format?: string;
+    locale?: Locale;
+    selectorProps?: Omit<DropdownSelectorTriggerProps, 'isSelected' | 'title'>;
+    dropdownValue?: MixedDatePickerSelection;
+    onDropdownValueChanged?: (value: MixedDatePickerSelection) => void;
+    modes?: DatePickerProps['availableModes'];
+};
+
+export const DateFilter: VFC<DateFilterProps> = ({
+    name = 'date',
+    'data-testid': dataTestId = `filters+${name}`,
+    format = defaultDateFormat,
+    locale = fr,
+    dropdownValue,
+    onDropdownValueChanged,
+    modes,
+    selectorProps,
+    ...props
+}) => {
+    const { t: tFilters } = useBundledTranslation('scc-common-filters', {
+        fr: frFilters,
+        it: itFilters,
+    });
+
+    const { t: tDate } = useBundledTranslation('date-picker', { fr: frDate, it: itDate });
+
+    const [open, setOpen] = useState(false);
+    const selectedValue = useRef(sanitizeValue(dropdownValue));
+
+    const mode = deduceMode(selectedValue.current, modes);
+
+    const handleOpenChange = (isOpen: boolean) => {
+        if (!isOpen) {
+            onDropdownValueChanged?.(selectedValue.current);
+        }
+
+        setOpen(isOpen);
+    };
+
+    useEffect(() => {
+        selectedValue.current = sanitizeValue(dropdownValue);
+    }, [dropdownValue]);
+
+    const isSelected = !!selectedValue.current;
+    const displayValue = getDisplayValue(selectedValue.current, format);
+    const placeholder = tFilters('scc-common-filters:filters.date.placeholder');
+    const triggerTitle = displayValue ? `${placeholder} : ${displayValue}` : placeholder;
+
+    return (
+        <Dropdown
+            isOpen={open}
+            onOpenChange={handleOpenChange}
+            dropdownClassName={styles.dropdown}
+            dropdownValue={{
+                [name]: selectedValue.current,
+            }}
+            onDropdownCTAClick={() => {}}
+            trigger={
+                <DropdownSelectorTrigger
+                    data-testid={`${dataTestId}+trigger`}
+                    title={triggerTitle}
+                    isSelected={isSelected}
+                    type="primary"
+                    disabled={props.disabled}
+                    {...selectorProps}
+                />
+            }>
+            <DatePicker
+                t={tDate as TFunction}
+                locale={locale}
+                data-testid={`${dataTestId}+picker`}
+                availableModes={modes}
+                showModeSwitch={!!modes?.length}
+                mode={mode}
+                selected={selectedValue.current}
+                onSubmit={(value) => {
+                    onDropdownValueChanged?.(value);
+                    setOpen(false);
+                }}
+                onSelect={(selected) => (selectedValue.current = selected)}
+                onCancel={() => {
+                    selectedValue.current = sanitizeValue(dropdownValue);
+                    setOpen(false);
+                }}
+            />
+        </Dropdown>
+    );
+};

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

@@ -0,0 +1,65 @@
+import {
+    DatePickerMode,
+    DatePickerProps,
+    MixedDatePickerSelection,
+} from '@mistertemp/design-system/src/components/design-system/DatePicker/DatePicker';
+import { format, isDate as isDateFn, min } from 'date-fns';
+import { DateRange } from 'react-day-picker';
+
+export const defaultDateFormat = 'dd/MM/yy';
+
+const isMultiple = (selection: MixedDatePickerSelection): selection is Date[] =>
+    Array.isArray(selection);
+
+const isRange = (selection: MixedDatePickerSelection): selection is DateRange =>
+    typeof selection === 'object' && 'from' in selection;
+
+const isDate = (selection: MixedDatePickerSelection): selection is Date => isDateFn(selection);
+
+export const deduceMode = (
+    selection: MixedDatePickerSelection,
+    availableModes: DatePickerProps['availableModes'],
+): DatePickerMode => {
+    switch (true) {
+        case isMultiple(selection):
+            return 'multiple';
+        case isRange(selection):
+            return 'range';
+        case isDate(selection):
+            return 'single';
+        default:
+            return availableModes?.length ? availableModes[0] : 'single';
+    }
+};
+
+export const sanitizeValue = (
+    value: MixedDatePickerSelection | object,
+): MixedDatePickerSelection => {
+    if (
+        !isDate(value as MixedDatePickerSelection) &&
+        typeof value === 'object' &&
+        !Object.keys(value).length
+    ) {
+        return undefined;
+    }
+
+    return value as MixedDatePickerSelection;
+};
+
+export const getDisplayValue = (
+    selection: MixedDatePickerSelection,
+    dateFormat: string,
+): string | undefined => {
+    switch (true) {
+        case isMultiple(selection) && !!selection.length:
+            return selection.length > 1
+                ? `${format(min(selection), dateFormat)} (+${selection.length - 1})`
+                : format(selection[0], dateFormat);
+        case isRange(selection) && !!selection.from:
+            return `${format(selection.from, dateFormat)} - ${selection.to ? format(selection.to, dateFormat) : ''}`;
+        case isDate(selection):
+            return format(selection, dateFormat);
+        default:
+            return undefined;
+    }
+};

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

@@ -0,0 +1,39 @@
+import { screen } from '@testing-library/react';
+import { format, startOfToday, startOfTomorrow } from 'date-fns';
+
+import { render } from '../../../../.jest/reactTestingLibrary.config';
+import { DateFilter } from '../DateFilter';
+
+describe('DateFilter', () => {
+    it('should display multiple values', () => {
+        const today = startOfToday();
+        const tomorrow = startOfTomorrow();
+
+        render(<DateFilter dropdownValue={[today, tomorrow]} />);
+
+        expect(screen.getByTestId('filters+date+trigger-button')).toHaveTextContent(
+            `${format(today, 'dd/MM/yy')} (+1)`,
+        );
+    });
+
+    it('should display range values', () => {
+        const today = startOfToday();
+        const tomorrow = startOfTomorrow();
+
+        render(<DateFilter dropdownValue={{ from: today, to: tomorrow }} />);
+
+        expect(screen.getByTestId('filters+date+trigger-button')).toHaveTextContent(
+            `${format(today, 'dd/MM/yy')} - ${format(tomorrow, 'dd/MM/yy')}`,
+        );
+    });
+
+    it('should display single values', () => {
+        const today = startOfToday();
+
+        render(<DateFilter dropdownValue={today} />);
+
+        expect(screen.getByTestId('filters+date+trigger-button')).toHaveTextContent(
+            format(today, 'dd/MM/yy'),
+        );
+    });
+});

package/src/components/DateFilter/index.ts

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

package/src/components/EnvironmentFilter/EnvironmentFilter.tsx

@@ -0,0 +1,74 @@
+import { ENVIRONMENTS_CODE, getAllFlattenedEnvironments } from '@mistertemp/libs-work-environments';
+import Fuse, { IFuseOptions } from 'fuse.js';
+import { merge } from 'lodash';
+import React from 'react';
+import { useMemo, 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';
+
+const DEFAULT_FUSE_OPTIONS: IFuseOptions<FilterDropdownOption<ENVIRONMENTS_CODE>> = {
+    isCaseSensitive: false,
+    shouldSort: true,
+    findAllMatches: true,
+    ignoreLocation: true,
+    keys: ['label'],
+    threshold: 0.2,
+};
+
+export type EnvironmentFilterProps = Omit<FilterProps<ENVIRONMENTS_CODE>, 'name' | 'options'> & {
+    name?: string;
+    fuseOptions?: IFuseOptions<FilterDropdownOption<ENVIRONMENTS_CODE>>;
+};
+
+const options = getAllFlattenedEnvironments().map((env) => ({
+    id: env.code,
+    label: env.label,
+}));
+
+export const EnvironmentFilter = ({
+    listProps,
+    name = 'environment',
+    mode = 'multiple',
+    fuseOptions,
+    ...props
+}: EnvironmentFilterProps) => {
+    const { t } = useBundledTranslation('scc-common-filters', { fr, it });
+    const [inputValue, setInputValue] = useState<string | undefined>(undefined);
+
+    const fuse = useMemo(() => {
+        const fuse = new Fuse(options, { ...DEFAULT_FUSE_OPTIONS, ...fuseOptions });
+
+        return fuse;
+    }, [fuseOptions]);
+
+    const filteredOptions = useMemo(() => {
+        if (inputValue) {
+            return fuse.search(inputValue).map((r) => r.item);
+        }
+
+        return options;
+    }, [fuse, inputValue]);
+
+    return (
+        <Filter
+            name={name}
+            mode={mode}
+            options={filteredOptions}
+            placeholder={t('scc-common-filters:filters.environment.placeholder')}
+            listProps={merge<
+                FilterProps<ENVIRONMENTS_CODE>['listProps'],
+                FilterProps<ENVIRONMENTS_CODE>['listProps']
+            >(
+                {
+                    search: { value: inputValue, onInputValueChanged: setInputValue },
+                    withSelectedTags: true,
+                },
+                listProps,
+            )}
+            {...props}
+        />
+    );
+};

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

@@ -0,0 +1,99 @@
+import { ENVIRONMENTS_CODE, getEnvironmentByCode } from '@mistertemp/libs-work-environments';
+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 { EnvironmentFilter } from '../EnvironmentFilter';
+
+describe('EnvironmentFilter', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should display all statuses options', async () => {
+        render(<EnvironmentFilter />);
+
+        fireEvent.click(screen.getByTestId('filters+environment+trigger-button'));
+
+        Object.values(ENVIRONMENTS_CODE)
+            // We can't test everything because of the virtualizer
+            .slice(0, 6)
+            .forEach((status) => {
+                expect(
+                    screen.getByTestId(`filters+environment_option_${status}`),
+                ).toBeInTheDocument();
+            });
+    });
+
+    it('should select one candidate status', async () => {
+        const mock = jest.fn();
+
+        render(<EnvironmentFilter onDropdownValueChanged={mock} />);
+
+        fireEvent.click(screen.getByTestId('filters+environment+trigger-button'));
+
+        fireEvent.click(
+            screen.getByTestId(
+                `filters+environment_${ENVIRONMENTS_CODE.CABINET_MEDICAL}_check_${ENVIRONMENTS_CODE.CABINET_MEDICAL}`,
+            ),
+        );
+
+        await userEvent.click(document.body);
+
+        await waitFor(() => {
+            expect(mock).toHaveBeenCalledWith([ENVIRONMENTS_CODE.CABINET_MEDICAL]);
+        });
+    });
+
+    it('should display default dropdown value', async () => {
+        render(<EnvironmentFilter dropdownValue={[ENVIRONMENTS_CODE.ADDICTOLOGIE]} />);
+
+        expect(screen.getByTestId('filters+environment+trigger-button-title')).toHaveTextContent(
+            getEnvironmentByCode(ENVIRONMENTS_CODE.ADDICTOLOGIE).label,
+        );
+    });
+
+    it('should update cta title', async () => {
+        const newCtaTitle = 'New cta title';
+
+        render(<EnvironmentFilter withCTA ctaTitle={newCtaTitle} />);
+
+        fireEvent.click(screen.getByTestId('filters+environment+trigger-button'));
+
+        expect(screen.getByTestId('filters+environment-bottom-action-button')).toHaveTextContent(
+            newCtaTitle,
+        );
+    });
+
+    it('should update placeholder title', async () => {
+        const newPlaceholder = 'New placeholder';
+
+        render(<EnvironmentFilter placeholder={newPlaceholder} />);
+
+        expect(screen.getByTestId('filters+environment+trigger-button-title')).toHaveTextContent(
+            `${newPlaceholder}`,
+        );
+    });
+
+    it('should click on cta button', async () => {
+        const ctaMock = jest.fn();
+        const valueChangeMock = jest.fn();
+
+        render(
+            <EnvironmentFilter
+                dropdownValue={[ENVIRONMENTS_CODE.ADDICTOLOGIE]}
+                onDropdownCTAClick={ctaMock}
+                onDropdownValueChanged={valueChangeMock}
+            />,
+        );
+
+        fireEvent.click(screen.getByTestId('filters+environment+trigger-button'));
+
+        fireEvent.click(screen.getByTestId('filters+environment-bottom-action-button'));
+
+        expect(ctaMock).toHaveBeenCalledTimes(1);
+        expect(valueChangeMock).toHaveBeenCalledTimes(1);
+        expect(valueChangeMock).toHaveBeenCalledWith([]);
+    });
+});

package/src/components/EnvironmentFilter/index.ts

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

package/src/components/Filter/Filter.tsx

@@ -0,0 +1,127 @@
+import {
+    Dropdown,
+    DropdownProps,
+    DropdownSelectorTrigger,
+    DropdownSelectorTriggerProps,
+    DropdownStaticListProvider,
+    DropdownStaticListProviderProps,
+    SelectionModes,
+} from '@mistertemp/design-system';
+import isEmpty from 'lodash/isEmpty';
+import isEqual from 'lodash/isEqual';
+import React, { useEffect } from 'react';
+import { useCallback, 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';
+
+export type FilterDropdownOption<T extends string = string> = {
+    id: T;
+    label: string;
+    disabled?: boolean;
+};
+
+export type FilterProps<T extends string = string> = Omit<
+    DropdownProps,
+    'trigger' | 'dropdownValue' | 'onDropdownValueChanged' | 'onOpenChange'
+> & {
+    listProps?: Omit<
+        DropdownStaticListProviderProps,
+        'name' | 'selectionMode' | 'items' | 'itemTemplate' | 'size'
+    >;
+    selectorProps?: Omit<DropdownSelectorTriggerProps, 'isSelected' | 'title'>;
+    name: string;
+    'data-testid'?: string;
+    placeholder?: string;
+    options: Array<FilterDropdownOption<T>>;
+    mode?: Extract<SelectionModes, 'single' | 'multiple'>;
+    dropdownValue?: T[];
+    onDropdownValueChanged?: (value: T[]) => void;
+    ctaTitle?: string;
+};
+
+export function Filter<T extends string = string>({
+    name,
+    'data-testid': dataTestId = `filters+${name}`,
+    placeholder,
+    mode = 'single',
+    options,
+    onDropdownValueChanged,
+    onDropdownCTAClick,
+    dropdownValue,
+    listProps,
+    selectorProps,
+    ...props
+}: FilterProps<T>) {
+    const { t } = useBundledTranslation('scc-common-filters', { fr, it });
+
+    const [internalDropdownValue, setInternalDropdownValue] = useState<
+        FilterDropdownOption<T>[] | undefined
+    >(options.filter(({ id }) => dropdownValue?.includes(id)));
+
+    const handleOnOpenChange = useCallback(
+        (isOpen) => {
+            if (!isOpen && onDropdownValueChanged && internalDropdownValue) {
+                const targetValue = internalDropdownValue.map(({ id }) => id);
+
+                if (!isEqual(targetValue, dropdownValue)) {
+                    onDropdownValueChanged(targetValue);
+                }
+            }
+        },
+        [internalDropdownValue, dropdownValue, onDropdownValueChanged],
+    );
+
+    const isSelected = !isEmpty(internalDropdownValue);
+    const displayedValues = internalDropdownValue?.map(({ label }) => label).join(', ') ?? '';
+    const triggerTitle = !isEmpty(displayedValues)
+        ? `${placeholder} : ${displayedValues}`
+        : placeholder;
+
+    useEffect(() => {
+        setInternalDropdownValue((current) =>
+            current?.filter(({ id }) => dropdownValue?.includes(id)),
+        );
+    }, [dropdownValue]);
+
+    return (
+        <Dropdown
+            data-testid={dataTestId}
+            trigger={
+                <DropdownSelectorTrigger
+                    data-testid={`${dataTestId}+trigger`}
+                    title={triggerTitle}
+                    isSelected={isSelected}
+                    type="primary"
+                    disabled={props.disabled}
+                    {...selectorProps}
+                />
+            }
+            withCTA
+            size={props?.size ?? 'small'}
+            ctaTitle={t('scc-common-filters:actions.removeFilter')}
+            dropdownValue={{
+                [name]: internalDropdownValue,
+            }}
+            onDropdownValueChanged={(value) => {
+                setInternalDropdownValue(value[name]);
+            }}
+            onDropdownCTAClick={() => {
+                setInternalDropdownValue([]);
+                onDropdownCTAClick?.();
+            }}
+            onOpenChange={handleOnOpenChange}
+            {...props}>
+            <DropdownStaticListProvider
+                data-testid={dataTestId}
+                selectionMode={mode}
+                items={options}
+                name={name}
+                size="small"
+                itemTemplate={mode === 'multiple' ? 'checkbox' : 'right-checked-list-item'}
+                {...listProps}
+            />
+        </Dropdown>
+    );
+}

package/src/components/Filter/index.ts

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

package/src/components/ProfessionFilter/ProfessionFilter.module.scss

@@ -0,0 +1,4 @@
+.container {
+    overflow: auto;
+    max-height: 30rem;
+}

package/src/components/ProfessionFilter/ProfessionFilter.tsx

@@ -0,0 +1,145 @@
+import {
+    Dropdown,
+    DropdownSelectorTrigger,
+    DropdownStaticListProvider,
+} from '@mistertemp/design-system';
+import { isEqual } from 'lodash';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { useBundledTranslation, useDebouncedSearchInput } from '../../hooks';
+import fr from '../../locales/fr/scc-common-filters.json';
+import it from '../../locales/it/scc-common-filters.json';
+import { SearchableFilterProps } from '../../typings';
+import type { FilterDropdownOption, FilterProps } from '../Filter';
+import styles from './ProfessionFilter.module.scss';
+
+export type ProfessionFilterParentProps = Omit<FilterProps, 'name' | 'options'>;
+
+export type ProfessionFilterDropdownOption = FilterDropdownOption;
+
+type ProfessionFilterProps = Omit<ProfessionFilterParentProps, 'onDropdownValueChanged'> &
+    SearchableFilterProps & {
+        placeholder?: string;
+        options: FilterDropdownOption[];
+        onChangeSelectedOptions?: (options: FilterDropdownOption[]) => void;
+    };
+
+export const ProfessionFilter = ({
+    dropdownValue,
+    onDropdownCTAClick,
+    isLoading,
+    onChangeSearchText,
+    options,
+    onChangeSelectedOptions,
+    placeholder,
+    searchConfig,
+    'data-testid': dataTestId = 'filters+profession',
+    ...props
+}: ProfessionFilterProps) => {
+    const { t } = useBundledTranslation('scc-common-filters', { fr, it });
+
+    const [searchInput, setSearchInput] = useState('');
+    const [sortedOptions, setSortedOptions] = useState<FilterDropdownOption[]>([]);
+    const searchValue = useDebouncedSearchInput(searchInput, searchConfig);
+
+    const selectedOptions = useRef<FilterDropdownOption[]>([]);
+    const triggerLabel = useRef<string>('');
+    const selectionHasChanged = useRef<boolean>(false);
+
+    const placeholderText = useMemo(
+        () => placeholder ?? t('scc-common-filters:filters.profession.placeholder'),
+        [placeholder, t],
+    );
+
+    const handleDropdownValueChanged = (values: { profession: FilterDropdownOption[] }) => {
+        if (!options) {
+            return;
+        }
+
+        if (!isEqual(selectedOptions.current, values.profession)) {
+            selectionHasChanged.current = true;
+            selectedOptions.current = values.profession;
+        }
+    };
+
+    const handleOpenChanged = useCallback(
+        (isOpen) => {
+            if (!isOpen && selectionHasChanged.current) {
+                selectionHasChanged.current = false;
+                onChangeSelectedOptions?.(selectedOptions.current);
+            }
+        },
+        //eslint-disable-next-line react-hooks/exhaustive-deps
+        [dropdownValue], // -> onDropdownValueChanged in deps list creates an infinite loop when used in a FilterGroup*/
+    );
+
+    const handleCTAClicked = () => {
+        onChangeSelectedOptions?.([]);
+        onDropdownCTAClick?.();
+    };
+
+    useEffect(() => {
+        triggerLabel.current = placeholderText;
+
+        if (!selectionHasChanged.current) {
+            selectedOptions.current = options.filter(({ id }) => dropdownValue?.includes(id));
+        }
+
+        if (selectedOptions.current.length) {
+            const selectedProfessionLabels = selectedOptions.current
+                .map(({ label }) => label)
+                .join(', ');
+
+            triggerLabel.current += `: ${selectedProfessionLabels}`;
+        }
+
+        const sortedOptionValues = selectedOptions.current.map(({ id }) => id);
+        const remainingOptions = options.filter(({ id }) => !sortedOptionValues.includes(id));
+
+        setSortedOptions([...selectedOptions.current, ...remainingOptions]);
+    }, [dropdownValue, options, placeholderText]);
+
+    useEffect(() => {
+        onChangeSearchText?.(searchValue);
+    }, [searchValue, onChangeSearchText]);
+
+    return (
+        <Dropdown<{ profession: FilterDropdownOption[] }>
+            trigger={
+                <DropdownSelectorTrigger
+                    data-testid={`${dataTestId}+trigger`}
+                    title={triggerLabel.current}
+                    isSelected={!!dropdownValue?.length}
+                    type="primary"
+                    disabled={props.disabled}
+                />
+            }
+            data-testid={dataTestId}
+            withCTA
+            size="small"
+            ctaTitle={t('scc-common-filters:actions.removeFilter')}
+            dropdownValue={{ profession: selectedOptions.current }}
+            onDropdownCTAClick={handleCTAClicked}
+            onDropdownValueChanged={handleDropdownValueChanged}
+            onOpenChange={handleOpenChanged}
+            {...props}>
+            <div className={styles.container}>
+                <DropdownStaticListProvider
+                    search={{
+                        value: searchInput,
+                        isLoading,
+                        placeholder: t('scc-common-filters:filters.profession.search.placeholder'),
+                        onInputValueChanged: (inputValue) => setSearchInput(inputValue ?? ''),
+                        'data-testid': `${dataTestId}+search`,
+                    }}
+                    data-testid={dataTestId}
+                    selectionMode="multiple"
+                    items={sortedOptions}
+                    name="profession"
+                    size="small"
+                    itemTemplate="checkbox"
+                />
+            </div>
+        </Dropdown>
+    );
+};