@lumx/react 3.9.5 → 3.9.6-alpha.0

package/src/stories/controls/icons.ts

@@ -1,6 +1,125 @@
-import * as icons from '@lumx/icons';
+import {
+    mdiAbTesting,
+    mdiAbjadArabic,
+    mdiAccount,
+    mdiAccountBox,
+    mdiAlert,
+    mdiAlertCircle,
+    mdiArrowDown,
+    mdiArrowUp,
+    mdiAtom,
+    mdiBee,
+    mdiBell,
+    mdiBullhornOutline,
+    mdiCheck,
+    mdiCheckCircle,
+    mdiChevronDown,
+    mdiChevronLeft,
+    mdiChevronRight,
+    mdiChevronUp,
+    mdiClose,
+    mdiCloseCircle,
+    mdiDelete,
+    mdiDotsHorizontal,
+    mdiDragVertical,
+    mdiEarth,
+    mdiEmail,
+    mdiEye,
+    mdiFileEdit,
+    mdiFlag,
+    mdiFolder,
+    mdiFolderGoogleDrive,
+    mdiFoodApple,
+    mdiGoogleCirclesExtended,
+    mdiHeart,
+    mdiHome,
+    mdiImageBroken,
+    mdiInformation,
+    mdiLink,
+    mdiMagnifyMinusOutline,
+    mdiMagnifyPlusOutline,
+    mdiMenuDown,
+    mdiMessageTextOutline,
+    mdiMinus,
+    mdiOpenInNew,
+    mdiPauseCircleOutline,
+    mdiPencil,
+    mdiPlay,
+    mdiPlayCircleOutline,
+    mdiPlus,
+    mdiRadioboxBlank,
+    mdiRadioboxMarked,
+    mdiReply,
+    mdiSend,
+    mdiStar,
+    mdiTextBox,
+    mdiTextBoxPlus,
+    mdiTram,
+    mdiTranslate,
+    mdiViewList,
+} from '@lumx/icons';
 
+// Small selection of mdi icons to
 export const iconArgType = {
     control: { type: 'select' },
-    options: icons,
+    options: {
+        mdiAbTesting,
+        mdiAbjadArabic,
+        mdiAccount,
+        mdiAccountBox,
+        mdiAlert,
+        mdiAlertCircle,
+        mdiArrowDown,
+        mdiArrowUp,
+        mdiAtom,
+        mdiBee,
+        mdiBell,
+        mdiBullhornOutline,
+        mdiCheck,
+        mdiCheckCircle,
+        mdiChevronDown,
+        mdiChevronLeft,
+        mdiChevronRight,
+        mdiChevronUp,
+        mdiClose,
+        mdiCloseCircle,
+        mdiDelete,
+        mdiDotsHorizontal,
+        mdiDragVertical,
+        mdiEarth,
+        mdiEmail,
+        mdiEye,
+        mdiFileEdit,
+        mdiFlag,
+        mdiFolder,
+        mdiFolderGoogleDrive,
+        mdiFoodApple,
+        mdiGoogleCirclesExtended,
+        mdiHeart,
+        mdiHome,
+        mdiImageBroken,
+        mdiInformation,
+        mdiLink,
+        mdiMagnifyMinusOutline,
+        mdiMagnifyPlusOutline,
+        mdiMenuDown,
+        mdiMessageTextOutline,
+        mdiMinus,
+        mdiOpenInNew,
+        mdiPauseCircleOutline,
+        mdiPencil,
+        mdiPlay,
+        mdiPlayCircleOutline,
+        mdiPlus,
+        mdiRadioboxBlank,
+        mdiRadioboxMarked,
+        mdiReply,
+        mdiSend,
+        mdiStar,
+        mdiTextBox,
+        mdiTextBoxPlus,
+        mdiTram,
+        mdiTranslate,
+        mdiViewList,
+    },
 };

package/src/stories/controls/selectArgType.ts

