@lumx/react 3.1.4 → 3.2.0

package/src/components/post-block/PostBlock.test.tsx

@@ -1,28 +1,23 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { PostBlock, PostBlockProps } from './PostBlock';
-import * as stories from '../../stories/generated/PostBlock/Demos.stories';
 
 const CLASSNAME = PostBlock.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<PostBlockProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<PostBlock {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<PostBlockProps> = {}) => {
+    render(<PostBlock {...(props as any)} />);
+    const postBlock = queryByClassName(document.body, CLASSNAME);
+    return { props, postBlock };
 };
 
 describe(`<${PostBlock.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, PostBlock);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'postBlock',
+        forwardAttributes: 'postBlock',
+    });
 });

package/src/components/progress/ProgressCircular.stories.tsx

@@ -1,18 +1,30 @@
-import { ProgressCircular } from '@lumx/react';
-import React, { Fragment } from 'react';
+import { ProgressCircular, ProgressCircularSize, Size } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+
+const sizes: Array<ProgressCircularSize> = [Size.xxs, Size.xs, Size.s, Size.m];
 
 export default {
     title: 'LumX components/progress/ProgressCircular',
+    component: ProgressCircular,
+    args: ProgressCircular.defaultProps,
+    argTypes: {
+        size: getSelectArgType<ProgressCircularSize>(sizes),
+    },
 };
 
-const SIZES = ['xxs', 'xs', 's', 'm', undefined] as const;
-
-export const Default = ({ theme }: any) => <ProgressCircular theme={theme} />;
+/**
+ * Default progress circular
+ */
+export const Default = {};
 
-export const Sizes = ({ theme }: any) =>
-    SIZES.map((size) => (
-        <Fragment key={String(size)}>
-            <span>{String(size)}</span>
-            <ProgressCircular theme={theme} size={size} />
-        </Fragment>
-    ));
+/**
+ * All sizes
+ */
+export const AllSizes = {
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'size', options: sizes } },
+        }),
+    ],
+};

package/src/components/progress/ProgressLinear.stories.tsx

@@ -1,8 +1,12 @@
 import { ProgressLinear } from '@lumx/react';
-import React from 'react';
 
 export default {
     title: 'LumX components/progress/ProgressLinear',
+    component: ProgressLinear,
+    args: ProgressLinear.defaultProps,
 };
 
-export const Default = ({ theme }: any) => <ProgressLinear theme={theme} />;
+/**
+ * Default progress linear
+ */
+export const Default = {};

package/src/components/radio-button/RadioButton.stories.tsx

@@ -1,28 +1,39 @@
 import { RadioButton } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import React from 'react';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 
-export default { title: 'LumX components/radio-button/Radio button' };
+export default {
+    title: 'LumX components/radio-button/Radio button',
+    component: RadioButton,
+    args: {
+        ...RadioButton.defaultProps,
+        name: 'radiobutton-html-name',
+        value: 'radiobutton-html-value',
+    },
+    argTypes: {
+        onChange: { action: true },
+        name: { control: false },
+        value: { control: false },
+    },
+    decorators: [
+        withValueOnChange({
+            valueProp: 'isChecked',
+            valueTransform: (value) => value === 'radiobutton-html-value',
+        }),
+    ],
+};
 
-export const SimpleRadioButton = ({ theme }: any) => (
-    <RadioButton
-        isChecked={false}
-        label={text('Label', 'Radio button')}
-        name="test1"
-        theme={theme}
-        value="lorem"
-        onChange={noop}
-    />
-);
+/**
+ * Default radio button
+ */
+export const Default = {};
 
-export const SimpleCheckedRadioButton = ({ theme }: any) => (
-    <RadioButton
-        isChecked
-        label={text('Label', 'Radio button')}
-        name="test1"
-        theme={theme}
-        value="lorem"
-        onChange={noop}
-    />
-);
+/**
+ * With label and helper
+ */
+export const LabelAndHelper = {
+    args: {
+        label: 'Radio button label',
+        helper: loremIpsum('tiny'),
+    },
+};

package/src/components/select/Select.stories.tsx

@@ -1,13 +1,15 @@
 import { mdiBullhornOutline } from '@lumx/icons/';
 import { List, ListItem, Select, Size, TextField } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
-import { text } from '@storybook/addon-knobs';
 import noop from 'lodash/noop';
 import range from 'lodash/range';
 import React, { SyntheticEvent, useState } from 'react';
 import { SelectVariant } from './constants';
 
-export default { title: 'LumX components/select/Select' };
+export default {
+    title: 'LumX components/select/Select',
+    component: Select,
+};
 
 const CHOICES = ['First item', 'Second item', 'Third item'];
 
@@ -112,8 +114,8 @@ export const DisabledSelect = ({ theme }: any) => {
         <Select
             isOpen={false}
             value=""
-            label={text('label', 'My select')}
-            placeholder={text('placeholder', 'Placeholder')}
+            label="My select"
+            placeholder="Placeholder"
             theme={theme}
             onInputClick={noop}
             onDropdownClose={noop}
@@ -204,13 +206,7 @@ export const SelectWithAnotherField = ({ theme }: any) => {
 
     return (
         <>
-            <TextField
-                value={text('Value', 'myvalue')}
-                label={text('Label', 'I am the label')}
-                placeholder={text('Placeholder', 'ex: A value')}
-                theme={theme}
-                onChange={noop}
-            />
+            <TextField value="myvalue" label="I am the label" placeholder="ex: A value" theme={theme} onChange={noop} />
             <Select
                 style={{ width: '100%' }}
                 isOpen={isOpen}
@@ -255,8 +251,8 @@ export const SelectWithNoData = ({ theme }: any) => {
         <Select
             isOpen={isOpen}
             value=""
-            label={text('label', 'My select')}
-            placeholder={text('placeholder', 'Placeholder')}
+            label="My select"
+            placeholder="Placeholder"
             theme={theme}
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
@@ -277,10 +273,10 @@ export const SelectWithHelper = ({ theme }: any) => {
         <Select
             isOpen={isOpen}
             value=""
-            label={text('label', 'Country')}
-            placeholder={text('placeholder', 'Your country')}
+            label="Country"
+            placeholder="Your country"
             theme={theme}
-            helper={text('helper', 'This is used in analytics')}
+            helper="This is used in analytics"
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
         >
@@ -302,14 +298,14 @@ export const SelectWithError = ({ theme }: any) => {
         <Select
             isOpen={isOpen}
             value=""
-            label={text('label', 'Country')}
-            placeholder={text('placeholder', 'Your country')}
+            label="Country"
+            placeholder="Your country"
             theme={theme}
-            helper={text('helper', 'This is used in analytics')}
+            helper="This is used in analytics"
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             hasError
-            error={text('Error', 'Please select something :)')}
+            error="Please select something :)"
         >
             <List theme={theme} isClickable>
                 {CHOICES.map((choice) => (
@@ -329,10 +325,10 @@ export const SelectSuccess = ({ theme }: any) => {
         <Select
             isOpen={isOpen}
             value=""
-            label={text('label', 'Country')}
-            placeholder={text('placeholder', 'Your country')}
+            label="Country"
+            placeholder="Your country"
             theme={theme}
-            helper={text('helper', 'This is used in analytics')}
+            helper="This is used in analytics"
             onInputClick={toggleSelect}
             onDropdownClose={closeSelect}
             isValid

package/src/components/skeleton/SkeletonCircle.stories.tsx

@@ -1,25 +1,41 @@
-import React from 'react';
+import { Size, SkeletonCircle, SkeletonCircleProps } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { ALL_COLORS, colorArgType } from '@lumx/react/stories/controls/color';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 
-import { FlexBox, Orientation, Size, SkeletonCircle, ColorPalette } from '@lumx/react';
+const sizes: SkeletonCircleProps['size'][] = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
 
-export default { title: 'LumX components/skeleton/Skeleton Circle' };
+export default {
+    title: 'LumX components/skeleton/Skeleton Circle',
+    component: SkeletonCircle,
+    args: SkeletonCircle.defaultProps,
+    argTypes: {
+        size: getSelectArgType(sizes),
+        color: colorArgType,
+    },
+};
 
-const sizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const;
-const colors = Object.values(ColorPalette);
+/**
+ * All sizes
+ */
+export const AllSize = {
+    argTypes: { size: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'size', options: sizes } },
+        }),
+    ],
+};
 
-export const Circle = ({ theme }: any) => (
-    <>
-        Sizes:
-        <FlexBox orientation={Orientation.horizontal}>
-            {sizes.map((size) => (
-                <SkeletonCircle theme={theme} key={size} size={size} className="lumx-spacing-margin" />
-            ))}
-        </FlexBox>
-        Colors:
-        <FlexBox orientation={Orientation.horizontal}>
-            {colors.map((color) => (
-                <SkeletonCircle theme={theme} size={Size.m} key={color} color={color} className="lumx-spacing-margin" />
-            ))}
-        </FlexBox>
-    </>
-);
+/**
+ * All colors
+ */
+export const AllColor = {
+    args: { size: Size.m },
+    argTypes: { color: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'color', options: ALL_COLORS } },
+        }),
+    ],
+};

package/src/components/skeleton/SkeletonCircle.test.tsx

@@ -1,28 +1,23 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { SkeletonCircle, SkeletonCircleProps } from './SkeletonCircle';
-import * as stories from './SkeletonCircle.stories';
 
 const CLASSNAME = SkeletonCircle.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SkeletonCircleProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<SkeletonCircle {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<SkeletonCircleProps> = {}) => {
+    render(<SkeletonCircle {...(props as any)} />);
+    const skeletonCircle = queryByClassName(document.body, CLASSNAME);
+    return { props, skeletonCircle };
 };
 
 describe(`<${SkeletonCircle.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, SkeletonCircle);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'skeletonCircle',
+        forwardAttributes: 'skeletonCircle',
+    });
 });

