@coveord/plasma-mantine 47.0.1-next.2

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

@@ -0,0 +1,120 @@
+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.Predicate', () => {
+    it('displays the intial value', async () => {
+        render(
+            <Table
+                data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                columns={columns}
+                initialState={{predicates: {rank: 'second'}}}
+            >
+                <Table.Header>
+                    <Table.Predicate
+                        id="rank"
+                        data={[
+                            {value: 'first', label: 'First'},
+                            {value: 'second', label: 'Second'},
+                        ]}
+                    />
+                </Table.Header>
+            </Table>
+        );
+
+        await waitFor(() => {
+            expect(
+                screen.getByRole('searchbox', {
+                    name: 'rank',
+                })
+            ).toHaveValue('Second');
+        });
+    });
+
+    it('calls onMount with the initial value', async () => {
+        const onMount = jest.fn();
+        render(
+            <Table
+                data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                columns={columns}
+                onMount={onMount}
+                initialState={{predicates: {rank: 'second'}}}
+            >
+                <Table.Header>
+                    <Table.Predicate
+                        id="rank"
+                        data={[
+                            {value: 'first', label: 'First'},
+                            {value: 'second', label: 'Second'},
+                        ]}
+                    />
+                </Table.Header>
+            </Table>
+        );
+
+        await waitFor(() => {
+            expect(
+                screen.getByRole('searchbox', {
+                    name: 'rank',
+                })
+            ).toHaveValue('Second');
+        });
+        expect(onMount).toHaveBeenCalledWith(expect.objectContaining({predicates: {rank: 'second'}}));
+    });
+
+    it('calls onChange when changing the predicate', async () => {
+        const onChange = jest.fn();
+        render(
+            <Table
+                data={[{name: 'fruit'}, {name: 'vegetable'}]}
+                columns={columns}
+                onChange={onChange}
+                initialState={{predicates: {rank: 'second'}}}
+            >
+                <Table.Header>
+                    <Table.Predicate
+                        id="rank"
+                        data={[
+                            {value: 'first', label: 'First'},
+                            {value: 'second', label: 'Second'},
+                        ]}
+                    />
+                </Table.Header>
+            </Table>
+        );
+
+        await waitFor(() => {
+            expect(
+                screen.getByRole('searchbox', {
+                    name: 'rank',
+                })
+            ).toHaveValue('Second');
+        });
+
+        userEvent.click(
+            screen.getByRole('searchbox', {
+                name: 'rank',
+            })
+        );
+
+        userEvent.click(
+            screen.getByRole('option', {
+                name: 'First',
+            })
+        );
+
+        expect(
+            screen.getByRole('searchbox', {
+                name: 'rank',
+            })
+        ).toHaveValue('First');
+
+        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({predicates: {rank: 'first'}}));
+    });
+});

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

@@ -0,0 +1,63 @@
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent, waitFor} from '@test-utils';
+
+import {Table} from '../Table';
+
+type RowData = {name: string; type: 'fruit' | 'vegetable'; colors: string[]};
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [
+    columnHelper.accessor('name', {}),
+    columnHelper.accessor('type', {sortDescFirst: true}),
+    columnHelper.accessor('colors', {
+        cell: (info) => info.getValue().map((color) => <span key={color}>{color}</span>),
+        enableSorting: false,
+    }),
+];
+
+describe('Th', () => {
+    it('displays the sort icon for every sortable column', async () => {
+        const data: RowData[] = [
+            {name: 'apple', type: 'fruit', colors: ['red', 'green']},
+            {name: 'potato', type: 'vegetable', colors: ['brown', 'blue', 'yellow']},
+        ];
+        render(<Table data={data} columns={columns} />);
+
+        // icons are loadable, wait for them to load
+        await screen.findByRole('img', {name: 'arrowHeadDown'});
+        await screen.findByRole('img', {name: 'arrowHeadUp'});
+
+        const headers = screen.getAllByRole('button');
+        expect(headers.length).toBe(2);
+
+        expect(headers[0]).toHaveAccessibleName('name arrowHeadDown');
+        expect(headers[1]).toHaveAccessibleName('type arrowHeadUp');
+    });
+
+    it('changes the sort icon when clicking on a table header', async () => {
+        const data: RowData[] = [
+            {name: 'apple', type: 'fruit', colors: ['red', 'green']},
+            {name: 'potato', type: 'vegetable', colors: ['brown', 'blue', 'yellow']},
+        ];
+        const onChange = jest.fn();
+        render(<Table data={data} columns={columns} onChange={onChange} />);
+
+        // icons are loadable, wait for them to load
+        await screen.findAllByRole('img', {name: 'arrowHeadDown'});
+        await screen.findAllByRole('img', {name: 'arrowHeadUp'});
+
+        userEvent.click(screen.getByRole('button', {name: 'name arrowHeadDown'}));
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
+        });
+
+        userEvent.click(screen.getByRole('button', {name: 'name arrowHeadDown'}));
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: true}]}));
+        });
+
+        userEvent.click(await screen.findByRole('button', {name: 'name arrowHeadUp'}));
+        await waitFor(() => {
+            expect(onChange).toHaveBeenCalledWith(expect.objectContaining({sorting: [{id: 'name', desc: false}]}));
+        });
+    });
+});

