@coveord/plasma-mantine 47.0.1-next.2

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -0,0 +1,247 @@
+import {useForm} from '@mantine/form';
+import {render, screen, userEvent, within} from '@test-utils';
+import {useState} from 'react';
+
+import {Collection} from '../Collection';
+
+describe('Collection', () => {
+    it('renders one item for each initial values in the form', () => {
+        const Fixture = () => {
+            const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+            return (
+                <Collection<string> newItem="" {...form.getInputProps('fruits')}>
+                    {(name) => <span data-testid="item">{name}</span>}
+                </Collection>
+            );
+        };
+
+        render(<Fixture />);
+
+        const items = screen.getAllByTestId('item');
+        expect(items).toHaveLength(2);
+        expect(items[0]).toHaveTextContent('banana');
+        expect(items[1]).toHaveTextContent('orange');
+    });
+
+    it('removes the item when clicking on its remove button', async () => {
+        const Fixture = () => {
+            const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+            return (
+                <>
+                    <Collection newItem="" {...form.getInputProps('fruits')}>
+                        {(name) => <span data-testid="item">{name}</span>}
+                    </Collection>
+                    <div data-testid="form-state">{JSON.stringify(form.values)}</div>
+                </>
+            );
+        };
+
+        render(<Fixture />);
+        let items = screen.getAllByTestId('item');
+        expect(items).toHaveLength(2);
+        /* eslint-disable-next-line testing-library/no-node-access */
+        const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
+
+        userEvent.click(removeBanana);
+
+        items = screen.getAllByTestId('item');
+        // eslint-disable-next-line jest-dom/prefer-in-document
+        expect(screen.getAllByTestId('item')).toHaveLength(1);
+        expect(items[0]).toHaveTextContent('orange');
+        expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["orange"]}');
+    });
+
+    it('does not render the remove button when disabled', async () => {
+        const Fixture = () => {
+            const [disabled, setDisabled] = useState(false);
+            const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+            return (
+                <>
+                    <button onClick={() => setDisabled(true)}>disable</button>
+                    <Collection newItem="" {...form.getInputProps('fruits')} disabled={disabled}>
+                        {(name) => <span data-testid="item">{name}</span>}
+                    </Collection>
+                </>
+            );
+        };
+
+        render(<Fixture />);
+        await screen.findAllByRole('button', {name: /remove/i});
+        userEvent.click(screen.getByRole('button', {name: /disable/i}));
+        expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
+    });
+
+    it('adds a new item when clicking on the add button', () => {
+        const Fixture = () => {
+            const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+            return (
+                <>
+                    <Collection newItem="new" {...form.getInputProps('fruits')}>
+                        {(name) => <span data-testid="item">{name}</span>}
+                    </Collection>
+                    <div data-testid="form-state">{JSON.stringify(form.values)}</div>
+                </>
+            );
+        };
+
+        render(<Fixture />);
+        const addItem = screen.getByRole('button', {name: /add/i});
+        userEvent.click(addItem);
+
+        const items = screen.getAllByTestId('item');
+        expect(items).toHaveLength(3);
+        expect(items[0]).toHaveTextContent('banana');
+        expect(items[1]).toHaveTextContent('orange');
+        expect(items[2]).toHaveTextContent('new');
+        expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["banana","orange","new"]}');
+    });
+
+    it('disables the add button whenever allowAdd callback returns false', () => {
+        const allowAdd = jest.fn().mockImplementation(() => false);
+        const Fixture = () => {
+            const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+            return (
+                <>
+                    <Collection newItem="new" {...form.getInputProps('fruits')} allowAdd={allowAdd}>
+                        {(name) => <span data-testid="item">{name}</span>}
+                    </Collection>
+                    <div data-testid="form-state">{JSON.stringify(form.values)}</div>
+                </>
+            );
+        };
+
+        const {rerender} = render(<Fixture />);
+        expect(screen.getByRole('button', {name: /add/i})).toBeDisabled();
+        expect(allowAdd).toHaveBeenCalledWith(['banana', 'orange']);
+
+        allowAdd.mockImplementation(() => true);
+        rerender(<Fixture />);
+        expect(screen.getByRole('button', {name: /add/i})).toBeEnabled();
+    });
+
+    describe('when required is true', () => {
+        it("doesn't render the remove button on one item", async () => {
+            const Fixture = () => {
+                const form = useForm({initialValues: {fruits: ['banana']}});
+                return (
+                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
+                        {(name) => <span data-testid="item">{name}</span>}
+                    </Collection>
+                );
+            };
+
+            render(<Fixture />);
+
+            expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
+
+            const items = screen.getAllByTestId('item');
+            // eslint-disable-next-line jest-dom/prefer-in-document
+            expect(items).toHaveLength(1);
+            expect(items[0]).toHaveTextContent('banana');
+        });
+
+        it('render the remove button on the first row if length is 2', async () => {
+            const Fixture = () => {
+                const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+                return (
+                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
+                        {(name) => <span data-testid="item">{name}</span>}
+                    </Collection>
+                );
+            };
+
+            render(<Fixture />);
+            await screen.findAllByRole('button', {name: /remove/i});
+            /* eslint-disable-next-line testing-library/no-node-access */
+            const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
+            expect(removeButtons).toHaveLength(2);
+
+            const items = screen.getAllByTestId('item');
+            expect(items).toHaveLength(2);
+            expect(items[0]).toHaveTextContent('banana');
+            expect(items[1]).toHaveTextContent('orange');
+        });
+
+        it('not render the remove button after removing an item from a collection containing two items', async () => {
+            const Fixture = () => {
+                const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+                return (
+                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
+                        {(name) => <span data-testid="item">{name}</span>}
+                    </Collection>
+                );
+            };
+
+            render(<Fixture />);
+
+            await screen.findAllByRole('button', {name: /remove/i});
+            /* eslint-disable-next-line testing-library/no-node-access */
+            const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
+            expect(removeButtons).toHaveLength(2);
+
+            const items = screen.getAllByTestId('item');
+            expect(items).toHaveLength(2);
+            expect(items[0]).toHaveTextContent('banana');
+            expect(items[1]).toHaveTextContent('orange');
+
+            userEvent.click(removeButtons[1]);
+
+            expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
+        });
+    });
+
+    describe('when the Collection is draggable', () => {
+        it('renders drag n drop icons for each item', async () => {
+            const Fixture = () => {
+                const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+                return (
+                    <>
+                        <Collection newItem="new" {...form.getInputProps('fruits')} draggable>
+                            {(name) => <span data-testid="item">{name}</span>}
+                        </Collection>
+                    </>
+                );
+            };
+
+            render(<Fixture />);
+
+            const dragIcons = await screen.findAllByRole('button', {name: /dragAndDrop/i});
+            expect(dragIcons).toHaveLength(2);
+        });
+
+        describe('when required is true', () => {
+            it('not render the remove button after removing an item from a collection containing two items', async () => {
+                const Fixture = () => {
+                    const form = useForm({initialValues: {fruits: ['banana', 'orange']}});
+                    return (
+                        <Collection
+                            data-testid="collection"
+                            {...form.getInputProps('fruits')}
+                            newItem="new"
+                            required
+                            draggable
+                        >
+                            {(name) => <span data-testid="item">{name}</span>}
+                        </Collection>
+                    );
+                };
+
+                render(<Fixture />);
+
+                await screen.findAllByRole('button', {name: /remove/i});
+                /* eslint-disable-next-line testing-library/no-node-access */
+                const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
+                expect(removeButtons).toHaveLength(2);
+
+                const items = screen.getAllByTestId('item');
+                expect(items).toHaveLength(2);
+                expect(items[0]).toHaveTextContent('banana');
+                expect(items[1]).toHaveTextContent('orange');
+
+                userEvent.click(removeButtons[1]);
+
+                expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
+            });
+        });
+    });
+});