package/src/components/skeleton/SkeletonRectangle.stories.tsx

@@ -1,107 +1,82 @@
-import React, { useEffect, useState } from 'react';
+import { AspectRatio, Size, SkeletonRectangle, SkeletonRectangleVariant, SkeletonRectangleProps } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { ALL_COLORS, colorArgType } from '@lumx/react/stories/controls/color';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 
-import {
-    Alignment,
-    AspectRatio,
-    Button,
-    FlexBox,
-    Orientation,
-    Size,
-    SkeletonRectangle,
-    SkeletonRectangleVariant,
-    Thumbnail,
-    ColorPalette,
-} from '@lumx/react';
-import { imageKnob } from '@lumx/react/stories/knobs/image';
-
-export default { title: 'LumX components/skeleton/Skeleton Rectangle' };
-
-const variants = [
+const variants: SkeletonRectangleProps['variant'][] = [
     SkeletonRectangleVariant.squared,
     SkeletonRectangleVariant.rounded,
     SkeletonRectangleVariant.pill,
-] as const;
-const sizes = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const;
-const aspectRatios = [AspectRatio.vertical, AspectRatio.square, AspectRatio.horizontal, AspectRatio.wide] as const;
-const colors = Object.values(ColorPalette);
+];
+const sizes: SkeletonRectangleProps['size'][] = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
+const aspectRatios: SkeletonRectangleProps['aspectRatio'][] = [
+    AspectRatio.wide,
+    AspectRatio.horizontal,
+    AspectRatio.square,
+    AspectRatio.vertical,
+];
+
+export default {
+    title: 'LumX components/skeleton/Skeleton Rectangle',
+    component: SkeletonRectangle,
+    args: SkeletonRectangle.defaultProps,
+    argTypes: {
+        width: getSelectArgType(sizes),
+        height: getSelectArgType(sizes),
+        aspectRatio: getSelectArgType(aspectRatios),
+        color: colorArgType,
+        variant: getSelectArgType(variants),
+    },
+};
 
