@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.20.1-alpha.20",
-        "@lumx/icons": "^3.20.1-alpha.20",
+        "@lumx/core": "^3.20.1-alpha.21",
+        "@lumx/icons": "^3.20.1-alpha.21",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -16,6 +16,14 @@
     },
     "devDependencies": {
         "@babel/core": "^7.26.10",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-export-default-from": "^7.25.9",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+        "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+        "@babel/preset-env": "^7.26.9",
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.26.0",
         "@chromatic-com/storybook": "^4.1.1",
@@ -76,7 +84,6 @@
         "React"
     ],
     "license": "MIT",
-    "type": "module",
     "module": "index.js",
     "main": "index.js",
     "types": "index.d.ts",
@@ -96,5 +103,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.20"
+    "version": "3.20.1-alpha.21"
 }

package/src/components/alert-dialog/AlertDialog.stories.tsx

@@ -0,0 +1,127 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { RefObject, useRef } from 'react';
+import { Button, Link, Kind } from '@lumx/react';
+import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withChromaticForceScreenSize } from '../../stories/decorators/withChromaticForceScreenSize';
+import { AlertDialog } from './AlertDialog';
+import DialogStories from '../dialog/Dialog.stories';
+
+export default {
+    title: 'LumX components/alert-dialog/AlertDialog',
+    component: AlertDialog,
+    args: {
+        ...AlertDialog.defaultProps,
+        'confirmProps.label': 'Ok',
+    },
+    argTypes: {
+        size: DialogStories.argTypes.size,
+        kind: getSelectArgType(Kind),
+        'confirmProps.onClick': { action: true },
+    },
+    parameters: {
+        // Delay Chromatic snapshot to wait for dialog to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: DIALOG_TRANSITION_DURATION,
+        },
+    },
+    decorators: [
+        // Force minimum chromatic screen size to make sure the dialog appears in view.
+        withChromaticForceScreenSize(),
+        withNestedProps(),
+    ],
+    render(props: any) {
+        const buttonRef = useRef() as RefObject<HTMLButtonElement>;
+        const [isOpen, close, open] = useBooleanState(true);
+        return (
+            <>
+                <Button ref={buttonRef} onClick={open}>
+                    Open dialog
+                </Button>
+                <AlertDialog {...props} isOpen={isOpen} onClose={close} parentElement={buttonRef} />
+            </>
+        );
+    },
+};
+
+/**
+ * Alert dialog with default kind
+ */
+export const DefaultKind = {
+    args: {
+        title: 'Default (info)',
+        children: loremIpsum('tiny'),
+    },
+};
+
+/**
+ * Alert dialog as warning
+ */
+export const Warning = {
+    args: {
+        ...DefaultKind.args,
+        kind: Kind.warning,
+        title: 'Warning',
+    },
+};
+
+/**
+ * Alert dialog as success
+ */
+export const Success = {
+    args: {
+        ...DefaultKind.args,
+        kind: Kind.success,
+        title: 'Success',
+    },
+};
+
+/**
+ * Alert dialog as error
+ */
+export const Error = {
+    args: {
+        ...DefaultKind.args,
+        kind: Kind.error,
+        title: 'Error',
+    },
+};
+
+/**
+ * Alert dialog with cancel button
+ */
+export const WithCancel = {
+    argTypes: {
+        'cancelProps.onClick': { action: true },
+    },
+    args: {
+        ...DefaultKind.args,
+        title: 'With Cancel',
+        'cancelProps.label': 'Cancel',
+    },
+};
+
+/**
+ * Alert dialog with rich description
+ */
+export const RichDescription = {
+    argTypes: { children: { control: false } },
+    args: {
+        ...DefaultKind.args,
+        title: 'With Rich Description',
+        children: (
+            <>
+                Amet ut elit dolore irure mollit <strong>sunt culpa esse</strong>.<br />
+                Ea ut Lorem.
+                <br />
+                <Link href="https://example.com" target="_blank">
+                    Link
+                </Link>
+            </>
+        ),
+    },
+};

package/src/components/alert-dialog/AlertDialog.test.tsx

@@ -0,0 +1,34 @@
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+import { vi } from 'vitest';
+import { AlertDialog, AlertDialogProps } from './AlertDialog';
+
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+
+const CLASSNAME = AlertDialog.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: Partial<AlertDialogProps> = {}) => {
+    const props: AlertDialogProps = {
+        title: 'Alert',
+        isOpen: true,
+        description: 'Deserunt et sunt qui consequat sint sit.',
+        confirmProps: { onClick: vi.fn(), label: 'OK' },
+        ...propsOverride,
+    };
+    render(<AlertDialog {...props} />);
+    const alertDialog = queryByClassName(document.body, CLASSNAME);
+    return { alertDialog, props };
+};
+
+describe(`<${AlertDialog.displayName}>`, () => {
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'alertDialog',
+        forwardAttributes: 'alertDialog',
+    });
+});

