@lumx/react 3.0.7 → 3.1.0

package/dist/package.json

@@ -0,0 +1,117 @@
+{
+    "author": {
+        "name": "LumApps"
+    },
+    "bugs": {
+        "url": "https://github.com/lumapps/design-system/issues"
+    },
+    "dependencies": {
+        "@juggle/resize-observer": "^3.2.0",
+        "@lumx/core": "^3.1.0",
+        "@lumx/icons": "^3.1.0",
+        "@popperjs/core": "^2.5.4",
+        "body-scroll-lock": "^3.1.5",
+        "classnames": "^2.2.6",
+        "react-is": "^16.13.0",
+        "react-popper": "^2.2.4",
+        "uid": "^2.0.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.2",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-export-default-from": "^7.18.10",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-private-methods": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.18.6",
+        "@rollup/plugin-commonjs": "^15.0.0",
+        "@rollup/plugin-node-resolve": "9.0.0",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/react": "^12.1.2",
+        "@testing-library/user-event": "^14.4.3",
+        "@types/body-scroll-lock": "^2.6.1",
+        "@types/classnames": "^2.2.9",
+        "@types/enzyme": "^3.10.12",
+        "@types/jest": "^29.2.1",
+        "@types/lodash": "^4.14.149",
+        "@types/react": "^16.9.11",
+        "@types/react-dom": "^16.9.4",
+        "@types/react-is": "^16.7.1",
+        "autoprefixer": "^9.7.4",
+        "babel-jest": "29.1.2",
+        "babel-loader": "^8.0.6",
+        "chromatic": "^6.0.6",
+        "core-js": "^3.6.4",
+        "enzyme": "^3.11.0",
+        "enzyme-adapter-react-16": "^1.15.4",
+        "enzyme-to-json": "^3.5.0",
+        "focus-visible": "^5.0.2",
+        "glob": "^7.1.6",
+        "install-peers-cli": "^2.2.0",
+        "is-ci": "^2.0.0",
+        "jest": "29.1.2",
+        "jest-environment-jsdom": "29.1.2",
+        "jest-enzyme": "^7.1.2",
+        "react-dom": "16.13.0",
+        "rollup": "2.26.10",
+        "rollup-plugin-analyzer": "^3.3.0",
+        "rollup-plugin-babel": "^4.4.0",
+        "rollup-plugin-cleaner": "^1.0.0",
+        "rollup-plugin-copy": "^3.3.0",
+        "rollup-plugin-dts": "^4.2.2",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-ts-paths-resolve": "^1.3.0",
+        "rollup-plugin-typescript-paths": "^1.2.2",
+        "test-data-bot": "^0.8.0",
+        "tsconfig-paths-webpack-plugin": "^3.3.0",
+        "typescript": "^4.1.2",
+        "yargs": "^15.4.1",
+        "yarn": "^1.19.1"
+    },
+    "peerDependencies": {
+        "lodash": "4.17.21",
+        "moment": "^2.24.0",
+        "moment-range": "^4.0.2",
+        "react": "^16.13.0",
+        "react-dom": "^16.13.0"
+    },
+    "description": "The official LumApps Design System (LumX) for React applications",
+    "engines": {
+        "node": ">= 12.0.0",
+        "npm": ">= 4.0.0",
+        "yarn": ">= 1.3.0"
+    },
+    "homepage": "https://github.com/lumapps/design-system",
+    "keywords": [
+        "Design System",
+        "LumApps",
+        "LumX",
+        "React"
+    ],
+    "license": "MIT",
+    "module": "index.js",
+    "main": "index.js",
+    "types": "index.d.ts",
+    "name": "@lumx/react",
+    "publishConfig": {
+        "directory": "dist"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/lumapps/design-system.git"
+    },
+    "scripts": {
+        "build": "rollup -c",
+        "prepare": "install-peers || exit 0",
+        "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
+        "storybook": "yarn start:storybook",
+        "start:storybook": "cd storybook && ./start",
+        "build:storybook": "cd storybook && ./build"
+    },
+    "sideEffects": false,
+    "version": "3.1.0"
+}

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

