@coveord/plasma-mantine 56.3.3 → 56.4.0

package/src/components/Burger/Burger.ts

@@ -0,0 +1 @@
+export {Burger, type BurgerFactory, type BurgerProps} from '@mantine/core';

package/src/components/Card/Card.ts

@@ -0,0 +1 @@
+export {Card, type CardFactory, type CardProps} from '@mantine/core';

package/src/components/Center/Center.ts

@@ -0,0 +1 @@
+export {Center, type CenterFactory, type CenterProps} from '@mantine/core';

package/src/components/CheckIcon/CheckIcon.ts

@@ -0,0 +1 @@
+export {CheckIcon, type CheckIconProps} from '@mantine/core';

package/src/components/Checkbox/Checkbox.ts

@@ -0,0 +1 @@
+export {Checkbox, type CheckboxFactory, type CheckboxProps} from '@mantine/core';

package/src/components/CloseButton/CloseButton.ts

@@ -0,0 +1 @@
+export {CloseButton, type CloseButtonFactory, type CloseButtonProps} from '@mantine/core';

package/src/components/Code/Code.ts

@@ -0,0 +1 @@
+export {Code, type CodeFactory, type CodeProps} from '@mantine/core';

package/src/components/CodeEditor/CodeEditor.tsx

@@ -0,0 +1,280 @@
+import {
+    Box,
+    Center,
+    Group,
+    Input,
+    InputWrapperProps,
+    Loader,
+    Space,
+    Stack,
+    StackProps,
+    px,
+    useMantineColorScheme,
+    useMantineTheme,
+    useProps,
+} from '@mantine/core';
+import {useUncontrolled} from '@mantine/hooks';
+import Editor, {Monaco, loader} from '@monaco-editor/react';
+import {MarkerSeverity, editor as monacoEditor} from 'monaco-editor';
+import {FunctionComponent, useEffect, useRef, useState} from 'react';
+
+import cx from 'clsx';
+import {useParentHeight} from '../../hooks/useParentHeight.js';
+import {CopyToClipboard} from '../CopyToClipboard/CopyToClipboard.js';
+import CodeEditorClasses from './CodeEditor.module.css';
+import {XML} from './languages/xml.js';
+import {Search} from './search/Search.js';
+interface CodeEditorProps
+    extends Omit<
+            InputWrapperProps,
+            'inputContainer' | 'inputWrapperOrder' | 'classNames' | 'styles' | 'vars' | 'onChange'
+        >,
+        Omit<StackProps, 'onChange' | 'attributes'> {
+    /**
+     * The language syntax of the editor
+     *
+     * @default 'plaintext'
+     */
+    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml' | (string & unknown);
+    /** 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 search icon is clicked  */
+    onSearch?(): void;
+    /** Called whenever the copy icon is clicked */
+    onCopy?(): void;
+    /** Called whenever the code editor gets the focus */
+    onFocus?(): void;
+    /** Ref object that provides access to the editor's functionality */
+    editorHandle?: React.MutableRefObject<monacoEditor.IStandaloneCodeEditor | null>;
+    /**
+     * 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';
+    /**
+     * Options to pass to the monaco editor.
+     * Currently only supporting [`tabSize`](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html#tabSize).
+     *
+     */
+    options?: Pick<monacoEditor.IStandaloneEditorConstructionOptions, 'tabSize'>;
+}
+
+const defaultProps: Partial<CodeEditorProps> = {
+    language: 'plaintext',
+    monacoLoader: 'local',
+    defaultValue: '',
+    minHeight: 300,
+};
+
+export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
+    const {
+        language,
+        defaultValue,
+        onChange,
+        onCopy,
+        onSearch,
+        onFocus,
+        value,
+        label,
+        required,
+        labelProps,
+        error,
+        errorProps,
+        description,
+        descriptionProps,
+        minHeight,
+        maxHeight,
+        disabled,
+        monacoLoader,
+        options: {tabSize} = {tabSize: 2},
+        editorHandle,
+        ...others
+    } = useProps('CodeEditor', defaultProps, props);
+    const [loaded, setLoaded] = useState(false);
+    const [_value, handleChange] = useUncontrolled<string>({
+        value,
+        defaultValue,
+        onChange,
+        finalValue: '',
+    });
+    const [parentHeight, ref] = useParentHeight();
+    const editorRef = useRef(null);
+
+    const loadLocalMonaco = async () => {
+        const monacoInstance = await import('monaco-editor');
+        loader.config({monaco: monacoInstance});
+        setLoaded(true);
+    };
+
+    const registerLanguages = (monaco: Monaco) => {
+        if (monaco && language === 'xml') {
+            XML.register(monaco);
+        }
+    };
+
+    const registerThemes = (monaco: Monaco) => {
+        monaco.editor.defineTheme('light', {
+            base: 'vs',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editor.background': theme.colors.gray[0],
+            },
+        });
+    };
+
+    const handleSearch = () => {
+        if (editorRef.current) {
+            editorRef.current.focus();
+            editorRef.current.trigger('editor', 'actions.find', '');
+            onSearch?.();
+        }
+    };
+
+    const [hasMonacoError, setHasMonacoError] = useState(false);
+    const hasMonacoErrorRef = useRef(false);
+
+    hasMonacoErrorRef.current = hasMonacoError;
+
+    const hasError = !!error || hasMonacoError;
+    const theme = useMantineTheme();
+    const {colorScheme} = useMantineColorScheme();
+
+    useEffect(() => {
+        if (monacoLoader === 'local') {
+            loadLocalMonaco();
+        } else {
+            setLoaded(true);
+        }
+    }, []);
+
+    const handleValidate = (markers: monacoEditor.IMarker[]) => {
+        setHasMonacoError(markers.some((marker) => marker.severity === MarkerSeverity.Error));
+    };
+
+    const _label = label ? (
+        <Input.Label required={required} {...labelProps}>
+            {label}
+        </Input.Label>
+    ) : null;
+
+    const _description = description ? (
+        <Input.Description {...descriptionProps}>{description}</Input.Description>
+    ) : null;
+
+    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : <Space h="sm" />;
+
+    const _header =
+        _label || _description ? (
+            <Stack gap="xxs">
+                {_label}
+                {_description}
+            </Stack>
+        ) : null;
+
+    const _buttons = (
+        <Group justify="right" gap="xs">
+            <Search handleSearch={handleSearch} />
+            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />
+        </Group>
+    );
+    let editorTheme = colorScheme === 'light' ? 'light' : 'vs-dark';
+    if (disabled) {
+        editorTheme += '-disabled';
+    }
+
+    const _editor = loaded ? (
+        <Box
+            p="md"
+            pl="xs"
+            className={cx(
+                CodeEditorClasses.root,
+                {[CodeEditorClasses.error]: hasError},
+                {[CodeEditorClasses.disabled]: disabled},
+            )}
+            data-testid="editor-wrapper"
+        >
+            <Editor
+                onValidate={handleValidate}
+                defaultLanguage={language}
+                theme={editorTheme}
+                options={{
+                    minimap: {enabled: false},
+                    wordWrap: 'on',
+                    scrollBeyondLastLine: false,
+                    formatOnPaste: true,
+                    fontSize: px(theme.fontSizes.xs) as number,
+                    readOnly: disabled,
+                    stickyScroll: {enabled: false},
+                    tabSize,
+                }}
+                value={_value}
+                onChange={handleChange}
+                beforeMount={(monaco) => {
+                    registerLanguages(monaco);
+                    registerThemes(monaco);
+                }}
+                onMount={(editor) => {
+                    editorRef.current = editor;
+                    if (editorHandle) {
+                        editorHandle.current = editor;
+                    }
+                    editor.onDidFocusEditorText(() => onFocus?.());
+                    editor.onDidBlurEditorText(async () => {
+                        // monaco editor has a timeout of 500ms populating errors, we want to ensure that checking errors happen after that
+                        setTimeout(async () => {
+                            if (!hasMonacoErrorRef.current) {
+                                await editor?.getAction('editor.action.formatDocument')?.run();
+                            }
+                        }, 550);
+                    });
+                }}
+            />
+        </Box>
+    ) : (
+        <Center className={CodeEditorClasses.editor}>
+            <Loader />
+        </Center>
+    );
+
+    return (
+        <Stack
+            justify="flex-start"
+            gap="sm"
+            h={Math.max(parentHeight, minHeight)}
+            mah={maxHeight}
+            ref={ref}
+            {...others}
+        >
+            <Group justify="space-between">
+                {_header}
+                {_buttons}
+            </Group>
+            {_editor}
+            {_error}
+        </Stack>
+    );
+};

