@lumx/react 3.21.1-alpha.0 → 3.21.2-alpha.0

package/src/components/flag/Flag.stories.tsx

@@ -1,48 +0,0 @@
-import { mdiHeart } from '@lumx/icons';
-import { ColorPalette, Flag } from '@lumx/react';
-import { colorArgType } from '@lumx/react/stories/controls/color';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-
-export default {
-    title: 'LumX components/flag/Flag',
-    component: Flag,
-    argTypes: { color: colorArgType, icon: iconArgType },
-    args: { ...Flag.defaultProps, label: 'Label' },
-};
-
-/**
- * Default flag with label
- */
-export const Default = {};
-
-/**
- * With icon
- */
-export const WithIcon = { args: { icon: mdiHeart } };
-
-/**
- * All `color` variants
- */
-export const AllColors = {
-    ...WithIcon,
-    argTypes: { color: { control: false } },
-    decorators: [
-        withCombinations({
-            combinations: {
-                cols: { key: 'color', options: withUndefined(ColorPalette) },
-            },
-        }),
-    ],
-};
-
-/**
- * Truncate text option
- */
-export const Truncate = {
-    args: { label: loremIpsum('tiny'), truncate: true },
-    decorators: [withResizableBox()],
-};

package/src/components/flag/Flag.test.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-
-import { ColorPalette, Theme } from '@lumx/react';
-import { mdiAbTesting } from '@lumx/icons';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-
-import { Flag, FlagProps } from './Flag';
-
-const CLASSNAME = Flag.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propOverrides: Partial<FlagProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props = { label: 'default', ...propOverrides };
-
-    render(<Flag {...props} />, { wrapper });
-    const flag = getByClassName(document.body, CLASSNAME);
-    const icon = queryByClassName(flag, `${CLASSNAME}__icon`);
-
-    return { props, flag, icon };
-};
-
-describe(`<${Flag.displayName} />`, () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { flag, icon } = setup();
-            expect(flag).toBeInTheDocument();
-            expect(flag).toHaveClass(CLASSNAME);
-            expect(flag).toHaveClass(`${CLASSNAME}--color-dark`);
-            expect(icon).not.toBeInTheDocument();
-        });
-
-        it('should render icon', () => {
-            const { icon } = setup({ icon: mdiAbTesting });
-            expect(icon).toBeInTheDocument();
-        });
-
-        it('should render dark theme', () => {
-            const { flag } = setup({ theme: Theme.dark });
-            expect(flag).toHaveClass(`${CLASSNAME}--color-light`);
-        });
-
-        it('should render custom color', () => {
-            const { flag } = setup({ color: ColorPalette.red });
-            expect(flag).toHaveClass(`${CLASSNAME}--color-red`);
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'flag',
-        forwardAttributes: 'flag',
-        applyTheme: {
-            affects: [{ element: 'flag', classModifier: 'color', inverted: true }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/flag/Flag.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { ColorPalette, Icon, Size, Theme, Text } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-export interface FlagProps extends GenericProps, HasTheme {
-    /** Color of the component. */
-    color?: ColorPalette;
-    /** Icon to use before the label. */
-    icon?: string;
-    /** Text label of the flag. */
-    label: React.ReactNode;
-    /** Enable text truncate on overflow */
-    truncate?: boolean;
-}
-
-const COMPONENT_NAME = 'Flag';
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-const DEFAULT_PROPS: Partial<FlagProps> = {};
-
-/**
- * Flag component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Flag = forwardRef<FlagProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { label, icon, color, className, theme = defaultTheme, truncate, ...forwardedProps } = props;
-    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
-    const isTruncated = !!truncate;
-
-    return (
-        <div
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor, isTruncated }))}
-            ref={ref}
-        >
-            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
-            <Text as="span" truncate={isTruncated} typography="overline" className={`${CLASSNAME}__label`}>
-                {label}
-            </Text>
-        </div>
-    );
-});
-Flag.displayName = COMPONENT_NAME;
-Flag.className = CLASSNAME;
-Flag.defaultProps = DEFAULT_PROPS;

package/src/components/flag/index.ts

@@ -1 +0,0 @@
-export * from './Flag';

package/src/components/flex-box/FlexBox.stories.tsx

@@ -1,158 +0,0 @@
-import React from 'react';
-
-import { Alignment, Button, IconButton, Orientation, Size, Text } from '@lumx/react';
-
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { mdiAtom } from '@lumx/icons';
-import mergeWith from 'lodash/fp/mergeWith';
-import castArray from 'lodash/castArray';
-import { FlexBox } from './FlexBox';
-
-const gapSizes = [Size.tiny, Size.regular, Size.medium, Size.big, Size.huge];
-const spaceAlignments = [Alignment.spaceBetween, Alignment.spaceEvenly, Alignment.spaceAround];
-const verticalAlignments = [...spaceAlignments, Alignment.top, Alignment.center, Alignment.bottom];
-const horizontalAlignments = [...spaceAlignments, Alignment.left, Alignment.center, Alignment.right];
-
-export default {
-    title: 'LumX components/flex-box/FlexBox',
-    component: FlexBox,
-    args: FlexBox.defaultProps,
-    argTypes: {
-        orientation: getSelectArgType(Orientation),
-        fillSpace: { control: 'boolean' },
-        wrap: { control: 'boolean' },
-        noShrink: { control: 'boolean' },
-        hAlign: getSelectArgType(verticalAlignments),
-        vAlign: getSelectArgType(horizontalAlignments),
-        gap: getSelectArgType(gapSizes),
-    },
-};
-
-/** Without config, FlexBox acts as a simple <div> */
-export const NoConfig = {
-    args: {
-        style: { width: '100%', height: '100%' },
-        children: [
-            <Button key="1">Button 1</Button>,
-            <Text key="2" as="p">
-                Some paragraph
-            </Text>,
-            <Button key="3">Button 3</Button>,
-        ],
-    },
-    decorators: [withWrapper({ style: { border: '1px dashed red' } })],
-};
-
-/** Horizontal orientation with all possible item alignments */
-export const Horizontal = {
-    ...NoConfig,
-    args: {
-        ...NoConfig.args,
-        orientation: Orientation.horizontal,
-    },
-    decorators: [
-        withCombinations({
-            cellStyle: { border: '1px dashed red' },
-            firstColStyle: { whiteSpace: 'nowrap', width: '1%' },
-            combinations: { rows: { key: 'vAlign', options: withUndefined(horizontalAlignments) } },
-        }),
-    ],
-};
-
-/** Vertical orientation with all possible item alignments */
-export const Vertical = {
-    ...NoConfig,
-    args: {
-        ...NoConfig.args,
-        orientation: Orientation.vertical,
-    },
-    decorators: [
-        withCombinations({
-            cellStyle: { border: '1px dashed red', height: '200px' },
-            firstColStyle: { whiteSpace: 'nowrap', width: '1%' },
-            combinations: { rows: { key: 'hAlign', options: withUndefined(verticalAlignments) } },
-        }),
-    ],
-};
-
-/** All gap sizes */
-export const GapSizes = {
-    ...Horizontal,
-    argTypes: {
-        gap: { control: false },
-    },
-    decorators: [
-        ...NoConfig.decorators,
-        withCombinations({
-            combinations: {
-                rows: { key: 'gap', options: withUndefined(gapSizes) },
-            },
-        }),
-    ],
-};
-
-/** Wrap items in new row or column */
-export const Wrap = {
-    args: {
-        ...NoConfig.args,
-        orientation: Orientation.horizontal,
-        wrap: true,
-    },
-    argTypes: {
-        wrap: { control: false },
-    },
-    decorators: [
-        withWrapper({ style: { border: '1px dashed red', width: '100px', height: '100px', margin: '20px auto' } }),
-        withCombinations({
-            cellStyle: { width: '50%' },
-            combinations: {
-                cols: { key: 'orientation', options: Object.values(Orientation) },
-                rows: { 'No wrap': { wrap: false }, Wrap: { wrap: true } },
-            },
-        }),
-    ],
-};
-
-/** Prevent FlexBox from shrinking into a parent flex box */
-export const NoShrink = {
-    args: {
-        children: <Text as="p">Some paragraph</Text>,
-        noShrink: true,
-    },
-    decorators: [
-        withWrapper({
-            style: { display: 'flex', border: '1px dashed red', width: 100, height: 100, margin: '20px auto' },
-        }),
-    ],
-};
-
-/** All combinations of margin auto values */
-export const MarginAuto = {
-    args: { children: <IconButton label="" icon={mdiAtom} /> },
-    decorators: [
-        withWrapper({
-            style: { display: 'flex', border: '1px dashed red', width: 100, height: 100, margin: '20px auto' },
-        }),
-        withCombinations({
-            combinations: {
-                rows: {
-                    key: 'marginAuto',
-                    options: [undefined, Alignment.left, Alignment.top, [Alignment.left, Alignment.top]],
-                },
-                cols: {
-                    key: 'marginAuto',
-                    options: [undefined, Alignment.right, Alignment.bottom, [Alignment.right, Alignment.bottom]],
-                },
-            },
-            combinator: mergeWith((a, b) => {
-                if (a && b) {
-                    return [...castArray(a), ...castArray(b)].filter(Boolean);
-                }
-                return undefined;
-            }),
-        }),
-    ],
-};

package/src/components/flex-box/FlexBox.test.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-import { FlexBox, FlexBoxProps } from './FlexBox';
-
-const CLASSNAME = FlexBox.className as string;
-
-type SetupProps = Partial<FlexBoxProps>;
-
-const setup = (propsOverride: SetupProps = {}) => {
-    const props: FlexBoxProps = {
-        children: null,
-        ...propsOverride,
-    };
-    render(<FlexBox {...props} />);
-    const flexBox = queryByClassName(document.body, CLASSNAME);
-    return { props, flexBox };
-};
-
-describe(`<${FlexBox.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'flexBox', forwardAttributes: 'flexBox' });
-});

package/src/components/flex-box/FlexBox.tsx

@@ -1,100 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-import castArray from 'lodash/castArray';
-
-import { Alignment, Orientation, HorizontalAlignment, Size, VerticalAlignment } from '@lumx/core/js/constants';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-export type MarginAutoAlignment = Extract<Alignment, 'top' | 'bottom' | 'right' | 'left'>;
-export type GapSize = Extract<Size, 'tiny' | 'regular' | 'medium' | 'big' | 'huge'>;
-type SpaceAlignment = Extract<Alignment, 'space-between' | 'space-evenly' | 'space-around'>;
-export type FlexVerticalAlignment = VerticalAlignment | SpaceAlignment;
-export type FlexHorizontalAlignment = HorizontalAlignment | SpaceAlignment;
-
-/**
- * Defines the props of the component.
- */
-export interface FlexBoxProps extends GenericProps {
-    /** Customize the root element. */
-    as?: React.ElementType;
-    /** Children elements. */
-    children?: ReactNode;
-    /** Whether the "content filling space" is enabled or not. */
-    fillSpace?: boolean;
-    /** Gap space between flexbox items. */
-    gap?: GapSize;
-    /** Flex horizontal alignment. */
-    hAlign?: FlexVerticalAlignment;
-    /** Whether the "auto margin" is enabled all around or not. */
-    marginAuto?: MarginAutoAlignment | MarginAutoAlignment[];
-    /** Whether the "content shrink" is disabled or not. */
-    noShrink?: boolean;
-    /** Flex direction. */
-    orientation?: Orientation;
-    /** Flex vertical alignment. */
-    vAlign?: FlexHorizontalAlignment;
-    /** Whether the "flex wrap" is enabled or not. */
-    wrap?: boolean;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'FlexBox';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * FlexBox component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const FlexBox = forwardRef<FlexBoxProps, HTMLDivElement>((props, ref) => {
-    const {
-        as: Component = 'div',
-        children,
-        className,
-        fillSpace,
-        gap,
-        hAlign,
-        marginAuto,
-        noShrink,
-        orientation,
-        vAlign,
-        wrap,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <Component
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
-                    vAlign,
-                    hAlign,
-                    gap,
-                }),
-                wrap && `${CLASSNAME}--wrap`,
-                fillSpace && `${CLASSNAME}--fill-space`,
-                noShrink && `${CLASSNAME}--no-shrink`,
-                marginAuto && castArray(marginAuto).map((align) => `${CLASSNAME}--margin-auto-${align}`),
-            )}
-        >
-            {children}
-        </Component>
-    );
-});
-FlexBox.displayName = COMPONENT_NAME;
-FlexBox.className = CLASSNAME;

package/src/components/flex-box/index.ts

@@ -1 +0,0 @@
-export * from './FlexBox';

package/src/components/generic-block/GenericBlock.stories.jsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import { mdiPencil } from '@lumx/icons';
-import { GenericBlock, Button, Icon, Size, Thumbnail } from '@lumx/react';
-import { IMAGES } from '@lumx/react/stories/controls/image';
-
-export default { title: 'LumX components/generic-block/GenericBlock' };
-
-const redBorderStyle = { border: '1px solid red' };
-
-export const SectionsInProps = ({ theme }) => (
-    <GenericBlock
-        figure={<Icon icon={mdiPencil} size={Size.m} />}
-        actionsProps={{ style: redBorderStyle }}
-        figureProps={{ style: redBorderStyle }}
-        contentProps={{ style: redBorderStyle }}
-        actions={<Button theme={theme}>Button</Button>}
-    >
-        Content
-    </GenericBlock>
-);
-
-export const SectionsInChildren = ({ theme }) => (
-    <GenericBlock>
-        <GenericBlock.Figure style={redBorderStyle}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle}>Content</GenericBlock.Content>
-        <GenericBlock.Actions style={redBorderStyle}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-const Template = ({ theme, ...props }) => (
-    <GenericBlock {...props}>
-        <GenericBlock.Figure style={redBorderStyle} {...props.figureProps}>
-            <Icon icon={mdiPencil} size={Size.m} />
-        </GenericBlock.Figure>
-        <GenericBlock.Content style={redBorderStyle} {...props.contentProps}>
-            {props.content || 'Content'}
-        </GenericBlock.Content>
-        <GenericBlock.Actions style={redBorderStyle} {...props.actionsProps}>
-            <Button theme={theme}>Button</Button>
-        </GenericBlock.Actions>
-    </GenericBlock>
-);
-
-export const Vertical = Template.bind({});
-Vertical.args = {
-    orientation: 'vertical',
-};
-
-export const VerticalAlignCenter = Template.bind({});
-VerticalAlignCenter.args = {
-    orientation: 'vertical',
-    vAlign: 'center',
-};
-
-export const VerticalOverflow = Template.bind({});
-VerticalOverflow.args = {
-    orientation: 'vertical',
-    style: { width: 300 },
-    content: (
-        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            _________________________________________________________________
-        </span>
-    ),
-};
-
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-    orientation: 'horizontal',
-};
-
-export const HorizontalAlignRightBottom = Template.bind({});
-HorizontalAlignRightBottom.args = {
-    orientation: 'horizontal',
-    vAlign: 'right',
-    hAlign: 'bottom',
-};
-
-export const HorizontalOverflow = Template.bind({});
-HorizontalOverflow.args = {
-    orientation: 'horizontal',
-    style: { width: 300 },
-    content: (
-        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
-            _________________________________________________________________
-        </span>
-    ),
-};
-
-export const GapSizes = ({ theme }) =>
-    [Size.regular, Size.big, Size.huge].map((gap) => (
-        <GenericBlock key={gap} orientation="vertical" gap={gap} style={{ marginBottom: 40 }}>
-            <GenericBlock.Figure style={redBorderStyle}>
-                <Icon icon={mdiPencil} size={Size.m} />
-            </GenericBlock.Figure>
-            <GenericBlock.Content style={redBorderStyle}>
-                <h2>{gap} gap size</h2>
-                <p>block description</p>
-            </GenericBlock.Content>
-            <GenericBlock.Actions style={redBorderStyle}>
-                <Button theme={theme}>Button</Button>
-            </GenericBlock.Actions>
-        </GenericBlock>
-    ));
-
-export const AsAFigure = () => (
-    <GenericBlock as="figure" orientation="vertical" style={{ width: '150px' }}>
-        <GenericBlock.Figure>
-            <Thumbnail alt="" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
-        </GenericBlock.Figure>
-        <GenericBlock.Content as="figcaption">Rocky mountain landscape</GenericBlock.Content>
-    </GenericBlock>
-);
-
-export const AsAnArticle = () => (
-    <GenericBlock as="article" orientation="horizontal">
-        <GenericBlock.Figure>
-            <Thumbnail alt="" size="xl" image={IMAGES.portrait1s200} aspectRatio="horizontal" />
-        </GenericBlock.Figure>
-        <GenericBlock.Content>
-            <h2>Article title</h2>
-            <p>Article description...</p>
-        </GenericBlock.Content>
-    </GenericBlock>
-);