package/src/components/alert-dialog/AlertDialog.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import {
+    DialogProps,
+    Dialog,
+    Button,
+    Emphasis,
+    ColorPalette,
+    Icon,
+    Size,
+    Kind,
+    Toolbar,
+    ButtonProps,
+} from '@lumx/react';
+import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useId } from '@lumx/react/hooks/useId';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+export interface AlertDialogProps extends Omit<DialogProps, 'header' | 'footer'> {
+    /** Message variant. */
+    kind?: Kind;
+    /** Dialog title. */
+    title?: string;
+    /** Props forwarded to the confirm button */
+    confirmProps: ButtonProps & {
+        onClick(): void;
+        label: string;
+    };
+    /**
+     * Props forwarded to the cancel button.
+     * Will not render a cancel button if undefined.
+     */
+    cancelProps?: ButtonProps & {
+        onClick(): void;
+        label: string;
+    };
+    /**
+     * Children
+     */
+    children?: React.ReactNode;
+}
+
+/**
+ * Associative map from message kind to color and icon.
+ */
+const CONFIG = {
+    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },
+    [Kind.info]: { color: ColorPalette.blue, icon: mdiInformation },
+    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },
+    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'AlertDialog';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<DialogProps> = {
+    size: Size.tiny,
+    kind: Kind.info,
+};
+
+/**
+ * AlertDialog component.
+ *
+ * An alert dialog is a modal dialog that interrupts the user's workflow to
+ * communicate an important message and acquire a response.
+ *
+ * It should not have a complex content.
+ * Children of this component should only be strings, paragraphs or links.
+ */
+export const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {
+    const {
+        id,
+        title,
+        className,
+        cancelProps,
+        confirmProps,
+        kind = DEFAULT_PROPS.kind,
+        size = DEFAULT_PROPS.size,
+        dialogProps,
+        children,
+        ...forwardedProps
+    } = props;
+
+    const cancelButtonRef = React.useRef(null);
+    const confirmationButtonRef = React.useRef(null);
+    const { color, icon } = CONFIG[kind as Kind] || {};
+
+    // Define a unique ID to target title and description for aria attributes.
+    const generatedId = useId();
+    const uniqueId = id || generatedId;
+    const titleId = `${uniqueId}-title`;
+    const descriptionId = `${uniqueId}-description`;
+
+    // If content is a string, set in a paragraph.
+    const DescriptionElement = typeof children === 'string' ? 'p' : 'div';
+
+    const { label: confirmLabel, onClick: confirmOnClick, ...forwardedConfirmProps } = confirmProps;
+    const { label: cancelLabel, onClick: cancelOnClick, ...forwardedCancelProps } = cancelProps || {};
+
+    return (
+        <Dialog
+            ref={ref}
+            focusElement={cancelProps ? cancelButtonRef : confirmationButtonRef}
+            size={size}
+            dialogProps={{
+                id: uniqueId,
+                role: 'alertdialog',
+                'aria-labelledby': titleId,
+                'aria-describedby': descriptionId,
+                ...dialogProps,
+            }}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    kind,
+                    prefix: CLASSNAME,
+                }),
+            )}
+            {...forwardedProps}
+        >
+            <header>
+                <Toolbar
+                    className="lumx-spacing-margin-horizontal"
+                    before={<Icon icon={icon} size={Size.s} color={color} />}
+                    label={
+                        <h2 id={titleId} className="lumx-typography-title">
+                            {title}
+                        </h2>
+                    }
+                />
+            </header>
+
+            {children && (
+                <DescriptionElement
+                    id={descriptionId}
+                    className="lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
+                >
+                    {children}
+                </DescriptionElement>
+            )}
+
+            <footer>
+                <Toolbar
+                    className="lumx-spacing-margin-horizontal"
+                    after={
+                        <>
+                            {cancelProps && (
+                                <Button
+                                    {...forwardedCancelProps}
+                                    ref={cancelButtonRef}
+                                    emphasis={Emphasis.medium}
+                                    onClick={cancelOnClick}
+                                >
+                                    {cancelLabel}
+                                </Button>
+                            )}
+                            <Button
+                                {...forwardedConfirmProps}
+                                ref={confirmationButtonRef}
+                                color={color}
+                                className="lumx-spacing-margin-left-regular"
+                                onClick={confirmOnClick}
+                            >
+                                {confirmLabel}
+                            </Button>
+                        </>
+                    }
+                />
+            </footer>
+        </Dialog>
+    );
+});
+
+AlertDialog.displayName = COMPONENT_NAME;
+AlertDialog.className = CLASSNAME;
+AlertDialog.defaultProps = DEFAULT_PROPS;

package/src/components/alert-dialog/index.ts

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