package/src/components/collection/index.ts

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

package/src/components/date-range-picker/DateRangePickerInlineCalendar.tsx

@@ -0,0 +1,111 @@
+import {Button, Center, Group, Space} from '@mantine/core';
+import {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';
+import {useForm} from '@mantine/form';
+
+import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
+import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
+
+export interface DateRangePickerInlineCalendarProps
+    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
+    /**
+     * Initial selected range
+     */
+    initialRange: DateRangePickerValue;
+    /**
+     * Function called when the user applies the new date range
+     *
+     * @param range the newly selected dates
+     */
+    onApply: (range: DateRangePickerValue) => void;
+    /**
+     * Function called when the user click on the cancel button
+     */
+    onCancel: () => void;
+    /**
+     * The presets to display
+     *
+     * @default {}
+     * @example
+     * {
+     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},
+     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}
+     * }
+     */
+    presets?: Record<string, DateRangePickerPreset>;
+    /**
+     * Props for RangeCalendar displayed in the popover
+     */
+    rangeCalendarProps?: Omit<RangeCalendarProps, 'value' | 'onChange'>;
+}
+
+export const DateRangePickerInlineCalendar = ({
+    initialRange,
+    onApply,
+    onCancel,
+    presets,
+    startProps,
+    endProps,
+    rangeCalendarProps,
+}: DateRangePickerInlineCalendarProps) => {
+    const form = useForm({
+        initialValues: {
+            dates: initialRange,
+        },
+    });
+    const calendarInputProps = form.getInputProps('dates');
+
+    const onCalendarApply = () => {
+        onApply(form.values.dates);
+    };
+
+    return (
+        <>
+            <Group
+                align="center"
+                spacing="xs"
+                grow
+                px="md"
+                py="sm"
+                sx={(theme) => ({
+                    borderBottom: `1px solid ${theme.colors.gray[2]}`,
+                })}
+            >
+                <EditableDateRangePicker {...calendarInputProps} startProps={startProps} endProps={endProps} />
+                {presets ? (
+                    <>
+                        <Space w="sm" />
+                        <DateRangePickerPresetSelect presets={presets} {...calendarInputProps} />
+                    </>
+                ) : null}
+            </Group>
+
+            <Center py="sm" px="md">
+                <RangeCalendar
+                    amountOfMonths={2}
+                    styles={{cell: {textAlign: 'center'}}}
+                    firstDayOfWeek="sunday"
+                    allowSingleDateInRange
+                    {...rangeCalendarProps}
+                    {...calendarInputProps}
+                />
+            </Center>
+
+            <Group
+                position="right"
+                spacing="xs"
+                px="md"
+                py="sm"
+                sx={(theme) => ({
+                    borderTop: `1px solid ${theme.colors.gray[2]}`,
+                })}
+            >
+                <Button size="xs" onClick={onCalendarApply}>
+                    Apply
+                </Button>
+                <Button variant="outline" size="xs" onClick={onCancel}>
+                    Cancel
+                </Button>
+            </Group>
+        </>
+    );
+};