-export const Rectangle = ({ theme }: any) => (
-    <>
-        Sizes:
-        <FlexBox orientation={Orientation.horizontal}>
-            {sizes.map((size) => (
-                <SkeletonRectangle
-                    key={size}
-                    className="lumx-spacing-margin"
-                    theme={theme}
-                    height={size}
-                    width={size}
-                />
-            ))}
-        </FlexBox>
-        Variants:
-        <FlexBox orientation={Orientation.horizontal}>
-            {variants.map((variant) => (
-                <SkeletonRectangle
-                    key={variant}
-                    className="lumx-spacing-margin"
-                    theme={theme}
-                    width={Size.xl}
-                    height={Size.m}
-                    variant={variant}
-                />
-            ))}
-        </FlexBox>
-        Ratios:
-        <FlexBox orientation={Orientation.horizontal} hAlign={Alignment.top}>
-            {aspectRatios.map((aspectRatio) => (
-                <SkeletonRectangle
-                    key={aspectRatio}
-                    className="lumx-spacing-margin"
-                    theme={theme}
-                    width={Size.xl}
-                    aspectRatio={aspectRatio}
-                />
-            ))}
-        </FlexBox>
-        Colors:
-        <FlexBox orientation={Orientation.horizontal} hAlign={Alignment.top}>
-            {colors.map((color) => (
-                <SkeletonRectangle
-                    key={color}
-                    className="lumx-spacing-margin"
-                    theme={theme}
-                    width={Size.xl}
-                    height={Size.m}
-                    color={color}
-                />
-            ))}
-        </FlexBox>
-    </>
-);
+/**
+ * All sizes
+ */
+export const AllSize = {
+    argTypes: { width: { control: false }, height: { control: false } },
+    decorators: [
+        withCombinations({
+            // Using same width than height
+            combinations: { cols: Object.fromEntries(sizes.map((s) => [s, { height: s, width: s }])) },
+        }),
+    ],
+};
+
+/**
+ * All ratios (for a fixed width)
+ */
+export const AllRatios = {
+    args: { width: Size.xl },
+    argTypes: { aspectRatio: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'aspectRatio', options: aspectRatios } },
+        }),
+    ],
+};
 