@@ -1,7 +1,8 @@
-import isPlainObject from 'lodash/isPlainObject';
-
-export const getSelectArgType = <E>(options: Array<E> | Record<string, E>) => ({
-    control: { type: 'select' },
+export const getSelectArgType = <E>(
+    options: Array<E> | Record<string, E>,
+    type: 'select' | 'inline-radio' = 'inline-radio',
+) => ({
+    control: { type },
     options: Object.values(options),
-    mapping: isPlainObject(options) ? options : undefined,
+    mapping: !Array.isArray(options) ? options : undefined,
 });

package/src/stories/decorators/withCombinations.tsx

@@ -1,22 +1,47 @@
-/* eslint-disable react/display-name,jsx-a11y/control-has-associated-label */
+/* eslint-disable react/display-name,jsx-a11y/control-has-associated-label,prefer-object-spread */
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
+import { Heading, HeadingLevelProvider } from '@lumx/react';
 
+type PropEntry = [key: string, value: unknown];
 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 toProps = <E,>(arr: Array<E>, prop: string): PropEntry[] =>
+    arr.map((value) => [String(value), { [prop]: value }]);
 
 const isArrayConfig = (c?: Combination): c is PropArrayCombination => !!c?.key;
 
-function formatProps(config?: Combination): PropCombination {
-    if (isEmpty(config)) return { '': {} };
+function toPropEntries(config?: Combination): PropEntry[] {
+    if (isEmpty(config)) return [['', {}]];
     if (isArrayConfig(config)) return toProps(config.options, config.key);
-    return config as PropCombination;
+    return Object.entries(config as PropCombination);
 }
 
+type Options = {
+    /** 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 sections */
+    sectionStyle?: React.CSSProperties;
+    /** Inject style on cols */
+    colStyle?: React.CSSProperties;
+    /** Inject style on cells */
+    cellStyle?: React.CSSProperties;
+    /** Combinator function */
+    combinator?: (a: any, b: any) => any;
+    /** Exclude a combination */
+    excludeCombination?: (args: any) => boolean;
+};
+
 /**
  * SB decorator generating a tables of combination of props (max 3 levels of props)
  */
@@ -26,76 +51,82 @@ export const withCombinations =
         tableStyle,
         firstColStyle,
         cellStyle,
+        colStyle,
+        sectionStyle,
         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;
-    }) =>
+        excludeCombination,
+    }: Options) =>
     (Story: any, ctx: any) => {
-        const rows = formatProps(combinations.rows);
-        const cols = formatProps(combinations.cols);
-        const sections = formatProps(combinations.sections);
+        const rows = toPropEntries(combinations.rows);
+        const cols = toPropEntries(combinations.cols);
+        const sections = toPropEntries(combinations.sections);
+        const hasRows = rows.length > 1;
+        const hasCols = cols.length > 1;
 
         return (
             <>
-                {Object.entries(sections).map(([level2Key, level2Value]) => (
-                    <div key={level2Key}>
-                        {level2Key && <h2>{level2Key}</h2>}
+                {sections.map(([level2Key, level2Value]) => {
+                    const sectionArgs = combinator({ ...ctx.args }, level2Value);
+                    const sectionCols = cols
+                        .map(([level1Key, level1Value]) => {
+                            const args = combinator({ ...sectionArgs }, level1Value);
+                            if (excludeCombination?.(args)) return null;
+                            return [level1Key, args];
+                        })
+                        .filter(Boolean) as Array<[string, any]>;
+                    return (
+                        <section key={level2Key} style={sectionStyle}>
+                            <HeadingLevelProvider>
+                                {level2Key && <Heading style={{ textTransform: 'capitalize' }}>{level2Key}</Heading>}
 
-                        <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>
-                ))}
+                                {hasRows || hasCols ? (
+                                    <table style={{ ...tableStyle, borderCollapse: 'separate', borderSpacing: 8 }}>
+                                        {combinations.cols && (
+                                            <thead>
+                                                <tr>
+                                                    {hasRows && <th aria-hidden />}
+                                                    {sectionCols.map(([key]) => (
+                                                        <th key={key} style={colStyle}>
+                                                            <small>{key}</small>
+                                                        </th>
+                                                    ))}
+                                                </tr>
+                                            </thead>
+                                        )}
+                                        <tbody>
+                                            {rows.map(([level0Key, level0Value], i1) => {
+                                                const rowArgs = combinator({ ...sectionArgs }, level0Value);
+                                                if (excludeCombination?.(rowArgs)) return null;
+                                                return (
+                                                    <tr key={i1}>
+                                                        {hasRows && (
+                                                            <th style={{ ...firstColStyle, textAlign: 'left' }}>
+                                                                <small>{level0Key}</small>
+                                                            </th>
+                                                        )}
+                                                        {cols.map(([level1Key, level1Value]) => {
+                                                            const args = combinator({ ...rowArgs }, level1Value);
+                                                            let render: React.ReactNode = <Story args={args} />;
+                                                            if (excludeCombination?.(args)) render = null;
+                                                            const textAlign = combinations.cols ? 'center' : undefined;
+                                                            return (
+                                                                <td key={level1Key} style={{ textAlign, ...cellStyle }}>
+                                                                    {render}
+                                                                </td>
+                                                            );
+                                                        })}
+                                                    </tr>
+                                                );
+                                            })}
+                                        </tbody>
+                                    </table>
+                                ) : (
+                                    <Story args={sectionArgs} />
+                                )}
+                            </HeadingLevelProvider>
+                        </section>
+                    );
+                })}
             </>
         );
     };

