@coveord/plasma-mantine 47.0.1-next.2

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

@@ -0,0 +1,211 @@
+import {Button, createStyles, Modal, Progress} from '@mantine/core';
+import {Children, ReactElement, useMemo, useState} from 'react';
+import {StickyFooter} from '../sticky-footer';
+import {ModalWizardStep} from './ModalWizardStep';
+import {Header} from '../header';
+
+interface ModalWizardProps {
+    /**
+     * The label of the cancel button
+     *
+     * @default "Cancel"
+     */
+    cancelButtonLabel?: string;
+
+    /**
+     * The label of the next button
+     *
+     * @default "Next"
+     */
+
+    nextButtonLabel?: string;
+    /**
+     * The label of the previous button
+     *
+     * @default "Previous"
+     */
+    previousButtonLabel?: string;
+    /**
+     * The label of the finish button
+     *
+     * @default "Finish"
+     */
+
+    finishButtonLabel?: string;
+
+    /**
+     * A callback function that is executed when the user clicks on the next button
+     */
+    onNext?: () => unknown;
+
+    /**
+     * A callback function that is executed when the user clicks on the previous button
+     */
+    onPrevious?: () => unknown;
+
+    /**
+     * A callback function that is executed when the user clicks on the cancel button
+     */
+
+    onClose?: () => unknown;
+
+    /**
+     * A function that is executed when user completes all the steps.
+     *
+     * @param close A function that closes the modal when called.
+     */
+    onFinish?: () => unknown;
+
+    /**
+     * Determine if user interacted with any steps in the modal wizard
+     */
+
+    isDirty?: () => boolean;
+
+    /**
+     * A function to confirm close if the state is dirty before closing
+     */
+    handleDirtyState?: () => boolean;
+
+    /**
+     * Props to pass to each modal
+     */
+    modalProps?: any;
+
+    /**
+     * Label for close button
+     */
+    closeButtonLabel?: string;
+
+    /**
+     * Children to display in modal wizard
+     * */
+    children?: Array<ReturnType<typeof ModalWizardStep>>;
+}
+
+const useStyles = createStyles(() => ({
+    modal: {
+        height: '70%',
+        display: 'flex',
+        flexDirection: 'column',
+    },
+}));
+
+interface ModalWizardType {
+    <T>(props: ModalWizardProps): ReactElement;
+
+    Step: typeof ModalWizardStep;
+}
+
+export const ModalWizard: ModalWizardType = ({
+    cancelButtonLabel = 'Cancel',
+    nextButtonLabel = 'Next',
+    previousButtonLabel = 'Previous',
+    finishButtonLabel = 'Finish',
+    onNext,
+    onPrevious,
+    onClose,
+    onFinish,
+    isDirty,
+    modalProps,
+    handleDirtyState,
+    closeButtonLabel,
+    children,
+}) => {
+    const [currentStepIndex, setCurrentStepIndex] = useState(0);
+    const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);
+
+    const numberOfSteps = modalSteps.length;
+    const numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).length;
+    const isFirstStep = currentStepIndex === 0;
+    const isLastStep = currentStepIndex === numberOfSteps - 1;
+    const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];
+
+    const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};
+    const isModalDirty = isDirty && isDirty();
+
+    const {classes} = useStyles();
+
+    const closeModalWizard = () => {
+        if (isModalDirty && handleDirtyState) {
+            handleDirtyState() && onClose?.();
+        } else {
+            onClose?.();
+        }
+    };
+
+    const getProgress = (currStepIndex: number) => {
+        const validSteps = modalSteps.filter(
+            (step, index) => step.props.countsAsProgress && index <= currStepIndex
+        ).length;
+        return (validSteps / numberOfStepsCountAsProgress) * 100;
+    };
+
+    const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);
+
+    return (
+        <Modal
+            opened
+            classNames={{modal: classes.modal}}
+            centered
+            closeButtonLabel={closeButtonLabel}
+            padding="xl"
+            title={
+                <Header
+                    docLink={currentStep.props.docLin}
+                    description={
+                        typeof currentStep.props.description === 'function'
+                            ? currentStep.props.description(currentStepIndex + 1, numberOfSteps)
+                            : currentStep.props.description
+                    }
+                    py={null}
+                    px={null}
+                >
+                    {typeof currentStep.props.title === 'function'
+                        ? currentStep.props.title(currentStepIndex + 1, numberOfSteps)
+                        : currentStep.props.title}
+                </Header>
+            }
+            onClose={closeModalWizard}
+            {...modalProps}
+        >
+            {currentStep.props.showProgressBar && <Progress value={getProgressMemo} />}
+            {currentStep}
+            <StickyFooter borderTop py={null} px={null} pt="md">
+                <Button
+                    name={isFirstStep ? cancelButtonLabel : previousButtonLabel}
+                    disabled={false}
+                    size="md"
+                    variant="outline"
+                    onClick={() => {
+                        if (isFirstStep) {
+                            closeModalWizard();
+                        } else {
+                            onPrevious?.();
+                            setCurrentStepIndex(currentStepIndex - 1);
+                        }
+                    }}
+                >
+                    {isFirstStep ? cancelButtonLabel : previousButtonLabel}
+                </Button>
+
+                <Button
+                    disabled={!isValid}
+                    size="md"
+                    onClick={() => {
+                        if (isLastStep) {
+                            onFinish ? onFinish() : onClose();
+                        } else {
+                            onNext?.();
+                            setCurrentStepIndex(currentStepIndex + 1);
+                        }
+                    }}
+                >
+                    {isLastStep ? finishButtonLabel : nextButtonLabel}
+                </Button>
+            </StickyFooter>
+        </Modal>
+    );
+};
+
+ModalWizard.Step = ModalWizardStep;

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

