@coveord/plasma-mantine 47.0.1-next.2

package/src/components/code-editor/CodeEditor.tsx

@@ -0,0 +1,214 @@
+import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
+import {
+    ActionIcon,
+    Box,
+    Center,
+    CopyButton,
+    createStyles,
+    DefaultProps,
+    Group,
+    Input,
+    InputWrapperBaseProps,
+    Loader,
+    Selectors,
+    Stack,
+    Tooltip,
+    useComponentDefaultProps,
+} from '@mantine/core';
+import {useUncontrolled} from '@mantine/hooks';
+import Editor, {loader} from '@monaco-editor/react';
+import {FunctionComponent, useEffect, useState} from 'react';
+
+import {useParentHeight} from '../../hooks';
+
+const useStyles = createStyles((theme) => ({
+    root: {},
+    editor: {
+        border: `1px solid ${theme.colors.gray[2]}`,
+        borderRadius: theme.defaultRadius,
+        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,
+        height: '100%',
+    },
+}));
+
+interface CodeEditorProps
+    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,
+        DefaultProps<Selectors<typeof useStyles>> {
+    /**
+     * The language syntax of the editor
+     *
+     * @default 'plaintext'
+     */
+    language?: 'plaintext' | 'json' | 'markdown' | 'python';
+    /** Default value for uncontrolled input */
+    defaultValue?: string;
+    /** Value for controlled input */
+    value?: string;
+    /** onChange value for controlled input */
+    onChange?(value: string): void;
+    /** Called whenever the code editor gets the focus */
+    onFocus?(): void;
+    /**
+     * The minimal height of the CodeEditor (label and description included)
+     *
+     * By default the CodeEditor is adjusted to fill its parent height.
+     * In the case where the parent height is too short, it will use this value as minimum.
+     *
+     * @default 300
+     */
+    minHeight?: number;
+    /**
+     * The maximal height of the CodeEditor (label and description included)
+     *
+     * By default the CodeEditor is adjusted to fill its parent height.
+     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.
+     */
+    maxHeight?: number;
+    disabled?: boolean;
+    /**
+     * Defines how the monaco editor files will be loaded.
+     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).
+     *
+     * @default 'local'
+     */
+    monacoLoader?: 'cdn' | 'local';
+}
+
+const defaultProps: Partial<CodeEditorProps> = {
+    language: 'plaintext',
+    monacoLoader: 'local',
+    defaultValue: '',
+    minHeight: 300,
+};
+
+export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
+    const {
+        language,
+        defaultValue,
+        onChange,
+        onFocus,
+        value,
+        label,
+        required,
+        labelProps,
+        error,
+        errorProps,
+        description,
+        descriptionProps,
+        minHeight,
+        maxHeight,
+        disabled,
+        monacoLoader,
+        ...others
+    } = useComponentDefaultProps('CodeEditor', defaultProps, props);
+    const [loaded, setLoaded] = useState(false);
+    const {classes, theme} = useStyles();
+    const [_value, handleChange] = useUncontrolled<string>({
+        value,
+        defaultValue,
+        onChange,
+        finalValue: '',
+    });
+    const [parentHeight, ref] = useParentHeight();
+
+    const loadLocalMonaco = async () => {
+        const monaco = await import('monaco-editor');
+        loader.config({monaco});
+        setLoaded(true);
+    };
+
+    useEffect(() => {
+        if (monacoLoader === 'local') {
+            loadLocalMonaco();
+        } else {
+            setLoaded(true);
+        }
+    }, []);
+
+    const _label = label ? (
+        <Input.Label required={required} {...labelProps}>
+            {label}
+        </Input.Label>
+    ) : null;
+
+    const _description = description ? (
+        <Input.Description mt="xs" {...descriptionProps}>
+            {description}
+        </Input.Description>
+    ) : null;
+
+    const _error = error ? (
+        <Input.Error mt="xs" {...errorProps}>
+            {error}
+        </Input.Error>
+    ) : null;
+
+    const _header =
+        _label || _description ? (
+            <Box>
+                {_label}
+                {_description}
+            </Box>
+        ) : null;
+
+    const _copyButton = (
+        <Group position="right">
+            <CopyButton value={_value} timeout={2000}>
+                {({copied, copy}) => (
+                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
+                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>
+                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}
+                        </ActionIcon>
+                    </Tooltip>
+                )}
+            </CopyButton>
+        </Group>
+    );
+
+    const _editor = loaded ? (
+        <Box p="md" pl="xs" className={classes.editor}>
+            <Editor
+                defaultLanguage={language}
+                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}
+                options={{
+                    minimap: {enabled: false},
+                    wordWrap: 'on',
+                    wrappingStrategy: 'advanced',
+                    scrollBeyondLastLine: false,
+                    formatOnPaste: true,
+                    fontSize: theme.fontSizes.xs,
+                    readOnly: disabled,
+                    tabSize: 2,
+                }}
+                value={_value}
+                onChange={handleChange}
+                onMount={(editor) => {
+                    editor.onDidFocusEditorText(onFocus);
+                    editor.onDidBlurEditorText(async () => {
+                        await editor.getAction('editor.action.formatDocument').run();
+                    });
+                }}
+            />
+        </Box>
+    ) : (
+        <Center className={classes.editor}>
+            <Loader />
+        </Center>
+    );
+
+    return (
+        <Stack
+            justify="flex-start"
+            className={classes.root}
+            spacing={0}
+            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}
+            ref={ref}
+            {...others}
+        >
+            {_header}
+            {_copyButton}
+            {_editor}
+            {_error}
+        </Stack>
+    );
+};