package/src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx

@@ -0,0 +1,94 @@
+import {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';
+import {Group, Popover, Space} from '@mantine/core';
+import {useClickOutside, useUncontrolled} from '@mantine/hooks';
+import {useState} from 'react';
+
+import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
+import {DateRangePickerPresetSelect, DateRangePickerPreset} from './DateRangePickerPresetSelect';
+
+interface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
+    /** Default value for uncontrolled input */
+    defaultValue?: DateRangePickerValue;
+    /** Value for controlled input */
+    value?: DateRangePickerValue;
+    /** onChange value for controlled input */
+    onChange?(value: DateRangePickerValue): void;
+    /**
+     * The presets to display
+     *
+     * @default {}
+     * @example
+     * {
+     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},
+     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}
+     * }
+     */
+    presets?: Record<string, DateRangePickerPreset>;
+
+    /**
+     * Props for RangeCalendar
+     */
+    rangeCalendarProps?: Omit<RangeCalendarProps, 'value' | 'onChange'>;
+}
+
+export const DateRangePickerPopoverCalendar = <T extends unknown>({
+    presets,
+    value,
+    defaultValue,
+    onChange,
+    startProps,
+    endProps,
+    rangeCalendarProps,
+}: DateRangePickerPopoverCalendarProps<T>) => {
+    const [opened, setOpened] = useState(false);
+    const ref = useClickOutside(() => setOpened(false));
+
+    const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({
+        value,
+        defaultValue,
+        onChange,
+        finalValue: [null, null],
+    });
+
+    const onCalendarChange = (dates: DateRangePickerValue) => {
+        handleChange?.(dates);
+        if (dates[1] !== null) {
+            setOpened(false);
+        }
+    };
+
+    return (
+        <>
+            <Group align="center">
+                <EditableDateRangePicker
+                    value={_value}
+                    onChange={handleChange}
+                    onFocus={() => setOpened(true)}
+                    startProps={startProps}
+                    endProps={endProps}
+                />
+                {presets ? (
+                    <>
+                        <Space w="sm" />
+                        <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />
+                    </>
+                ) : null}
+            </Group>
+
+            <Popover opened={opened} onChange={setOpened} trapFocus>
+                <Popover.Dropdown>
+                    <RangeCalendar
+                        ref={ref}
+                        styles={{cell: {textAlign: 'center'}}}
+                        amountOfMonths={2}
+                        firstDayOfWeek="sunday"
+                        allowSingleDateInRange
+                        value={_value}
+                        onChange={onCalendarChange}
+                        {...rangeCalendarProps}
+                    />
+                </Popover.Dropdown>
+            </Popover>
+        </>
+    );
+};

