@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/generic-block/GenericBlock.test.tsx

@@ -1,156 +0,0 @@
-import React, { createRef } from 'react';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { GenericBlock, GenericBlockProps } from '.';
-
-const CLASSNAME = GenericBlock.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<GenericBlockProps> = {}) => {
-    render(<GenericBlock {...(props as any)} />);
-    const genericBlock = getByClassName(document.body, CLASSNAME);
-    const figure = queryByClassName(genericBlock, 'lumx-generic-block__figure');
-    const content = queryByClassName(genericBlock, 'lumx-generic-block__content');
-    const actions = queryByClassName(genericBlock, 'lumx-generic-block__actions');
-    return { props, genericBlock, figure, content, actions };
-};
-
-describe(`<${GenericBlock.displayName}>`, () => {
-    describe('Props', () => {
-        it('should render content', () => {
-            const { genericBlock, content, figure, actions } = setup({ children: 'Content' });
-            expect(genericBlock).toBeInTheDocument();
-            expect(genericBlock.className).toMatchInlineSnapshot(
-                '"lumx-generic-block lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--gap-big"',
-            );
-
-            expect(content).toBeInTheDocument();
-            expect(content).toHaveTextContent('Content');
-            expect(content?.className).toMatchInlineSnapshot(
-                '"lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--fill-space"',
-            );
-
-            expect(figure).not.toBeInTheDocument();
-            expect(actions).not.toBeInTheDocument();
-        });
-
-        it('should forward vAlign & hAlign', () => {
-            const { genericBlock, figure, content, actions } = setup({
-                children: 'Content',
-                figure: 'Figure',
-                actions: 'Actions',
-                vAlign: 'left',
-                hAlign: 'bottom',
-            });
-
-            expect(genericBlock?.className).toMatchInlineSnapshot(
-                '"lumx-generic-block lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom lumx-flex-box--gap-big"',
-            );
-            expect(figure?.className).toMatchInlineSnapshot(
-                '"lumx-generic-block__figure lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom"',
-            );
-            expect(content?.className).toMatchInlineSnapshot(
-                '"lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom lumx-flex-box--fill-space"',
-            );
-            expect(actions?.className).toMatchInlineSnapshot(
-                '"lumx-generic-block__actions lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--h-align-bottom"',
-            );
-        });
-
-        it('should combine figure props', () => {
-            const { figure, content, actions } = setup({
-                figure: 'Figure 1',
-                figureProps: { className: 'figure1', vAlign: 'left' },
-                children: (
-                    <GenericBlock.Figure className="figure2" fillSpace>
-                        Figure 2
-                    </GenericBlock.Figure>
-                ),
-            });
-
-            // Merged class names
-            expect(figure?.className).toMatchInlineSnapshot(
-                '"figure1 figure2 lumx-generic-block__figure lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--fill-space"',
-            );
-            // Merged content
-            expect(figure).toHaveTextContent('Figure 1Figure 2');
-
-            expect(content).not.toBeInTheDocument();
-            expect(actions).not.toBeInTheDocument();
-        });
-
-        it('should combine content props', () => {
-            const { figure, content, actions } = setup({
-                children: [
-                    'Content 1',
-                    <GenericBlock.Content key="content" className="content2" fillSpace>
-                        Content 2
-                    </GenericBlock.Content>,
-                ],
-                contentProps: { className: 'content1', vAlign: 'left' },
-            });
-
-            // Merged class names
-            expect(content?.className).toMatchInlineSnapshot(
-                '"content1 content2 lumx-generic-block__content lumx-flex-box lumx-flex-box--orientation-vertical lumx-flex-box--v-align-left lumx-flex-box--fill-space"',
-            );
-            // Merged content
-            expect(content).toHaveTextContent('Content 2Content 1');
-
-            expect(figure).not.toBeInTheDocument();
-            expect(actions).not.toBeInTheDocument();
-        });
-
-        it('should combine actions props', () => {
-            const { figure, content, actions } = setup({
-                actions: 'Actions 1',
-                actionsProps: { className: 'actions1', vAlign: 'left' },
-                children: (
-                    <GenericBlock.Actions className="actions2" fillSpace>
-                        Actions 2
-                    </GenericBlock.Actions>
-                ),
-            });
-
-            // Merged class names
-            expect(actions?.className).toMatchInlineSnapshot(
-                '"actions1 actions2 lumx-generic-block__actions lumx-flex-box lumx-flex-box--orientation-horizontal lumx-flex-box--v-align-left lumx-flex-box--fill-space"',
-            );
-            // Merged content
-            expect(actions).toHaveTextContent('Actions 1Actions 2');
-
-            expect(content).not.toBeInTheDocument();
-            expect(figure).not.toBeInTheDocument();
-        });
-
-        it('should forward refs', () => {
-            const rootRef = createRef<HTMLDivElement>();
-            const figureRef = createRef<HTMLDivElement>();
-            const contentRef = createRef<HTMLDivElement>();
-            const actionsRef = createRef<HTMLDivElement>();
-            render(
-                <GenericBlock ref={rootRef}>
-                    <GenericBlock.Figure ref={figureRef} />
-                    <GenericBlock.Content ref={contentRef} />
-                    <GenericBlock.Actions ref={actionsRef} />
-                </GenericBlock>,
-            );
-            expect(rootRef.current).toBeDefined();
-            expect(figureRef.current).toBeDefined();
-            expect(contentRef.current).toBeDefined();
-            expect(actionsRef.current).toBeDefined();
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'genericBlock',
-        forwardAttributes: 'genericBlock',
-    });
-});

package/src/components/generic-block/GenericBlock.tsx

@@ -1,225 +0,0 @@
-import React, { Children, ReactElement, ReactNode } from 'react';
-
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import noop from 'lodash/noop';
-
-import { Comp, isComponentType } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { partitionMulti } from '@lumx/react/utils/partitionMulti';
-import { Orientation, Size, FlexBox, FlexBoxProps } from '@lumx/react';
-import { GenericBlockGapSize } from '@lumx/react/components/generic-block/constants';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-export interface GenericBlockProps extends FlexBoxProps {
-    /**
-     * Component to use as visual element.
-     */
-    figure?: ReactNode;
-    /**
-     * Actions to set after the main content.
-     */
-    actions?: ReactNode;
-    /**
-     * Main content to display or sections components
-     * ({@see GenericBlock.Figure}, {@see GenericBlock.Content} & {@see GenericBlock.Actions})
-     */
-    children: ReactNode;
-    /**
-     * Orientation of the 3 sections
-     */
-    orientation?: FlexBoxProps['orientation'];
-    /**
-     * Horizontal alignment.
-     */
-    hAlign?: FlexBoxProps['hAlign'];
-    /**
-     * Vertical alignment.
-     */
-    vAlign?: FlexBoxProps['vAlign'];
-    /**
-     * The props to forward to the content.
-     * By default, the content will have the same alignment as wrapper.
-     */
-    contentProps?: Omit<FlexBoxProps, 'children'>;
-    /**
-     * props to forward to the actions element.
-     */
-    actionsProps?: Omit<FlexBoxProps, 'children'>;
-    /**
-     * props to forward to the figure element.
-     */
-    figureProps?: Omit<FlexBoxProps, 'children'>;
-    /**
-     * Gap space between sections.
-     */
-    gap?: GenericBlockGapSize;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'GenericBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<GenericBlockProps> = {
-    gap: Size.big,
-    orientation: Orientation.horizontal,
-};
-
-type BaseGenericBlock = Comp<GenericBlockProps, HTMLDivElement>;
-
-interface GenericBlockSectionProps extends FlexBoxProps {
-    /**
-     * Gap space between items.
-     */
-    gap?: GenericBlockGapSize;
-}
-
-interface GenericBlock extends BaseGenericBlock {
-    /**
-     * Use `GenericBlock.Figure` component as children of the `GenericBlock` component as an alternative way to inject
-     * the "figure" section of the block (instead of using `figure` and `figureProps` props).
-     */
-    Figure: Comp<GenericBlockSectionProps>;
-    /**
-     * Use `GenericBlock.Content` component as children of the `GenericBlock` component as an alternative way to inject
-     * the "content" section of the block (instead of using `content` and `contentProps` props).
-     */
-    Content: Comp<GenericBlockSectionProps>;
-    /**
-     * Use `GenericBlock.Actions` component as children of the `GenericBlock` component as an alternative way to inject
-     * the "actions" section of the block (instead of using `actions` and `actionsProps` props).
-     */
-    Actions: Comp<GenericBlockSectionProps>;
-}
-
-const Figure = noop.bind({}) as Comp<FlexBoxProps>;
-const isFigure = isComponentType(Figure);
-
-const Content = noop.bind({}) as Comp<FlexBoxProps>;
-const isContent = isComponentType(Content);
-
-const Actions = noop.bind({}) as Comp<FlexBoxProps>;
-const isActions = isComponentType(Actions);
-
-/**
- * The GenericBlock is a layout component made of 3 sections that can be
- * displayed either horizontally of vertically with the same gap between each section.
- *
- * The sections are:
- * - `Figure` => A visual element to display before the main content.
- * - `Content` => The main content displayed
- * - `Actions` => One or more actions to set after the element.
- *
- * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
- */
-const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
-    const {
-        className,
-        figure,
-        figureProps,
-        children,
-        actions,
-        actionsProps,
-        gap = DEFAULT_PROPS.gap,
-        orientation = DEFAULT_PROPS.orientation,
-        contentProps,
-        ...forwardedProps
-    } = props;
-
-    const sections = React.useMemo(() => {
-        // Split children by section type
-        const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(
-            Children.toArray(children),
-            [isFigure, isContent, isActions],
-        );
-        return {
-            figureChild,
-            figureChildProps: (figureChild as ReactElement)?.props,
-            contentChild,
-            contentChildProps: (contentChild as ReactElement)?.props,
-            actionsChild,
-            actionsChildProps: (actionsChild as ReactElement)?.props,
-            otherChildren: otherChildren.filter((child) => !isEmpty(child)),
-        };
-    }, [children]);
-
-    return (
-        <FlexBox
-            ref={ref}
-            className={classNames(className, CLASSNAME)}
-            gap={gap}
-            orientation={orientation}
-            {...forwardedProps}
-        >
-            {(figure || sections.figureChildProps?.children) && (
-                <FlexBox
-                    ref={(sections.figureChild as any)?.ref}
-                    vAlign={forwardedProps.vAlign}
-                    hAlign={forwardedProps.hAlign}
-                    {...figureProps}
-                    {...sections.figureChildProps}
-                    className={classNames(
-                        figureProps?.className,
-                        sections.figureChildProps?.className,
-                        `${CLASSNAME}__figure`,
-                    )}
-                >
-                    {figure}
-                    {sections.figureChildProps?.children}
-                </FlexBox>
-            )}
-
-            {(sections.contentChildProps?.children || sections.otherChildren.length > 0) && (
-                <FlexBox
-                    ref={(sections.contentChild as any)?.ref}
-                    orientation={Orientation.vertical}
-                    fillSpace
-                    vAlign={forwardedProps.vAlign}
-                    hAlign={forwardedProps.hAlign}
-                    {...contentProps}
-                    {...sections.contentChildProps}
-                    className={classNames(
-                        contentProps?.className,
-                        sections.contentChildProps?.className,
-                        `${CLASSNAME}__content`,
-                    )}
-                >
-                    {sections.contentChildProps?.children}
-                    {sections.otherChildren}
-                </FlexBox>
-            )}
-
-            {(actions || sections.actionsChildProps?.children) && (
-                <FlexBox
-                    ref={(sections.actionsChild as any)?.ref}
-                    vAlign={forwardedProps.vAlign}
-                    hAlign={forwardedProps.hAlign}
-                    {...actionsProps}
-                    {...sections.actionsChildProps}
-                    className={classNames(
-                        actionsProps?.className,
-                        sections.actionsChildProps?.className,
-                        `${CLASSNAME}__actions`,
-                    )}
-                >
-                    {actions}
-                    {sections.actionsChildProps?.children}
-                </FlexBox>
-            )}
-        </FlexBox>
-    );
-});
-BaseGenericBlock.displayName = COMPONENT_NAME;
-BaseGenericBlock.className = CLASSNAME;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS;
-
-export const GenericBlock: GenericBlock = Object.assign(BaseGenericBlock, { Figure, Content, Actions });

