@coveord/plasma-mantine 47.4.0

package/src/components/collection/CollectionItem.tsx

@@ -0,0 +1,88 @@
+import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';
+import {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';
+import {FunctionComponent} from 'react';
+import {Draggable} from 'react-beautiful-dnd';
+
+import useStyles from './Colllection.styles';
+
+interface CollectionItemProps extends CollectionItemSharedProps {
+    draggable?: boolean;
+    disabled: boolean;
+}
+
+interface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {
+    index: number;
+    onRemove?: React.MouseEventHandler<HTMLButtonElement>;
+    removable?: boolean;
+}
+
+const RemoveButton: FunctionComponent<{
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+}> = ({onClick}) => (
+    <ActionIcon variant="subtle" onClick={onClick} color="action">
+        <RemoveSize16Px height={16} />
+    </ActionIcon>
+);
+
+const RemoveButtonPlaceholder = () => <div style={{width: 28}} />;
+
+const StaticCollectionItem: FunctionComponent<CollectionItemSharedProps> = ({
+    onRemove,
+    removable = true,
+    styles,
+    children,
+}) => {
+    const {classes, cx} = useStyles(null, {name: 'Collection', styles});
+    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;
+
+    return (
+        <Group className={cx(classes.item)}>
+            {children}
+            {removeButton}
+        </Group>
+    );
+};
+
+const DisabledCollectionItem: FunctionComponent<CollectionItemSharedProps> = ({children}) => {
+    const {classes, cx} = useStyles();
+    return <Group className={cx(classes.item)}>{children}</Group>;
+};
+
+const DraggableCollectionItem: FunctionComponent<CollectionItemSharedProps> = ({
+    index,
+    onRemove,
+    removable = true,
+    styles,
+    children,
+}) => {
+    const {classes, cx} = useStyles(null, {name: 'Collection', styles});
+    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;
+
+    return (
+        <Draggable index={index} draggableId={index.toString()}>
+            {(provided, {isDragging}) => (
+                <Group
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    className={cx(classes.item, {[classes.itemDragging]: isDragging})}
+                >
+                    <div {...provided.dragHandleProps}>
+                        <DragAndDropSize16Px height={16} />
+                    </div>
+                    {children}
+                    {removeButton}
+                </Group>
+            )}
+        </Draggable>
+    );
+};
+
+export const CollectionItem: FunctionComponent<CollectionItemProps> = ({draggable, disabled, ...otherProps}) => {
+    if (disabled) {
+        return <DisabledCollectionItem {...otherProps} />;
+    }
+    if (draggable) {
+        return <DraggableCollectionItem {...otherProps} />;
+    }
+    return <StaticCollectionItem {...otherProps} />;
+};

package/src/components/collection/Colllection.styles.ts

@@ -0,0 +1,13 @@
+import {createStyles} from '@mantine/core';
+
+export interface CollectionStylesParams {}
+
+export default createStyles((theme) => ({
+    root: {},
+    item: {
+        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,
+    },
+    itemDragging: {
+        boxShadow: theme.shadows.sm,
+    },
+}));

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

@@ -0,0 +1,243 @@
+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('disallows from adding more than one new item at once', () => {
+        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);
+        expect(addItem).toBeDisabled();
+    });
+
+    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,59 @@
+import {DatePicker, DatePickerProps, DateRangePickerValue} from '@mantine/dates';
+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 | null) => {
+        onChange?.([date, value?.[1] ?? null]);
+    };
+    const onChangeEnd = (date: Date | null) => {
+        onChange?.([value?.[0] ?? null, date]);
+    };
+
+    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'}}}
+            />
+        </>
+    );
+};