package/src/components/date-range-picker/DateRangePickerPresetSelect.tsx

@@ -0,0 +1,62 @@
+import {DateRangePickerValue, isSameDate} from '@mantine/dates';
+import {Select, SelectItem, SelectProps} from '@mantine/core';
+import {useState, useEffect} from 'react';
+import dayjs from 'dayjs';
+
+export interface DateRangePickerPreset {
+    label: string;
+    range: DateRangePickerValue;
+}
+
+interface DateRangePickerPresetsSelectProps<T> {
+    presets: Record<string, DateRangePickerPreset>;
+    value: DateRangePickerValue;
+    onChange?(value: DateRangePickerValue): void;
+    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;
+}
+
+export const DateRangePickerPresetSelect = <T extends unknown>({
+    presets,
+    value,
+    onChange,
+    selectProps = {},
+}: DateRangePickerPresetsSelectProps<T>) => {
+    const selectData: SelectItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));
+
+    const getSelectedPreset = () => {
+        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {
+            const selected = Object.entries(presets).find(
+                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && isSameDate(range[1]!, value[1]!)
+            );
+            if (selected) {
+                return selected[0];
+            }
+        }
+        return null;
+    };
+
+    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());
+
+    useEffect(() => {
+        const newPreset = getSelectedPreset();
+        if (newPreset !== selectedPreset) {
+            setSelectedPreset(newPreset);
+        }
+    }, [value]);
+
+    const onChangePreset = (presetId: keyof typeof presets) => {
+        const range = presets[presetId].range as any;
+        onChange?.(range);
+    };
+
+    return (
+        <Select
+            label="Date range"
+            placeholder="Select a date range"
+            {...selectProps}
+            value={selectedPreset}
+            onChange={onChangePreset}
+            data={selectData}
+        />
+    );
+};

package/src/components/date-range-picker/EditableDateRangePicker.tsx