@@ -0,0 +1,55 @@
+import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';
+
+type DependsOnStep<T> = (currentStep: number, numberOfSteps: number) => T;
+
+export interface ModalWizardStepProps {
+    /**
+     * The title of the current step. The title can be dependent on the current step if needed
+     */
+    title?: string | ReactElement | DependsOnStep<string | ReactElement>;
+
+    /**
+     * The description of the current step. The description can be dependent on the current step if needed
+     */
+    description?: string | ReactElement | DependsOnStep<string | ReactElement>;
+
+    /**
+     * A link to the documentation for the current step
+     */
+    docLink: string;
+
+    /**
+     * A tooltip label for the docLink
+     */
+    docLinkTooltipLabel?: string | ReactElement | DependsOnStep<string | ReactElement>;
+
+    /**
+     * 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;
+}
+
+const ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => (
+    <div>{children}</div>
+);
+
+ModalWizardStep.defaultProps = {
+    showProgressBar: true,
+    countsAsProgress: true,
+};
+
+export {ModalWizardStep};

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

@@ -0,0 +1,345 @@
+import {render, screen, userEvent} from '@test-utils';
+import {ModalWizard} from '../ModalWizard';
+
+describe('ModalWizard', () => {
+    it('navigate slides using footer buttons', () => {
+        const modelSteps = [
+            {
+                docLink: 'https://google.com',
+                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
+                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                element: <div> Slide 1</div>,
+            },
+            {
+                docLink: 'https://google.com',
+                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
+                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                element: <div> Slide 2</div>,
+            },
+            {
+                docLink: 'https://google.com',
+                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
+                validateStep: (currentStep, numberOfSteps) => ({isValid: false}),
+                element: <div> Slide 3</div>,
+            },
+            {
+                docLink: 'https://google.com',
+                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
+                validateStep: (currentStep, numberOfSteps) => ({isValid: false}),
+                element: <div> Unreachable slide</div>,
+            },
+        ];
+
+        const isDirty = () => false;
+
+        render(
+            <ModalWizard
+                closeButtonLabel="closebuttonlabel"
+                isDirty={isDirty}
+                handleDirtyState={() => confirm('Are you sure you want to close?')}
+            >
+                {modelSteps.map((model_item) => (
+                    <ModalWizard.Step
+                        docLink={model_item.docLink}
+                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        validateStep={model_item.validateStep}
+                    >
+                        {model_item.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: /closebuttonlabel/i,
+            })
+        ).toBeInTheDocument();
+
+        let nextButton = screen.getByRole('button', {
+            name: /next/i,
+        });
+        expect(nextButton).toBeInTheDocument();
+
+        userEvent.click(nextButton);
+
+        expect(
+            screen.getByRole('heading', {
+                name: /current step is: 2/i,
+            })
+        ).toBeInTheDocument();
+
+        expect(
+            screen.getByRole('button', {
+                name: /closebuttonlabel/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();
+
+        userEvent.click(nextButton);
+
+        expect(
+            screen.getByRole('heading', {
+                name: /current step is: 3/i,
+            })
+        ).toBeInTheDocument();
+
+        expect(
+            screen.getByRole('button', {
+                name: /closebuttonlabel/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();
+
+        userEvent.click(
+            screen.getByRole('button', {
+                name: /previous/i,
+            })
+        );
+
+        expect(
+            screen.getByRole('heading', {
+                name: /current step is: 2/i,
+            })
+        ).toBeInTheDocument();
+
+        expect(
+            screen.getByRole('button', {
+                name: /closebuttonlabel/i,
+            })
+        ).toBeInTheDocument();
+
+        expect(screen.getByText(/slide 2/i)).toBeInTheDocument();
+
+        expect(
+            screen.getByRole('button', {
+                name: /previous/i,
+            })
+        ).toBeInTheDocument();
+    });
+
+    it('modal wizard onClose', () => {
+        const modelSteps = [
+            {
+                docLink: 'https://google.com',
+                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
+                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                element: <div> Slide 1</div>,
+            },
+        ];
+
+        const isDirty = () => false;
+        const onClose = jest.fn();
+
+        render(
+            <ModalWizard isDirty={isDirty} onClose={onClose} closeButtonLabel="closebuttonlabel">
+                {modelSteps.map((model_item) => (
+                    <ModalWizard.Step
+                        docLink={model_item.docLink}
+                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        validateStep={model_item.validateStep}
+                    >
+                        {model_item.element}
+                    </ModalWizard.Step>
+                ))}
+            </ModalWizard>
+        );
+
+        const closeButton = screen.getByRole('button', {
+            name: /closebuttonlabel/i,
+        });
+        userEvent.click(closeButton);
+
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('modal wizard onCancel', () => {
+        const modelSteps = [
+            {
+                docLink: 'https://google.com',
+                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
+                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                element: <div> Slide 1</div>,
+            },
+        ];
+
+        const isDirty = () => false;
+        const onClose = jest.fn();
+
+        render(
+            <ModalWizard isDirty={isDirty} onClose={onClose}>
+                {modelSteps.map((model_item) => (
+                    <ModalWizard.Step
+                        docLink={model_item.docLink}
+                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        validateStep={model_item.validateStep}
+                    >
+                        {model_item.element}
+                    </ModalWizard.Step>
+                ))}
+            </ModalWizard>
+        );
+
+        const cancelButton = screen.getByRole('button', {
+            name: /cancel/i,
+        });
+        userEvent.click(cancelButton);
+
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('modal wizard onFinish', () => {
+        const modelSteps = [
+            {
+                docLink: 'https://google.com',
+                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
+                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                element: <div> Slide 1</div>,
+            },
+        ];
+
+        const isDirty = () => false;
+        const onClose = jest.fn();
+        const onFinish = jest.fn();
+
+        render(
+            <ModalWizard isDirty={isDirty} onClose={onClose} onFinish={onFinish}>
+                {modelSteps.map((model_item) => (
+                    <ModalWizard.Step
+                        docLink={model_item.docLink}
+                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        validateStep={model_item.validateStep}
+                    >
+                        {model_item.element}
+                    </ModalWizard.Step>
+                ))}
+            </ModalWizard>
+        );
+
+        const finishButton = screen.getByRole('button', {
+            name: /finish/i,
+        });
+
+        userEvent.click(finishButton);
+        expect(onFinish).toHaveBeenCalledTimes(1);
+    });
+
+    it('handle dirty state if user confirms close', () => {
+        const modelSteps = [
+            {
+                docLink: 'https://google.com',
+                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
+                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                element: <div> Slide 1</div>,
+            },
+        ];
+
+        const isDirty = () => true;
+        const onClose = jest.fn();
+        const handleDirtyState = jest.fn();
+
+        render(
+            <ModalWizard
+                isDirty={isDirty}
+                onClose={onClose}
+                handleDirtyState={handleDirtyState}
+                closeButtonLabel="closebuttonlabel"
+            >
+                {modelSteps.map((model_item) => (
+                    <ModalWizard.Step
+                        docLink={model_item.docLink}
+                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        validateStep={model_item.validateStep}
+                    >
+                        {model_item.element}
+                    </ModalWizard.Step>
+                ))}
+            </ModalWizard>
+        );
+        const closeButton = screen.getByRole('button', {
+            name: /closebuttonlabel/i,
+        });
+
+        handleDirtyState.mockReturnValueOnce(true);
+        userEvent.click(closeButton);
+
+        expect(handleDirtyState).toHaveBeenCalledTimes(1);
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('handle dirty state if user confirms cancel', () => {
+        const modelSteps = [
+            {
+                docLink: 'https://google.com',
+                title: (currentStep, numberOfSteps) => 'Current Step is: ' + currentStep,
+                validateStep: (currentStep, numberOfSteps) => ({isValid: true}),
+                element: <div> Slide 1</div>,
+            },
+        ];
+
+        const isDirty = () => true;
+        const onClose = jest.fn();
+        const handleDirtyState = jest.fn();
+
+        render(
+            <ModalWizard
+                isDirty={isDirty}
+                onClose={onClose}
+                handleDirtyState={handleDirtyState}
+                closeButtonLabel="closebuttonlabel"
+            >
+                {modelSteps.map((model_item) => (
+                    <ModalWizard.Step
+                        docLink={model_item.docLink}
+                        title={(currentStep, numberOfSteps) => 'Current Step is: ' + currentStep}
+                        validateStep={model_item.validateStep}
+                    >
+                        {model_item.element}
+                    </ModalWizard.Step>
+                ))}
+            </ModalWizard>
+        );
+        const closeButton = screen.getByRole('button', {
+            name: /closebuttonlabel/i,
+        });
+
+        handleDirtyState.mockReturnValueOnce(false);
+        userEvent.click(closeButton);
+        expect(handleDirtyState).toHaveBeenCalledTimes(1);
+        expect(onClose).toHaveBeenCalledTimes(0);
+    });
+});

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

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

package/src/components/prompt/Prompt.tsx

@@ -0,0 +1,66 @@
+import {createStyles, Modal, ModalProps} from '@mantine/core';
+import {Children, ReactElement, ReactNode} from 'react';
+import {PromptFooter} from './PromptFooter';
+
+const useStyles = createStyles((theme) => {
+    const white = '#fff';
+    return {
+        body: {
+            padding: 0,
+        },
+        modalType: {overflow: 'hidden', width: 550},
+        innerBody: {
+            padding: `${theme.spacing.md}px ${theme.spacing.xl}px ${theme.spacing.lg}px`,
+        },
+        header: {
+            padding: `${theme.spacing.md}px ${theme.spacing.xl}px`,
+            width: '100%',
+            borderBottom: `1px solid ${theme.colors.gray[3]}`,
+            fontSize: theme.headings.sizes.h4.fontSize,
+            lineHeight: theme.headings.sizes.h4.fontSize,
+        },
+        default: {},
+        success: {backgroundColor: theme.colors.lime[6], color: white},
+        warning: {backgroundColor: theme.colors.yellow[5], color: white},
+        critical: {
+            backgroundColor: theme.colors.red[6],
+            color: white,
+        },
+        info: {backgroundColor: theme.colors.navy[5], color: white},
+        whiteClose: {color: white, '&:hover': {backgroundColor: 'transparent'}},
+    };
+});
+
+export interface PromptProps extends ModalProps {
+    variant: 'default' | 'success' | 'warning' | 'critical' | 'info';
+    children: ReactNode;
+}
+interface PromptType {
+    (props: PromptProps): ReactElement;
+    Footer: typeof PromptFooter;
+}
+
+export const Prompt: PromptType = ({children, variant, size, ...otherProps}) => {
+    const {classes, cx} = useStyles();
+    const defaultVariant = variant === 'default';
+    const convertedChildren = Children.toArray(children) as ReactElement[];
+
+    const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);
+    const footer = convertedChildren.find((child) => child.type === PromptFooter);
+
+    const classNames = {
+        header: cx(classes.header, classes[variant]),
+        close: !defaultVariant && classes.whiteClose,
+        body: classes.body,
+        modal: !defaultVariant && classes.modalType,
+    };
+
+    return (
+        <Modal padding={0} classNames={classNames} size={defaultVariant ? size : 'sm'} {...otherProps}>
+            <div className={classes.innerBody}>{otherChildren}</div>
+            {footer}
+        </Modal>
+    );
+};
+
+Prompt.Footer = PromptFooter;

package/src/components/prompt/PromptFooter.tsx

@@ -0,0 +1,8 @@
+import {FunctionComponent, PropsWithChildren} from 'react';
+import {StickyFooter, StickyFooterProps} from '../sticky-footer';
+
+export interface PromptFooterProps extends StickyFooterProps {}
+
+export const PromptFooter: FunctionComponent<PropsWithChildren<PromptFooterProps>> = ({children, ...otherProps}) => (
+    <StickyFooter {...otherProps}>{children}</StickyFooter>
+);