package/src/components/table/index.ts

@@ -0,0 +1,3 @@
+export * from './Table';
+export {type onTableChangeEvent} from './TableContext';
+export * from './useTable';

package/src/components/table/useTable.tsx

@@ -0,0 +1,11 @@
+import {useContext} from 'react';
+import {TableContext} from './TableContext';
+
+export const useTable = () => {
+    const ctx = useContext(TableContext);
+    if (ctx === null) {
+        throw new Error('useTable must be used inside of a TableContext.Provider');
+    }
+
+    return ctx;
+};

package/src/hooks/__tests__/useControlledList.spec.tsx

@@ -0,0 +1,41 @@
+import {renderHook} from '@testing-library/react';
+
+import {useControlledList} from '../useControlledList';
+
+describe('useControlledList', () => {
+    const onChange = jest.fn();
+
+    afterEach(() => {
+        onChange.mockClear();
+    });
+
+    describe('append', () => {
+        it('appends the specified item to end of the initial list', () => {
+            const {result} = renderHook(() => useControlledList({onChange, value: ['one', 'two']}));
+            result.current[1].append('three');
+
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(onChange).toHaveBeenCalledWith(['one', 'two', 'three']);
+        });
+    });
+
+    describe('remove', () => {
+        it('removes the item at the specified index from the initial list', () => {
+            const {result} = renderHook(() => useControlledList({onChange, value: ['good', 'bad', 'good']}));
+            result.current[1].remove(1);
+
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(onChange).toHaveBeenCalledWith(['good', 'good']);
+        });
+    });
+
+    describe('reorder', () => {
+        it('moves the item at the "from" position to the specified position within the list', () => {
+            const {result} = renderHook(() => useControlledList({onChange, value: ['b', 'c', 'a']}));
+            result.current[1].reorder({from: 2, to: 0});
+
+            expect(onChange).toHaveBeenCalledTimes(1);
+            expect(onChange).toHaveBeenCalledWith(['a', 'b', 'c']);
+        });
+    });
+});

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useParentHeight';
+export * from './useControlledList';

package/src/hooks/useControlledList.ts

@@ -0,0 +1,53 @@
+import {useUncontrolled} from '@mantine/hooks';
+
+interface UseControlledList<T> {
+    /** Initial value for uncontrolled state */
+    defaultValue?: T[];
+    /** Value for controlled state */
+    value?: T[];
+    /** Controlled state onChange handler */
+    onChange?: (values: T[]) => void;
+}
+
+interface ListHandlers<T> {
+    /** Appends the item at the end of the list */
+    append: (item: T) => void;
+    /** Removes the item at the index from the list */
+    remove: (index: number) => void;
+    /** Moves the item at the "from" position to another position within the list  */
+    reorder: ({from, to}: {from: number; to: number}) => void;
+}
+
+/**
+ * Manage a list of items in a controlled fashion, to be used with inputs
+ */
+export const useControlledList = <T>({defaultValue, value, onChange}: UseControlledList<T>): [T[], ListHandlers<T>] => {
+    const [values, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        finalValue: [],
+        onChange,
+    });
+
+    const remove = (index: number) => {
+        const newValues = values.filter((_, i) => i !== index);
+        handleChange?.(newValues);
+    };
+
+    const append = (item: T) => {
+        const newValues = [...values, item];
+        handleChange?.(newValues);
+    };
+
+    const reorder = ({from, to}: {from: number; to: number}) => {
+        const newValues = [...values];
+        const item = values[from];
+
+        newValues.splice(from, 1);
+        newValues.splice(to, 0, item);
+
+        handleChange?.(newValues);
+    };
+
+    return [values, {remove, append, reorder}];
+};