package/src/components/code-editor/__mocks__/@monaco-editor/react.tsx

@@ -0,0 +1,10 @@
+import {type EditorProps} from '@monaco-editor/react';
+import {FunctionComponent} from 'react';
+
+const MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid="monaco-editor" />;
+
+export default MockedEditor;
+
+export const loader = {
+    config: jest.fn(),
+};

package/src/components/code-editor/__mocks__/monaco-editor.ts

@@ -0,0 +1,9 @@
+const editor = {
+    create: () => ({
+        dispose: (): void => null,
+    }),
+};
+
+export const monaco = {
+    editor,
+};

package/src/components/code-editor/__tests__/CodeEditor.spec.tsx

@@ -0,0 +1,56 @@
+import {useForm} from '@mantine/form';
+import {loader} from '@monaco-editor/react';
+import {render, screen, waitForElementToBeRemoved, within} from '@test-utils';
+
+import {CodeEditor} from '../CodeEditor';
+
+describe('CodeEditor', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders the monaco editor and a copy to clipboard button', async () => {
+        jest.mock('monaco-editor');
+        render(<CodeEditor label="label" description="description" />);
+
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
+
+        expect(screen.getByText(/label/)).toBeInTheDocument();
+        expect(screen.getByText(/description/)).toBeInTheDocument();
+        expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+        expect(await screen.findByRole('button', {name: /copy/i})).toBeInTheDocument();
+    });
+
+    it('shows validation errors underneath the code editor', async () => {
+        const Fixture = () => {
+            const form = useForm({
+                initialValues: {
+                    myJsonCode: '{}',
+                },
+                initialErrors: {
+                    myJsonCode: 'Invalid configuration',
+                },
+            });
+            return <CodeEditor {...form.getInputProps('myJsonCode')} />;
+        };
+        render(<Fixture />);
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
+
+        const errors = screen.getByRole('alert');
+
+        expect(within(errors).getByText(/invalid configuration/i)).toBeInTheDocument();
+    });
+
+    it('loads the monaco editor files from node_modules when monacoLoader prop is "local"', async () => {
+        render(<CodeEditor label="label" description="description" monacoLoader="local" />);
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
+        expect(loader.config).toHaveBeenCalledTimes(1);
+        expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+    });
+
+    it('loads the monaco editor files via CDN when monacoLoader prop is "cnd"', async () => {
+        render(<CodeEditor label="label" description="description" monacoLoader="cdn" />);
+        expect(loader.config).not.toHaveBeenCalled();
+        expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
+    });
+});

