@lumx/react 3.1.5 → 3.2.1-alpha.0

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',
+    });
 });

package/src/components/slider/Slider.stories.tsx

@@ -1,29 +1,45 @@
 import { Slider } from '@lumx/react';
-import { number, text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import React from 'react';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
 
-export default { title: 'LumX components/slider/Slider' };
+export default {
+    title: 'LumX components/slider/Slider',
+    component: Slider,
+    args: {
+        ...Slider.defaultProps,
+        min: 0,
+        max: 30,
+        value: 15,
+        name: 'slider-html-name',
+    },
+    argTypes: {
+        onChange: { action: true },
+    },
+    decorators: [withValueOnChange({})],
+};
 
-export const DefaultSlider = ({ theme }: any) => (
-    <Slider
-        label={text('label', 'Default')}
-        max={number('max', 10)}
-        min={number('min', 0)}
-        theme={theme}
-        value={5}
-        onChange={noop}
-    />
-);
+/**
+ * Default slider with required props
+ */
+export const Default = {};
 
-export const WithHelperSlider = ({ theme }: any) => (
-    <Slider
-        label={text('label', 'Default')}
-        helper={text('helper', 'This is an helper text')}
-        max={number('max', 10)}
-        min={number('min', 0)}
-        theme={theme}
-        value={5}
-        onChange={noop}
-    />
-);
+/**
+ * With label and helper
+ */
+export const WithLabelAndHelper = {
+    args: { label: 'Slider label', helper: loremIpsum('tiny') },
+};
+
+/**
+ * With steps
+ */
+export const WithSteps = {
+    args: { steps: 5 },
+};
+
+/**
+ * With precision (three digits after the decimal point)
+ */
+export const WithPrecision = {
+    args: { steps: 0, precision: 3 },
+};

package/src/components/slider/Slider.test.tsx

@@ -1,31 +1,25 @@
 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 { Slider, SliderProps } from './Slider';
-import * as stories from './Slider.stories';
 
 const CLASSNAME = Slider.className as string;
 
 jest.mock('uid', () => ({ uid: () => 'uid' }));
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<SliderProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<Slider {...(props as any)} />);
-    return { props, wrapper };
+const setup = (props: Partial<SliderProps> = {}) => {
+    render(<Slider {...(props as any)} />);
+    const slider = queryByClassName(document.body, CLASSNAME);
+    return { props, slider };
 };
 
 describe(`<${Slider.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, Slider);
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'slider',
+        forwardAttributes: 'slider',
+    });
 });

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,39 +1,39 @@
 import React from 'react';
 import range from 'lodash/range';
 import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation } from '@lumx/react';
-import { boolean, number } from '@storybook/addon-knobs';
-import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+import { IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 
-export default { title: 'LumX components/slideshow/Slideshow' };
-
-export const Simple = ({ theme }: any) => {
-    const images = thumbnailsKnob(6);
-    const activeIndex = number('Active index', 0);
-    const groupBy = number('Group by', 1);
-    const autoPlay = boolean('Autoplay', false);
-    const interval = number('Autoplay interval (in milliseconds)', 1000);
+export default {
+    title: 'LumX components/slideshow/Slideshow',
+    component: Slideshow,
+    args: Slideshow.defaultProps,
+    argTypes: {
+        activeIndex: { control: 'number' },
+        groupBy: { control: 'number' },
+        autoPlay: { control: 'boolean' },
+        interval: { control: 'number' },
+    },
+};
 
+export const Simple = ({ theme, images = Object.values(LANDSCAPE_IMAGES), ...props }: any) => {
     return (
         <Slideshow
             aria-label="Simple carousel example"
-            activeIndex={activeIndex}
-            autoPlay={autoPlay}
-            interval={interval}
             slideshowControlsProps={{
                 nextButtonProps: { label: 'Next' },
                 previousButtonProps: { label: 'Previous' },
             }}
             theme={theme}
-            groupBy={groupBy}
+            {...props}
             style={{ width: '50%' }}
             slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
         >
-            {images.map(({ image, alt }, index) => (
+            {images.map((image: string, index: number) => (
                 <SlideshowItem key={`${image}-${index}`}>
                     <ImageBlock
                         thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
                         image={image}
-                        alt={alt}
+                        alt=""
                         theme={theme}
                     />
                 </SlideshowItem>
@@ -42,41 +42,8 @@ export const Simple = ({ theme }: any) => {
     );
 };
 
-export const SimpleWithAutoPlay = ({ theme }: any) => {
-    const images = thumbnailsKnob(6);
-    const activeIndex = number('Active index', 0);
-    const groupBy = number('Group by', 1);
-    const interval = number('Autoplay interval (in milliseconds)', 1000);
-
-    return (
-        <Slideshow
-            aria-label="Simple with autoplay example"
-            activeIndex={activeIndex}
-            autoPlay
-            interval={interval}
-            slideshowControlsProps={{
-                nextButtonProps: { label: 'Next' },
-                previousButtonProps: { label: 'Previous' },
-                playButtonProps: { label: 'Play/Pause' },
-            }}
-            theme={theme}
-            groupBy={groupBy}
-            style={{ width: '50%' }}
-            slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
-        >
-            {images.map(({ image, alt }, index) => (
-                <SlideshowItem key={`${image}-${index}`}>
-                    <ImageBlock
-                        thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
-                        image={image}
-                        alt={alt}
-                        theme={theme}
-                    />
-                </SlideshowItem>
-            ))}
-        </Slideshow>
-    );
-};
+export const SimpleWithAutoPlay: any = Simple.bind({});
+SimpleWithAutoPlay.args = { autoPlay: true };
 
 export const ResponsiveSlideShowSwipe = () => {
     const slides = range(5);
@@ -124,7 +91,7 @@ export const ResponsiveSlideShowSwipe = () => {
 const slides = [
     {
         id: 0,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/foyleswarslide__800x600.jpg',
+        src: IMAGES.landscape1,
         alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
         title: 'Foyle’s War Revisited',
         subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
@@ -132,14 +99,14 @@ const slides = [
     },
     {
         id: 1,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/britcomdavidslide__800x600.jpg',
+        src: IMAGES.landscape2,
         alt: 'British flag with WILL-TV host David Thiel.',
         title: 'Great Britain Vote: 7 pm Sat.',
         link: '#',
     },
     {
         id: 2,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/mag800-2__800x600.jpg',
+        src: IMAGES.landscape3,
         alt: 'Mid-American Gardener panelists on the set.',
         title: 'Mid-American Gardener: Thursdays at 7 pm',
         subtitle: 'Watch the latest episode',
@@ -147,7 +114,7 @@ const slides = [
     },
     {
         id: 3,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/foyleswarslide__800x600.jpg',
+        src: IMAGES.portrait1,
         alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
         title: 'Foyle’s War Revisited',
         subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
@@ -155,25 +122,23 @@ const slides = [
     },
     {
         id: 4,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/britcomdavidslide__800x600.jpg',
+        src: IMAGES.portrait2,
         alt: 'British flag with WILL-TV host David Thiel.',
         title: 'Great Britain Vote: 7 pm Sat.',
         link: '#',
     },
     {
         id: 5,
-        src: 'https://www.w3.org/WAI/ARIA/apg/example-index/carousel/images/mag800-2__800x600.jpg',
+        src: IMAGES.portrait3,
         alt: 'Mid-American Gardener panelists on the set.',
         title: 'Mid-American Gardener: Thursdays at 7 pm',
         subtitle: 'Watch the latest episode',
         link: '#',
     },
 ];
-export const WithComplexContent = () => (
+export const WithComplexContent = ({ slideCount, ...props }: any) => (
     <Slideshow
         aria-label="Carousel with complex content"
-        activeIndex={0}
-        groupBy={2}
         slideshowControlsProps={{
             nextButtonProps: { label: 'Next' },
             previousButtonProps: { label: 'Previous' },
@@ -181,8 +146,9 @@ export const WithComplexContent = () => (
             paginationItemProps: (index) => ({ label: `Slide ${index + 1}` }),
         }}
         slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
+        {...props}
     >
-        {range(number('Slides', 6)).map((nb) => {
+        {range(slideCount).map((nb) => {
             const slide = slides[nb % slides.length];
 
             return (
@@ -210,3 +176,7 @@ export const WithComplexContent = () => (
         })}
     </Slideshow>
 );
+WithComplexContent.args = {
+    groupBy: 2,
+    slideCount: 6,
+};

package/src/components/slideshow/Slideshow.test.tsx

@@ -1,17 +1,14 @@
-import React, { ReactElement } from 'react';
-import pick from 'lodash/pick';
+import React from 'react';
 
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite, itShouldRenderStories, Wrapper } 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 { Slideshow, SlideshowProps } from './Slideshow';
-import { SlideshowControls } from './SlideshowControls';
-import * as stories from './Slideshow.stories';
+import { Slides } from './Slides';
 
-const CLASSNAME = Slideshow.className as string;
+const CLASSNAME = Slides.className as string;
 
-const setup = ({ ...propsOverride }: Partial<SlideshowProps> = {}, shallowRendering = true) => {
+const setup = (propsOverride: Partial<SlideshowProps> = {}) => {
     const props: SlideshowProps = {
         slideshowControlsProps: {
             nextButtonProps: { label: 'Next' },
@@ -19,21 +16,16 @@ const setup = ({ ...propsOverride }: Partial<SlideshowProps> = {}, shallowRender
         },
         ...propsOverride,
     };
-
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Slideshow {...props} />);
-
-    return { props, wrapper };
+    render(<Slideshow {...props} />);
+    const slideShow = queryByClassName(document.body, CLASSNAME);
+    return { props, slideShow };
 };
 
 describe(`<${Slideshow.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(pick(stories, ['default', 'Simple']), {
-            or: [Slideshow, { path: [Slideshow, SlideshowControls] }],
-        });
-    });
-
     // Common tests suite.
-    commonTestsSuite(setup, { prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'slideShow',
+        forwardAttributes: 'slideShow',
+    });
 });

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { AspectRatio, ImageBlock, Slides, SlideshowControls, SlideshowItem } from '@lumx/react';
-import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
+import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
 
 export default { title: 'LumX components/slideshow/Slideshow controls' };
 
@@ -31,9 +31,7 @@ export const Simple = () => {
     );
 };
 
-export const ControllingSlideshow = ({ theme }: any) => {
-    const images = thumbnailsKnob(6);
-
+export const ControllingSlideshow = ({ images = Object.values(LANDSCAPE_IMAGES), theme }: any) => {
     const {
         activeIndex: currentIndex,
         slideshowId,
@@ -97,12 +95,12 @@ export const ControllingSlideshow = ({ theme }: any) => {
                 </div>
             }
         >
-            {images.map(({ image, alt }, index) => (
+            {images.map((image: string, index: number) => (
                 <SlideshowItem key={`${image}-${index}`}>
                     <ImageBlock
                         thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
                         image={image}
-                        alt={alt}
+                        alt=""
                         theme={theme}
                     />
                 </SlideshowItem>