@lumx/react 3.0.7-alpha.3 → 3.0.7-alpha.4

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.0.7-alpha.3",
-        "@lumx/icons": "^3.0.7-alpha.3",
+        "@lumx/core": "^3.0.7-alpha.4",
+        "@lumx/icons": "^3.0.7-alpha.4",
         "@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.0.7-alpha.3"
+    "version": "3.0.7-alpha.4"
 }

package/src/components/badge/Badge.tsx

@@ -1,4 +1,4 @@
-import { Color, ColorPalette } from '@lumx/react';
+import { ColorPalette } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import classNames from 'classnames';
@@ -11,7 +11,7 @@ export interface BadgeProps extends GenericProps {
     /** Badge content. */
     children?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
 }
 
 /**

package/src/components/button/ButtonRoot.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
+import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
@@ -22,7 +22,7 @@ export interface BaseButtonProps
         Pick<AriaAttributes, 'aria-expanded' | 'aria-haspopup' | 'aria-pressed' | 'aria-label'>,
         HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Emphasis variant. */
     emphasis?: Emphasis;
     /** Whether or not the button has a background color in low emphasis. */

package/src/components/chip/Chip.tsx

@@ -1,4 +1,4 @@
-import { Color, ColorPalette, Size, Theme } from '@lumx/react';
+import { ColorPalette, Size, Theme } from '@lumx/react';
 import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
 
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
@@ -24,7 +24,7 @@ export interface ChipProps extends GenericProps, HasTheme {
     /** A component to be rendered before the content. */
     before?: ReactNode;
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Whether the component is clickable or not. */
     isClickable?: boolean;
     /** Whether the component is disabled or not. */

package/src/components/icon/Icon.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
+import { ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mdiAlertCircle } from '@lumx/icons';
@@ -14,7 +14,7 @@ export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'x
  */
 export interface IconProps extends GenericProps, HasTheme {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Whether the icon has a shape. */

package/src/components/link/Link.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, Size, Typography } from '@lumx/react';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { renderLink } from '@lumx/react/utils/renderLink';
@@ -16,7 +16,7 @@ type HTMLAnchorProps = React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAn
  */
 export interface LinkProps extends GenericProps {
     /** Color variant. */
-    color?: Color;
+    color?: ColorPalette;
     /** Lightened or darkened variant of the selected icon color. */
     colorVariant?: ColorVariant;
     /** Link href. */

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.0.7-alpha.3",
-        "@lumx/icons": "^3.0.7-alpha.3",
-        "@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.0.7-alpha.3"
-}

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 });
-});