@coveord/plasma-mantine 52.27.4 → 53.0.1

package/src/components/modal-wizard/ModalWizardStep.tsx

@@ -1,59 +0,0 @@
-import {FunctionComponent, PropsWithChildren, ReactNode} from 'react';
-
-type DependsOnStep<T> = (currentStep: number, numberOfSteps: number) => T;
-export type ResolveStep<P> = P extends infer T | DependsOnStep<infer T> ? T : never;
-
-export interface ModalWizardStepProps {
-    /**
-     * The title of the current step. The title can be dependent on the current step if needed
-     */
-    title?: ReactNode | DependsOnStep<ReactNode>;
-
-    /**
-     * The description of the current step. The description can be dependent on the current step if needed
-     */
-    description?: string | DependsOnStep<string>;
-
-    /**
-     * A link to the documentation for the current step
-     */
-    docLink?: string | DependsOnStep<string>;
-
-    /**
-     * A tooltip label for the docLink
-     */
-    docLinkTooltipLabel?: string | DependsOnStep<string>;
-
-    /**
-     * A function to validate the current step, it determines if the next step should be enabled or not.
-     */
-    validateStep?: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};
-
-    /**
-     * Show progress bar at this step
-     *
-     * @default true
-     */
-    showProgressBar?: boolean;
-
-    /**
-     * Does completion of current step count moves the progress bar
-     *
-     * @default true
-     */
-    countsAsProgress?: boolean;
-
-    /**
-     * Tooltip label of the next button when disabled
-     */
-    disabledTooltipLabel?: string;
-}
-
-const ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => <>{children}</>;
-
-ModalWizardStep.defaultProps = {
-    showProgressBar: true,
-    countsAsProgress: true,
-};
-
-export {ModalWizardStep};

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -1,471 +0,0 @@
-import {render, screen, userEvent} from '@test-utils';
-
-import {ModalWizard} from '../ModalWizard';
-
-describe('ModalWizard', () => {
-    it('navigate modal steps using footer buttons', async () => {
-        const user = userEvent.setup();
-
-        const modelSteps = [
-            {
-                id: 'step1',
-                docLink: 'https://google.com',
-                title: (currentStep: string) => 'Current Step is: ' + currentStep,
-                validateStep: () => ({isValid: true}),
-                element: <div> Slide 1</div>,
-            },
-            {
-                id: 'step2',
-                docLink: 'https://google.com',
-                title: (currentStep: string) => 'Current Step is: ' + currentStep,
-                validateStep: () => ({isValid: true}),
-                element: <div> Slide 2</div>,
-            },
-            {
-                id: 'step3',
-                docLink: 'https://google.com',
-                title: (currentStep: string) => 'Current Step is: ' + currentStep,
-                validateStep: () => ({isValid: false}),
-                element: <div> Slide 3</div>,
-            },
-            {
-                id: 'step4',
-                docLink: 'https://google.com',
-                title: (currentStep: string) => 'Current Step is: ' + currentStep,
-                validateStep: () => ({isValid: false}),
-                element: <div> Unreachable slide</div>,
-            },
-        ];
-
-        const isDirty = () => false;
-        const onNextSpy = vi.fn();
-        const onPreviousSpy = vi.fn();
-
-        render(
-            <ModalWizard
-                isDirty={isDirty}
-                handleDirtyState={() => confirm('Are you sure you want to close?')}
-                opened={true}
-                onClose={undefined}
-                onNext={onNextSpy}
-                onPrevious={onPreviousSpy}
-            >
-                {modelSteps.map((step) => (
-                    <ModalWizard.Step
-                        key={step.id}
-                        docLink={step.docLink}
-                        title={(currentStep) => 'Current Step is: ' + currentStep}
-                        validateStep={step.validateStep}
-                    >
-                        {step.element}
-                    </ModalWizard.Step>
-                ))}
-            </ModalWizard>,
-        );
-
-        expect(
-            screen.getByRole('heading', {
-                name: /current step is: 1/i,
-            }),
-        ).toBeInTheDocument();
-
-        expect(screen.getByText(/slide 1/i)).toBeInTheDocument();
-
-        expect(
-            screen.getByRole('button', {
-                name: /close-modal/i,
-            }),
-        ).toBeInTheDocument();
-
-        let nextButton = screen.getByRole('button', {
-            name: /next/i,
-        });
-        expect(nextButton).toBeInTheDocument();
-
-        await user.click(nextButton);
-
-        expect(
-            screen.getByRole('heading', {
-                name: /current step is: 2/i,
-            }),
-        ).toBeInTheDocument();
-
-        expect(
-            screen.getByRole('button', {
-                name: /close-modal/i,
-            }),
-        ).toBeInTheDocument();
-
-        expect(screen.getByText(/slide 2/i)).toBeInTheDocument();
-
-        expect(
-            screen.getByRole('button', {
-                name: /previous/i,
-            }),
-        ).toBeInTheDocument();
-
-        nextButton = screen.getByRole('button', {
-            name: /next/i,
-        });
-        expect(nextButton).toBeInTheDocument();
-
-        await user.click(nextButton);
-
-        expect(
-            screen.getByRole('heading', {
-                name: /current step is: 3/i,
-            }),
-        ).toBeInTheDocument();
-
-        expect(
-            screen.getByRole('button', {
-                name: /close-modal/i,
-            }),
-        ).toBeInTheDocument();
-
-        expect(screen.getByText(/slide 3/i)).toBeInTheDocument();
-
-        expect(
-            screen.getByRole('button', {
-                name: /previous/i,
-            }),
-        ).toBeInTheDocument();
-
-        nextButton = screen.getByRole('button', {
-            name: /next/i,
-        });
-
-        expect(nextButton).toBeInTheDocument();
-        expect(nextButton).toBeDisabled();
-
-        await user.click(
-            screen.getByRole('button', {
-                name: /previous/i,
-            }),
-        );
-
-        expect(
-            screen.getByRole('heading', {
-                name: /current step is: 2/i,
-            }),
-        ).toBeInTheDocument();
-
-        expect(
-            screen.getByRole('button', {
-                name: /close-modal/i,
-            }),
-        ).toBeInTheDocument();
-
-        expect(screen.getByText(/slide 2/i)).toBeInTheDocument();
-
-        expect(
-            screen.getByRole('button', {
-                name: /previous/i,
-            }),
-        ).toBeInTheDocument();
-    });
-
-    it('calls the onClose prop when closing the modal', async () => {
-        const user = userEvent.setup();
-
-        const modelSteps = [
-            {
-                id: 'step1',
-                docLink: 'https://google.com',
-                title: (currentStep: string) => 'Current Step is: ' + currentStep,
-                validateStep: () => ({isValid: true}),
-                element: <div> Slide 1</div>,
-            },
-        ];
-
-        const isDirty = () => false;
-        const onClose = vi.fn();
-
-        render(
-            <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
-                {modelSteps.map((model_item) => (
-                    <ModalWizard.Step
-                        key={model_item.id}
-                        docLink={model_item.docLink}
-                        title={(currentStep) => 'Current Step is: ' + currentStep}
-                        validateStep={model_item.validateStep}
-                    >
-                        {model_item.element}
-                    </ModalWizard.Step>
-                ))}
-            </ModalWizard>,
-        );
-
-        const closeButton = screen.getByRole('button', {
-            name: /close-modal/i,
-        });
-        await user.click(closeButton);
-
-        expect(onClose).toHaveBeenCalledTimes(1);
-    });
-
-    it('closes the modal when clicking on cancel', async () => {
-        const user = userEvent.setup();
-        const modelSteps = [
-            {
-                id: 'step1',
-                docLink: 'https://google.com',
-                title: (currentStep: string) => 'Current Step is: ' + currentStep,
-                validateStep: () => ({isValid: true}),
-                element: <div> Slide 1</div>,
-            },
-        ];
-
-        const isDirty = () => false;
-        const onClose = vi.fn();
-
-        render(
-            <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
-                {modelSteps.map((model_item) => (
-                    <ModalWizard.Step
-                        key={model_item.id}
-                        docLink={model_item.docLink}
-                        title={(currentStep) => 'Current Step is: ' + currentStep}
-                        validateStep={model_item.validateStep}
-                    >
-                        {model_item.element}
-                    </ModalWizard.Step>
-                ))}
-            </ModalWizard>,
-        );
-
-        const cancelButton = screen.getByRole('button', {
-            name: /cancel/i,
-        });
-        await user.click(cancelButton);
-
-        expect(onClose).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls onFinish prop when clicking on finish button', async () => {
-        const user = userEvent.setup();
-        const modelSteps = [
-            {
-                id: 'step1',
-                docLink: 'https://google.com',
-                title: (currentStep: string) => 'Current Step is: ' + currentStep,
-                validateStep: () => ({isValid: true}),
-                element: <div> Slide 1</div>,
-            },
-        ];
-
-        const isDirty = () => false;
-        const onClose = vi.fn();
-        const onFinish = vi.fn();
-
-        render(
-            <ModalWizard isDirty={isDirty} onClose={onClose} onFinish={onFinish} opened={true}>
-                {modelSteps.map((model_item) => (
-                    <ModalWizard.Step
-                        key={model_item.id}
-                        docLink={model_item.docLink}
-                        title={(currentStep) => 'Current Step is: ' + currentStep}
-                        validateStep={model_item.validateStep}
-                    >
-                        {model_item.element}
-                    </ModalWizard.Step>
-                ))}
-            </ModalWizard>,
-        );
-
-        const finishButton = screen.getByRole('button', {
-            name: /finish/i,
-        });
-
-        await user.click(finishButton);
-        expect(onFinish).toHaveBeenCalledTimes(1);
-    });
-
-    it('triggers handleDirty callback when the modal wizard has dirty state', async () => {
-        const user = userEvent.setup();
-        const modelSteps = [
-            {
-                id: 'step1',
-                docLink: 'https://google.com',
-                title: (currentStep: string) => 'Current Step is: ' + currentStep,
-                validateStep: () => ({isValid: true}),
-                element: <div> Slide 1</div>,
-            },
-        ];
-
-        const isDirty = () => true;
-        const onClose = vi.fn();
-        const handleDirtyState = vi.fn();
-
-        render(
-            <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
-                {modelSteps.map((model_item) => (
-                    <ModalWizard.Step
-                        key={model_item.id}
-                        docLink={model_item.docLink}
-                        title={(currentStep) => 'Current Step is: ' + currentStep}
-                        validateStep={model_item.validateStep}
-                    >
-                        {model_item.element}
-                    </ModalWizard.Step>
-                ))}
-            </ModalWizard>,
-        );
-        const closeButton = screen.getByRole('button', {
-            name: /close-modal/i,
-        });
-
-        handleDirtyState.mockReturnValueOnce(true);
-        await user.click(closeButton);
-
-        expect(handleDirtyState).toHaveBeenCalledTimes(1);
-        expect(onClose).toHaveBeenCalledTimes(1);
-    });
-
-    it('close the modal if user confirms close when the modal wizard has dirty state', async () => {
-        const user = userEvent.setup();
-        const modelSteps = [
-            {
-                id: 'step1',
-                docLink: 'https://google.com',
-                title: (currentStep: string) => 'Current Step is: ' + currentStep,
-                validateStep: () => ({isValid: true}),
-                element: <div> Slide 1</div>,
-            },
-        ];
-
-        const isDirty = () => true;
-        const onClose = vi.fn();
-        const handleDirtyState = vi.fn();
-
-        render(
-            <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
-                {modelSteps.map((model_item) => (
-                    <ModalWizard.Step
-                        key={model_item.id}
-                        docLink={model_item.docLink}
-                        title={(currentStep) => 'Current Step is: ' + currentStep}
-                        validateStep={model_item.validateStep}
-                    >
-                        {model_item.element}
-                    </ModalWizard.Step>
-                ))}
-            </ModalWizard>,
-        );
-        const closeButton = screen.getByRole('button', {
-            name: /close-modal/i,
-        });
-
-        handleDirtyState.mockReturnValueOnce(false);
-        await user.click(closeButton);
-        expect(handleDirtyState).toHaveBeenCalledTimes(1);
-        expect(onClose).toHaveBeenCalledTimes(0);
-    });
-
-    it('hides the progress bar when showProgressBar is false for a given step', async () => {
-        const user = userEvent.setup();
-        render(
-            <ModalWizard opened={true} onClose={vi.fn()}>
-                <ModalWizard.Step title="Step 1" validateStep={() => ({isValid: true})} showProgressBar={false}>
-                    Content step 1
-                </ModalWizard.Step>
-                <ModalWizard.Step title="Step 2" validateStep={() => ({isValid: true})}>
-                    Content step 2
-                </ModalWizard.Step>
-            </ModalWizard>,
-        );
-
-        expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
-
-        await user.click(screen.getByRole('button', {name: /next/i}));
-
-        expect(screen.getByRole('progressbar')).toBeInTheDocument();
-    });
-
-    it('enables the next step button if isStepValidatedOnNext is provided', async () => {
-        render(
-            <ModalWizard opened={true} onClose={vi.fn()} isStepValidatedOnNext>
-                <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: false})}>
-                    Content step 1
-                </ModalWizard.Step>
-                <ModalWizard.Step title="Step 2" validateStep={() => ({isValid: false})}>
-                    Content step 2
-                </ModalWizard.Step>
-            </ModalWizard>,
-        );
-
-        expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
-    });
-
-    it('enables the next step button in accordance to validateStep if isStepValidatedOnNext is not provided', async () => {
-        const user = userEvent.setup();
-
-        render(
-            <ModalWizard opened={true} onClose={vi.fn()}>
-                <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: true})}>
-                    Content step 1
-                </ModalWizard.Step>
-                <ModalWizard.Step title="Step 2" validateStep={() => ({isValid: false})}>
-                    Content step 2
-                </ModalWizard.Step>
-            </ModalWizard>,
-        );
-
-        expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
-        await user.click(screen.getByRole('button', {name: /next/i}));
-        expect(screen.getByRole('button', {name: /finish/i})).toBeDisabled();
-    });
-
-    describe('disabledTooltipLabel props', () => {
-        it('display a tooltip when a step is invalid and a label is passed', async () => {
-            const user = userEvent.setup();
-
-            render(
-                <ModalWizard opened={true} onClose={vi.fn()}>
-                    <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: true})}>
-                        Content step 1
-                    </ModalWizard.Step>
-                    <ModalWizard.Step
-                        title="Step 2"
-                        validateStep={() => ({isValid: false})}
-                        disabledTooltipLabel="test tooltip label"
-                    >
-                        Content step 2
-                    </ModalWizard.Step>
-                </ModalWizard>,
-            );
-
-            expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
-            await user.click(screen.getByRole('button', {name: /next/i}));
-            const finishButton = screen.getByRole('button', {name: /finish/i});
-            expect(finishButton).toBeDisabled();
-            await user.hover(finishButton.parentElement);
-            expect(screen.getByText('test tooltip label')).toBeVisible();
-        });
-
-        it('does not display the tooltip if the step is validated even if the props is passed', async () => {
-            const user = userEvent.setup();
-            render(
-                <ModalWizard opened={true} onClose={vi.fn()}>
-                    <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: true})}>
-                        Content step 1
-                    </ModalWizard.Step>
-                    <ModalWizard.Step
-                        title="Step 2"
-                        validateStep={() => ({isValid: true})}
-                        disabledTooltipLabel="test tooltip label"
-                    >
-                        Content step 2
-                    </ModalWizard.Step>
-                </ModalWizard>,
-            );
-
-            expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
-            await user.click(screen.getByRole('button', {name: /next/i}));
-            const finishButton = screen.getByRole('button', {name: /finish/i});
-            expect(finishButton).toBeEnabled();
-            await user.hover(finishButton.parentElement);
-            expect(screen.queryByText('test tooltip label')).not.toBeInTheDocument();
-        });
-    });
-});

