@coveord/plasma-mantine 47.0.1-next.2

package/src/components/table/TablePerPage.tsx

@@ -0,0 +1,49 @@
+import {Group, SegmentedControl, Text} from '@mantine/core';
+import {TableState} from '@tanstack/react-table';
+import {FunctionComponent} from 'react';
+
+import {useTable} from './useTable';
+
+interface TablePerPageProps {
+    /**
+     * The label displayed before the control
+     *
+     * @default Results per page
+     */
+    label?: string;
+    /**
+     * The per page choices to display
+     *
+     * @default [25, 50, 100]
+     */
+    values?: number[];
+}
+
+export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({
+    label = 'Results per page',
+    values = [25, 50, 100],
+}) => {
+    const {state, setState} = useTable();
+
+    const updatePerPage = (newPerPage: string) => {
+        setState((prevState: TableState) => ({
+            ...prevState,
+            pagination: {...prevState.pagination, pageSize: parseInt(newPerPage, 10)},
+        }));
+    };
+
+    return (
+        <Group>
+            <Text>{label}</Text>
+            <SegmentedControl
+                value={state.pagination.pageSize.toString() ?? values?.[1].toString()}
+                onChange={updatePerPage}
+                data={values.map((value) => value.toString())}
+                color="action"
+                size="md"
+            />
+        </Group>
+    );
+};
+
+TablePerPage.DEFAULT_SIZE = 50;

package/src/components/table/TablePredicate.tsx

@@ -0,0 +1,43 @@
+import {Select, SelectItem, Group, Text} from '@mantine/core';
+import {FunctionComponent} from 'react';
+import {useTable} from './useTable';
+
+interface TablePredicateProps {
+    /**
+     * Unique identifier for this predicate. Will be used to access the selected value in the table state
+     */
+    id: string;
+    /**
+     * The values to display in the predicate
+     */
+    data: SelectItem[];
+    /**
+     * Input label (not displayed for now)
+     *
+     * @default default to the predicate id
+     */
+    label?: string;
+}
+
+export const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {
+    const {onChange, form} = useTable();
+
+    const onUpdate = (newValue: string) => {
+        form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});
+        onChange?.();
+    };
+
+    return (
+        <Group spacing="xs">
+            {label ? <Text>{label}:</Text> : null}
+            <Select
+                withinPortal
+                value={form.values.predicates[id]}
+                onChange={onUpdate}
+                data={data}
+                aria-label={label ?? id}
+                searchable={data.length > 7}
+            />
+        </Group>
+    );
+};

package/src/components/table/Th.tsx

@@ -0,0 +1,84 @@
+import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';
+import {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';
+import {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';
+
+const useStyles = createStyles((theme) => ({
+    th: {
+        padding: '0 !important',
+        fontWeight: '400 !important' as any,
+        color: theme.black + '!important',
+        button: {
+            padding: '8px 16px',
+            div: {
+                padding: '0px !important',
+            },
+        },
+        div: {
+            padding: '8px 16px',
+        },
+    },
+
+    noSort: {
+        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+    },
+
+    control: {
+        width: '100%',
+        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
+
+        '&:hover': {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],
+        },
+    },
+}));
+
+interface ThProps<T> {
+    header: Header<T, unknown>;
+}
+
+const SortingIcons = {
+    asc: ArrowHeadDownSize16Px,
+    desc: ArrowHeadUpSize16Px,
+};
+
+const SortingLabels = {
+    asc: 'ascending',
+    desc: 'descending',
+} as const;
+
+export const Th = <T,>({header}: ThProps<T>) => {
+    const {classes} = useStyles();
+    const size = header.column.getSize();
+    const width = size !== defaultColumnSizing.size ? size : undefined;
+
+    if (header.isPlaceholder) {
+        return null;
+    }
+
+    if (!header.column.getCanSort()) {
+        return (
+            <th className={classes.th} style={{width}}>
+                <Text className={classes.noSort} size="xs">
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                </Text>
+            </th>
+        );
+    }
+
+    const onSort = header.column.getToggleSortingHandler();
+    const sortingOrder = header.column.getIsSorted();
+    const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];
+
+    return (
+        <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>
+            <UnstyledButton onClick={onSort} className={classes.control}>
+                <Group position="apart">
+                    <Text size="xs">{flexRender(header.column.columnDef.header, header.getContext())}</Text>
+                    <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>
+                        <Icon height={14} />
+                    </Center>
+                </Group>
+            </UnstyledButton>
+        </th>
+    );
+};