package/src/components/generic-block/constants.ts

@@ -1,9 +0,0 @@
-import pick from 'lodash/pick';
-import { Size } from '@lumx/react';
-import { ValueOf } from '@lumx/react/utils/type';
-
-/**
- * Accepted gap sizes for the generic block.
- */
-export const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
-export type GenericBlockGapSize = ValueOf<typeof GenericBlockGapSize>;

package/src/components/generic-block/index.ts

@@ -1,2 +0,0 @@
-export * from './GenericBlock';
-export { GenericBlockGapSize } from './constants';

package/src/components/grid/Grid.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { Alignment, Orientation, Size } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-type GridGutterSize = Extract<Size, 'regular' | 'big' | 'huge'>;
-
-/**
- * Defines the props of the component.
- */
-export interface GridProps extends GenericProps {
-    /** Orientation. */
-    orientation?: Orientation;
-    /** Whether the children are wrapped or not. */
-    wrap?: string;
-    /** Vertical alignment. */
-    vAlign?: Alignment;
-    /** Horizontal alignment. */
-    hAlign?: Alignment;
-    /** Gutter size. */
-    gutter?: GridGutterSize;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Grid';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<GridProps> = {
-    orientation: Orientation.horizontal,
-    wrap: 'nowrap',
-};
-
-/**
- * Grid component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Grid = forwardRef<GridProps, HTMLDivElement>((props, ref) => {
-    const {
-        children,
-        className,
-        gutter,
-        hAlign,
-        orientation = DEFAULT_PROPS.orientation,
-        vAlign,
-        wrap = DEFAULT_PROPS.wrap,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                `${CLASSNAME}-container`,
-                { [`${CLASSNAME}--h-align-${hAlign}`]: hAlign },
-                { [`${CLASSNAME}--v-align-${vAlign}`]: vAlign },
-                handleBasicClasses({ prefix: CLASSNAME, orientation, wrap, gutter }),
-            )}
-        >
-            {children}
-        </div>
-    );
-});
-Grid.displayName = COMPONENT_NAME;
-Grid.className = CLASSNAME;
-Grid.defaultProps = DEFAULT_PROPS;

package/src/components/grid/GridItem.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import { Alignment } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-type Columns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-
-/**
- * Defines the props of the component.
- */
-export interface GridItemProps extends GenericProps {
-    /** Alignment. */
-    align?: Alignment;
-    /** Order. */
-    order?: Columns;
-    /** Width. */
-    width?: Columns;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'GridItem';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * GridItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const GridItem = forwardRef<GridItemProps, HTMLDivElement>((props, ref) => {
-    const { children, className, width, align, order, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, width, order, align }))}
-        >
-            {children}
-        </div>
-    );
-});
-GridItem.displayName = COMPONENT_NAME;
-GridItem.className = CLASSNAME;

