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

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

@@ -0,0 +1,156 @@
+import { 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

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

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

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

package/src/components/grid/Grid.tsx

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

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

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

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

@@ -0,0 +1,45 @@
+/* eslint-disable react/display-name */
+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

@@ -0,0 +1,56 @@
+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',
+    });
+});