package/src/stories/decorators/withThemedBackground.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const LIGHT_BACKGROUND_COLOR = '#EEE';
+const DARK_BACKGROUND_COLOR = '#333';
+
+/**
+ * SB decorator adding a background adapted to the current theme.
+ */
+export const withThemedBackground = () => {
+    return (Story: any, { args }: any) => {
+        const backgroundColor = args.theme === 'dark' ? DARK_BACKGROUND_COLOR : LIGHT_BACKGROUND_COLOR;
+        return (
+            <div style={{ backgroundColor, padding: 8 }}>
+                <Story />
+            </div>
+        );
+    };
+};

package/src/stories/utils/disableArgTypes.ts

@@ -0,0 +1,3 @@
+export function disableArgTypes(argTypes: string[]) {
+    return Object.fromEntries(argTypes.map((argType) => [argType, { table: { disable: true } }]));
+}

package/src/stories/utils/theming.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { Predicate } from '@lumx/react/utils/type';
+import { FlexBox } from '@lumx/react';
+
+type Property = string | { value: string };
+interface PropertyTree {
+    [key: string]: PropertyTree | Property;
+}
+type Entry = [key: string, value: string];
+type Variables = Record<string, string>;
+
+function asValue(prop?: PropertyTree | Property): string | undefined {
+    if (typeof prop === 'string') {
+        return prop;
+    }
+    if (typeof prop === 'object' && 'value' in prop) {
+        return prop.value as string;
+    }
+    return undefined;
+}
+
+/** Convert property tree into a list of args entries ([key, value]) */
+function* toArgEntries(props: PropertyTree | Property, parent = ''): Iterable<Entry> {
+    const value = asValue(props);
+    if (value) {
+        yield [parent, value];
+    } else {
+        for (const [key, prop] of Object.entries(props)) {
+            const newParent = parent ? `${parent}-${key}` : key;
+            yield* toArgEntries(prop, newParent);
+        }
+    }
+}
+function* parseVariableEntries(cssString: string, strict = false) {
+    for (const line of cssString.split(/(?<=;)/)) {
+        if (!line.trim()) continue;
+        const match = line.match(/^\s*(--lumx[^:]+)\s*:\s*([^;]+);/m);
+        if (!match) {
+            if (strict) throw new Error(`Could not parse \`${line}\``);
+            else continue;
+        }
+        const [, variableName, variableValue] = match;
+        yield [variableName, variableValue];
+    }
+}
+
+function VariableEditor({
+    variable: [key, value],
+    setVariable,
+    defaultStyle,
+}: {
+    variable: Entry;
+    setVariable: (newVariable: Entry) => void;
+    defaultStyle: Variables;
+}) {
+    const onChange = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+        (evt) => {
+            setVariable([evt.target.name, evt.target.value]);
+        },
+        [setVariable],
+    );
+
+    return (
+        <FlexBox as="label" orientation="horizontal" hAlign="center" style={{ whiteSpace: 'nowrap' }}>
+            <span style={{ flexShrink: 0 }}>{key}</span>:
+            <input
+                name={key}
+                onChange={onChange}
+                style={{ border: 0, padding: 8, fieldSizing: 'content', display: 'inline' } as any}
+                value={defaultStyle[key] === value ? '' : value}
+                placeholder={value}
+            />
+            ;
+        </FlexBox>
+    );
+}
+
+function VariablesEditor({
+    style,
+    defaultStyle,
+    setStyle,
+}: {
+    style: Variables;
+    defaultStyle: Variables;
+    setStyle: (fn: (newStyle: Variables) => Variables) => void;
+}) {
+    const setVariable = React.useCallback(
+        ([key, value]: Entry) => {
+            setStyle((prevStyle) => ({ ...prevStyle, [key]: value }));
+        },
+        [setStyle],
+    );
+    return (
+        <details style={{ fontFamily: 'monospace' }} className="lumx-spacing-margin-vertical-huge">
+            <summary className="lumx-typography-subtitle2">Edit variables</summary>
+            {Object.entries(style).map((variable) => (
+                <VariableEditor
+                    key={variable[0]}
+                    defaultStyle={defaultStyle}
+                    variable={variable}
+                    setVariable={setVariable}
+                />
+            ))}
+        </details>
+    );
+}
+
+const FILTER_PROPS = ['theme', 'emphasis', 'size'];
+
+export function withTheming<P extends PropertyTree>({
+    properties,
+    values,
+}: {
+    properties?: P;
+    values?: string | Partial<P>;
+}) {
+    const initialStyle = values
+        ? Object.fromEntries(
+              typeof values === 'string'
+                  ? parseVariableEntries(values)
+                  : toArgEntries(values as PropertyTree, '--lumx'),
+          )
+        : [];
+    const defaultStyle = Object.fromEntries(properties ? Array.from(toArgEntries(properties, '--lumx')) : []);
+
+    const varNames = new Set(Object.keys(initialStyle).concat(Object.keys(defaultStyle)));
+
+    function filteredStyles(args: any) {
+        // Create predicate
+        const filterArgs = Object.entries(args)
+            .map(([argName, argValue]) => {
+                if (typeof argValue === 'string' && FILTER_PROPS.includes(argName)) {
+                    return (varName: string) =>
+                        // Has the given arg with value
+                        varName.match(new RegExp(`${argName}-${argValue}`)) ||
+                        (argName === 'emphasis' && argValue === 'medium' && varName.match(/emphasis-selected/)) ||
+                        // Or does not have the arg at all
+                        !varName.match(new RegExp(`${argName}-\\w+`));
+                }
+                return false;
+            })
+            .filter(Boolean) as Array<Predicate<string>>;
+        const styles = Object.fromEntries(
+            Array.from(varNames.values())
+                .map((varName) => {
+                    if (!filterArgs.every((filter) => filter(varName))) return null as any;
+                    return [varName, initialStyle[varName] || defaultStyle[varName]];
+                })
+                .filter(Boolean),
+        );
+        return () => styles;
+    }
+
+    return (Story: any, ctx: any) => {
+        const [style, setStyle] = React.useState<Variables>(filteredStyles(ctx.args));
+
+        return (
+            <>
+                <Story args={{ ...ctx.args, style: { ...ctx.args.style, ...style } }} />
+                <VariablesEditor style={style} defaultStyle={defaultStyle} setStyle={setStyle} />
+            </>
+        );
+    };
+}