package/src/components/CodeEditor/__tests__/CodeEditor.spec.tsx

@@ -0,0 +1,108 @@
+import {useForm} from '@mantine/form';
+import {loader} from '@monaco-editor/react';
+import {render, screen, userEvent, waitForElementToBeRemoved} from '@test-utils';
+import type {editor} from 'monaco-editor';
+import {useRef} from 'react';
+import {CodeEditor} from '../CodeEditor.js';
+import {XML} from '../languages/xml.js';
+
+vi.mock('monaco-editor');
+vi.mock('@monaco-editor/react');
+
+describe('CodeEditor', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('renders the monaco editor, a copy to clipboard button and a search button', async () => {
+        render(<CodeEditor label="label" description="description" />);
+
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
+
+        expect(screen.getByText(/label/)).toBeInTheDocument();
+        expect(screen.getByText(/description/)).toBeInTheDocument();
+        expect(await screen.findByTestId('monaco-editor')).toBeInTheDocument();
+        expect(await screen.findByRole('button', {name: /copy/i})).toBeInTheDocument();
+        expect(await screen.findByRole('button', {name: /search/i})).toBeInTheDocument();
+    });
+
+    it.skip('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'));
+
+        expect(screen.getByText(/invalid configuration/i)).toBeInTheDocument();
+        expect(screen.getByTestId('editor-wrapper')).toHaveStyle('border-color: #cd2113');
+    });
+
+    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();
+    });
+
+    it('loads the xml language in the monaco instance if the editor language is xml', async () => {
+        const xmlLanguageSpy = vi.spyOn(XML, 'register').mockImplementation(vi.fn());
+        render(<CodeEditor label="label" description="description" monacoLoader="cdn" language="xml" />);
+        expect(xmlLanguageSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('focus and triggers search on the Monaco editor when handleSearch is called', async () => {
+        const user = userEvent.setup();
+        render(<CodeEditor />);
+        expect(await screen.findByTestId('monaco-editor')).toBeInTheDocument();
+        await user.click(screen.getByRole('button', {name: /search/i}));
+        expect(screen.getByTestId('monaco-editor')).toHaveAttribute('focus');
+        expect(screen.getByTestId('monaco-editor')).toHaveAttribute('trigger');
+    });
+
+    it('calls the onCopy callback when clicking on the copy button', async () => {
+        const user = userEvent.setup();
+        const onCopySpy = vi.fn();
+        render(<CodeEditor onCopy={onCopySpy} />);
+        await user.click(screen.getByRole('button', {name: /copy/i}));
+
+        expect(onCopySpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls the onSearch callback when clicking on the search button', async () => {
+        const user = userEvent.setup();
+        const onSearchSpy = vi.fn();
+        render(<CodeEditor onSearch={onSearchSpy} />);
+        // Wait for editor to mount to ensure editorRef.current is defined so handleSearch invokes onSearch
+        await screen.findByTestId('monaco-editor');
+        await user.click(screen.getByRole('button', {name: /search/i}));
+        expect(onSearchSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it('defines editorHandle on mount', async () => {
+        let editorHandle: React.MutableRefObject<editor.IStandaloneCodeEditor> = null;
+        const EditorWrapper = () => {
+            editorHandle = useRef<editor.IStandaloneCodeEditor | null>(null);
+            return <CodeEditor editorHandle={editorHandle} />;
+        };
+
+        render(<EditorWrapper />);
+
+        await waitForElementToBeRemoved(screen.queryByRole('presentation'));
+
+        expect(editorHandle.current).not.toBeNull();
+    });
+});

package/src/components/CodeEditor/search/Search.tsx

@@ -0,0 +1,15 @@
+import {IconSearch} from '@coveord/plasma-react-icons';
+import {FunctionComponent} from 'react';
+import {ActionIcon} from '../../ActionIcon/ActionIcon.js';
+
+export interface SearchProps {
+    handleSearch: () => void;
+}
+
+const SearchButton: FunctionComponent<SearchProps> = ({handleSearch}) => (
+    <ActionIcon.Quaternary onClick={handleSearch}>
+        <IconSearch aria-label="Search" size={16} />
+    </ActionIcon.Quaternary>
+);
+
+export const Search: FunctionComponent<SearchProps> = ({...params}) => <SearchButton {...params} />;

package/src/components/Collapse/Collapse.ts

@@ -0,0 +1 @@
+export {Collapse, type CollapseProps} from '@mantine/core';