package/src/components/code-editor/index.ts

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

package/src/components/collection/Collection.example.tsx

@@ -0,0 +1,37 @@
+import {Checkbox, TextInput} from '@mantine/core';
+import {useForm} from '@mantine/form';
+
+import {Collection} from './Collection';
+
+export default () => {
+    const form = useForm({
+        initialValues: {
+            todoList: [
+                {name: 'wash the dishes', done: true},
+                {name: 'take out the trash', done: false},
+                {name: 'vacuum the floors', done: true},
+            ],
+        },
+    });
+
+    return (
+        <Collection<{name: string; done: boolean}>
+            draggable
+            addLabel="Add task"
+            newItem={{name: '', done: false}}
+            {...form.getInputProps('todoList')}
+        >
+            {(task, index) => (
+                <>
+                    <TextInput
+                        autoFocus
+                        placeholder="Do something ..."
+                        {...form.getInputProps(`todoList.${index}.name`)}
+                        styles={{flex: 1}}
+                    />
+                    <Checkbox {...form.getInputProps(`todoList.${index}.done`, {type: 'checkbox'})} />
+                </>
+            )}
+        </Collection>
+    );
+};

package/src/components/collection/Collection.tsx

@@ -0,0 +1,129 @@
+import {AddSize16Px} from '@coveord/plasma-react-icons';
+import {
+    Box,
+    Button,
+    DefaultProps,
+    Group,
+    MantineNumberSize,
+    Selectors,
+    Stack,
+    Tooltip,
+    useComponentDefaultProps,
+} from '@mantine/core';
+import {useId} from '@mantine/hooks';
+import {ReactNode} from 'react';
+import {DragDropContext, Droppable} from 'react-beautiful-dnd';
+
+import {useControlledList} from '../../hooks';
+import {CollectionItem} from './CollectionItem';
+import useStyles from './Colllection.styles';
+
+interface CollectionProps<T> extends DefaultProps<Selectors<typeof useStyles>> {
+    newItem: T;
+    children: (item: T, index: number) => ReactNode;
+    defaultValue?: T[];
+    value?: T[];
+    onFocus?: () => void;
+    onChange?: (value: T[]) => void;
+    draggable?: boolean;
+    disabled?: boolean;
+    allowAdd?: (values: T[]) => boolean;
+    addLabel?: string;
+    addDisabledTooltip?: string;
+    spacing?: MantineNumberSize;
+    required?: boolean;
+}
+
+const defaultProps: Partial<CollectionProps<unknown>> = {
+    draggable: false,
+    addLabel: 'Add item',
+    addDisabledTooltip: 'There is already an empty item',
+    disabled: false,
+    spacing: 'xs',
+    required: false,
+};
+
+export const Collection = <T,>(props: CollectionProps<T>) => {
+    const {
+        value,
+        defaultValue,
+        onChange,
+        disabled,
+        draggable,
+        children,
+        spacing,
+        required,
+        newItem,
+        addLabel,
+        addDisabledTooltip,
+        allowAdd,
+
+        // Style props
+        classNames,
+        className,
+        styles,
+        unstyled,
+
+        ...others
+    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);
+    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});
+    const collectionID = useId('dnd-droppable');
+
+    const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});
+    const hasOnlyOneItem = values.length === 1;
+    const items = values.map((item, index) => (
+        <CollectionItem
+            key={index}
+            disabled={disabled}
+            draggable={draggable}
+            index={index}
+            onRemove={() => remove(index)}
+            styles={styles}
+            removable={!(required && hasOnlyOneItem)}
+        >
+            {children(item, index)}
+        </CollectionItem>
+    ));
+
+    const addAllowed = allowAdd?.(values) ?? true;
+
+    const _addButton = disabled ? null : (
+        <Group>
+            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>
+                <Box>
+                    <Button
+                        variant="subtle"
+                        leftIcon={<AddSize16Px height={16} />}
+                        onClick={() => append(newItem)}
+                        disabled={!addAllowed}
+                    >
+                        {addLabel}
+                    </Button>
+                </Box>
+            </Tooltip>
+        </Group>
+    );
+
+    return (
+        <DragDropContext
+            onDragEnd={({destination, source}) => reorder({from: source.index, to: destination?.index || 0})}
+        >
+            <Droppable direction="vertical" droppableId={collectionID}>
+                {(provided) => (
+                    <Box
+                        {...provided.droppableProps}
+                        ref={provided.innerRef}
+                        className={cx(classes.root, className)}
+                        {...others}
+                    >
+                        <Stack spacing={spacing}>
+                            {items}
+                            {provided.placeholder}
+                            {_addButton}
+                        </Stack>
+                    </Box>
+                )}
+            </Droppable>
+        </DragDropContext>
+    );
+};