package/src/hooks/useParentHeight.ts

@@ -0,0 +1,25 @@
+import {useEffect, useRef, useState} from 'react';
+
+const getElementInnerHeight = (el: HTMLElement): number => {
+    const fullHeight = el.getBoundingClientRect().height;
+    const cs = getComputedStyle(el);
+    const padding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+    const border = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
+    return fullHeight - padding - border;
+};
+
+/**
+ * Computes the available height of the parent element on mount
+ */
+export const useParentHeight = (): [number, React.MutableRefObject<HTMLDivElement>] => {
+    const [height, setHeight] = useState(-1);
+    const ref = useRef<HTMLDivElement>();
+
+    useEffect(() => {
+        if (ref.current) {
+            setHeight(getElementInnerHeight(ref.current.parentElement));
+        }
+    }, [ref.current]);
+
+    return [height, ref];
+};

package/src/index.ts

@@ -0,0 +1,21 @@
+import {Tuple} from '@mantine/core';
+
+import {PlasmaColors} from './theme/PlasmaColors';
+
+export * from '@mantine/carousel';
+export * from '@mantine/core';
+export * from '@mantine/form';
+export type {FormValidateInput} from '@mantine/form/lib/types';
+export * from '@mantine/hooks';
+export {createColumnHelper, type ColumnDef} from '@tanstack/table-core';
+export * from './components';
+// explicitly overriding mantine components
+export {Header, Table} from './components';
+export * from './theme';
+
+declare module '@mantine/core' {
+    export interface MantineThemeColorsOverride {
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        colors: Record<keyof typeof PlasmaColors | (string & {}), Tuple<string, 10>>;
+    }
+}

package/src/theme/PlasmaColors.ts

@@ -0,0 +1,44 @@
+import {color} from '@coveord/plasma-tokens';
+import {Tuple} from '@mantine/core';
+
+const toMantineColor = (plasmaColor: Record<string, string>): Tuple<string, 10> =>
+    Object.values(plasmaColor) as Tuple<string, 10>;
+
+export const PlasmaColors = {
+    // Primary
+    gray: toMantineColor(color.primary.gray),
+    action: [
+        color.primary.action[1],
+        color.primary.action[1],
+        color.primary.action[2],
+        color.primary.action[3],
+        color.primary.action[4],
+        color.primary.action[6],
+        color.primary.action[6],
+        color.primary.action[8],
+        color.primary.action[8],
+        color.primary.action[9],
+    ] as Tuple<string, 10>,
+    navy: toMantineColor(color.primary.navy),
+    // Accent
+    blue: toMantineColor(color.accent.blue),
+    red: toMantineColor(color.accent.red),
+    teal: toMantineColor(color.accent.teal),
+    yellow: toMantineColor(color.accent.yellow),
+    // Secondary
+    green: toMantineColor(color.secondary.green),
+    indigo: toMantineColor(color.secondary.indigo),
+    lime: [
+        color.secondary.lime[0],
+        color.secondary.lime[0],
+        color.secondary.lime[0],
+        color.secondary.lime[0],
+        color.secondary.lime[6],
+        color.secondary.lime[6],
+        color.secondary.lime[6],
+        color.secondary.lime[9],
+        color.secondary.lime[9],
+        color.secondary.lime[9],
+    ] as Tuple<string, 10>,
+    purple: toMantineColor(color.secondary.purple),
+};

package/src/theme/Plasmantine.tsx

@@ -0,0 +1,10 @@
+import {MantineProvider} from '@mantine/core';
+import {FunctionComponent, PropsWithChildren} from 'react';
+
+import {plasmaTheme} from './Theme';
+
+export const Plasmantine: FunctionComponent<PropsWithChildren> = ({children}) => (
+    <MantineProvider withGlobalStyles withNormalizeCSS theme={plasmaTheme}>
+        {children}
+    </MantineProvider>
+);

