@coveord/plasma-mantine 47.0.1-next.2

package/src/components/date-range-picker/__tests__/DateRangePickerPopoverCalendar.spec.tsx

@@ -0,0 +1,101 @@
+import {DateRangePickerValue} from '@mantine/dates';
+import {useForm} from '@mantine/form';
+import {render, screen, userEvent} from '@test-utils';
+
+import {DateRangePickerPopoverCalendar} from '../DateRangePickerPopoverCalendar';
+
+// 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('DateRangePickerPopoverCalendar', () => {
+    it('does not render the preset searchbox when there is no presets', () => {
+        render(<DateRangePickerPopoverCalendar defaultValue={[null, null]} />);
+
+        expect(screen.queryByRole('searchbox')).not.toBeInTheDocument();
+    });
+
+    it('updates with the selected dates when choosing a preset', () => {
+        const Fixture = () => {
+            const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
+            return (
+                <>
+                    <DateRangePickerPopoverCalendar
+                        presets={{
+                            year2k: {label: 'select me', range: [new Date(1999, 11, 31), new Date(2000, 0, 1)]},
+                        }}
+                        {...form.getInputProps('dates')}
+                    />
+                    <code data-testid="json">{JSON.stringify(form.values.dates)}</code>
+                </>
+            );
+        };
+        render(<Fixture />);
+
+        userEvent.click(
+            screen.getByRole('searchbox', {
+                name: 'Date range',
+            })
+        );
+        userEvent.click(screen.getByRole('option', {name: 'select me'}));
+
+        expect(screen.getByTestId('json')).toHaveTextContent('["1999-12-31T00:00:00.000Z","2000-01-01T00:00:00.000Z"]');
+    });
+
+    it('calls onApply with the selected dates when clicking in the calendar', () => {
+        jest.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
+        const Fixture = () => {
+            const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
+            return (
+                <>
+                    <DateRangePickerPopoverCalendar {...form.getInputProps('dates')} />
+                    <code data-testid="json">{JSON.stringify(form.values.dates)}</code>
+                </>
+            );
+        };
+        render(<Fixture />);
+
+        userEvent.click(screen.getByRole('textbox', {name: 'Start'}));
+        // click once for the start, once for the end
+        userEvent.click(screen.getAllByRole('button', {name: '8'})[0]);
+        userEvent.click(screen.getAllByRole('button', {name: '14'})[0]);
+
+        // hides the calendar when the second date is clicked
+        expect(screen.queryByRole('button', {name: '8'})).not.toBeInTheDocument();
+
+        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T00:00:00.000Z"]');
+
+        jest.useRealTimers();
+    });
+
+    it('calls onApply with the selected dates when typing in the inputs', () => {
+        const Fixture = () => {
+            const form = useForm<{dates: DateRangePickerValue}>({initialValues: {dates: [null, null]}});
+            return (
+                <>
+                    <DateRangePickerPopoverCalendar {...form.getInputProps('dates')} />
+                    <code data-testid="json">{JSON.stringify(form.values.dates)}</code>
+                </>
+            );
+        };
+        render(<Fixture />);
+
+        const startInput = screen.getByRole('textbox', {
+            name: /start/i,
+        });
+        userEvent.clear(startInput);
+        userEvent.type(startInput, 'Jan 8, 2022');
+
+        const endInput = screen.getByRole('textbox', {
+            name: /end/i,
+        });
+        userEvent.clear(endInput);
+        userEvent.type(endInput, 'Jan 14, 2022');
+
+        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
+    });
+});

package/src/components/date-range-picker/__tests__/DateRangePickerPresetSelect.spec.tsx