package/src/components/table/__tests__/Table.spec.tsx

@@ -0,0 +1,128 @@
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent, waitFor} from '@test-utils';
+import {FunctionComponent} from 'react';
+
+import {Table} from '../Table';
+
+type RowData = {firstName: string; lastName: string};
+
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [
+    columnHelper.accessor('firstName', {enableSorting: false}),
+    columnHelper.accessor('lastName', {enableSorting: false}),
+];
+
+describe('Table', () => {
+    it('renders the data', () => {
+        render(<Table data={[{firstName: 'first', lastName: 'last'}]} columns={columns} />);
+
+        expect(screen.getByRole('columnheader', {name: 'firstName'})).toBeVisible();
+        expect(screen.getByRole('columnheader', {name: 'lastName'})).toBeVisible();
+
+        expect(
+            screen.getByRole('cell', {
+                name: /first/i,
+            })
+        ).toBeVisible();
+        expect(
+            screen.getByRole('cell', {
+                name: /last/i,
+            })
+        ).toBeVisible();
+    });
+
+    it('formats the data', () => {
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                header: () => 'First Name',
+                cell: (info) => info.getValue().toUpperCase(),
+                enableSorting: false,
+            }),
+            columnHelper.accessor('lastName', {
+                header: () => 'Last Name',
+                cell: (info) => info.getValue().toUpperCase(),
+                enableSorting: false,
+            }),
+        ];
+        render(<Table data={[{firstName: 'first', lastName: 'last'}]} columns={customColumns} />);
+
+        expect(screen.getByRole('columnheader', {name: 'First Name'})).toBeVisible();
+        expect(screen.getByRole('columnheader', {name: 'Last Name'})).toBeVisible();
+
+        expect(
+            screen.getByRole('cell', {
+                name: 'FIRST',
+            })
+        ).toBeVisible();
+        expect(
+            screen.getByRole('cell', {
+                name: 'LAST',
+            })
+        ).toBeVisible();
+    });
+
+    it('renders the noDataChildren when the table is empty', () => {
+        const Fixture: FunctionComponent = () => <button>Hello</button>;
+        render(<Table data={[]} noDataChildren={<Fixture />} columns={columns} />);
+
+        expect(screen.getByRole('button', {name: 'Hello'})).toBeVisible();
+    });
+
+    it('opens the collapsible rows when the user click on the toggle', async () => {
+        const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                enableSorting: false,
+            }),
+            Table.CollapsibleColumn,
+        ];
+        render(
+            <Table
+                data={[{firstName: 'first', lastName: 'last'}]}
+                getExpandChildren={(row: RowData) => <Fixture row={row} />}
+                columns={customColumns}
+            />
+        );
+
+        // wait for the collapsible icon to show
+        await screen.findByRole('button', {name: 'arrowHeadDown'});
+
+        expect(screen.queryByText('Collapsible content: last')).not.toBeVisible();
+
+        userEvent.click(screen.getByRole('button', {name: 'arrowHeadDown'}));
+        await waitFor(() => {
+            expect(screen.queryByText('Collapsible content: last')).toBeVisible();
+        });
+    });
+
+    it('renders the collapsible button only for rows that can be expanded', async () => {
+        const Fixture: FunctionComponent<{row: RowData}> = ({row}) => (
+            <div>
+                Collapsible content: {row.firstName} {row.lastName}
+            </div>
+        );
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                enableSorting: false,
+            }),
+            Table.CollapsibleColumn,
+        ];
+        render(
+            <Table
+                data={[
+                    {firstName: 'Luke', lastName: 'Skywalker'},
+                    {firstName: 'Lea', lastName: 'Skywalker'},
+                    {firstName: 'Han', lastName: 'Solo'},
+                ]}
+                getExpandChildren={(row: RowData) => (row.lastName === 'Skywalker' ? <Fixture row={row} /> : null)}
+                columns={customColumns}
+            />
+        );
+
+        // wait for the collapsible icon to show
+        await screen.findAllByRole('button', {name: 'arrowHeadDown'});
+
+        const allRows = screen.getAllByRole('button', {name: 'arrowHeadDown'});
+        expect(allRows).toHaveLength(2);
+    });
+});