package/src/components/autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,75 @@
+import { useMemo, useRef, useState } from 'react';
+
+import { Autocomplete, List, ListItem, Size } from '@lumx/react';
+
+import { CITIES } from './__mockData__';
+
+export default { title: 'LumX components/autocomplete/Autocomplete' };
+
+const cityNames = CITIES.map((city) => city.text);
+
+export const Simple = (args: any) => {
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [value, setValue] = useState('');
+    const inputRef = useRef(null);
+
+    const filteredCities = useMemo(
+        () =>
+            cityNames.filter((city) => {
+                const noSpacesCity = city.replace(' ', '').toLowerCase();
+                return noSpacesCity.includes(value.replace(' ', '').toLowerCase());
+            }),
+        [value],
+    );
+
+    const close = () => setShowSuggestions(false);
+
+    const setSelectedCity = (city: string) => {
+        setValue(city);
+        setShowSuggestions(false);
+    };
+    const selectItem = (city: string) => () => setSelectedCity(city);
+
+    const onChange = (newValue: string) => {
+        setValue(newValue);
+        setShowSuggestions(newValue.length > 0);
+    };
+
+    const { activeItemIndex } = List.useKeyboardListNavigation(filteredCities, inputRef, setSelectedCity);
+
+    const onFocus = () => setShowSuggestions(value.length > 0);
+
+    const hasSuggestions = filteredCities.length > 0;
+
+    return (
+        <Autocomplete
+            isOpen={showSuggestions && hasSuggestions}
+            onClose={close}
+            value={value}
+            onChange={onChange}
+            onFocus={onFocus}
+            inputRef={inputRef}
+            {...args}
+        >
+            {hasSuggestions && (
+                <List isClickable>
+                    {filteredCities.map((city, index) => (
+                        <ListItem
+                            size={Size.tiny}
+                            key={city}
+                            isHighlighted={index === activeItemIndex}
+                            onItemSelected={selectItem(city)}
+                        >
+                            <div>{city}</div>
+                        </ListItem>
+                    ))}
+                </List>
+            )}
+        </Autocomplete>
+    );
+};
+
+export const WithClearButton = Simple.bind({}) as any;
+WithClearButton.args = {
+    clearButtonProps: { label: 'Clear' },
+};

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -0,0 +1,99 @@
+import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { CITIES as suggestions } from './__mockData__';
+import { Autocomplete, AutocompleteProps } from './Autocomplete';
+
+const CLASSNAME = Autocomplete.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (props: Partial<AutocompleteProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    render(
+        <Autocomplete {...(props as any)}>
+            <List>
+                {suggestions.map((suggestion) => (
+                    <ListItem size={Size.tiny} key={suggestion.id}>
+                        <div>{suggestion.text}</div>
+                    </ListItem>
+                ))}
+            </List>
+        </Autocomplete>,
+        { wrapper },
+    );
+    const autocomplete = getByClassName(document.body, CLASSNAME);
+    const textField = getByClassName(autocomplete, TextField.className as string);
+    const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
+    const inputNative = getByTagName(autocomplete, 'input');
+    return { props, textField, getDropdown, autocomplete, inputNative };
+};
+
+describe(`<${Autocomplete.displayName}>`, () => {
+    describe('Props', () => {
+        it('should render default', () => {
+            const { autocomplete, textField, getDropdown } = setup();
+
+            expect(autocomplete.className).toMatchInlineSnapshot('"lumx-autocomplete"');
+            expect(textField).toBeInTheDocument();
+            expect(getDropdown()).not.toBeInTheDocument();
+        });
+
+        it('should render open', () => {
+            const { getDropdown } = setup({ isOpen: true });
+            expect(getDropdown()).toBeInTheDocument();
+        });
+    });
+
+    describe('Events', () => {
+        it('should trigger the onChange callback when there is a change on the Text Field', async () => {
+            const name = 'autocomplete-name';
+            const onChange = vi.fn();
+            const { inputNative } = setup({
+                name,
+                onChange,
+            });
+
+            await userEvent.tab();
+            expect(inputNative).toHaveFocus();
+            await userEvent.keyboard('a');
+
+            // (text, name, event)
+            expect(onChange).toHaveBeenCalledWith('a', name, expect.any(Object));
+        });
+
+        it('should trigger the onFocus/onBlur callback when the text field is focused and blurred', async () => {
+            const onFocus = vi.fn();
+            const onBlur = vi.fn();
+            const { inputNative } = setup({
+                onFocus,
+                onBlur,
+            });
+
+            await userEvent.tab();
+            expect(inputNative).toHaveFocus();
+            expect(onFocus).toHaveBeenCalled();
+
+            await userEvent.tab();
+            expect(inputNative).not.toHaveFocus();
+            expect(onBlur).toHaveBeenCalled();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'autocomplete',
+        forwardAttributes: 'autocomplete',
+        forwardRef: 'autocomplete',
+        applyTheme: {
+            affects: [{ element: 'textField' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});