@@ -0,0 +1,53 @@
+import {render, screen, userEvent} from '@test-utils';
+
+import {DateRangePickerPresetSelect} from '../DateRangePickerPresetSelect';
+
+describe('DateRangePickerPresetSelect', () => {
+    it('calls onChange when selecting a preset', () => {
+        const onChange = jest.fn();
+        render(
+            <DateRangePickerPresetSelect
+                value={[null, null]}
+                onChange={onChange}
+                presets={{
+                    year2k: {label: 'select me', range: [new Date(1999, 11, 31), new Date(2000, 0, 1)]},
+                }}
+            />
+        );
+
+        userEvent.click(
+            screen.getByRole('searchbox', {
+                name: 'Date range',
+            })
+        );
+        userEvent.click(screen.getByRole('option', {name: 'select me'}));
+
+        expect(onChange).toHaveBeenCalledWith([new Date(1999, 11, 31), new Date(2000, 0, 1)]);
+    });
+
+    it('autoselects the preset that match the value', () => {
+        const {rerender} = render(
+            <DateRangePickerPresetSelect
+                value={[new Date(), new Date()]}
+                presets={{
+                    year2k: {label: 'select me', range: [new Date(1999, 11, 31), new Date(2000, 0, 1)]},
+                }}
+            />
+        );
+
+        // by default no value
+        expect(screen.getByRole('searchbox', {name: 'Date range'})).toHaveValue('');
+
+        rerender(
+            <DateRangePickerPresetSelect
+                value={[new Date(1999, 11, 31), new Date(2000, 0, 1)]}
+                presets={{
+                    year2k: {label: 'select me', range: [new Date(1999, 11, 31), new Date(2000, 0, 1)]},
+                }}
+            />
+        );
+
+        // if a preset match the value, it selects it
+        expect(screen.getByRole('searchbox', {name: 'Date range'})).toHaveValue('select me');
+    });
+});

package/src/components/date-range-picker/__tests__/EditableDateRangePicker.spec.tsx

@@ -0,0 +1,47 @@
+import {DateRangePickerValue} from '@mantine/dates';
+import {render, screen, userEvent} from '@test-utils';
+import {useState} from 'react';
+
+import {EditableDateRangePicker} from '../EditableDateRangePicker';
+
+describe('EditableDateRangePicker', () => {
+    it('renders an input for the start and an input for the end', () => {
+        render(<EditableDateRangePicker value={[null, null]} />);
+
+        expect(screen.getByRole('textbox', {name: 'Start'})).toBeVisible();
+        expect(screen.getByRole('textbox', {name: 'End'})).toBeVisible();
+    });
+
+    it('renders the separator', () => {
+        render(<EditableDateRangePicker value={[null, null]} separator={<div>SEPARATOR</div>} />);
+
+        expect(screen.getByText('SEPARATOR')).toBeVisible();
+    });
+
+    it('updates when editing values', () => {
+        const Fixture = () => {
+            const [value, setValue] = useState<DateRangePickerValue>([null, null]);
+            return (
+                <>
+                    <EditableDateRangePicker value={value} onChange={setValue} />
+                    <code data-testid="json">{JSON.stringify(value)}</code>
+                </>
+            );
+        };
+        render(<Fixture />);
+
+        const startInput = screen.getByRole('textbox', {
+            name: /start/i,
+        });
+        userEvent.clear(startInput);
+        userEvent.type(startInput, 'Jan 8, 2022');
+
+        const endInput = screen.getByRole('textbox', {
+            name: /end/i,
+        });
+        userEvent.clear(endInput);
+        userEvent.type(endInput, 'Jan 14, 2022');
+
+        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
+    });
+});

package/src/components/date-range-picker/index.tsx

@@ -0,0 +1,2 @@
+export * from './DateRangePickerInlineCalendar';
+export * from './DateRangePickerPopoverCalendar';

package/src/components/header/Header.tsx

