@lumx/react 3.9.7-alpha.2 → 3.9.7-alpha.4

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.7-alpha.2",
-        "@lumx/icons": "^3.9.7-alpha.2",
+        "@lumx/core": "^3.9.7-alpha.4",
+        "@lumx/icons": "^3.9.7-alpha.4",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.7-alpha.2"
+    "version": "3.9.7-alpha.4"
 }

package/src/components/tabs/Tab.tsx

@@ -1,10 +1,12 @@
-import { Icon, IconProps, Size } from '@lumx/react';
+import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon, IconProps, Size, Text } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 
-import classNames from 'classnames';
-import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
 import { useTabProviderContext } from './state';
 
 /**
@@ -114,7 +116,11 @@ export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) =>
             aria-controls={state?.tabPanelId}
         >
             {icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}
-            {label && <span>{label}</span>}
+            {label && (
+                <Text as="span" truncate>
+                    {label}
+                </Text>
+            )}
         </button>
     );
 });

package/src/components/tabs/Tabs.stories.tsx

@@ -1,135 +1,170 @@
-import { Button, Dialog, Tab, TabList, TabPanel, TabProvider } from '@lumx/react';
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { Alignment, Button, Dialog, Tab, TabList, TabListLayout, TabPanel, TabProvider } from '@lumx/react';
+import { iconArgType } from '@lumx/react/stories/controls/icons';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
+import { toFlattenProps } from '@lumx/react/stories/utils/toFlattenProps';
+import { withCategory } from '@lumx/react/stories/utils/withCategory';
 import get from 'lodash/get';
 import times from 'lodash/times';
 import React, { useState } from 'react';
 
-export default { title: 'LumX components/tabs' };
+export default {
+    title: 'LumX components/tabs',
+    decorators: [withNestedProps()],
+    parameters: { controls: { sort: 'alpha' } },
+};
+
+/** Default tab behavior with some controllable args */
+export const Default = {
+    render: ({ theme, tabProviderProps, tabListProps, tabProps }: any) => (
+        <TabProvider {...tabProviderProps}>
+            <TabList theme={theme} aria-label="Tab list" {...tabListProps}>
+                <Tab {...tabProps[0]} />
+                <Tab {...tabProps[1]} />
+                <Tab {...tabProps[2]} />
+            </TabList>
+            <TabPanel className="lumx-spacing-padding-huge">{tabProps[0].label} content</TabPanel>
+            <TabPanel className="lumx-spacing-padding-huge">{tabProps[1].label} content</TabPanel>
+            <TabPanel className="lumx-spacing-padding-huge">{tabProps[2].label} content</TabPanel>
+        </TabProvider>
+    ),
+    args: toFlattenProps({
+        tabProps: [
+            { label: 'Tab 1' },
+            {
+                label: 'Tab 2',
+                isDisabled: true,
+            },
+            { label: 'Tab 3' },
+        ],
+    }),
+    argTypes: toFlattenProps({
+        tabProviderProps: withCategory('Tab Provider', {
+            isLazy: { control: 'boolean' },
+            shouldActivateOnFocus: { control: 'boolean' },
+        }),
+        tabListProps: withCategory('Tab List', {
+            layout: getSelectArgType(TabListLayout),
+            position: getSelectArgType([Alignment.left, Alignment.center, Alignment.right]),
+        }),
+        tabProps: times(3, (index) =>
+            withCategory(`Tab ${index + 1}`, {
+                label: { control: 'text' },
+                icon: iconArgType,
+                isDisabled: { control: 'boolean' },
+            }),
+        ),
+    }),
+};
 
 /* Control active tab externally (with activate tab on focus). */
