@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/src/hooks/useTransitionVisibility.ts

@@ -0,0 +1,48 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+import { isReducedMotion } from '@lumx/react/utils/browser/isReducedMotion';
+
+/**
+ * Returns true if the component is visible tracking the opacity transition.
+ *
+ * @param ref Element on which to listen the transition event.
+ * @param isComponentVisible Whether the component intends to be visible or not.
+ * @param onVisibilityChange Callback called when the visibility changes.
+ * @return true if the component should be rendered
+ */
+export const useTransitionVisibility = (
+    ref: RefObject<HTMLElement>,
+    isComponentVisible: boolean,
+    timeout: number,
+    onVisibilityChange?: (isVisible: boolean) => void,
+) => {
+    const [isVisible, setVisible] = useState(isComponentVisible);
+    const previousVisibility = useRef(isVisible);
+
+    // On component visibility change.
+    useEffect(() => {
+        if (isComponentVisible) {
+            setVisible(true);
+            return undefined;
+        }
+        const { current: element } = ref;
+
+        // Transition event is not supported or the user prefers reduced motion.
+        // => Skip and set visibility to false directly.
+        if (!element || !window.TransitionEvent || isReducedMotion()) {
+            setVisible(false);
+            return undefined;
+        }
+
+        const timer = setTimeout(() => setVisible(false), timeout);
+        return () => clearTimeout(timer);
+    }, [isComponentVisible, ref, timeout]);
+
+    useEffect(() => {
+        if (onVisibilityChange && previousVisibility.current !== isVisible) {
+            onVisibilityChange(isVisible);
+            previousVisibility.current = isVisible;
+        }
+    }, [isVisible, onVisibilityChange]);
+
+    return isVisible || isComponentVisible;
+};

package/src/index.ts

@@ -0,0 +1,63 @@
+/**
+ * Components listed here will be exposed to NPM in '@lumx/react'.
+ */
+
+export * from '@lumx/core/js/constants';
+export * from '@lumx/core/js/types';
+
+export * from './components/alert-dialog';
+export * from './components/autocomplete';
+export * from './components/avatar';
+export * from './components/badge';
+export * from './components/button';
+export * from './components/checkbox';
+export * from './components/chip';
+export * from './components/comment-block';
+export * from './components/date-picker';
+export * from './components/dialog';
+export * from './components/divider';
+export * from './components/drag-handle';
+export * from './components/dropdown';
+export * from './components/expansion-panel';
+export * from './components/flag';
+export * from './components/flex-box';
+export * from './components/generic-block';
+export * from './components/heading';
+export * from './components/grid';
+export * from './components/grid-column';
+export * from './components/icon';
+export * from './components/image-block';
+export * from './components/image-lightbox';
+export * from './components/inline-list';
+export * from './components/input-helper';
+export * from './components/input-label';
+export * from './components/lightbox';
+export * from './components/link';
+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';
+export * from './components/post-block';
+export * from './components/progress';
+export * from './components/progress-tracker';
+export * from './components/radio-button';
+export * from './components/select';
+export * from './components/side-navigation';
+export * from './components/skeleton';
+export * from './components/slider';
+export * from './components/slideshow';
+export * from './components/switch';
+export * from './components/table';
+export * from './components/tabs';
+export * from './components/text';
+export * from './components/text-field';
+export * from './components/thumbnail';
+export * from './components/toolbar';
+export * from './components/tooltip';
+export * from './components/uploader';
+export * from './components/user-block';
+export { ThemeProvider, useTheme } from './utils/theme/ThemeContext';

package/src/stories/controls/color.ts

