@lumx/react 3.20.1-alpha.1 → 3.20.1-alpha.11

package/src/stories/generated/RadioButton/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/radio-button/RadioButton Demos' };
-
-export { App as Default } from './default';

package/src/stories/generated/Select/Demos.stories.tsx

@@ -1,14 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/select/Select Demos' };
-
-export { App as MultiSelectChip } from './multi-select-chip';
-export { App as MultiSelectSearch } from './multi-select-search';
-export { App as MultiSelect } from './multi-select';
-export { App as SelectChip } from './select-chip';
-export { App as SingleSelectSearch } from './single-select-search';
-export { App as SingleSelect } from './single-select';
-export { App as StateDisabled } from './state-disabled';
-export { App as StateInvalid } from './state-invalid';
-export { App as StateValid } from './state-valid';

package/src/stories/generated/SideNavigation/Demos.stories.tsx

@@ -1,10 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/side-navigation/SideNavigation Demos' };
-
-export { App as Default } from './default';
-export { App as Emphasis } from './emphasis';
-export { App as Nested } from './nested';
-export { App as States } from './states';
-export { App as WithIcon } from './with-icon';

package/src/stories/generated/Skeleton/Demos.stories.tsx

@@ -1,9 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/skeleton/Skeleton Demos' };
-
-export { App as Animation } from './animation';
-export { App as Circle } from './circle';
-export { App as Rectangle } from './rectangle';
-export { App as Typography } from './typography';

package/src/stories/generated/Slider/Demos.stories.tsx

@@ -1,9 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/slider/Slider Demos' };
-
-export { App as Default } from './default';
-export { App as Precision } from './precision';
-export { App as Steps } from './steps';
-export { App as WithoutMinMax } from './without-min-max';

package/src/stories/generated/Slideshow/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/slideshow/Slideshow Demos' };
-
-export { App as Auto } from './auto';
-export { App as Default } from './default';
-export { App as Group } from './group';

package/src/stories/generated/Switch/Demos.stories.tsx

@@ -1,6 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/switch/Switch Demos' };
-
-export { App as Default } from './default';

package/src/stories/generated/Table/Demos.stories.tsx

@@ -1,7 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/table/Table Demos' };
-
-export { App as Clickable } from './clickable';
-export { App as Default } from './default';

package/src/stories/generated/Tabs/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/tabs/Tabs Demos' };
-
-export { App as Default } from './default';
-export { App as IconTabs } from './icon-tabs';
-export { App as LeftTabs } from './left-tabs';

package/src/stories/generated/TextField/Demos.stories.tsx

@@ -1,20 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/text-field/TextField Demos' };
-
-export { App as CharacterCounter } from './character-counter';
-export { App as Clearable } from './clearable';
-export { App as Default } from './default';
-export { App as Disabled } from './disabled';
-export { App as Helper } from './helper';
-export { App as Icon } from './icon';
-export { App as Invalid } from './invalid';
-export { App as Number } from './number';
-export { App as Placeholder } from './placeholder';
-export { App as Required } from './required';
-export { App as TextAreaInvalid } from './text-area-invalid';
-export { App as TextAreaValid } from './text-area-valid';
-export { App as TextArea } from './text-area';
-export { App as Valid } from './valid';
-export { App as WithChips } from './with-chips';

package/src/stories/generated/Thumbnail/Demos.stories.tsx

@@ -1,12 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/thumbnail/Thumbnail Demos' };
-
-export { App as Combined } from './combined';
-export { App as ErrorFallback } from './error-fallback';
-export { App as Error } from './error';
-export { App as Loading } from './loading';
-export { App as Ratios } from './ratios';
-export { App as Sizes } from './sizes';
-export { App as Variants } from './variants';

package/src/stories/generated/Toolbar/Demos.stories.tsx

@@ -1,10 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/toolbar/Toolbar Demos' };
-
-export { App as Back } from './back';
-export { App as Default } from './default';
-export { App as Dialog } from './dialog';
-export { App as FileWidget } from './file-widget';
-export { App as MediaPicker } from './media-picker';