-export const Controlled = ({ theme }: any) => {
-    const [activeTab, setActiveTab] = useState(1);
-    const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(get(evt, 'target.value', '0'), 10));
+export const Controlled = {
+    render({ theme }: any) {
+        const [activeTab, setActiveTab] = useState(1);
+        const changeActiveTabIndex = (evt: any) => setActiveTab(parseInt(get(evt, 'target.value', '0'), 10));
 
-    const [isLazy, setIsLazy] = useState(true);
-    const changeIsLazy = (evt: any) => setIsLazy(get(evt, 'target.checked'));
+        const [isLazy, setIsLazy] = useState(true);
+        const changeIsLazy = (evt: any) => setIsLazy(get(evt, 'target.checked'));
 
-    const [shouldActivateOnFocus, setShouldActivateOnFocus] = useState(true);
-    const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(get(evt, 'target.checked'));
+        const [shouldActivateOnFocus, setShouldActivateOnFocus] = useState(true);
+        const changeShouldActivateOnFocus = (evt: any) => setShouldActivateOnFocus(get(evt, 'target.checked'));
 
-    return (
-        <>
-            <div>
-                Active tab index:
-                <input type="number" min={0} max={2} value={activeTab} onChange={changeActiveTabIndex} />
-            </div>
+        return (
+            <>
+                <div>
+                    Active tab index:
+                    <input type="number" min={0} max={2} value={activeTab} onChange={changeActiveTabIndex} />
+                </div>
 
-            <div>
-                Lazy render tab panel content:
-                <input type="checkbox" checked={isLazy} onChange={changeIsLazy} />
-            </div>
+                <div>
+                    Lazy render tab panel content:
+                    <input type="checkbox" checked={isLazy} onChange={changeIsLazy} />
+                </div>
 
-            <div>
-                Activate tab on focus:
-                <input type="checkbox" checked={shouldActivateOnFocus} onChange={changeShouldActivateOnFocus} />
-            </div>
-            <TabProvider
-                activeTabIndex={activeTab}
-                onChange={setActiveTab}
-                isLazy={isLazy}
-                shouldActivateOnFocus={shouldActivateOnFocus}
-            >
-                <TabList theme={theme} aria-label="Tab list">
-                    <Tab label="Tab a" />
-                    <Tab label="Tab b" />
-                    <Tab label="Tab c" />
-                </TabList>
-
-                <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab c content</TabPanel>
-            </TabProvider>
-        </>
-    );
-};
+                <div>
+                    Activate tab on focus:
+                    <input type="checkbox" checked={shouldActivateOnFocus} onChange={changeShouldActivateOnFocus} />
+                </div>
+                <TabProvider
+                    activeTabIndex={activeTab}
+                    onChange={setActiveTab}
+                    isLazy={isLazy}
+                    shouldActivateOnFocus={shouldActivateOnFocus}
+                >
+                    <TabList theme={theme} aria-label="Tab list">
+                        <Tab label="Tab a" />
+                        <Tab label="Tab b" />
+                        <Tab label="Tab c" />
+                    </TabList>
 
-/* Control active tab internally (with activate tab on focus). */
-export const NotControlled = ({ theme }: any) => {
-    return (
-        <TabProvider shouldActivateOnFocus onChange={console.log}>
-            <TabList theme={theme} aria-label="Tab list">
-                <Tab label="Tab a" />
-                <Tab label="Tab b" />
-            </TabList>
-            <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
-            <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
-        </TabProvider>
-    );
+                    <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab c content</TabPanel>
+                </TabProvider>
+            </>
+        );
+    },
+    chromatic: { disable: true },
 };
 
 /* Display tabs far from their tab panels. */