@@ -0,0 +1,60 @@
+import {DatePicker, DatePickerProps, DateRangePickerValue} from '@mantine/dates';
+import dayjs from 'dayjs';
+import {ReactNode} from 'react';
+
+export interface EditableDateRangePickerProps {
+    value: DateRangePickerValue;
+    onChange?(value: DateRangePickerValue): void;
+    onFocus?: () => void;
+    separator?: ReactNode;
+    /**
+     * Props for the start input
+     */
+    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+    /**
+     * Props for the end input
+     */
+    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+}
+
+export const EditableDateRangePicker = ({
+    value,
+    onChange,
+    onFocus,
+    separator = 'to',
+    startProps = {},
+    endProps = {},
+}: EditableDateRangePickerProps) => {
+    const onChangeStart = (date: Date) => {
+        onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);
+    };
+    const onChangeEnd = (date: Date) => {
+        onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);
+    };
+
+    return (
+        <>
+            <DatePicker
+                allowFreeInput
+                clearable={false}
+                label="Start"
+                {...startProps}
+                value={value?.[0]}
+                onChange={onChangeStart}
+                onFocus={onFocus}
+                styles={{...startProps.styles, dropdown: {display: 'none'}}}
+            />
+            {separator}
+            <DatePicker
+                allowFreeInput
+                clearable={false}
+                label="End"
+                {...endProps}
+                value={value?.[1]}
+                onChange={onChangeEnd}
+                onFocus={onFocus}
+                styles={{...endProps.styles, dropdown: {display: 'none'}}}
+            />
+        </>
+    );
+};

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx

@@ -0,0 +1,95 @@
+import {render, screen, userEvent} from '@test-utils';
+import dayjs from 'dayjs';
+
+import {DateRangePickerInlineCalendar} from '../DateRangePickerInlineCalendar';
+
+describe('DateRangePickerInlineCalendar', () => {
+    it('calls onApply when the user clicks on the apply button', () => {
+        const onApply = jest.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
+
+        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+
+        expect(onApply).toHaveBeenCalledTimes(1);
+        expect(onApply).toHaveBeenCalledWith([null, null]);
+    });
+
+    it('calls onCancel when the user clicks on the cancel button', () => {
+        const onCancel = jest.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={jest.fn()} onCancel={onCancel} />);
+
+        userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
+
+        expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not render the preset searchbox when there is no presets', () => {
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={jest.fn()} onCancel={jest.fn()} />);
+
+        expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
+    });
+
+    it('calls onApply with the selected dates when choosing a preset', () => {
+        const onApply = jest.fn();
+        render(
+            <DateRangePickerInlineCalendar
+                presets={{
+                    year2k: {label: 'select me', range: [new Date(1999, 11, 31), new Date(2000, 0, 1)]},
+                }}
+                initialRange={[null, null]}
+                onApply={onApply}
+                onCancel={jest.fn()}
+            />
+        );
+
+        userEvent.click(
+            screen.getByRole('searchbox', {
+                name: 'Date range',
+            })
+        );
+        userEvent.click(screen.getByRole('option', {name: 'select me'}));
+        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+
+        expect(onApply).toHaveBeenCalledWith([new Date(1999, 11, 31), new Date(2000, 0, 1)]);
+    });
+
+    it('calls onApply with the selected dates when clicking in the calendar', () => {
+        jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
+        const onApply = jest.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
+
+        // click once for the start, once for the end
+        userEvent.click(screen.getAllByRole('button', {name: '8'})[0]);
+        userEvent.click(screen.getAllByRole('button', {name: '14'})[0]);
+
+        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+
+        expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 14)]);
+
+        jest.useRealTimers();
+    });
+
+    it('calls onApply with the selected dates when typing in the inputs', () => {
+        const onApply = jest.fn();
+        render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={jest.fn()} />);
+
+        const startInput = screen.getByRole('textbox', {
+            name: /start/i,
+        });
+        userEvent.clear(startInput);
+        userEvent.type(startInput, 'Jan 8, 2022');
+
+        const endInput = screen.getByRole('textbox', {
+            name: /end/i,
+        });
+        userEvent.clear(endInput);
+        userEvent.type(endInput, 'Jan 14, 2022');
+
+        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+
+        expect(onApply).toHaveBeenCalledWith([
+            dayjs(new Date(2022, 0, 8)).startOf('day').toDate(),
+            dayjs(new Date(2022, 0, 14)).endOf('day').toDate(),
+        ]);
+    });
+});