package/src/components/grid/index.ts

@@ -1,2 +0,0 @@
-export * from './Grid';
-export * from './GridItem';

package/src/components/grid-column/GridColumn.stories.tsx

@@ -1,46 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react';
-import range from 'lodash/range';
-
-import { GridColumn, GridColumnProps } from '@lumx/react/components/grid-column/GridColumn';
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { Size } from '@lumx/react';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-
-const genericBlockStyle = { border: '1px solid red', padding: '2px 8px' };
-
-const gapSizes: Array<GridColumnProps['gap']> = [Size.tiny, Size.regular, Size.big, Size.huge];
-
-const getItems = (nb: number) =>
-    range(nb).map((key) => (
-        // eslint-disable-next-line react/jsx-key
-        <div key={key} style={genericBlockStyle}>
-            <h2>Column {key}</h2>
-            <p>{loremIpsum('tiny')}</p>
-        </div>
-    ));
-
-export default {
-    title: 'LumX components/grid-column/GridColumn',
-    component: GridColumn,
-    argTypes: {
-        nbItems: { control: 'number', min: 0 },
-        gap: getSelectArgType(gapSizes),
-        itemMinWidth: { control: 'number' },
-        maxColumns: { control: 'number' },
-    },
-    args: GridColumn.defaultProps,
-    render: ({ nbItems = 5, ...props }) => <GridColumn {...props}>{getItems(nbItems)}</GridColumn>,
-};
-
-/**
- * Default grid column displaying a single column
- */
-export const Default = {};
-
-/**
- * Grid column with max 4 columns (responsive)
- */
-export const Columns = {
-    args: { maxColumns: 4, itemMinWidth: 200 },
-};