@@ -0,0 +1,7 @@
+import { ColorPalette, ColorVariant } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
+
+export const ALL_COLORS = Object.values(ColorPalette);
+export const colorArgType = getSelectArgType(withUndefined(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,126 @@
+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: {
+        undefined,
+        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/image.ts

@@ -0,0 +1,84 @@
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+
+const avatar1 = '/demo-assets/avatar1.jpg';
+const avatar2 = '/demo-assets/avatar2.jpg';
+const avatar3 = '/demo-assets/avatar3.jpg';
+const avatar4 = '/demo-assets/avatar4.jpg';
+const landscape1 = '/demo-assets/landscape1.jpg';
+const landscape2 = '/demo-assets/landscape2.jpg';
+const landscape1s200 = '/demo-assets/landscape1-s200.jpg';
+const landscape3 = '/demo-assets/landscape3.jpg';
+const portrait1 = '/demo-assets/portrait1.jpg';
+const portrait1s200 = '/demo-assets/portrait1-s200.jpg';
+const portrait2 = '/demo-assets/portrait2.jpg';
+const portrait3 = '/demo-assets/portrait3.jpg';
+const square1 = '/demo-assets/square1.jpg';
+const square2 = '/demo-assets/square2.jpg';
+const defaultSvg = '/demo-assets/defaultSvg.svg';
+const emptyImage = '';
+
+export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
+export const SQUARE_IMAGES = { square1, square2 };
+export const SVG_IMAGES = { defaultSvg };
+export const EMPTY_IMAGES = { emptyImage };
+export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
+export const LANDSCAPE_IMAGES_ALT: { [key in keyof typeof LANDSCAPE_IMAGES]: string } = {
+    landscape1: 'A majestic snowy mountain range with a peak covered in glistening snow',
+    landscape1s200: 'A majestic snowy mountain range with a peak covered in glistening snow',
+    landscape2: 'A colorful rack of shirts displaying various hues and styles',
+    landscape3: 'An open book resting on a table, ready to be explored and read',
+};
+export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
+export const IMAGES = {
+    ...LANDSCAPE_IMAGES,
+    ...PORTRAIT_IMAGES,
+    ...SQUARE_IMAGES,
+    ...AVATAR_IMAGES,
+    ...SVG_IMAGES,
+    ...EMPTY_IMAGES,
+};
+
+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 };
+
+export const AVATAR_IMAGE_SIZES: Record<keyof typeof AVATAR_IMAGES, Size> = {
+    avatar1: { width: 128, height: 128 },
+    avatar2: { width: 150, height: 150 },
+    avatar3: { width: 128, height: 128 },
+    avatar4: { width: 128, height: 128 },
+};
+export const SQUARE_IMAGE_SIZES: Record<keyof typeof SQUARE_IMAGES, Size> = {
+    square1: { width: 72, height: 72 },
+    square2: { width: 300, height: 300 },
+};
+export const LANDSCAPE_IMAGE_SIZES: Record<keyof typeof LANDSCAPE_IMAGES, Size> = {
+    landscape1: { width: 800, height: 546 },
+    landscape1s200: { width: 200, height: 150 },
+    landscape2: { width: 800, height: 600 },
+    landscape3: { width: 640, height: 480 },
+};
+export const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size> = {
+    portrait1: { width: 275, height: 500 },
+    portrait1s200: { width: 200, height: 364 },
+    portrait2: { width: 350, height: 500 },
+    portrait3: { width: 300, height: 500 },
+};
+export const SVG_IMAGE_SIZES: Record<keyof typeof SVG_IMAGES, Size> = {
+    defaultSvg: { width: 0, height: 0 },
+};
+export const EMPTY_IMAGES_SIZES: Record<keyof typeof EMPTY_IMAGES, Size> = {
+    emptyImage: { width: 0, height: 0 },
+};
+export const IMAGE_SIZES: Record<keyof typeof IMAGES, Size> = {
+    ...LANDSCAPE_IMAGE_SIZES,
+    ...PORTRAIT_IMAGE_SIZES,
+    ...SQUARE_IMAGE_SIZES,
+    ...AVATAR_IMAGE_SIZES,
+    ...SVG_IMAGE_SIZES,
+    ...EMPTY_IMAGES_SIZES,
+};

package/src/stories/controls/selectArgType.ts

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

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,7 @@
+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,132 @@
+/* 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): PropEntry[] =>
+    arr.map((value) => [String(value), { [prop]: value }]);
+
+const isArrayConfig = (c?: Combination): c is PropArrayCombination => !!c?.key;
+
+function toPropEntries(config?: Combination): PropEntry[] {
+    if (isEmpty(config)) return [['', {}]];
+    if (isArrayConfig(config)) return toProps(config.options, config.key);
+    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)
+ */
+export const withCombinations =
+    ({
+        combinations,
+        tableStyle,
+        firstColStyle,
+        cellStyle,
+        colStyle,
+        sectionStyle,
+        combinator = Object.assign,
+        excludeCombination,
+    }: Options) =>
+    (Story: any, ctx: any) => {
+        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 (
+            <>
+                {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>}
+
+                                {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/withNestedProps.tsx

@@ -0,0 +1,22 @@
+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/decorators/withResizableBox.tsx

@@ -0,0 +1,21 @@
+import type { CSSProperties } from 'react';
+import { withWrapper } from './withWrapper';
+
+/** Storybook decorator wrapping story in a resizable box  */
+export const withResizableBox = ({
+    width = 150,
+    height = 50,
+    ...style
+}: Pick<CSSProperties, 'height' | 'minWidth' | 'width'> = {}) => {
+    return withWrapper({
+        style: {
+            display: 'flex',
+            width,
+            height,
+            border: '1px solid red',
+            resize: 'both',
+            overflow: 'hidden',
+            ...style,
+        },
+    });
+};

package/src/stories/decorators/withThemedBackground.tsx

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

package/src/stories/decorators/withWrapper.tsx

@@ -0,0 +1,19 @@
+/**
+ * SB decorator adding a wrapping div around the story
+ */
+export const withWrapper = <E extends React.ElementType = 'div'>(
+    props: Omit<React.ComponentProps<E>, 'children'>,
+    as?: E,
+) => {
+    // eslint-disable-next-line react/display-name
+    return (Story: any, ctx: any) => {
+        const Wrapper = as || 'div';
+        const { wrapperProps } = ctx.parameters;
+        const overriddenProps = { ...props, ...wrapperProps, style: { ...props?.style, ...wrapperProps?.style } };
+        return (
+            <Wrapper {...overriddenProps}>
+                <Story />
+            </Wrapper>
+        );
+    };
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/badge/Badge Demos' };
+
+export { App as Colors } from './colors';
+export { App as Icon } from './icon';
+export { App as Label } from './label';
+export { App as Thumbnail } from './thumbnail';

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

@@ -0,0 +1,11 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/button/Button Demos' };
+
+export { App as EmphasisHigh } from './emphasis-high';
+export { App as EmphasisLow } from './emphasis-low';
+export { App as EmphasisMedium } from './emphasis-medium';
+export { App as FullWidth } from './full-width';
+export { App as Small } from './small';
+export { App as Toggle } from './toggle';

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

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