-export const DisabledTab = ({ theme }: any) => (
-    <TabProvider shouldActivateOnFocus>
-        <TabList theme={theme} aria-label="Tab list">
-            <Tab label="Tab 1" />
-            <Tab label="Tab 2" isDisabled />
-            <Tab label="Tab 3" />
-        </TabList>
-        <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
-        <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
-        <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
-    </TabProvider>
-);
+export const SplitTabListAndTabPanels = {
+    render({ theme }: any) {
+        const [isOpen, setOpen] = useState(true);
+        const [activeTabIndex, onChange] = useState(1);
 
-/* Display tabs far from their tab panels. */
-export const SplitTabListAndTabPanels = ({ theme }: any) => {
-    const [isOpen, setOpen] = useState(true);
-    const [activeTabIndex, onChange] = useState(1);
-
-    return (
-        <TabProvider activeTabIndex={activeTabIndex} onChange={onChange} isLazy={false}>
-            <Button
-                onClick={() => {
-                    setOpen(!isOpen);
-                    onChange(1);
-                }}
-            >
-                Open dialog with tabs in footer
-            </Button>
-            <Dialog isOpen={isOpen} forceFooterDivider onClose={() => setOpen(false)}>
-                <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
-                <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
+        return (
+            <TabProvider activeTabIndex={activeTabIndex} onChange={onChange} isLazy={false}>
+                <Button
+                    onClick={() => {
+                        setOpen(!isOpen);
+                        onChange(1);
+                    }}
+                >
+                    Open dialog with tabs in footer
+                </Button>
+                <Dialog isOpen={isOpen} forceFooterDivider onClose={() => setOpen(false)}>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
+                    <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
 
-                <footer>
-                    <TabList theme={theme} aria-label="Tab list">
-                        <Tab label="Tab 1" />
-                        <Tab label="Tab 2" />
-                        <Tab label="Tab 3" />
-                    </TabList>
-                </footer>
-            </Dialog>
-        </TabProvider>
-    );
+                    <footer>
+                        <TabList theme={theme} aria-label="Tab list">
+                            <Tab label="Tab 1" />
+                            <Tab label="Tab 2" />
+                            <Tab label="Tab 3" />
+                        </TabList>
+                    </footer>
+                </Dialog>
+            </TabProvider>
+        );
+    },
+    chromatic: { disable: true },
 };
 
 /* Dynamically generate tabs. */
-export const DynamicTabs = ({ theme, tabCount }: any) => {
-    return (
-        <TabProvider>
-            <TabList theme={theme} aria-label="Tab list">
+export const DynamicTabs = {
+    render({ theme, tabCount }: any) {
+        return (
+            <TabProvider>
+                <TabList theme={theme} aria-label="Tab list">
+                    {times(tabCount, (tabNumber) => (
+                        <Tab key={tabNumber} label={`Tab ${tabNumber}`} />
+                    ))}
+                </TabList>
+
                 {times(tabCount, (tabNumber) => (
-                    <Tab key={tabNumber} label={`Tab ${tabNumber}`} />
+                    <TabPanel key={tabNumber} className="lumx-spacing-padding-huge">
+                        Tab {tabNumber} content
+                    </TabPanel>
                 ))}
-            </TabList>
-
-            {times(tabCount, (tabNumber) => (
-                <TabPanel key={tabNumber} className="lumx-spacing-padding-huge">
-                    Tab {tabNumber} content
-                </TabPanel>
-            ))}
-        </TabProvider>
-    );
-};
-DynamicTabs.args = {
-    tabCount: 3,
+            </TabProvider>
+        );
+    },
+    args: {
+        tabCount: 3,
+    },
+    chromatic: { disable: true },
 };

package/src/stories/utils/concatPath.tsx

@@ -0,0 +1,17 @@
+export type PathPart = string | number;
+export type Path = PathPart | Array<PathPart>;
+
+/**
+ * Concat flatten object path
+ *
+ * @example concatPath('foo', 'bar') // => 'foo.bar'
+ * @example concatPath(['foo', 0]) // => 'foo[0]'
+ * @example concatPath('foo', 0, ['bar']) // => 'foo[0].bar'
+ */
+export const concatPath = (...prefix: Path[]) => {
+    const [first, ...rest] = prefix.flat();
+    return rest.reduce<string>((acc, part) => {
+        if (typeof part === 'number') return `${acc}[${part}]`;
+        return `${acc}.${part}`;
+    }, String(first));
+};

package/src/stories/utils/toFlattenProps.ts

@@ -0,0 +1,28 @@
+import castArray from 'lodash/castArray';
+import { concatPath } from './concatPath';
+
+type Props = Record<string, any>;
+type OneOrMoreProps = Props | Array<Props>;
+
+/**
+ * Build a flat props object from the given nested props
+ *
+ * @example toFlattenProps({ foo: { bar: 4 } }) // => { 'foo.bar': 4 }
+ * @example toFlattenProps({ foo: [{ bar: 4 }, { bar: 5 }] }) // => { 'foo[0].bar': 4, 'foo[0].bar': 5 }
+ */
+export function toFlattenProps(props: { [prefix: string]: OneOrMoreProps }): Props {
+    const out: Props = {};
+    for (const [prefix, oneOrMoreProps] of Object.entries(props)) {
+        const propsArray = castArray(oneOrMoreProps);
+
+        for (let i = 0; i < propsArray.length; i += 1) {
+            const path = Array.isArray(oneOrMoreProps) ? concatPath(prefix, i) : prefix;
+            const subProps = propsArray[i];
+
+            for (const [key, value] of Object.entries(subProps)) {
+                out[concatPath(path, key)] = value;
+            }
+        }
+    }
+    return out;
+}

package/src/stories/utils/withCategory.ts

@@ -0,0 +1,12 @@
+import setWith from 'lodash/setWith';
+
+/**
+ * Add table.category to the provided argTypes
+ */
+export function withCategory(category: string, argTypes: Record<string, any>) {
+    const out: typeof argTypes = {};
+    for (const [key, value] of Object.entries(argTypes)) {
+        out[key] = setWith({ ...value }, 'table.category', category);
+    }
+    return out;
+}