@@ -0,0 +1,43 @@
+import {QuestionSize24Px} from '@coveord/plasma-react-icons';
+import {Anchor, Breadcrumbs, DefaultProps, Divider, Group, Stack, Text, Title, Tooltip} from '@mantine/core';
+import {FunctionComponent, PropsWithChildren, ReactNode} from 'react';
+
+interface HeaderProps extends DefaultProps {
+    description?: ReactNode;
+    actions?: ReactNode;
+    borderBottom?: boolean;
+    docLink?: string;
+    docLinkTooltipLabel?: string;
+}
+
+export const Header: FunctionComponent<PropsWithChildren<HeaderProps>> = ({
+    description,
+    actions,
+    borderBottom,
+    docLink,
+    docLinkTooltipLabel,
+    children,
+    ...others
+}) => (
+    <>
+        <Group position="apart" py="md" px="xl" {...others}>
+            <Stack spacing="xs">
+                <Title order={4}>
+                    <Group spacing={0}>
+                        <Breadcrumbs>{children}</Breadcrumbs>
+                        {docLink ? (
+                            <Tooltip label={docLinkTooltipLabel} position="bottom">
+                                <Anchor href={docLink} target="_blank" ml="xs">
+                                    <QuestionSize24Px height={24} />
+                                </Anchor>
+                            </Tooltip>
+                        ) : null}
+                    </Group>
+                </Title>
+                <Text>{description}</Text>
+            </Stack>
+            <Group spacing="xs">{actions}</Group>
+        </Group>
+        {borderBottom ? <Divider size="xs" /> : null}
+    </>
+);

package/src/components/header/__tests__/Header.spec.tsx

@@ -0,0 +1,79 @@
+import {render, screen} from '@test-utils';
+
+import {Header} from '../Header';
+
+describe('Header', () => {
+    it('renders no breadcrumb separator if there is only one child', () => {
+        render(<Header>child 1</Header>);
+
+        const header = screen.getByRole('heading');
+        expect(header).toMatchInlineSnapshot(`
+            <h4
+              class="mantine-Text-root mantine-Title-root mantine-1kh8n4o"
+            >
+              <div
+                class="mantine-Group-root mantine-fila1z"
+              >
+                <div
+                  class="mantine-Breadcrumbs-root mantine-16ttirm"
+                >
+                  <div
+                    class="mantine-1iqrsug mantine-Breadcrumbs-breadcrumb"
+                  >
+                    child 1
+                  </div>
+                </div>
+              </div>
+            </h4>
+        `);
+    });
+
+    it('renders a arrow head icon between each children', async () => {
+        render(
+            <Header>
+                <span>A</span>
+                <span>B</span>
+                <span>C</span>
+            </Header>
+        );
+
+        const separators = await screen.findAllByRole('img', {name: /arrowHeadRight/i});
+        expect(separators).toHaveLength(2);
+    });
+
+    it('renders a doc link icon if a doc link url is provided', async () => {
+        render(<Header docLink="/some/path">title</Header>);
+
+        const docLink = await screen.findByRole('link', {name: /question/i});
+        expect(docLink).toHaveAttribute('href', '/some/path');
+    });
+
+    it('adds a separator underneath the header if borderBottom is true', () => {
+        render(<Header borderBottom>title</Header>);
+        expect(screen.getByRole('separator')).toBeInTheDocument();
+    });
+
+    it('renders provided description in the header', () => {
+        render(<Header description="description">title</Header>);
+
+        expect(screen.getByText('description')).toBeInTheDocument();
+    });
+
+    it('renders provided actions in the header', () => {
+        render(
+            <Header
+                actions={
+                    <>
+                        <span>action 1</span>
+                        <span>action 2</span>
+                    </>
+                }
+            >
+                title
+            </Header>
+        );
+
+        expect(screen.getByText('action 1')).toBeInTheDocument();
+        expect(screen.getByText('action 2')).toBeInTheDocument();
+    });
+});

package/src/components/header/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,10 @@
+export * from './blank-slate';
+export * from './code-editor';
+export * from './collection';
+export * from './date-range-picker';
+export * from './sticky-footer';
+export * from './header';
+export * from './inline-confirm';
+export * from './table';
+export * from './prompt';
+export * from './modal-wizard';

