@lumx/react 3.1.5 → 3.2.1-alpha.0

package/src/components/flex-box/FlexBox.stories.tsx

@@ -1,245 +1,158 @@
-import { mdiPencil } from '@lumx/icons';
-import { Alignment, Button, Icon, Orientation, Size } from '@lumx/react';
-import { boolean, number, select, text } from '@storybook/addon-knobs';
-import fromPairs from 'lodash/fromPairs';
 import React from 'react';
 
-import isArray from 'lodash/isArray';
-import { FlexBox, FlexBoxProps } from './FlexBox';
-
-export default { title: 'LumX components/flex-box/FlexBox' };
-
-const DEFAULT_PROPS: any = {};
-
-type FlexBoxPropName = keyof FlexBoxProps;
-const flexViewKnobConfigs: Array<
-    [FlexBoxPropName, typeof boolean] | [string & FlexBoxPropName, typeof select, any[] | Record<any, any>]
-> = [
-    ['fillSpace', boolean],
-    ['noShrink', boolean],
-    ['wrap', boolean],
-    ['gap', select, [DEFAULT_PROPS.gap, Size.tiny, Size.regular, Size.medium, Size.big, Size.huge]],
-    [
-        'hAlign',
-        select,
-        [
-            DEFAULT_PROPS.hAlign,
-            Alignment.center,
-            Alignment.top,
-            Alignment.bottom,
-            Alignment.spaceAround,
-            Alignment.spaceBetween,
-            Alignment.spaceEvenly,
+import { Alignment, Button, IconButton, Orientation, Size, Text } from '@lumx/react';
+
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { mdiAtom } from '@lumx/icons';
+import mergeWith from 'lodash/fp/mergeWith';
+import castArray from 'lodash/castArray';
+import { FlexBox } from './FlexBox';
+
+const gapSizes = [Size.tiny, Size.regular, Size.medium, Size.big, Size.huge];
+const spaceAlignments = [Alignment.spaceBetween, Alignment.spaceEvenly, Alignment.spaceAround];
+const verticalAlignments = [...spaceAlignments, Alignment.top, Alignment.center, Alignment.bottom];
+const horizontalAlignments = [...spaceAlignments, Alignment.left, Alignment.center, Alignment.right];
+
+export default {
+    title: 'LumX components/flex-box/FlexBox',
+    component: FlexBox,
+    args: FlexBox.defaultProps,
+    argTypes: {
+        orientation: getSelectArgType(Orientation),
+        fillSpace: { control: 'boolean' },
+        wrap: { control: 'boolean' },
+        noShrink: { control: 'boolean' },
+        hAlign: getSelectArgType(verticalAlignments),
+        vAlign: getSelectArgType(horizontalAlignments),
+        gap: getSelectArgType(gapSizes),
+    },
+};
+
+/** Without config, FlexBox acts as a simple <div> */
+export const NoConfig = {
+    args: {
+        style: { width: '100%', height: '100%' },
+        children: [
+            <Button key="1">Button 1</Button>,
+            <Text key="2" as="p">
+                Some paragraph
+            </Text>,
+            <Button key="3">Button 3</Button>,
         ],
+    },
+    decorators: [withWrapper({ style: { border: '1px dashed red' } })],
+};
+
+/** Horizontal orientation with all possible item alignments */
+export const Horizontal = {
+    ...NoConfig,
+    args: {
+        ...NoConfig.args,
+        orientation: Orientation.horizontal,
+    },
+    decorators: [
+        withCombinations({
+            cellStyle: { border: '1px dashed red' },
+            firstColStyle: { whiteSpace: 'nowrap', width: '1%' },
+            combinations: { rows: { key: 'vAlign', options: withUndefined(horizontalAlignments) } },
+        }),
     ],
-    [
-        'vAlign',
-        select,
-        [
-            DEFAULT_PROPS.vAlign,
-            Alignment.center,
-            Alignment.right,
-            Alignment.left,
-            Alignment.spaceAround,
-            Alignment.spaceBetween,
-            Alignment.spaceEvenly,
-        ],
+};
+
+/** Vertical orientation with all possible item alignments */
+export const Vertical = {
+    ...NoConfig,
+    args: {
+        ...NoConfig.args,
+        orientation: Orientation.vertical,
+    },
+    decorators: [
+        withCombinations({
+            cellStyle: { border: '1px dashed red', height: '200px' },
+            firstColStyle: { whiteSpace: 'nowrap', width: '1%' },
+            combinations: { rows: { key: 'hAlign', options: withUndefined(verticalAlignments) } },
+        }),
     ],
-    ['orientation', select, [undefined, Orientation.horizontal, Orientation.vertical]],
-    [
-        'marginAuto',
-        select,
-        {
-            default: DEFAULT_PROPS.marginAuto,
-            bottom: Alignment.bottom,
-            top: Alignment.top,
-            right: Alignment.right,
-            left: Alignment.left,
-            'left & right': [Alignment.left, Alignment.right],
-            'top & bottom': [Alignment.top, Alignment.bottom],
-            'all around': [Alignment.top, Alignment.bottom, Alignment.left, Alignment.right],
-        },
+};
+
+/** All gap sizes */
+export const GapSizes = {
+    ...Horizontal,
+    argTypes: {
+        gap: { control: false },
+    },
+    decorators: [
+        ...NoConfig.decorators,
+        withCombinations({
+            combinations: {
+                rows: { key: 'gap', options: withUndefined(gapSizes) },
+            },
+        }),
     ],
-];
-
-const setupFlexBoxKnobs = (group: string, knobs: FlexBoxPropName[] = []) =>
-    fromPairs(
-        knobs.map((knob: FlexBoxPropName) => {
-            const [prop, knobFn, selectOptions] = flexViewKnobConfigs.find(([k]) => k === knob) as any;
-            if (selectOptions) {
-                const defaultValue = isArray(selectOptions) ? selectOptions[0] : DEFAULT_PROPS[prop];
-                return [prop, knobFn(prop, selectOptions, defaultValue, group)];
-            }
-            return [prop, knobFn(prop, DEFAULT_PROPS[prop], group)];
+};
+
+/** Wrap items in new row or column */
+export const Wrap = {
+    args: {
+        ...NoConfig.args,
+        orientation: Orientation.horizontal,
+        wrap: true,
+    },
+    argTypes: {
+        wrap: { control: false },
+    },
+    decorators: [
+        withWrapper({ style: { border: '1px dashed red', width: '100px', height: '100px', margin: '20px auto' } }),
+        withCombinations({
+            cellStyle: { width: '50%' },
+            combinations: {
+                cols: { key: 'orientation', options: Object.values(Orientation) },
+                rows: { 'No wrap': { wrap: false }, Wrap: { wrap: true } },
+            },
         }),
-    );
-
-const flexChildKnobs: FlexBoxPropName[] = ['fillSpace', 'noShrink', 'marginAuto'];
-
-export const Flex = () => (
-    <FlexBox {...setupFlexBoxKnobs('-flex container', ['orientation', 'hAlign', 'vAlign', 'wrap', 'gap'])}>
-        <FlexBox {...setupFlexBoxKnobs('start', flexChildKnobs)}>
-            <Icon icon={mdiPencil} />
-        </FlexBox>
-        <FlexBox {...setupFlexBoxKnobs('middle', flexChildKnobs)}>
-            {text('Text content', 'Some text in a div', 'middle')}
-        </FlexBox>
-        <FlexBox {...setupFlexBoxKnobs('end', flexChildKnobs)}>
-            <Button>OK</Button>
-        </FlexBox>
-    </FlexBox>
-);
-
-const hAlign = (prefix?: string) =>
-    select(
-        `${prefix ? `${prefix}: ` : ''}Horizontal align`,
-        [
-            Alignment.center,
-            Alignment.top,
-            Alignment.bottom,
-            Alignment.spaceAround,
-            Alignment.spaceBetween,
-            Alignment.spaceEvenly,
-        ],
-        Alignment.center,
-    );
-const vAlign = (prefix?: string) =>
-    select(
-        `${prefix ? `${prefix}: ` : ''}Vertical align`,
-        [
-            Alignment.center,
-            Alignment.left,
-            Alignment.right,
-            Alignment.spaceAround,
-            Alignment.spaceBetween,
-            Alignment.spaceEvenly,
-        ],
-        Alignment.center,
-    );
-
-const orientation = (prefix?: string) =>
-    select(
-        `${prefix ? `${prefix}: ` : ''}Set orientation`,
-        [Orientation.vertical, Orientation.horizontal],
-        Orientation.vertical,
-    );
-
-const gapSize = (prefix?: string) =>
-    select(`${prefix ? `${prefix}: ` : ''}Gap size`, [Size.regular, Size.medium, Size.big, Size.huge], Size.regular);
-
-export const HorizontalFlex = () => (
-    <FlexBox
-        orientation={Orientation.horizontal}
-        style={{ height: `${number('height (px)', 300)}px`, border: '1px solid red' }}
-    >
-        <Button>Default</Button>
-        <FlexBox hAlign={Alignment.top}>
-            <Button>Top</Button>
-        </FlexBox>
-        <FlexBox
-            fillSpace={boolean('Center button: fill space', true)}
-            hAlign={hAlign('Center button')}
-            vAlign={vAlign('Center button')}
-        >
-            <Button>Center button</Button>
-        </FlexBox>
-        <FlexBox hAlign={Alignment.bottom}>
-            <Button>Bottom</Button>
-        </FlexBox>
-    </FlexBox>
-);
-
-export const VerticalFlex = () => (
-    <FlexBox
-        orientation={Orientation.vertical}
-        style={{ height: `${number('height (px)', 300)}px`, border: '1px solid red' }}
-    >
-        <Button>Default</Button>
-        <FlexBox vAlign={Alignment.left}>
-            <Button>Left</Button>
-        </FlexBox>
-        <FlexBox
-            fillSpace={boolean('Center button: fill space', true)}
-            hAlign={hAlign('Center button')}
-            vAlign={vAlign('Center button')}
-        >
-            <Button>Center button</Button>
-        </FlexBox>
-        <FlexBox vAlign={Alignment.right}>
-            <Button>Right</Button>
-        </FlexBox>
-    </FlexBox>
-);
-
-export const GapSizeFlex = () => (
-    <FlexBox orientation={orientation()} gap={gapSize()}>
-        <Button>Item 1</Button>
-        <FlexBox vAlign={Alignment.left}>
-            <Button>Item 2</Button>
-        </FlexBox>
-        <FlexBox>
-            <Button>Item 3</Button>
-        </FlexBox>
-        <FlexBox vAlign={Alignment.right}>
-            <Button>Item 4</Button>
-        </FlexBox>
-    </FlexBox>
-);
-
-export const WrapFlex = () => (
-    <FlexBox
-        orientation={Orientation.horizontal}
-        wrap={boolean('wrap', true)}
-        style={{ width: `${number('width (px)', 150)}px`, border: '1px solid red' }}
-    >
-        <FlexBox fillSpace orientation={Orientation.vertical}>
-            <Button>Button</Button>
-        </FlexBox>
-        <Button>Button</Button>
-        <Button>Button</Button>
-    </FlexBox>
-);
-
-export const NoShrinkFlex = () => (
-    <FlexBox
-        orientation={Orientation.horizontal}
-        style={{ width: `${number('width (px)', 150)}px`, border: '1px solid red' }}
-    >
-        <Button>Button</Button>
-        <FlexBox noShrink={boolean('no shrink', true)}>{text('Center text', 'Some long text')}</FlexBox>
-        <Button>Button</Button>
-    </FlexBox>
-);
-
-export const Align = () => (
-    <FlexBox orientation={Orientation.horizontal} vAlign={vAlign()} hAlign={hAlign()}>
-        <Button style={{ height: 200 }}>Button</Button>
-        <FlexBox style={{ height: 'fit-content' }}>Some text</FlexBox>
-    </FlexBox>
-);
-
-export const Distribution = () => (
-    <FlexBox
-        style={{
-            width: `${number('width (px)', 720)}px`,
-            height: `${number('height (px)', 300)}px`,
-            border: '1px solid red',
-        }}
-        orientation={orientation()}
-        gap={gapSize()}
-        vAlign={vAlign()}
-        hAlign={hAlign()}
-    >
-        <Button>Button 1</Button>
-        <Button>Button 2</Button>
-        <Button>Button 3</Button>
-    </FlexBox>
-);
-
-export const CustomizeElement = () => (
-    <FlexBox as="header" orientation="horizontal" gap="regular">
-        <div>Element 1</div>
-        <div>Element 2</div>
-        <div>Element 2</div>
-    </FlexBox>
-);
+    ],
+};
+
+/** Prevent FlexBox from shrinking into a parent flex box */
+export const NoShrink = {
+    args: {
+        children: <Text as="p">Some paragraph</Text>,
+        noShrink: true,
+    },
+    decorators: [
+        withWrapper({
+            style: { display: 'flex', border: '1px dashed red', width: 100, height: 100, margin: '20px auto' },
+        }),
+    ],
+};
+
+/** All combinations of margin auto values */
+export const MarginAuto = {
+    args: { children: <IconButton label="" icon={mdiAtom} /> },
+    decorators: [
+        withWrapper({
+            style: { display: 'flex', border: '1px dashed red', width: 100, height: 100, margin: '20px auto' },
+        }),
+        withCombinations({
+            combinations: {
+                rows: {
+                    key: 'marginAuto',
+                    options: [undefined, Alignment.left, Alignment.top, [Alignment.left, Alignment.top]],
+                },
+                cols: {
+                    key: 'marginAuto',
+                    options: [undefined, Alignment.right, Alignment.bottom, [Alignment.right, Alignment.bottom]],
+                },
+            },
+            combinator: mergeWith((a, b) => {
+                if (a && b) {
+                    return [...castArray(a), ...castArray(b)].filter(Boolean);
+                }
+                return undefined;
+            }),
+        }),
+    ],
+};

package/src/components/flex-box/FlexBox.test.tsx

@@ -1,65 +1,25 @@
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import React, { ReactElement } from 'react';
-import { commonTestsSuite, itShouldRenderStories, Wrapper } from '@lumx/react/testing/utils';
+import React from 'react';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
+import { queryByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
 import { FlexBox, FlexBoxProps } from './FlexBox';
-import * as stories from './FlexBox.stories';
 
 const CLASSNAME = FlexBox.className as string;
 
 type SetupProps = Partial<FlexBoxProps>;
 
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
+const setup = (propsOverride: SetupProps = {}) => {
     const props: FlexBoxProps = {
         children: null,
         ...propsOverride,
     };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper = renderer(<FlexBox {...props} />);
-
-    return { props, wrapper };
+    render(<FlexBox {...props} />);
+    const flexBox = queryByClassName(document.body, CLASSNAME);
+    return { props, flexBox };
 };
 
 describe(`<${FlexBox.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, FlexBox);
-    });
-
-    /////////////////////////////
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        // Nothing to do here.
-    });
-
-    /////////////////////////////
-
-    // 3. Test events.
-    describe('Events', () => {
-        // Nothing to do here.
-    });
-
-    /////////////////////////////
-
-    // 4. Test conditions (i.e. things that display or not in the UI based on props).
-    describe('Conditions', () => {
-        // Nothing to do here.
-    });
-
-    /////////////////////////////
-
-    // 5. Test state.
-    describe('State', () => {
-        // Nothing to do here.
-    });
-
-    /////////////////////////////
-
     // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'flexBox', forwardAttributes: 'flexBox' });
 });

package/src/components/generic-block/GenericBlock.stories.jsx

@@ -1,7 +1,7 @@
-import { IMAGES } from '@lumx/react/stories/knobs/image';
 import React from 'react';
 import { mdiPencil } from '@lumx/icons';
 import { GenericBlock, Button, Icon, Size, Thumbnail } from '@lumx/react';
+import { IMAGES } from '@lumx/react/stories/controls/image';
 
 export default { title: 'LumX components/generic-block/GenericBlock' };
 

package/src/components/grid-column/GridColumn.stories.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import range from 'lodash/range';
+
+import { GridColumn, GridColumnProps } from '@lumx/react/components/grid-column/GridColumn';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { Size } from '@lumx/react';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+
+const genericBlockStyle = { border: '1px solid red', padding: '2px 8px' };
+
+const gapSizes: Array<GridColumnProps['gap']> = [Size.tiny, Size.regular, Size.big, Size.huge];
+
+const getItems = (nb: number) =>
+    range(nb).map((key) => (
+        // eslint-disable-next-line react/jsx-key
+        <div style={genericBlockStyle}>
+            <h2>Column {key}</h2>
+            <p>{loremIpsum('tiny')}</p>
+        </div>
+    ));
+
+export default {
+    title: 'LumX components/grid-column/GridColumn',
+    component: GridColumn,
+    argTypes: {
+        nbItems: { control: 'number', min: 0 },
+        gap: getSelectArgType(gapSizes),
+        itemMinWidth: { control: 'number', defaultValue: 200 },
+        maxColumns: { control: 'number' },
+    },
+    args: GridColumn.defaultProps,
+    render: ({ nbItems = 5, ...props }) => <GridColumn {...props}>{getItems(nbItems)}</GridColumn>,
+};
+
+/**
+ * Default grid column displaying a single column
+ */
+export const Default = {};
+
+/**
+ * Grid column with max 4 columns (responsive)
+ */
+export const Columns = {
+    args: { maxColumns: 4 },
+};