package/src/theme/Theme.tsx

@@ -0,0 +1,161 @@
+import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';
+import {color} from '@coveord/plasma-tokens';
+import {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';
+
+import {PlasmaColors} from './PlasmaColors';
+
+export const plasmaTheme: MantineThemeOverride = {
+    colorScheme: 'light',
+    fontFamily: 'canada-type-gibson, sans-serif',
+    black: color.primary.gray[9],
+    defaultRadius: 8,
+    spacing: {
+        xs: 8,
+        sm: 16,
+        md: 24,
+        lg: 32,
+        xl: 40,
+    },
+    primaryColor: 'action',
+    headings: {
+        fontFamily: 'canada-type-gibson, sans-serif',
+        fontWeight: 500,
+        sizes: {
+            h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},
+            h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},
+            h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},
+            h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},
+            h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},
+            h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},
+        },
+    },
+    shadows: {
+        xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',
+        sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',
+        md: '0px 4px 8px rgba(4, 8, 31, 0.08)',
+        lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',
+        xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',
+    },
+    colors: PlasmaColors,
+    components: {
+        Alert: {
+            defaultProps: {
+                icon: <InfoSize24Px height={24} />,
+                color: 'navy',
+            },
+            styles: {
+                title: {
+                    fontWeight: 500,
+                },
+            },
+        },
+        Title: {
+            styles: (theme) => ({
+                root: {
+                    '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},
+                },
+            }),
+        },
+        Button: {
+            styles: (theme, params: ButtonStylesParams) => ({
+                root: {
+                    '&': {fontWeight: 400},
+                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,
+                },
+            }),
+        },
+        Modal: {
+            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({
+                modal: {
+                    width: fullScreen
+                        ? undefined
+                        : theme.fn.size({size, sizes: {xs: 320, sm: 440, md: '45%', lg: 1334, xl: '85%'}}),
+                },
+            }),
+            defaultProps: {
+                overlayColor: color.primary.navy[9],
+                overlayOpacity: 0.9,
+            },
+        },
+        InputWrapper: {
+            defaultProps: {
+                withAsterisk: false,
+            },
+        },
+        TextInput: {
+            defaultProps: {
+                radius: 8,
+            },
+            styles: (theme) => ({
+                description: {
+                    fontSize: 'inherit',
+                    paddingBottom: theme.spacing.xs,
+                },
+            }),
+        },
+        Tooltip: {
+            defaultProps: {
+                color: 'navy',
+                withArrow: true,
+                withinPortal: true,
+            },
+        },
+        Breadcrumbs: {
+            defaultProps: {
+                separator: <ArrowHeadRightSize24Px height={24} />,
+            },
+        },
+        Loader: {
+            defaultProps: {
+                variant: 'dots',
+                color: 'action',
+            },
+        },
+        DateRangePicker: {
+            styles: {
+                cell: {
+                    textAlign: 'center',
+                },
+            },
+        },
+        Anchor: {
+            defaultProps: {
+                color: 'action',
+            },
+            styles: (theme) => ({
+                root: {
+                    ...theme.fn.hover({
+                        textDecoration: 'underline',
+                        color: theme.colors.action[8],
+                    }),
+                },
+            }),
+        },
+        Checkbox: {
+            defaultProps: {
+                radius: 'sm',
+            },
+            styles: {
+                labelWrapper: {
+                    display: 'flex',
+                    alignItems: 'center',
+                },
+            },
+        },
+        List: {
+            styles: () => ({
+                root: {
+                    listStyleType: 'disc',
+                },
+            }),
+        },
+        Radio: {
+            styles: {
+                labelWrapper: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                },
+            },
+        },
+    },
+};

package/src/theme/index.ts

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

package/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+    "extends": "./tsconfig.json",
+    "exclude": ["**/*.spec.*"]
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../tsconfig-base.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "declarationDir": "./dist/definitions",
+        "rootDir": "src",
+        "tsBuildInfoFile": "./dist/.tsbuildinfo",
+        "baseUrl": ".",
+        "paths": {
+            "@test-utils": ["./src/__tests__/Utils.tsx"]
+        }
+    },
+    "include": ["src"]
+}