package/src/stories/generated/Tooltip/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/tooltip/Tooltip Demos' };
-
-export { App as Default } from './default';
-export { App as Delay } from './delay';
-export { App as Placement } from './placement';

package/src/stories/generated/Uploader/Demos.stories.tsx

@@ -1,8 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/uploader/Uploader Demos' };
-
-export { App as Avatar } from './avatar';
-export { App as Default } from './default';
-export { App as Thumbnail } from './thumbnail';

package/src/stories/generated/UserBlock/Demos.stories.tsx

@@ -1,11 +0,0 @@
-/**
- * File generated when storybook is started. Do not edit directly!
- */
-export default { title: 'LumX components/user-block/UserBlock Demos' };
-
-export { App as Extended } from './extended';
-export { App as SizeL } from './size-l';
-export { App as SizeM } from './size-m';
-export { App as SizeS } from './size-s';
-export { App as SizeXs } from './size-xs';
-export { App as Vertical } from './vertical';

package/src/stories/utils/CustomLink.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-
-/**
- * Example custom link that can be used in linkAs props.
- */
-export const CustomLink = React.forwardRef<HTMLAnchorElement, { to: string; children?: React.ReactNode }>(
-    ({ to = '#', children, ...props }, ref) => (
-        <a ref={ref} href={to} data-custom-link {...props}>
-            {children}
-        </a>
-    ),
-);
-CustomLink.displayName = 'CustomLink';

package/src/stories/utils/concatPath.tsx

@@ -1,17 +0,0 @@
-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/disableArgTypes.ts

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

package/src/stories/utils/initDemoShadowDOMPortal.ts

@@ -1,10 +0,0 @@
-/** Init a demo shadow DOM to use as portal container */
-export const initDemoShadowDOMPortal = () => {
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-    const container = div.attachShadow({ mode: 'open' });
-    const style = document.createElement('style');
-    style.innerText = `button { color: red; }`;
-    container.appendChild(style);
-    return { container, teardown: () => div.remove() };
-};

package/src/stories/utils/lorem.ts