-export const LoadingThumbnail = ({ theme }: any) => {
-    const [loading, setLoading] = useState(true);
-    const fakeLoad = () => {
-        setLoading(true);
-        setTimeout(() => {
-            setLoading(false);
-        }, 2000);
-    };
-    useEffect(fakeLoad, []);
-    const size = Size.xl;
+/**
+ * All variants
+ */
+export const AllVariants = {
+    args: { width: Size.l, height: Size.m },
+    argTypes: { variant: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'variant', options: variants } },
+        }),
+    ],
+};
 
-    return (
-        <>
-            <Button onClick={fakeLoad}>Reload</Button> (fake 2sec loading)
-            <Thumbnail
-                image={imageKnob()}
-                alt="Image"
-                style={{ display: loading ? 'none' : undefined }}
-                aspectRatio={AspectRatio.square}
-                size={size}
-            />
-            {loading && <SkeletonRectangle theme={theme} width={size} aspectRatio={AspectRatio.square} />}
-        </>
-    );
+/**
+ * All colors
+ */
+export const AllColors = {
+    args: { width: Size.l, height: Size.m },
+    argTypes: { color: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'color', options: ALL_COLORS } },
+        }),
+    ],
 };

package/src/components/skeleton/SkeletonRectangle.test.tsx

@@ -1,28 +1,23 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { SkeletonRectangle, SkeletonRectangleProps } from './SkeletonRectangle';
-import * as stories from './SkeletonRectangle.stories';
 
 const CLASSNAME = SkeletonRectangle.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SkeletonRectangleProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<SkeletonRectangle {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<SkeletonRectangleProps> = {}) => {
+    render(<SkeletonRectangle {...(props as any)} />);
+    const skeletonRectangle = queryByClassName(document.body, CLASSNAME);
+    return { props, skeletonRectangle };
 };
 
 describe(`<${SkeletonRectangle.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, SkeletonRectangle);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'skeletonRectangle',
+        forwardAttributes: 'skeletonRectangle',
+    });
 });

package/src/components/skeleton/SkeletonTypography.test.tsx

@@ -1,28 +1,23 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
 
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { SkeletonTypography, SkeletonTypographyProps } from './SkeletonTypography';
-import * as stories from './SkeletonTypography.stories';
 
 const CLASSNAME = SkeletonTypography.className as string;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SkeletonTypographyProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<SkeletonTypography {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<SkeletonTypographyProps> = {}) => {
+    render(<SkeletonTypography {...(props as any)} />);
+    const skeletonTypography = queryByClassName(document.body, CLASSNAME);
+    return { props, skeletonTypography };
 };
 
 describe(`<${SkeletonTypography.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, SkeletonTypography);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'skeletonTypography',
+        forwardAttributes: 'skeletonTypography',
+    });
 });