package/src/components/inline-confirm/InlineConfirm.tsx

@@ -0,0 +1,29 @@
+import {Children, FunctionComponent, PropsWithChildren, ReactElement, useState} from 'react';
+
+import {InlineConfirmButton} from './InlineConfirmButton';
+import {InlineConfirmContext} from './InlineConfirmContext';
+import {InlineConfirmPrompt} from './InlineConfirmPrompt';
+
+type InlineConfirmType = FunctionComponent<PropsWithChildren> & {
+    Prompt: typeof InlineConfirmPrompt;
+    Button: typeof InlineConfirmButton;
+};
+
+export const InlineConfirm: InlineConfirmType = ({children}) => {
+    const [confirmingId, setConfirmingId] = useState<string | null>(null);
+
+    const convertedChildren = Children.toArray(children) as ReactElement[];
+    const prompt = convertedChildren.find(
+        (child) => child.type === InlineConfirmPrompt && child.props.id === confirmingId
+    );
+    const clearConfirm = () => setConfirmingId(null);
+
+    return (
+        <InlineConfirmContext.Provider value={{confirmingId, setConfirmingId, clearConfirm}}>
+            {prompt ?? children}
+        </InlineConfirmContext.Provider>
+    );
+};
+
+InlineConfirm.Prompt = InlineConfirmPrompt;
+InlineConfirm.Button = InlineConfirmButton;

package/src/components/inline-confirm/InlineConfirmButton.tsx

@@ -0,0 +1,17 @@
+import {Button, ButtonProps} from '@mantine/core';
+import {HTMLAttributes, MouseEventHandler} from 'react';
+import {useInlineConfirm} from './useInlineConfirm';
+
+interface InlineConfirmButtonProps extends ButtonProps, Omit<HTMLAttributes<HTMLButtonElement>, 'color'> {
+    id: string;
+}
+
+export const InlineConfirmButton = (props: InlineConfirmButtonProps) => {
+    const {setConfirmingId} = useInlineConfirm();
+    const onClick: MouseEventHandler<HTMLButtonElement> = (e) => {
+        setConfirmingId(props.id);
+        props.onClick?.(e);
+    };
+
+    return <Button {...props} onClick={onClick} />;
+};

package/src/components/inline-confirm/InlineConfirmContext.ts

@@ -0,0 +1,9 @@
+import {createContext} from 'react';
+
+type InlineConfirmContextType = {
+    confirmingId: string;
+    setConfirmingId: (id: string) => void;
+    clearConfirm: () => void;
+};
+
+export const InlineConfirmContext = createContext<InlineConfirmContextType | null>(null);

package/src/components/inline-confirm/InlineConfirmPrompt.tsx

@@ -0,0 +1,48 @@
+import {Button, Group} from '@mantine/core';
+import {FunctionComponent, ReactNode, useEffect} from 'react';
+
+import {useInlineConfirm} from './useInlineConfirm';
+
+interface InlineConfirmPromptProps {
+    id: string;
+    label: ReactNode;
+    onConfirm: () => void;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+}
+
+export const InlineConfirmPrompt: FunctionComponent<InlineConfirmPromptProps> = ({
+    id,
+    label,
+    confirmLabel = 'Delete',
+    cancelLabel = 'Cancel',
+    onConfirm,
+}) => {
+    const {confirmingId, clearConfirm} = useInlineConfirm();
+
+    const onClickConfirm = () => {
+        onConfirm();
+        clearConfirm();
+    };
+
+    useEffect(() => {
+        if (confirmingId !== id) {
+            clearConfirm();
+        }
+    }, []);
+
+    if (confirmingId === id) {
+        return (
+            <Group spacing="xs">
+                {label}
+                <Button onClick={onClickConfirm} color="red">
+                    {confirmLabel}
+                </Button>
+                <Button onClick={clearConfirm} variant="outline">
+                    {cancelLabel}
+                </Button>
+            </Group>
+        );
+    }
+    return null;
+};