package/src/components/grid-column/GridColumn.test.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-
-import { GridColumn } from './index';
-
-const CLASSNAME = GridColumn.className;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride = {}) => {
-    const props = { ...propsOverride };
-    const { container } = render(
-        <GridColumn {...props}>
-            <p>Content 1</p>
-            <p>Content 2</p>
-            <p>Content 3</p>
-        </GridColumn>,
-    );
-
-    const gridColumn = getByClassName(container, CLASSNAME);
-
-    return { props, container, gridColumn };
-};
-
-describe(`<${GridColumn.displayName}>`, () => {
-    it('should create default component', () => {
-        const { gridColumn } = setup();
-
-        expect(gridColumn).toBeInTheDocument();
-        expect(gridColumn.children).toHaveLength(3);
-    });
-
-    describe('Props', () => {
-        it('should override CSS props', () => {
-            const { gridColumn } = setup({
-                gap: 'regular',
-                maxColumns: 10,
-                itemMinWidth: 300,
-            });
-
-            expect(gridColumn).toHaveAttribute(
-                'style',
-                '--lumx-grid-column-item-min-width: 300px; --lumx-grid-column-columns: 10; --lumx-grid-column-gap: var(--lumx-spacing-unit-regular);',
-            );
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardAttributes: 'gridColumn',
-        forwardClassName: 'gridColumn',
-    });
-});