package/src/components/modal-wizard/index.ts

@@ -1,2 +0,0 @@
-export * from './ModalWizard';
-export {type ModalWizardStepProps} from './ModalWizardStep';

package/src/components/table/Table.styles.ts

@@ -1,38 +0,0 @@
-import {createStyles} from '@mantine/core';
-
-const useStyles = createStyles<string>((theme) => ({
-    table: {
-        width: '100%',
-    },
-
-    header: {
-        position: 'sticky',
-        top: 0,
-        backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
-        transition: 'box-shadow 150ms ease',
-        zIndex: 1,
-
-        '&::after': {
-            content: '""',
-            position: 'absolute',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            borderBottom: `1px solid ${theme.colors.gray[3]}`,
-        },
-    },
-
-    body: {},
-}));
-
-export const TableComponentsOrder = {
-    MultiSelectInfo: 7,
-    Actions: 6,
-    Predicate: 5,
-    Filter: 4,
-    DateRangePicker: 3,
-    ColumnsSelector: 2,
-    LayoutControl: 1,
-};
-
-export default useStyles;

package/src/components/table/layouts/RowLayout.styles.ts

@@ -1,70 +0,0 @@
-import {createStyles, rem} from '@mantine/core';
-export interface RowLayoutStylesParams {
-    multiRowSelectionEnabled: boolean;
-    disableRowSelection: boolean;
-}
-
-export default createStyles<string, RowLayoutStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {
-    const rowBackgroundColor =
-        theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors.gray[1];
-    const border = `${rem(1)} solid ${theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`;
-    return {
-        headerColumns: {
-            '& input[type=checkbox]': {
-                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,
-                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,
-                pointerEvents: disableRowSelection ? 'none' : 'auto',
-                cursor: disableRowSelection ? 'not-allowed' : 'default',
-
-                '& + svg': {
-                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',
-                },
-            },
-        },
-
-        rowSelected: {
-            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
-        },
-
-        rowUnselectable: {
-            '& input[type=checkbox]': {
-                backgroundColor: `${theme.colors.gray[2]}`,
-                borderColor: `${theme.colors.gray[3]}`,
-                pointerEvents: 'none',
-                cursor: 'not-allowed',
-
-                '&:checked + svg': {
-                    color: `${theme.colors.gray[5]}`,
-                },
-            },
-        },
-
-        rowCollapsibleButtonCell: {
-            textAlign: 'right',
-            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,
-        },
-
-        row: {
-            '& td:first-of-type': {
-                paddingLeft: '40px',
-            },
-            '&:hover': {
-                backgroundColor: rowBackgroundColor,
-            },
-            overflowWrap: 'anywhere',
-        },
-
-        cell: {
-            verticalAlign: 'middle',
-            // We must use height instead of minHeight here, otherwise it doesn't apply
-            height: '56px',
-            padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
-            borderBottom: border,
-        },
-
-        collapsible: {
-            backgroundColor: rowBackgroundColor,
-            borderBottom: border,
-        },
-    };
-});

package/src/components/table/layouts/RowLayout.types.ts

@@ -1,27 +0,0 @@
-import {DefaultProps, Selectors} from '@mantine/core';
-import {Table} from '@tanstack/table-core';
-import {ReactNode} from 'react';
-import useStyles, {RowLayoutStylesParams} from './RowLayout.styles';
-
-type RowLayoutStylesNames = Selectors<typeof useStyles>;
-
-// TODO https://coveord.atlassian.net/browse/ADUI-9182
-export interface TableLayoutProps<T = unknown> extends DefaultProps<RowLayoutStylesNames, RowLayoutStylesParams> {
-    table: Table<T>;
-    loading?: boolean;
-    /**
-     * Action passed when user double clicks on a row
-     */
-    doubleClickAction?: (datum: T) => void;
-    /**
-     * 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;
-    /**
-     * Whether clicking on a selected row will deselect the row or not.
-     */
-    keepSelection?: boolean;
-}

package/src/components/table/table-actions/TableActions.styles.ts

@@ -1,8 +0,0 @@
-import {createStyles} from '@mantine/core';
-
-export default createStyles((theme) => ({
-    root: {maxWidth: '100%'},
-    wrapper: {
-        display: 'inline-flex',
-    },
-}));