package/src/components/table/__tests__/TableActions.spec.tsx

@@ -0,0 +1,36 @@
+import {Button} from '@mantine/core';
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent} from '@test-utils';
+
+import {Table} from '../Table';
+
+type RowData = {name: string};
+
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
+
+describe('Table.Actions', () => {
+    it('displays the actions when the row is selected', () => {
+        render(
+            <Table<RowData> data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
+                <Table.Header>
+                    <Table.Actions>{(datum: RowData) => <Button>Eat {datum.name}</Button>}</Table.Actions>
+                </Table.Header>
+            </Table>
+        );
+
+        // no row is selected, no actions should be visible
+        expect(screen.queryByRole('button', {name: 'Eat fruit'})).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', {name: 'Eat vegetable'})).not.toBeInTheDocument();
+
+        // select the fruit row
+        userEvent.click(screen.getByRole('cell', {name: 'fruit'}));
+        expect(screen.getByRole('button', {name: 'Eat fruit'})).toBeVisible();
+        expect(screen.queryByRole('button', {name: 'Eat vegetable'})).not.toBeInTheDocument();
+
+        // select the vegetable row
+        userEvent.click(screen.getByRole('cell', {name: 'vegetable'}));
+        expect(screen.queryByRole('button', {name: 'Eat fruit'})).not.toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Eat vegetable'})).toBeVisible();
+    });
+});

package/src/components/table/__tests__/TableDateRangePicker.spec.tsx

@@ -0,0 +1,87 @@
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent, waitFor} from '@test-utils';
+
+import {Table} from '../Table';
+
+type RowData = {name: string};
+
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
+
+// Since we're mocking the date and the animations are timer based we're mocking useReduceMotion to disable all the animations
+// I tried wrapping the components in <MantineProvider theme={{components: {Transition: {defaultProps: {duration: 0}}}}}>
+// but the animation was still happening. :(
+jest.mock('@mantine/hooks', () => ({
+    ...jest.requireActual('@mantine/hooks'),
+    useReducedMotion: () => true,
+}));
+
+describe('Table.DateRangePicker', () => {
+    jest.setTimeout(15000);
+
+    beforeEach(() => {
+        jest.useFakeTimers().setSystemTime(new Date(2022, 0, 15));
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    it('displays the intial dates', async () => {
+        render(
+            <Table
+                data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                columns={columns}
+                initialState={{dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}}
+            >
+                <Table.Header>
+                    <Table.DateRangePicker />
+                </Table.Header>
+            </Table>
+        );
+
+        await waitFor(() => {
+            expect(screen.getByText('Jan 01, 2022 - Jan 07, 2022')).toBeVisible();
+        });
+    });
+
+    it('displays the selected date range in the table', async () => {
+        const onChange = jest.fn();
+        render(
+            <Table
+                data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                columns={columns}
+                onChange={onChange}
+                initialState={{dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}}
+            >
+                <Table.Header>
+                    <Table.DateRangePicker
+                        presets={{preset: {label: 'Preset', range: [new Date(2022, 0, 8), new Date(2022, 0, 14)]}}}
+                    />
+                </Table.Header>
+            </Table>
+        );
+
+        await screen.findByText('Jan 01, 2022 - Jan 07, 2022');
+        await screen.findByRole('button', {name: 'calendar'});
+
+        userEvent.click(screen.getByRole('button', {name: 'calendar'}));
+
+        await screen.findByRole('dialog');
+
+        // select a preset
+        userEvent.click(
+            screen.getByRole('searchbox', {
+                name: 'Date range',
+            })
+        );
+        userEvent.click(screen.getByRole('option', {name: 'Preset'}));
+
+        userEvent.click(screen.getByRole('button', {name: 'Apply'}));
+
+        await waitFor(() => expect(screen.queryByText('Jan 08, 2022 - Jan 14, 2022')).toBeVisible());
+        expect(onChange).toHaveBeenCalledWith(
+            expect.objectContaining({dateRange: [new Date(2022, 0, 8), new Date(2022, 0, 14)]})
+        );
+    });
+});

package/src/components/table/__tests__/TableFilter.spec.tsx

@@ -0,0 +1,39 @@
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent} from '@test-utils';
+
+import {Table} from '../Table';
+
+type RowData = {name: string};
+
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
+
+describe('Table.Filter', () => {
+    it('displays the placeholder', () => {
+        const onChange = jest.fn();
+        render(
+            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
+                <Table.Header>
+                    <Table.Filter placeholder="hello fruits" />
+                </Table.Header>
+            </Table>
+        );
+
+        expect(screen.getByPlaceholderText('hello fruits')).toBeVisible();
+    });
+
+    it('calls onChange when typing something in the filter', () => {
+        const onChange = jest.fn();
+        render(
+            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
+                <Table.Header>
+                    <Table.Filter />
+                </Table.Header>
+            </Table>
+        );
+
+        userEvent.type(screen.getByRole('textbox'), 'vegetable');
+
+        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({globalFilter: 'vegetable'}));
+    });
+});

