@coveord/plasma-mantine 47.4.0 → 47.5.0

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

@@ -2,12 +2,14 @@ import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
 import {
     ActionIcon,
     Box,
+    Center,
     CopyButton,
     createStyles,
     DefaultProps,
     Group,
     Input,
     InputWrapperBaseProps,
+    Loader,
     Selectors,
     Stack,
     Tooltip,
@@ -15,13 +17,10 @@ import {
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
 import Editor, {loader} from '@monaco-editor/react';
-import * as monaco from 'monaco-editor';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, useEffect, useState} from 'react';
 
 import {useParentHeight} from '../../hooks';
 
-loader.config({monaco});
-
 const useStyles = createStyles((theme) => ({
     root: {},
     editor: {
@@ -66,10 +65,18 @@ interface CodeEditorProps
      */
     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,
 };
@@ -91,8 +98,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         minHeight,
         maxHeight,
         disabled,
+        monacoLoader,
         ...others
     } = useComponentDefaultProps('CodeEditor', defaultProps, props);
+    const [loaded, setLoaded] = useState(false);
     const {classes, theme} = useStyles();
     const [_value, handleChange] = useUncontrolled<string>({
         value,
@@ -102,6 +111,20 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     });
     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}
@@ -142,7 +165,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         </Group>
     );
 
-    const _editor = (
+    const _editor = loaded ? (
         <Box p="md" pl="xs" className={classes.editor}>
             <Editor
                 defaultLanguage={language}
@@ -167,6 +190,10 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                 }}
             />
         </Box>
+    ) : (
+        <Center className={classes.editor}>
+            <Loader />
+        </Center>
     );
 
     return (

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

@@ -1,22 +1,27 @@
 import {useForm} from '@mantine/form';
-import {render, screen, within} from '@test-utils';
+import {loader} from '@monaco-editor/react';
+import {render, screen, waitForElementToBeRemoved, within} from '@test-utils';
 
 import {CodeEditor} from '../CodeEditor';
 
-jest.mock('monaco-editor');
-jest.mock('@monaco-editor/react');
-
 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', () => {
+    it('shows validation errors underneath the code editor', async () => {
         const Fixture = () => {
             const form = useForm({
                 initialValues: {
@@ -29,9 +34,23 @@ describe('CodeEditor', () => {
             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/modal-wizard/index.ts

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

package/src/index.ts

@@ -2,7 +2,7 @@ import {Tuple} from '@mantine/core';
 
 import {PlasmaColors} from './theme/PlasmaColors';
 
-export {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+export {type ColumnDef, createColumnHelper} from '@tanstack/table-core';
 
 export * from '@mantine/core';
 export * from '@mantine/form';

package/tsconfig.json

@@ -4,8 +4,11 @@
         "outDir": "./dist",
         "declarationDir": "./dist/definitions",
         "rootDir": "src",
-        "tsBuildInfoFile": "./dist/.tsbuildinfo"
+        "tsBuildInfoFile": "./dist/.tsbuildinfo",
+        "baseUrl": ".",
+        "paths": {
+            "@test-utils": ["./src/__tests__/Utils.tsx"]
+        }
     },
-    "include": ["src"],
-    "exclude": ["*.spec.*"]
+    "include": ["src"]
 }