@lumx/react 3.1.4 → 3.2.0

package/src/components/tooltip/Tooltip.stories.tsx

@@ -1,86 +1,62 @@
-import { mdiHelp, mdiPrinter } from '@lumx/icons';
-import {
-    Button,
-    Dialog,
-    Dropdown,
-    FlexBox,
-    Icon,
-    IconButton,
-    Orientation,
-    Placement,
-    Size,
-    Switch,
-    Tooltip,
-} from '@lumx/react';
-import { select, text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import range from 'lodash/range';
-import React, { Fragment, useRef, useState } from 'react';
+import { Button, Dialog, Dropdown, Placement, Tooltip } from '@lumx/react';
+import React, { useState } from 'react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
 
-export default { title: 'LumX components/tooltip/Tooltip' };
+const placements = [Placement.TOP, Placement.BOTTOM, Placement.RIGHT, Placement.LEFT];
 
-export const ForceOpen = () => {
-    return (
-        <Tooltip
-            forceOpen
-            placement={select(
-                'placement',
-                [Placement.TOP, Placement.BOTTOM, Placement.RIGHT, Placement.LEFT],
-                Placement.TOP,
-            )}
-            label={text('label', 'Tooltip label')}
-        >
-            <Button>Button</Button>
-        </Tooltip>
-    );
+export default {
+    title: 'LumX components/tooltip/Tooltip',
+    component: Tooltip,
+    args: Tooltip.defaultProps,
+    argTypes: {
+        placement: getSelectArgType(placements),
+    },
+    decorators: [
+        // Force minimum chromatic screen size to make sure the dialog appears in view.
+        withChromaticForceScreenSize(),
+    ],
 };
 
-export const InlineTooltip = () => (
-    <div className="lumx-spacing-margin-huge">
-        Some text with a
-        <Tooltip label="extremely complex and difficult to follow" forceOpen>
-            <abbr style={{ borderBottom: '1px dotted', margin: '0 4px' }}>convoluted</abbr>
-        </Tooltip>
-        word in it. And some text with a contextual help at the end
-        <Tooltip
-            label="A contextual help is help that is displayed in your product or web site"
-            placement={Placement.TOP}
-            forceOpen
-        >
-            <Icon icon={mdiHelp} size={Size.xxs} style={{ display: 'inline-block', verticalAlign: 'super' }} />
-        </Tooltip>
-        .
-    </div>
-);
+/** Simple tooltip on a button*/
+export const OnAButton = {
+    args: {
+        label: 'Tooltip label',
+        children: <Button>Button</Button>,
+    },
+};
 
-export const MultilineTooltip = () => (
-    <>
-        <Tooltip label="Only one sentence.">
-            <Button>One line</Button>
-        </Tooltip>
-        <Tooltip label={'First sentence.\nSecond sentence.\nThird sentence.\n'}>
-            <Button>Multiline</Button>
-        </Tooltip>
-    </>
-);
+/** Simple tooltip on a button*/
+export const OnADisabledButton = {
+    args: {
+        ...OnAButton.args,
+        children: <Button isDisabled>Button</Button>,
+    },
+};
 
-export const EmptyTooltip = () => (
-    <>
-        <Tooltip label="">
-            <Button>Empty</Button>
-        </Tooltip>
-        <Tooltip label={false}>
-            <Button>Conditionnaly not displayed</Button>
-        </Tooltip>
-    </>
-);
+/** Forcing the tooltip to appear */
+export const ForceOpen = {
+    args: {
+        ...OnAButton.args,
+        forceOpen: true,
+    },
+};
+
+/** Display a multiline tooltip */
+export const MultilineTooltip = {
+    args: {
+        ...OnAButton.args,
+        label: 'First sentence.\nSecond sentence.\nThird sentence.\n',
+    },
+};
 
-export const TooltipWithDropdown = () => {
+/** Tooltip should hide when a dropdown opens */
+export const TooltipWithDropdown = (props: any) => {
     const [button, setButton] = useState<HTMLElement | null>(null);
     const [isOpen, setOpen] = useState(false);
     return (
         <>
-            <Tooltip label={!isOpen && 'Tooltip'} placement="top">
+            <Tooltip label={!isOpen && 'Tooltip'} {...props}>
                 <Button ref={setButton} onClick={() => setOpen((o) => !o)}>
                     Anchor
                 </Button>
@@ -92,66 +68,16 @@ export const TooltipWithDropdown = () => {
     );
 };
 
-export const TooltipOnDisabledButton = () => {
-    const [disabled, setDisabled] = useState(false);
-
-    return (
-        <>
-            <Switch isChecked={disabled} onChange={setDisabled}>
-                Toggle button disabled
-            </Switch>
-            <Tooltip label="Tooltip on disabled button">
-                <Button isDisabled={disabled} onClick={noop}>
-                    Click to disable button
-                </Button>
-            </Tooltip>
-        </>
-    );
-};
-
-export const TooltipOnDifferentComponents = () => {
-    return (
-        <FlexBox orientation={Orientation.horizontal} className="lumx-spacing-margin-top-huge">
-            <FlexBox fillSpace />
-            <FlexBox fillSpace>
-                <Tooltip forceOpen label="Tooltip on Button">
-                    <Button>Button</Button>
-                </Tooltip>
-            </FlexBox>
-            <FlexBox fillSpace>
-                <IconButton icon={mdiPrinter} label="Tooltip on IconButton" tooltipProps={{ forceOpen: true }} />
-            </FlexBox>
-            <FlexBox fillSpace>
-                <Tooltip forceOpen label="Tooltip on Icon">
-                    <Icon icon={mdiPrinter} style={{ display: 'inline-block' }} />
-                </Tooltip>
-            </FlexBox>
-            <FlexBox fillSpace>
-                <Tooltip forceOpen label="Tooltip on shaped Icon">
-                    <Icon icon={mdiPrinter} hasShape />
-                </Tooltip>
-            </FlexBox>
-            <FlexBox fillSpace>
-                <Tooltip forceOpen label="Tooltip on word">
-                    <span>word</span>
-                </Tooltip>
-            </FlexBox>
-        </FlexBox>
-    );
-};
-
+/** Tooltip should hide when the anchor is hidden */
 export const HideTooltipOnHiddenAnchor = () => {
-    const anchorRef = useRef(null);
     const [isOpen, setOpen] = useState(false);
     return (
         <>
-            The tooltip should show when the button is hovered but it should disappear when the popover get in-between
+            The tooltip should show when the button is hovered but it should disappear when the dialog get in-between
             the mouse and the button
             <br />
             <Tooltip label="Tooltip label">
-                <Button ref={anchorRef} onClick={() => setOpen((wasOpen) => !wasOpen)}>
-                    Open popover
-                </Button>
+                <Button onClick={() => setOpen((wasOpen) => !wasOpen)}>Open dialog</Button>
             </Tooltip>
             <Dialog isOpen={isOpen} onClose={() => setOpen(false)}>
                 Dialog
@@ -159,14 +85,3 @@ export const HideTooltipOnHiddenAnchor = () => {
         </>
     );
 };
-
-export const StressTest = () => {
-    return range(1000).map((i) => (
-        <Fragment key={i}>
-            <Tooltip label={`Label ${i}`}>
-                <Button>Button {i}</Button>
-            </Tooltip>
-            <br />
-        </Fragment>
-    ));
-};

package/src/components/user-block/UserBlock.stories.tsx

@@ -1,76 +1,87 @@
 import React from 'react';
 
 import { mdiStar } from '@lumx/icons';
-import { Badge, ColorPalette, Icon, Size } from '@lumx/react';
-import { avatarImageKnob } from '@lumx/react/stories/knobs/image';
+import { Badge, ColorPalette, Icon, Orientation, Size } from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 
+import { AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { UserBlock } from './UserBlock';
 
-export default { title: 'LumX components/user-block/UserBlock' };
-
-const logAction = (action: string) => () => console.log(action);
 const sizes = [Size.s, Size.m, Size.l];
 
-export const Default = ({ theme }: any) => (
-    <UserBlock
-        theme={theme}
-        name="Emmitt O. Lum"
-        fields={['Creative developer', 'Denpasar']}
-        avatarProps={{ image: avatarImageKnob() }}
-        onMouseEnter={logAction('Mouse entered')}
-        onMouseLeave={logAction('Mouse left')}
-    />
-);
+export default {
+    title: 'LumX components/user-block/UserBlock',
+    component: UserBlock,
+    args: UserBlock.defaultProps,
+    argTypes: {
+        size: getSelectArgType(sizes),
+        orientation: getSelectArgType(Orientation),
+    },
+};
+
+/** Only an avatar */
+export const AvatarOnly = {
+    args: { avatarProps: { image: AVATAR_IMAGES.avatar1 } },
+};
+
+/** Avatar and name */
+export const AvatarAndName = {
+    args: { ...AvatarOnly.args, name: 'Emmitt O. Lum' },
+};
+
+/** Avatar, name and secondary fields */
+export const AvatarAndNameAndSecondaryFields = {
+    args: { ...AvatarAndName.args, fields: ['Creative developer', 'Denpasar'] },
+};
 
-export const Sizes = ({ theme }: any) =>
-    sizes.map((size) => (
-        <UserBlock
-            key={size}
-            theme={theme}
-            name="Emmitt O. Lum"
-            fields={['Creative developer', 'Denpasar']}
-            avatarProps={{ image: avatarImageKnob() }}
-            size={size}
-            onMouseEnter={logAction('Mouse entered')}
-            onMouseLeave={logAction('Mouse left')}
-        />
-    ));
+/** Size variants */
+export const SizesAndOrientations = {
+    ...AvatarAndNameAndSecondaryFields,
+    decorators: [
+        withCombinations({
+            combinations: {
+                rows: { key: 'size', options: sizes },
+                cols: { key: 'orientation', options: Object.values(Orientation) },
+            },
+        }),
+    ],
+};
 
-export const Clickable = ({ theme }: any) => {
-    const baseProps = {
-        theme,
-        name: 'Emmitt O. Lum',
-        nameProps: { 'aria-label': 'Emmitt O. Lum - open user profile' },
-        fields: ['Creative developer', 'Denpasar'],
-        avatarProps: { image: avatarImageKnob() },
-    } as any;
-    return (
-        <>
-            <p>As a button</p>
-            <UserBlock {...baseProps} onClick={logAction('UserBlock clicked')} />
+/** Setting `onClick` to use it as a button */
+export const AsButton = {
+    ...AvatarAndNameAndSecondaryFields,
+    argTypes: { onClick: { action: true } },
+};
 
-            <p>As a link</p>
-            <UserBlock {...baseProps} linkProps={{ href: 'https://example.com' }} />
+/** Setting the `linkProps` prop to use it as a link */
+export const AsLink = {
+    args: {
+        ...AvatarAndNameAndSecondaryFields.args,
+        linkProps: { href: 'https://example.com' },
+    },
+};
 
-            <p>As a custom link component</p>
-            <UserBlock {...baseProps} linkAs={CustomLink} />
-        </>
-    );
+/** Setting the `linkAs` prop to inject a custom link component */
+export const AsCustomLink = {
+    args: {
+        ...AvatarAndNameAndSecondaryFields.args,
+        linkAs: CustomLink,
+    },
 };
 
-export const WithBadge = ({ theme }: any) => (
-    <UserBlock
-        theme={theme}
-        name="Emmitt O. Lum"
-        fields={['Creative developer', 'Denpasar']}
-        avatarProps={{
-            image: avatarImageKnob(),
+/** Setting the `avatarProps.badge` prop to inject a badge */
+export const WithBadge = {
+    args: {
+        ...AvatarAndNameAndSecondaryFields.args,
+        avatarProps: {
+            ...AvatarAndNameAndSecondaryFields.args.avatarProps,
             badge: (
                 <Badge color={ColorPalette.blue}>
                     <Icon icon={mdiStar} />
                 </Badge>
             ),
-        }}
-    />
-);
+        },
+    },
+};

package/src/components/user-block/UserBlock.test.tsx

@@ -3,10 +3,8 @@ import React, { ReactElement } from 'react';
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
-import { commonTestsSuite, itShouldRenderStories, Wrapper } from '@lumx/react/testing/utils';
-
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
 import { UserBlock, UserBlockProps } from './UserBlock';
-import * as stories from './UserBlock.stories';
 
 const CLASSNAME = UserBlock.className as string;
 
@@ -24,8 +22,6 @@ const setup = ({ ...propsOverride }: Partial<UserBlockProps> = {}, shallowRender
 describe(`<${UserBlock.displayName}>`, () => {
     // 1. Test render via snapshot.
     describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, UserBlock);
-
         it('should forward name props', () => {
             const { wrapper } = setup({ name: 'John Doe', nameProps: { 'data-custom-attribute': true } });
 

package/src/index.ts

@@ -34,6 +34,7 @@ export * from './components/link-preview';
 export * from './components/list';
 export * from './components/message';
 export * from './components/mosaic';
+export * from './components/navigation';
 export * from './components/notification';
 export * from './components/popover';
 export * from './components/popover-dialog';

package/src/stories/controls/color.ts

@@ -0,0 +1,6 @@
+import { ColorPalette, ColorVariant } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+
+export const ALL_COLORS = Object.values(ColorPalette);
+export const colorArgType = getSelectArgType(ALL_COLORS);
+export const colorVariantArgType = getSelectArgType(ColorVariant);

package/src/stories/controls/element.ts

@@ -0,0 +1,6 @@
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { HeadingElement, TextElement } from '@lumx/react';
+
+export const HEADING_ELEMENTS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as HeadingElement[];
+export const headingElementArgType = getSelectArgType<HeadingElement>(HEADING_ELEMENTS);
+export const textElementArgType = getSelectArgType<TextElement>(['p', 'span', ...HEADING_ELEMENTS]);

package/src/stories/controls/focusPoint.ts

@@ -0,0 +1 @@
+export const focusPoint = { control: { type: 'range', min: -1, max: 1, step: 0.01 } };

package/src/stories/controls/icons.ts

@@ -0,0 +1,6 @@
+import * as icons from '@lumx/icons';
+
+export const iconArgType = {
+    control: { type: 'select' },
+    options: icons,
+};

package/src/stories/{knobs → controls}/image.ts

@@ -1,4 +1,4 @@
-import { select } from '@storybook/addon-knobs';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 
 const avatar1 = '/demo-assets/avatar1.jpg';
 const avatar2 = '/demo-assets/avatar2.jpg';
@@ -19,23 +19,13 @@ export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
 export const SQUARE_IMAGES = { square1, square2 };
 export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
 export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
-
 export const IMAGES = { ...LANDSCAPE_IMAGES, ...PORTRAIT_IMAGES, ...SQUARE_IMAGES, ...AVATAR_IMAGES };
 
-export const avatarImageKnob = (name = 'Avatar', value = Object.values(AVATAR_IMAGES)[0], groupId?: string) =>
-    select(name, AVATAR_IMAGES, value, groupId);
-
-export const landscapeImageKnob = (name = 'Image', value = Object.values(LANDSCAPE_IMAGES)[0], groupId?: string) =>
-    select(name, LANDSCAPE_IMAGES, value, groupId);
-
-export const portraitImageKnob = (name = 'Image', value = Object.values(PORTRAIT_IMAGES)[0], groupId?: string) =>
-    select(name, PORTRAIT_IMAGES, value, groupId);
-
-export const squareImageKnob = (name = 'Image', value = Object.values(SQUARE_IMAGES)[0], groupId?: string) =>
-    select(name, SQUARE_IMAGES, value, groupId);
-
-export const imageKnob = (name = 'Image', value = Object.values(IMAGES)[0], groupId?: string) =>
-    select(name, IMAGES, value, groupId);
+export const avatarImageArgType = getSelectArgType(AVATAR_IMAGES);
+export const squareImageArgType = getSelectArgType(SQUARE_IMAGES);
+export const landscapeImageArgType = getSelectArgType(LANDSCAPE_IMAGES);
+export const portraitImageArgType = getSelectArgType(PORTRAIT_IMAGES);
+export const imageArgType = getSelectArgType(IMAGES);
 
 type Size = { width: number; height: number };
 

package/src/stories/controls/selectArgType.ts

@@ -0,0 +1,4 @@
+export const getSelectArgType = <E>(options: Array<E> | Record<string, E>) => ({
+    control: { type: 'select' },
+    options,
+});

package/src/stories/controls/theme.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@lumx/react';
+
+export const themeArgType = { control: 'inline-radio', options: Theme };

package/src/stories/controls/typography.ts

@@ -0,0 +1,5 @@
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { TypographyCustom, TypographyInterface } from '@lumx/react';
+
+export const ALL_TYPOGRAPHY = [...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
+export const allTypographyArgType = getSelectArgType(ALL_TYPOGRAPHY);

package/src/stories/controls/withUndefined.ts

@@ -0,0 +1 @@
+export const withUndefined = <E>(options: Array<E> | Record<string, E>) => [undefined, ...Object.values(options)];

package/src/stories/decorators/withChromaticForceScreenSize.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import isChromatic from 'chromatic/isChromatic';
+
+/** Story decorator used to force a minimum screen size when running in chromatic */
+export const withChromaticForceScreenSize = () => {
+    // eslint-disable-next-line react/display-name
+    return (story: any) => (isChromatic() ? <div style={{ minWidth: 1200, minHeight: 800 }}>{story()}</div> : story());
+};

package/src/stories/decorators/withCombinations.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable react/display-name,jsx-a11y/control-has-associated-label */
+import React from 'react';
+import isEmpty from 'lodash/isEmpty';
+
+type PropCombination = Record<string, Record<string, unknown>>;
+type PropArrayCombination = { key: string; options: Array<any> };
+type Combination = PropArrayCombination | PropCombination;
+
+const toProps = <E,>(arr: Array<E>, prop: string) =>
+    Object.fromEntries(arr.map((value) => [value || '', { [prop]: value }]));
+
+const isArrayConfig = (c?: Combination): c is PropArrayCombination => !!c?.key;
+
+function formatProps(config?: Combination): PropCombination {
+    if (isEmpty(config)) return { '': {} };
+    if (isArrayConfig(config)) return toProps(config.options, config.key);
+    return config as PropCombination;
+}
+
+/**
+ * SB decorator generating a tables of combination of props (max 3 levels of props)
+ */
+export const withCombinations = ({
+    combinations,
+    tableStyle,
+    firstColStyle,
+    cellStyle,
+    combinator = Object.assign,
+}: {
+    /** Props combinations */
+    combinations: {
+        rows?: Combination;
+        cols?: Combination;
+        sections?: Combination;
+    };
+    /** Inject style on table */
+    tableStyle?: React.CSSProperties;
+    /** Inject style on first col */
+    firstColStyle?: React.CSSProperties;
+    /** Inject style on cells */
+    cellStyle?: React.CSSProperties;
+    /** Combinator function */
+    combinator?: (a: any, b: any) => any;
+}) => (Story: any, ctx: any) => {
+    const rows = formatProps(combinations.rows);
+    const cols = formatProps(combinations.cols);
+    const sections = formatProps(combinations.sections);
+
+    return (
+        <>
+            {Object.entries(sections).map(([level2Key, level2Value]) => (
+                <div key={level2Key}>
+                    {level2Key && <h2>{level2Key}</h2>}
+
+                    <table style={{ ...tableStyle, borderCollapse: 'separate', borderSpacing: 8 }}>
+                        {combinations.cols && (
+                            <thead>
+                                <tr>
+                                    <th />
+                                    {Object.keys(cols).map((key) => (
+                                        <th key={key}>
+                                            <small>{key}</small>
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                        )}
+                        <tbody>
+                            {Object.entries(rows).map(([level0Key, level0Value], i1) => (
+                                <tr key={i1}>
+                                    <th style={{ ...firstColStyle, textAlign: 'left' }}>
+                                        <small>{level0Key}</small>
+                                    </th>
+                                    {Object.entries(cols).map(([level1Key, level1Value]) => {
+                                        const args = [level0Value, level1Value, level2Value].reduce(
+                                            (acc, value) => combinator(acc, value),
+                                            { ...ctx.args },
+                                        );
+                                        return (
+                                            <td
+                                                key={level1Key}
+                                                style={{
+                                                    textAlign: combinations.cols ? 'center' : undefined,
+                                                    ...cellStyle,
+                                                }}
+                                            >
+                                                <Story args={args} />
+                                            </td>
+                                        );
+                                    })}
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            ))}
+        </>
+    );
+};

package/src/stories/decorators/withNestedProps.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import set from 'lodash/set';
+
+/**
+ * Convert flattened props into nested props
+ *
+ * @example: toNestedProps({ 'foo.bar': 4 }) => { foo: { bar: 4 } }
+ */
+export function toNestedProps(flattenedProps: Record<string, any>): Record<string, any> {
+    const props = {};
+    for (const [key, value] of Object.entries(flattenedProps)) {
+        set(props, key, value);
+    }
+    return props;
+}
+
+/**
+ * SB decorator converting args from flattened props to nested props
+ */
+export const withNestedProps = () => {
+    // eslint-disable-next-line react/display-name
+    return (Story: any, ctx: any) => <Story args={toNestedProps(ctx.args)} />;
+};

package/src/stories/{withResizableBox.tsx → decorators/withResizableBox.tsx}

@@ -1,18 +1,14 @@
-import React from 'react';
+import { withWrapper } from './withWrapper';
 
 /** Storybook decorator wrapping story in a resizable box  */
-// eslint-disable-next-line react/display-name
-export const withResizableBox = ({ width = 150, height = 50 } = {}) => (Story: any) => (
-    <div
-        style={{
+export const withResizableBox = ({ width = 150, height = 50 } = {}) =>
+    withWrapper({
+        style: {
             display: 'flex',
             width,
             height,
             border: '1px solid red',
             resize: 'both',
             overflow: 'hidden',
-        }}
-    >
-        <Story />
-    </div>
-);
+        },
+    });

package/src/stories/decorators/withValueOnChange.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import over from 'lodash/over';
+import identity from 'lodash/identity';
+
+export const withValueOnChange = ({
+    valueProp = 'value',
+    valueTransform = identity,
+}: {
+    valueProp?: string;
+    valueTransform?: (v: any) => any;
+} = {}) => {
+    // eslint-disable-next-line react/display-name
+    return (Story: any, ctx: any) => {
+        const [value, onChange] = React.useState(ctx.args[valueProp]);
+        const args = { ...ctx.args, onChange: over([onChange, ctx.args.onChange]), [valueProp]: valueTransform(value) };
+        return <Story args={args} />;
+    };
+};