package/src/components/inline-confirm/__tests__/InlineConfirm.spec.tsx

@@ -0,0 +1,94 @@
+import {render, screen, userEvent} from '@test-utils';
+
+import {InlineConfirm} from '../InlineConfirm';
+
+describe('InlineConfirm', () => {
+    it('renders its children', () => {
+        render(<InlineConfirm>Hello World</InlineConfirm>);
+
+        expect(screen.getByText('Hello World')).toBeVisible();
+    });
+
+    it('calls the onClick prop when clicking on a button', () => {
+        const onClickSpy = jest.fn();
+        render(
+            <InlineConfirm>
+                <InlineConfirm.Button id="delete" onClick={onClickSpy}>
+                    Delete
+                </InlineConfirm.Button>
+            </InlineConfirm>
+        );
+
+        userEvent.click(screen.getByRole('button', {name: 'Delete'}));
+
+        expect(onClickSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('replace the children with a prompt when clicking on a button which requires confirmation', () => {
+        render(
+            <InlineConfirm>
+                <InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
+                <InlineConfirm.Prompt id="my-button-id" label="Are you sure?" onConfirm={jest.fn()} />
+            </InlineConfirm>
+        );
+        expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+        expect(screen.getByRole('button', {name: 'Remove'})).toBeVisible();
+
+        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+
+        expect(screen.getByText('Are you sure?')).toBeVisible();
+        expect(screen.queryByRole('button', {name: 'Remove'})).not.toBeInTheDocument();
+    });
+
+    it('hides the prompt when the user cancel and call onConfirm when the user confirms', () => {
+        const confirmSpy = jest.fn();
+        render(
+            <InlineConfirm>
+                <InlineConfirm.Button id="my-button-id">Remove</InlineConfirm.Button>
+                <InlineConfirm.Prompt
+                    id="my-button-id"
+                    label="Are you sure?"
+                    confirmLabel="I confirm"
+                    cancelLabel="I changed my mind"
+                    onConfirm={confirmSpy}
+                />
+            </InlineConfirm>
+        );
+
+        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        expect(screen.getByText('Are you sure?')).toBeVisible();
+
+        userEvent.click(screen.getByRole('button', {name: 'I changed my mind'}));
+        expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+        expect(confirmSpy).not.toHaveBeenCalled();
+
+        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        expect(screen.getByText('Are you sure?')).toBeVisible();
+
+        userEvent.click(screen.getByRole('button', {name: 'I confirm'}));
+        expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+        expect(confirmSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows the prompt related to the clicked button', () => {
+        render(
+            <InlineConfirm>
+                <InlineConfirm.Button id="remove">Remove</InlineConfirm.Button>
+                <InlineConfirm.Prompt id="remove" label="Delete X?" onConfirm={jest.fn()} />
+
+                <InlineConfirm.Button id="print">Print</InlineConfirm.Button>
+                <InlineConfirm.Prompt id="print" label="Print?" onConfirm={jest.fn()} />
+            </InlineConfirm>
+        );
+
+        userEvent.click(screen.getByRole('button', {name: 'Remove'}));
+        expect(screen.getByText('Delete X?')).toBeVisible();
+        expect(screen.queryByText('Print?')).not.toBeInTheDocument();
+
+        userEvent.click(screen.getByRole('button', {name: 'Cancel'}));
+
+        userEvent.click(screen.getByRole('button', {name: 'Print'}));
+        expect(screen.queryByText('Delete X?')).not.toBeInTheDocument();
+        expect(screen.getByText('Print?')).toBeVisible();
+    });
+});

package/src/components/inline-confirm/index.ts

@@ -0,0 +1,3 @@
+export * from './InlineConfirm';
+export * from './useInlineConfirm';
+export * from './InlineConfirmContext';

package/src/components/inline-confirm/useInlineConfirm.ts

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