@lumx/react 3.1.0 → 3.1.2

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.1.0",
-        "@lumx/icons": "^3.1.0",
+        "@lumx/core": "^3.1.2",
+        "@lumx/icons": "^3.1.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -113,5 +113,5 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.1.0"
+    "version": "3.1.2"
 }

package/dist/README.md

@@ -1,38 +0,0 @@
-# LumApps Design System (LumX)
-
-The first official LumApps Design System for [React][react] applications.
-_LumX_ will help you design your applications faster and more easily. You will be able to use LumX with either the LumApps design styleguides or the [Google Material Design specifications][material].
-
-## Quick start
-
-To start to use LumX, you can either:
-
--   Install with Yarn/NPM:
-
-```bash
-yarn add @lumx/react
-# Or
-npm install @lumx/react
-```
-
--   Download the latest release for [React][react-release]
--   Clone the repository: `git clone https://github.com/lumapps/design-system.git`
-
-## Documentation
-
-You can find an online version of the demo and documentation site at https://design.lumapps.com.
-
-## How to get help, contribute, or provide feedback
-
-Please refer to our [contributing guidelines](CONTRIBUTING.md).
-
-## Copyright and license
-
-Code and documentation copyright 2019 LumApps. Code released under the [MIT license](LICENSE.md).
-
-[angularjs]: https://angularjs.org/
-[react]: https://react.org/
-[material]: http://www.google.com/design/spec/material-design/introduction.html
-[angularjs-release]: https://www.npmjs.com/package/@lumx/angularjs
-[react-release]: https://www.npmjs.com/package/@lumx/react
-[webpack]: https://webpack.js.org/

package/dist/package.json

@@ -1,117 +0,0 @@
-{
-    "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

@@ -1,196 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,185 +0,0 @@
-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;