@@ -0,0 +1,196 @@
+import React, { RefObject, useRef, useState } from 'react';
+import { Button, Theme, Link } from '@lumx/react';
+import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
+import { chromaticForceScreenSize } from '../../stories/chromaticForceScreenSize';
+import { AlertDialog } from './AlertDialog';
+
+export default {
+    title: 'LumX components/alert-dialog/AlertDialog',
+    parameters: {
+        // Delay Chromatic snapshot to wait for dialog to open.
+        chromatic: {
+            pauseAnimationAtEnd: true,
+            delay: DIALOG_TRANSITION_DURATION,
+        },
+    },
+    // Force minimum chromatic screen size to make sure the dialog appears in view.
+    decorators: [chromaticForceScreenSize],
+};
+
+const defaultProps = {
+    id: 'alert-dialog',
+    confirmProps: { onClick: () => alert('confirm'), label: 'OK' },
+};
+
+function useOpenButton(theme: Theme) {
+    const buttonRef = useRef() as RefObject<HTMLButtonElement>;
+    const [isOpen, setOpen] = useState(true);
+    const openDialog = () => setOpen(true);
+    const closeDialog = () => setOpen(false);
+
+    return {
+        button: (
+            <Button ref={buttonRef} onClick={openDialog} theme={theme}>
+                Open dialog
+            </Button>
+        ),
+        buttonRef,
+        closeDialog,
+        isOpen,
+    };
+}
+
+export const Default = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+
+    return (
+        <>
+            {button}
+            <AlertDialog
+                isOpen={isOpen}
+                onClose={closeDialog}
+                parentElement={buttonRef}
+                title="Default (info)"
+                confirmProps={{ onClick: () => console.log('confirm'), label: 'Confirm' }}
+            >
+                Consequat deserunt officia aute laborum tempor anim sint est.
+            </AlertDialog>
+        </>
+    );
+};
+
+export const Warning = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+
+    return (
+        <>
+            {button}
+            <AlertDialog
+                isOpen={isOpen}
+                title="Warning"
+                onClose={closeDialog}
+                parentElement={buttonRef}
+                kind="warning"
+                {...defaultProps}
+            >
+                Consequat deserunt officia aute laborum tempor anim sint est.
+            </AlertDialog>
+        </>
+    );
+};
+
+export const Success = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+
+    return (
+        <>
+            {button}
+            <AlertDialog
+                isOpen={isOpen}
+                title="Success"
+                onClose={closeDialog}
+                parentElement={buttonRef}
+                kind="success"
+                {...defaultProps}
+            >
+                Consequat deserunt officia aute laborum tempor anim sint est.
+            </AlertDialog>
+        </>
+    );
+};
+
+export const Error = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+
+    return (
+        <>
+            {button}
+            <AlertDialog
+                isOpen={isOpen}
+                title="Error"
+                onClose={closeDialog}
+                parentElement={buttonRef}
+                kind="error"
+                {...defaultProps}
+            >
+                Consequat deserunt officia aute laborum tempor anim sint est.
+            </AlertDialog>
+        </>
+    );
+};
+
+export const WithCancel = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+
+    return (
+        <>
+            {button}
+            <AlertDialog
+                {...defaultProps}
+                title="With Cancel"
+                isOpen={isOpen}
+                onClose={closeDialog}
+                parentElement={buttonRef}
+                cancelProps={{
+                    label: 'Cancel',
+                    onClick: closeDialog,
+                }}
+            >
+                Consequat deserunt officia aute laborum tempor anim sint est.
+            </AlertDialog>
+        </>
+    );
+};
+
+export const RichDescription = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+
+    return (
+        <>
+            {button}
+            <AlertDialog
+                {...defaultProps}
+                title="With Rich Description"
+                isOpen={isOpen}
+                onClose={closeDialog}
+                parentElement={buttonRef}
+            >
+                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>
+            </AlertDialog>
+        </>
+    );
+};
+
+export const WithForwardedProps = ({ theme }: any) => {
+    const { button, buttonRef, closeDialog, isOpen } = useOpenButton(theme);
+
+    return (
+        <>
+            {button}
+            <AlertDialog
+                {...defaultProps}
+                title="With Forwarded Props"
+                isOpen={isOpen}
+                onClose={closeDialog}
+                parentElement={buttonRef}
+                cancelProps={{
+                    label: 'Cancel',
+                    onClick: closeDialog,
+                    style: { color: 'blue' },
+                }}
+                confirmProps={{
+                    onClick: () => alert('confirm'),
+                    label: 'OK',
+                    style: { color: 'red' },
+                }}
+            >
+                Consequat deserunt officia aute laborum tempor anim sint est.
+            </AlertDialog>
+        </>
+    );
+};

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

@@ -0,0 +1,43 @@
+import React, { ReactElement } from 'react';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import { commonTestsSuite, itShouldRenderStories, Wrapper } from '@lumx/react/testing/utils';
+import { AlertDialog, AlertDialogProps } from './AlertDialog';
+import * as stories from './AlertDialog.stories';
+
+jest.mock('uid', () => ({ uid: () => 'uid' }));
+
+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> = {}, shallowRendering = true) => {
+    const props: AlertDialogProps = {
+        title: 'Alert',
+        description: 'Deserunt et sunt qui consequat sint sit.',
+        // eslint-disable-next-line no-alert
+        confirmProps: { onClick: () => alert('confirm'), label: 'OK' },
+        ...propsOverride,
+    };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(<AlertDialog {...props} />);
+
+    return {
+        AlertDialog: wrapper.find(`Dialog`),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${AlertDialog.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        itShouldRenderStories(stories, AlertDialog);
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'AlertDialog', prop: 'AlertDialog' }, { className: CLASSNAME });
+});

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

@@ -0,0 +1,185 @@
+import React, { forwardRef } 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 { uid } from 'uid';
+import { Comp } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+
+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;
+    };
+}
+
+/**
+ * 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: Comp<AlertDialogProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const {
+        id,
+        title,
+        className,
+        cancelProps,
+        confirmProps,
+        kind,
+        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 uniqueId = React.useMemo(() => id || uid(), [id]);
+    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;