@coveord/plasma-mantine 47.0.1-next.2

package/src/components/prompt/__tests__/Prompt.spec.tsx

@@ -0,0 +1,29 @@
+import {render, screen} from '@test-utils';
+import {Prompt} from '../Prompt';
+
+describe('Prompt', () => {
+    it('displays the title, body and close button', () => {
+        render(
+            <Prompt variant="default" opened onClose={jest.fn()} title="title modal">
+                content modal
+                <Prompt.Footer>footer content</Prompt.Footer>
+            </Prompt>
+        );
+        expect(screen.getByText(/content modal/i)).toBeInTheDocument();
+        expect(screen.getByText(/footer content/i)).toBeInTheDocument();
+        expect(screen.getByText(/title modal/i)).toBeInTheDocument();
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('calls onClose when clicking on the close button', () => {
+        const onClose = jest.fn();
+        render(
+            <Prompt variant="default" opened onClose={onClose} title="title modal">
+                content modal
+            </Prompt>
+        );
+
+        screen.getByRole('button').click();
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/prompt/index.ts

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

package/src/components/sticky-footer/StickyFooter.tsx

@@ -0,0 +1,35 @@
+import {createStyles, DefaultProps, Divider, Group, Paper} from '@mantine/core';
+import {FunctionComponent, PropsWithChildren} from 'react';
+
+export interface StickyFooterProps extends DefaultProps {
+    /**
+     * Whether a border is render on top of the footer
+     */
+    borderTop?: boolean;
+}
+
+const useStyles = createStyles(() => ({
+    footer: {
+        position: 'sticky',
+        bottom: 0,
+        zIndex: 1,
+        maxHeight: '80px',
+    },
+}));
+
+export const StickyFooter: FunctionComponent<PropsWithChildren<StickyFooterProps>> = ({
+    borderTop,
+    children,
+    ...others
+}) => {
+    const {classes} = useStyles();
+
+    return (
+        <Paper className={classes.footer}>
+            {borderTop ? <Divider size="xs" /> : null}
+            <Group position="right" spacing="xs" py="md" px="xl" {...others}>
+                {children}
+            </Group>
+        </Paper>
+    );
+};

package/src/components/sticky-footer/__tests__/StickyFooter.spec.tsx

@@ -0,0 +1,20 @@
+import {render, screen} from '@test-utils';
+
+import {StickyFooter} from '../StickyFooter';
+
+describe('StickyFooter', () => {
+    it('adds a separator on top the footer if borderTop is true', () => {
+        render(<StickyFooter borderTop>title</StickyFooter>);
+        expect(screen.getByRole('separator')).toBeInTheDocument();
+    });
+
+    it('renders children', () => {
+        render(
+            <StickyFooter>
+                <div>im the children</div>
+            </StickyFooter>
+        );
+
+        expect(screen.getByText('im the children')).toBeInTheDocument();
+    });
+});

package/src/components/sticky-footer/index.ts

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

package/src/components/table/Table.tsx

@@ -0,0 +1,293 @@
+import {Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';
+import {useForm} from '@mantine/form';
+import {useDidUpdate} from '@mantine/hooks';
+import {
+    ColumnDef,
+    defaultColumnSizing,
+    flexRender,
+    getCoreRowModel,
+    Row,
+    TableState,
+    useReactTable,
+} from '@tanstack/react-table';
+import {InitialTableState} from '@tanstack/table-core';
+import defaultsDeep from 'lodash.defaultsdeep';
+import {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';
+
+import {TableActions} from './TableActions';
+import {TableCollapsibleColumn} from './TableCollapsibleColumn';
+import {onTableChangeEvent, TableContext, TableFormType} from './TableContext';
+import {TableDateRangePicker} from './TableDateRangePicker';
+import {TableFilter} from './TableFilter';
+import {TableFooter} from './TableFooter';
+import {TableHeader} from './TableHeader';
+import {TablePagination} from './TablePagination';
+import {TablePerPage} from './TablePerPage';
+import {TablePredicate} from './TablePredicate';
+import {Th} from './Th';
+
+const useStyles = createStyles<string, {hasHeader: boolean}>((theme, {hasHeader}, getRef) => ({
+    table: {
+        width: '100%',
+    },
+    header: {
+        position: 'sticky',
+        top: hasHeader ? 69 : 0,
+        backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
+        transition: 'box-shadow 150ms ease',
+        zIndex: 12, // skeleton is 11
+
+        '&::after': {
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderBottom: `1px solid ${theme.colors.gray[2]}`,
+        },
+    },
+
+    rowSelected: {
+        ref: getRef('rowSelected'),
+    },
+
+    row: {
+        [`&:hover, &.${getRef('rowSelected')}`]: {
+            backgroundColor:
+                theme.colorScheme === 'dark'
+                    ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
+                    : theme.colors[theme.primaryColor][0],
+        },
+    },
+}));
+
+interface TableProps<T> {
+    /**
+     * Data to display in the table
+     */
+    data: T[];
+    /**
+     * Columns to display in the table.
+     *
+     * @see https://tanstack.com/table/v8/docs/guide/column-defs
+     */
+    columns: Array<ColumnDef<T>>;
+    /**
+     * Function called when the table mounts
+     *
+     * @param state the state of the table
+     */
+    onMount?: onTableChangeEvent;
+    /**
+     * Function called when the table should update
+     *
+     * @param state the state of the table
+     */
+    onChange?: onTableChangeEvent;
+    /**
+     * Function that generates the expandable content of a row
+     * Return null for rows that don't need to be expandable
+     *
+     * @param datum the row for which the children should be generated.
+     */
+    getExpandChildren?: (datum: T) => ReactNode;
+    /**
+     * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table
+     */
+    noDataChildren?: ReactNode;
+    /**
+     * Whether the table is loading or not
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`
+     *
+     * @example
+     * <Table ...>
+     *     <Table.Header>
+     *         <div>Hello</div>
+     *     </Table.Header>
+     * </Table>
+     */
+    children?: ReactNode;
+
+    /**
+     * Initial state of the table
+     */
+    initialState?: InitialTableState & Partial<TableFormType>;
+}
+
+interface TableType {
+    <T>(props: TableProps<T>): ReactElement;
+    Actions: typeof TableActions;
+    Filter: typeof TableFilter;
+    Footer: typeof TableFooter;
+    Header: typeof TableHeader;
+    Pagination: typeof TablePagination;
+    PerPage: typeof TablePerPage;
+    Predicate: typeof TablePredicate;
+    CollapsibleColumn: typeof TableCollapsibleColumn;
+    DateRangePicker: typeof TableDateRangePicker;
+}
+
+export const Table: TableType = <T,>({
+    data,
+    noDataChildren,
+    getExpandChildren,
+    initialState = {},
+    columns,
+    onMount,
+    onChange,
+    children,
+    loading = false,
+}: TableProps<T>) => {
+    const convertedChildren = Children.toArray(children) as ReactElement[];
+    const header = convertedChildren.find((child) => child.type === TableHeader);
+    const footer = convertedChildren.find((child) => child.type === TableFooter);
+
+    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;
+    const form = useForm<TableFormType>({
+        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},
+    });
+
+    const {cx, classes} = useStyles({hasHeader: !!header});
+
+    const table = useReactTable({
+        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        manualPagination: true,
+        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,
+    });
+    const [state, setState] = useState<TableState>(table.initialState);
+    table.setOptions((prev) => ({
+        ...prev,
+        state,
+        onStateChange: setState,
+    }));
+
+    const triggerChange = () => onChange?.({...state, ...form.values});
+
+    useEffect(() => {
+        onMount?.({...state, ...form.values});
+    }, []);
+
+    useDidUpdate(() => {
+        triggerChange();
+        clearSelection();
+    }, [state.globalFilter, state.sorting, state.pagination, form.values]);
+
+    const clearFilters = useCallback(() => {
+        form.setFieldValue('predicates', {});
+        setState((prevState) => ({...prevState, globalFilter: ''}));
+    }, []);
+
+    const clearSelection = () => {
+        setState((prevState) => ({...prevState, rowSelection: {}}));
+    };
+
+    const getSelectedRow = useCallback(
+        () => table.getSelectedRowModel().flatRows?.[0]?.original ?? null,
+        [state.rowSelection]
+    );
+
+    if (!data) {
+        return (
+            <Center sx={{flexGrow: 1}}>
+                <Loader />
+            </Center>
+        );
+    }
+
+    const toggleRowSelection = (row: Row<T>) => {
+        table.setRowSelection(() => ({[row.id]: !row.getIsSelected()}));
+    };
+
+    const rows = table.getRowModel().rows.map((row) => {
+        const rowChildren = getExpandChildren?.(row.original) ?? null;
+
+        return (
+            <Fragment key={row.id}>
+                <tr
+                    onClick={() => toggleRowSelection(row)}
+                    className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}
+                >
+                    {row.getVisibleCells().map((cell) => {
+                        const size = cell.column.getSize();
+                        const width = size !== defaultColumnSizing.size ? size : undefined;
+                        return (
+                            <td key={cell.id} style={{width}}>
+                                <Skeleton visible={loading}>
+                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                </Skeleton>
+                            </td>
+                        );
+                    })}
+                </tr>
+                {rowChildren ? (
+                    <tr>
+                        <td
+                            colSpan={columns.length + 1}
+                            style={{padding: 0, borderBottomColor: row.getIsExpanded() ? undefined : 'transparent'}}
+                        >
+                            <Collapse in={row.getIsExpanded()} px="sm" py="xs">
+                                {rowChildren}
+                            </Collapse>
+                        </td>
+                    </tr>
+                ) : null}
+            </Fragment>
+        );
+    });
+
+    return (
+        <TableContext.Provider
+            value={{
+                onChange: triggerChange,
+                state,
+                setState,
+                clearFilters,
+                getSelectedRow,
+                clearSelection,
+                form,
+            }}
+        >
+            {header}
+            <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
+                <thead className={classes.header}>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <tr key={headerGroup.id}>
+                            {headerGroup.headers.map((columnHeader) => (
+                                <Th key={columnHeader.id} header={columnHeader} />
+                            ))}
+                        </tr>
+                    ))}
+                </thead>
+                <tbody>
+                    {rows.length ? (
+                        rows
+                    ) : (
+                        <tr>
+                            <td colSpan={columns.length}>{noDataChildren}</td>
+                        </tr>
+                    )}
+                </tbody>
+            </MantineTable>
+            {footer}
+        </TableContext.Provider>
+    );
+};
+
+Table.Actions = TableActions;
+Table.Filter = TableFilter;
+Table.Footer = TableFooter;
+Table.Header = TableHeader;
+Table.Pagination = TablePagination;
+Table.Predicate = TablePredicate;
+Table.PerPage = TablePerPage;
+Table.Predicate = TablePredicate;
+Table.CollapsibleColumn = TableCollapsibleColumn;
+Table.DateRangePicker = TableDateRangePicker;

package/src/components/table/TableActions.tsx

@@ -0,0 +1,36 @@
+import {ReactElement, ReactNode} from 'react';
+import {useTable} from './useTable';
+
+interface TableActionsProps<T> {
+    /**
+     * Function that return components for the selected row
+     *
+     * @param datum the data of the selected row
+     * @example
+     * <Table.Actions<MyType>>
+     *     {(datum: MyType) => (
+     *         <Button
+     *             component={Link}
+     *             to={`edit/${datum.id}`}
+     *             leftIcon={<EditSize24Px />}
+     *             variant="subtle"
+     *             color="navyBlue.8"
+     *         >
+     *             Edit
+     *         </Button>
+     *     )}
+     * </Table.Actions>
+     */
+    children: (datum: T) => ReactNode;
+}
+
+export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {
+    const {getSelectedRow} = useTable();
+    const selectedRow = getSelectedRow();
+
+    if (!selectedRow) {
+        return null;
+    }
+
+    return <>{children(selectedRow)}</>;
+};

package/src/components/table/TableCollapsibleColumn.tsx

@@ -0,0 +1,26 @@
+import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';
+import {Button} from '@mantine/core';
+import {ColumnDef} from '@tanstack/table-core';
+import {MouseEvent as ReactMouseEvent} from 'react';
+
+/**
+ * Generic column to use when your table need collapsible rows
+ */
+export const TableCollapsibleColumn: ColumnDef<unknown> = {
+    id: 'collapsible',
+    header: '',
+    enableSorting: false,
+    cell: (info) => {
+        const handler = info.row.getToggleExpandedHandler();
+        const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+            handler();
+        };
+
+        return info.row.getCanExpand() ? (
+            <Button onClick={onClick} variant="subtle" size="xs">
+                {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}
+            </Button>
+        ) : null;
+    },
+};

package/src/components/table/TableContext.tsx

@@ -0,0 +1,56 @@
+import {DateRangePickerValue} from '@mantine/dates';
+import {UseFormReturnType} from '@mantine/form';
+import {TableState} from '@tanstack/react-table';
+import {createContext, Dispatch} from 'react';
+
+export type onTableChangeEvent = (params: TableState & TableFormType) => void;
+
+export type TableFormType = {
+    /**
+     * Object containing the table predicates and their selected values
+     *
+     * @example {type: "LONG", origin: "system"}
+     */
+    predicates: Record<string, string>;
+    /**
+     * Selected date range in the table
+     *
+     * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]
+     */
+    dateRange: DateRangePickerValue;
+};
+
+type TableContextType = {
+    /**
+     * Function to call when the table needs an update
+     */
+    onChange: () => void;
+    /**
+     * Internal state of the table
+     *
+     * @see https://tanstack.com/table/v8/docs/api/core/table#state
+     */
+    state: TableState;
+    /**
+     * Function to update the table state
+     */
+    setState: Dispatch<(prevState: TableState) => TableState>;
+    /**
+     * Function that clears the filter and predicates
+     */
+    clearFilters: () => void;
+    /**
+     * Function that returns the selected row if any
+     */
+    getSelectedRow: () => any | null;
+    /**
+     * Function that clear the selected row
+     */
+    clearSelection: () => void;
+    /**
+     * Form used to handle predicates and dateRange
+     */
+    form: UseFormReturnType<TableFormType>;
+};
+
+export const TableContext = createContext<TableContextType | null>(null);

package/src/components/table/TableDateRangePicker.tsx

@@ -0,0 +1,65 @@
+import {CalendarSize24Px} from '@coveord/plasma-react-icons';
+import {Popover, Button} from '@mantine/core';
+import {DateRangePickerValue} from '@mantine/dates';
+import dayjs from 'dayjs';
+import {FunctionComponent, useState} from 'react';
+import {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';
+import {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';
+import {useTable} from './useTable';
+
+interface TableDateRangePickerProps
+    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {
+    /**
+     * An object containing date presets.
+     * If empty the preset dropdown won't be shown
+     *
+     * @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)]}
+     * }
+     * @default {}
+     */
+    presets?: Record<string, DateRangePickerPreset>;
+}
+
+export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({
+    presets = {},
+    rangeCalendarProps,
+}) => {
+    const [opened, setOpened] = useState(false);
+    const {form} = useTable();
+
+    const onApply = (dates: DateRangePickerValue) => {
+        form.setFieldValue('dateRange', dates);
+        setOpened(false);
+    };
+    const onCancel = () => {
+        setOpened(false);
+    };
+
+    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');
+    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
+
+    return (
+        <>
+            {formatedRange}
+            <Popover opened={opened} onChange={setOpened}>
+                <Popover.Target>
+                    <Button variant="outline" color="gray" onClick={() => setOpened(true)} px="xs">
+                        <CalendarSize24Px width={24} height={24} />
+                    </Button>
+                </Popover.Target>
+                <Popover.Dropdown p={0}>
+                    <DateRangePickerInlineCalendar
+                        initialRange={form.values.dateRange}
+                        onApply={onApply}
+                        onCancel={onCancel}
+                        presets={presets}
+                        rangeCalendarProps={rangeCalendarProps}
+                    />
+                </Popover.Dropdown>
+            </Popover>
+        </>
+    );
+};

package/src/components/table/TableFilter.tsx

@@ -0,0 +1,44 @@
+import {SearchSize16Px} from '@coveord/plasma-react-icons';
+import {createStyles, TextInput} from '@mantine/core';
+import {TableState} from '@tanstack/react-table';
+import {ChangeEvent, FunctionComponent} from 'react';
+import {useTable} from './useTable';
+
+const useStyles = createStyles((theme) => ({
+    wrapper: {
+        marginBottom: '0 !important',
+    },
+    empty: {
+        color: theme.colors.gray[4],
+    },
+}));
+
+interface TableFilterProps {
+    /**
+     * The placeholder for the filter input
+     *
+     * @default "Search by any field"
+     */
+    placeholder?: string;
+}
+
+export const TableFilter: FunctionComponent<TableFilterProps> = ({placeholder = 'Search by any field'}) => {
+    const {classes, cx} = useStyles();
+    const {state, setState} = useTable();
+
+    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
+        const {value} = event.currentTarget;
+        setState((prevState: TableState) => ({...prevState, globalFilter: value}));
+    };
+
+    return (
+        <TextInput
+            className={classes.wrapper}
+            placeholder={placeholder}
+            mb="md"
+            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}
+            value={state.globalFilter}
+            onChange={handleSearchChange}
+        />
+    );
+};

package/src/components/table/TableFooter.tsx

@@ -0,0 +1,8 @@
+import {Group} from '@mantine/core';
+import {FunctionComponent, PropsWithChildren} from 'react';
+
+export const TableFooter: FunctionComponent<PropsWithChildren> = ({children}) => (
+    <Group position="apart" px="md" py="sm">
+        {children}
+    </Group>
+);

package/src/components/table/TableHeader.tsx

@@ -0,0 +1,21 @@
+import {createStyles, Group} from '@mantine/core';
+import {FunctionComponent, PropsWithChildren} from 'react';
+
+const useStyles = createStyles((theme) => ({
+    header: {
+        position: 'sticky',
+        top: 0,
+        zIndex: 13, // skeleton is 11
+        backgroundColor: theme.colors.gray[1],
+        borderBottom: `1px solid ${theme.colors.gray[4]}`,
+    },
+}));
+
+export const TableHeader: FunctionComponent<PropsWithChildren> = ({children}) => {
+    const {classes} = useStyles();
+    return (
+        <Group position="right" spacing="lg" className={classes.header} px="md" py="sm">
+            {children}
+        </Group>
+    );
+};

package/src/components/table/TablePagination.tsx

@@ -0,0 +1,41 @@
+import {Pagination} from '@mantine/core';
+import {TableState} from '@tanstack/react-table';
+import {FunctionComponent} from 'react';
+import {useTable} from './useTable';
+
+interface TablePaginationProps {
+    /**
+     * The total number of page
+     */
+    totalPages: number;
+}
+
+export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {
+    const {state, setState} = useTable();
+    const updatePage = (newPage: number) => {
+        setState((prevState: TableState) => ({
+            ...prevState,
+            pagination: {...prevState.pagination, pageIndex: newPage - 1},
+        }));
+    };
+
+    return (
+        <Pagination
+            page={state.pagination.pageIndex + 1}
+            onChange={updatePage}
+            total={totalPages}
+            boundaries={0}
+            size="md"
+            getItemAriaLabel={(label) => {
+                switch (label) {
+                    case 'prev':
+                        return 'previous page';
+                    case 'next':
+                        return 'next page';
+                    default:
+                        return `${label}`;
+                }
+            }}
+        />
+    );
+};