package/src/components/table/__tests__/TablePagination.spec.tsx

@@ -0,0 +1,50 @@
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent, waitFor} from '@test-utils';
+
+import {Table} from '../Table';
+
+type RowData = {name: string};
+
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
+
+describe('Table.Pagination', () => {
+    it('displays the number of pages', () => {
+        render(
+            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
+                <Table.Footer>
+                    <Table.Pagination totalPages={3} />
+                </Table.Footer>
+            </Table>
+        );
+
+        const buttons = screen.getAllByRole('button');
+        expect(buttons).toHaveLength(5);
+        expect(buttons[0]).toHaveAccessibleName('previous page');
+        expect(buttons[1]).toHaveAccessibleName('1');
+        expect(buttons[2]).toHaveAccessibleName('2');
+        expect(buttons[3]).toHaveAccessibleName('3');
+        expect(buttons[4]).toHaveAccessibleName('next page');
+    });
+
+    it('calls onChange when clicking on a page number', async () => {
+        const onChange = jest.fn();
+        render(
+            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
+                <Table.Footer>
+                    <Table.Pagination totalPages={5} />
+                </Table.Footer>
+            </Table>
+        );
+
+        onChange.mockReset();
+
+        userEvent.click(screen.queryByRole('button', {name: '2'}));
+
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(
+                expect.objectContaining({pagination: expect.objectContaining({pageIndex: 1})})
+            );
+        });
+    });
+});

package/src/components/table/__tests__/TablePerPage.spec.tsx

@@ -0,0 +1,81 @@
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent} from '@test-utils';
+
+import {Table} from '../Table';
+
+type RowData = {name: string};
+
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
+
+describe('Table.PerPage', () => {
+    it('displays the label', () => {
+        render(
+            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns}>
+                <Table.Footer>
+                    <Table.PerPage label="Per page" />
+                </Table.Footer>
+            </Table>
+        );
+
+        expect(screen.getByText('Per page')).toBeVisible();
+    });
+
+    it('displays the values', () => {
+        render(
+            <Table
+                data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                columns={columns}
+                initialState={{pagination: {pageSize: 2}}}
+            >
+                <Table.Footer>
+                    <Table.PerPage label="Per page" values={[2, 7, 12, 17]} />
+                </Table.Footer>
+            </Table>
+        );
+
+        const radios = screen.getAllByRole('radio');
+        expect(radios).toHaveLength(4);
+        expect(radios[0]).toHaveAccessibleName('2');
+        expect(radios[1]).toHaveAccessibleName('7');
+        expect(radios[2]).toHaveAccessibleName('12');
+        expect(radios[3]).toHaveAccessibleName('17');
+    });
+
+    it('calls onMount with the initial value', () => {
+        const onMount = jest.fn();
+        render(
+            <Table
+                data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                columns={columns}
+                onMount={onMount}
+                initialState={{pagination: {pageSize: 100}}}
+            >
+                <Table.Footer>
+                    <Table.PerPage />
+                </Table.Footer>
+            </Table>
+        );
+
+        expect(onMount).toHaveBeenCalledWith(
+            expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})})
+        );
+    });
+
+    it('calls onChange when changing the number of items per page', () => {
+        const onChange = jest.fn();
+        render(
+            <Table data={[{name: 'fruit'}, {name: 'vegetable'}]} columns={columns} onChange={onChange}>
+                <Table.Footer>
+                    <Table.PerPage />
+                </Table.Footer>
+            </Table>
+        );
+
+        userEvent.click(screen.queryByRole('radio', {name: '100'}));
+
+        expect(onChange).toHaveBeenCalledWith(
+            expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})})
+        );
+    });
+});