@@ -1,59 +0,0 @@
-const tiny = `Lorem ipsum quisque tincidunt lobortis dui non auctor. Donec porta, ligula volutpat
-vehicula aliquet, dui sapien tempus felis, sed.`;
-const short = `${tiny} Ullamco laboris nisi ut aliquid ex ea
-commodi consequat. Inmensae subtilitatis, obscuris et malesuada fames. Me non paenitet nullum
-festiviorem excogitasse ad hoc. Cum ceteris in veneratione tui montes, nascetur mus. Etiam
-habebis sem dicantur magna mollis euismod. Quis aute iure reprehenderit in voluptate velit esse.
-Phasellus laoreet lorem vel dolor tempus vehicula. Ambitioni dedisse scripsisse iudicaretur.
-Paullum deliquit, ponderibus modulisque suis ratio utitur. Ab illo tempore, ab est sed
-immemorabili. Nec dubitamus multa iter quae et nos invenerat.`;
-const long = `${short} Tu quoque, Brute, fili mi, nihil
-timor populi, nihil! Morbi fringilla convallis sapien, id pulvinar odio volutpat. Cras mattis
-iudicium purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
-Quisque ut dolor gravida, placerat libero vel, euismod. Unam incolunt Belgae, aliam Aquitani,
-tertiam. Cras mattis iudicium purus sit amet fermentum. Prima luce, cum quibus mons aliud
-consensu ab eo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Petierunt uti sibi
-concilium totius Galliae in diem certam indicere. Etiam habebis sem dicantur magna mollis
-euismod. A communi observantia non est recedendum. Ut enim ad minim veniam, quis nostrud
-exercitation. Paullum deliquit, ponderibus modulisque suis ratio utitur. Hi omnes lingua,
-institutis, legibus inter se differunt. Magna pars studiorum, prodita quaerimus. Quisque ut
-dolor gravida, placerat libero vel, euismod. Tityre, tu patulae recubans sub tegmine fagi dolor.
-Excepteur sint obcaecat cupiditat non proident culpa. Plura mihi bona sunt, inclinet, amari
-petere vellent. Quae vero auctorem tractata ab fiducia dicuntur. Inmensae subtilitatis, obscuris
-et malesuada fames. Quo usque tandem abutere, Catilina, patientia nostra? Nihilne te nocturnum
-praesidium Palati, nihil urbis vigiliae. Curabitur blandit tempus ardua ridiculus sed magna. Tu
-quoque, Brute, fili mi, nihil timor populi, nihil! Nihil hic munitissimus habendi senatus locus,
-nihil horum?Tu quoque, Brute, fili mi, nihil timor populi, nihil! Tityre, tu patulae recubans
-sub tegmine fagi dolor. Plura mihi bona sunt, inclinet, amari petere vellent. Ullamco laboris
-nisi ut aliquid ex ea commodi consequat. Pellentesque habitant morbi tristique senectus et
-netus. Salutantibus vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur
-adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Petierunt uti sibi
-concilium totius Galliae in diem certam indicere. Contra legem facit qui id facit quod lex
-prohibet. Integer legentibus erat a ante historiarum dapibus. Petierunt uti sibi concilium
-totius Galliae in diem certam indicere. Ab illo tempore, ab est sed immemorabili. Nihil hic
-munitissimus habendi senatus locus, nihil horum? Quisque ut dolor gravida, placerat libero vel,
-euismod. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut
-labore et dolore magna aliqua. Nec dubitamus multa iter quae et nos invenerat. Quam temere in
-vitiis, legem sancimus haerentia. Donec sed odio operae, eu vulputate felis rhoncus. Idque
-Caesaris facere voluntate liceret: sese habere. Paullum deliquit, ponderibus modulisque suis
-ratio utitur. Quae vero auctorem tractata ab fiducia dicuntur. Gallia est omnis divisa in partes
-tres, quarum. Etiam habebis sem dicantur magna mollis euismod. Fabio vel iudice vincam, sunt in
-culpa qui officia. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor
-incidunt ut labore et dolore magna aliqua. Tu quoque, Brute, fili mi, nihil timor populi, nihil!
-Integer legentibus erat a ante historiarum dapibus. Tityre, tu patulae recubans sub tegmine fagi
-dolor. Ullamco laboris nisi ut aliquid ex ea commodi consequat. Idque Caesaris facere voluntate
-liceret: sese habere. Quid securi etiam tamquam eu fugiat nulla pariatur. Pellentesque habitant
-morbi tristique senectus et netus. Ut enim ad minim veniam, quis nostrud exercitation. Petierunt
-uti sibi concilium totius Galliae in diem certam indicere. Curabitur est gravida et libero vitae
-dictum. Qui ipsorum lingua Celtae, nostra Galli appellantur. Quam temere in vitiis, legem
-sancimus haerentia. Phasellus laoreet lorem vel dolor tempus vehicula. Ab illo tempore, ab est
-sed immemorabili. Praeterea iter est quasdam res quas ex communi. Quo usque tandem abutere,
-Catilina, patientia nostra? Non equidem invideo, miror magis posuere velit aliquet. Excepteur
-sint obcaecat cupiditat non proident culpa. Curabitur blandit tempus ardua ridiculus sed magna.
-Plura mihi bona sunt, inclinet, amari petere vellent. Quae vero auctorem tractata ab fiducia
-dicuntur. Me non paenitet nullum festiviorem excogitasse ad hoc. Unam incolunt Belgae, aliam
-Aquitani, tertiam.`;
-
-const types = { tiny, short, long } as const;
-
-export const loremIpsum = (type: keyof typeof types): string => types[type];

package/src/stories/utils/theming.tsx

@@ -1,166 +0,0 @@
-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' || argValue === 'low') &&
-                            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} />
-            </>
-        );
-    };
-}

package/src/stories/utils/toFlattenProps.ts

@@ -1,28 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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;
-}

package/src/testing/utils/ThemeSentinel.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-
-const TEST_ID = 'theme-sentinel';
-
-/** Test component used as sentinel to detect the value of the theme context */
-export function ThemeSentinel() {
-    const theme = useTheme();
-    return <div data-testid={TEST_ID} className={`--theme-${theme}`} />;
-}
-ThemeSentinel.testId = TEST_ID;