@coveord/plasma-mantine 56.3.3 → 56.4.0

package/src/components/action-icon/ActionIcon.tsx

@@ -1,95 +0,0 @@
-import {
-    ActionIcon as MantineActionIcon,
-    ActionIconCssVariables,
-    type ActionIconGroup,
-    type ActionIconProps as MantineActionIconProps,
-    ActionIconStylesNames,
-    ActionIconVariant,
-    Factory,
-    polymorphicFactory,
-} from '@mantine/core';
-import {MouseEventHandler} from 'react';
-import {useClickWithLoading} from '../../hooks/useClickWithLoading.js';
-import {ButtonWithDisabledTooltip, ButtonWithDisabledTooltipProps} from '../button/ButtonWithDisabledTooltip.js';
-
-export interface ActionIconProps extends MantineActionIconProps, ButtonWithDisabledTooltipProps {
-    /* Handler executed on click */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-}
-
-type ActionIconOverloadFactory = Factory<{
-    props: ActionIconProps;
-    defaultRef: HTMLButtonElement;
-    defaultComponent: 'button';
-    stylesNames: ActionIconStylesNames;
-    vars: ActionIconCssVariables;
-    variant: ActionIconVariant;
-    staticComponents: {
-        Group: typeof ActionIconGroup;
-        Primary: typeof ActionIconPrimary;
-        Secondary: typeof ActionIconSecondary;
-        Tertiary: typeof ActionIconTertiary;
-        Quaternary: typeof ActionIconQuaternary;
-        DestructivePrimary: typeof ActionIconDestructive;
-        DestructiveSecondary: typeof ActionIconDestructiveSecondary;
-        DestructiveTertiary: typeof ActionIconDestructiveTertiary;
-        DestructiveQuaternary: typeof ActionIconDestructiveQuaternary;
-    };
-}>;
-
-export const ActionIcon = polymorphicFactory<ActionIconOverloadFactory>(
-    ({disabledTooltip, disabled, disabledTooltipProps, loading, onClick, ...others}, ref) => {
-        const {isLoading, handleClick} = useClickWithLoading(onClick);
-        return (
-            <ButtonWithDisabledTooltip
-                disabled={disabled}
-                disabledTooltip={disabledTooltip}
-                disabledTooltipProps={disabledTooltipProps}
-                fullWidth={others.fullWidth}
-            >
-                <MantineActionIcon
-                    loaderProps={{type: 'oval'}}
-                    ref={ref}
-                    loading={isLoading || loading}
-                    onClick={handleClick}
-                    disabled={disabled}
-                    {...others}
-                />
-            </ButtonWithDisabledTooltip>
-        );
-    },
-);
-
-const ActionIconPrimary = ActionIcon.withProps({
-    variant: 'filled',
-});
-const ActionIconSecondary = ActionIcon.withProps({
-    variant: 'light',
-    color: 'var(--coveo-color-text-primary)',
-});
-const ActionIconTertiary = ActionIcon.withProps({
-    variant: 'default',
-    color: 'var(--coveo-color-text-primary)',
-});
-const ActionIconQuaternary = ActionIcon.withProps({
-    variant: 'subtle',
-    color: 'var(--coveo-color-text-primary)',
-});
-
-const ActionIconDestructive = ActionIcon.withProps({variant: 'filled', color: 'var(--mantine-color-error)'});
-const ActionIconDestructiveSecondary = ActionIcon.withProps({variant: 'light', color: 'var(--mantine-color-error)'});
-const ActionIconDestructiveTertiary = ActionIcon.withProps({
-    variant: 'default',
-    vars: () => ({root: {'--ai-color': 'var(--mantine-color-error)'}}),
-});
-const ActionIconDestructiveQuaternary = ActionIcon.withProps({variant: 'subtle', color: 'var(--mantine-color-error)'});
-
-ActionIcon.Group = MantineActionIcon.Group;
-ActionIcon.Primary = ActionIconPrimary;
-ActionIcon.Secondary = ActionIconSecondary;
-ActionIcon.Tertiary = ActionIconTertiary;
-ActionIcon.Quaternary = ActionIconQuaternary;
-ActionIcon.DestructivePrimary = ActionIconDestructive;
-ActionIcon.DestructiveSecondary = ActionIconDestructiveSecondary;
-ActionIcon.DestructiveTertiary = ActionIconDestructiveTertiary;
-ActionIcon.DestructiveQuaternary = ActionIconDestructiveQuaternary;

package/src/components/alert/Alert.tsx