package/src/components/collection/CollectionItem.tsx

@@ -0,0 +1,92 @@
+import {DragAndDropSize16Px, RemoveSize16Px} from '@coveord/plasma-react-icons';
+import {ActionIcon, DefaultProps, Group, Selectors} from '@mantine/core';
+import {FunctionComponent, PropsWithChildren} from 'react';
+import {Draggable} from 'react-beautiful-dnd';
+
+import useStyles from './Colllection.styles';
+
+interface CollectionItemProps extends CollectionItemSharedProps {
+    draggable?: boolean;
+    disabled: boolean;
+}
+
+interface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useStyles>> {
+    index: number;
+    onRemove?: React.MouseEventHandler<HTMLButtonElement>;
+    removable?: boolean;
+}
+
+const RemoveButton: FunctionComponent<{
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+}> = ({onClick}) => (
+    <ActionIcon variant="subtle" onClick={onClick} color="action">
+        <RemoveSize16Px height={16} />
+    </ActionIcon>
+);
+
+const RemoveButtonPlaceholder = () => <div style={{width: 28}} />;
+
+const StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({
+    onRemove,
+    removable = true,
+    styles,
+    children,
+}) => {
+    const {classes, cx} = useStyles(null, {name: 'Collection', styles});
+    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;
+
+    return (
+        <Group className={cx(classes.item)}>
+            {children}
+            {removeButton}
+        </Group>
+    );
+};
+
+const DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {
+    const {classes, cx} = useStyles();
+    return <Group className={cx(classes.item)}>{children}</Group>;
+};
+
+const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({
+    index,
+    onRemove,
+    removable = true,
+    styles,
+    children,
+}) => {
+    const {classes, cx} = useStyles(null, {name: 'Collection', styles});
+    const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;
+
+    return (
+        <Draggable index={index} draggableId={index.toString()}>
+            {(provided, {isDragging}) => (
+                <Group
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    className={cx(classes.item, {[classes.itemDragging]: isDragging})}
+                >
+                    <div {...provided.dragHandleProps}>
+                        <DragAndDropSize16Px height={16} />
+                    </div>
+                    {children}
+                    {removeButton}
+                </Group>
+            )}
+        </Draggable>
+    );
+};
+
+export const CollectionItem: FunctionComponent<PropsWithChildren<CollectionItemProps>> = ({
+    draggable,
+    disabled,
+    ...otherProps
+}) => {
+    if (disabled) {
+        return <DisabledCollectionItem {...otherProps} />;
+    }
+    if (draggable) {
+        return <DraggableCollectionItem {...otherProps} />;
+    }
+    return <StaticCollectionItem {...otherProps} />;
+};

package/src/components/collection/Colllection.styles.ts

@@ -0,0 +1,14 @@
+import {createStyles} from '@mantine/core';
+
+export interface CollectionStylesParams {}
+
+export default createStyles((theme) => ({
+    root: {},
+    item: {
+        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,
+        alignItems: 'baseline',
+    },
+    itemDragging: {
+        boxShadow: theme.shadows.sm,
+    },
+}));