@@ -1,73 +0,0 @@
-import {
-    AlertCssVariables,
-    AlertProps,
-    AlertStylesNames,
-    AlertVariant,
-    Factory,
-    Alert as MantineAlert,
-    polymorphicFactory,
-} from '@mantine/core';
-import {InfoToken} from '../info-token/InfoToken.js';
-
-type AlertOverloadFactory = Factory<{
-    props: AlertProps;
-    defaultRef: HTMLDivElement;
-    defaultComponent: 'div';
-    stylesNames: AlertStylesNames;
-    vars: AlertCssVariables;
-    variant: AlertVariant;
-    staticComponents: {
-        Information: typeof AlertInformation;
-        Advice: typeof AlertAdvice;
-        Warning: typeof AlertWarning;
-        Critical: typeof AlertCritical;
-    };
-}>;
-
-export const Alert = polymorphicFactory<AlertOverloadFactory>((props, ref) => <MantineAlert {...props} ref={ref} />);
-
-const AlertInformation = Alert.withProps({
-    color: 'gray',
-    icon: <InfoToken variant="information" />,
-    vars: () => ({
-        root: {
-            '--alert-color': 'var(--mantine-color-text)',
-            '--alert-bg': 'var(--mantine-color-gray-light)',
-        },
-    }),
-});
-
-const AlertAdvice = Alert.withProps({
-    icon: <InfoToken variant="advice" />,
-    vars: () => ({
-        root: {
-            '--alert-color': 'var(--mantine-primary-color-filled)',
-            '--alert-bg': 'var(--mantine-primary-color-light)',
-        },
-    }),
-});
-
-const AlertWarning = Alert.withProps({
-    color: 'warning',
-    icon: <InfoToken variant="warning" />,
-    vars: () => ({
-        root: {
-            '--alert-color': 'var(--mantine-color-warning-filled)',
-            '--alert-bg': 'var(--mantine-color-warning-light)',
-        },
-    }),
-});
-const AlertCritical = Alert.withProps({
-    icon: <InfoToken variant="error" />,
-    vars: () => ({
-        root: {
-            '--alert-color': 'var(--mantine-color-error)',
-            '--alert-bg': 'var(--mantine-color-red-light)',
-        },
-    }),
-});
-
-Alert.Information = AlertInformation;
-Alert.Advice = AlertAdvice;
-Alert.Warning = AlertWarning;
-Alert.Critical = AlertCritical;

package/src/components/browser-preview/BrowserPreview.tsx

@@ -1,54 +0,0 @@
-import {Flex, Group, Stack, StackProps, Text, Tooltip} from '@mantine/core';
-import cx from 'clsx';
-import {PropsWithChildren} from 'react';
-import {InfoToken} from '../info-token/InfoToken.js';
-import BrowserPreviewClasses from './BrowserPreview.module.css';
-
-export interface BrowserPreviewProps extends StackProps {
-    /**
-     * Text to display in a tooltip in the header.
-     *
-     */
-    headerTooltip?: string;
-    /**
-     * Custom title to be displayed at the center of the header.
-     */
-    title?: string;
-}
-
-export const BrowserPreview = ({
-    children,
-    headerTooltip,
-    title,
-    className,
-    ...others
-}: PropsWithChildren<BrowserPreviewProps>) => (
-    <Stack className={cx(BrowserPreviewClasses.root, className)} gap={0} maw={544} mih={0} {...others}>
-        <Group
-            className={BrowserPreviewClasses.header}
-            justify="space-between"
-            p="sm"
-            bg="var(--mantine-color-default-hover)"
-            wrap="nowrap"
-        >
-            <Group gap="xs" wrap="nowrap">
-                <Text c="dimmed" fz="md" lh="18px">
-                    Preview
-                </Text>
-                {!!headerTooltip && (
-                    <Tooltip label={headerTooltip} position="right" maw={400}>
-                        <InfoToken variant="information" className={BrowserPreviewClasses.infoIcon} />
-                    </Tooltip>
-                )}
-            </Group>
-            {title && (
-                <Text lineClamp={1} c="dimmed" fz="md" lh="18px">
-                    {title}
-                </Text>
-            )}
-        </Group>
-        <Flex className={BrowserPreviewClasses.content} p="lg" direction="column">
-            {children}
-        </Flex>
-    </Stack>
-);

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

@@ -1,280 +0,0 @@
-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/code-editor/__tests__/CodeEditor.spec.tsx

@@ -1,107 +0,0 @@
-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} />);
-        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/code-editor/search/Search.tsx

@@ -1,15 +0,0 @@
-import {IconSearch} from '@coveord/plasma-react-icons';
-import {FunctionComponent} from 'react';
-import {ActionIcon} from '../../action-icon/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} />;