@lumx/react 3.1.1 → 3.1.3-alpha.0

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

@@ -1,152 +0,0 @@
-import React, { createRef } from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite } from '@lumx/react/testing/utils';
-
-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> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<GenericBlock {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${GenericBlock.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        it('should render default', () => {
-            const wrapper = shallow(
-                <GenericBlock figure="figure" actions="actions">
-                    Content
-                </GenericBlock>,
-            );
-
-            expect(wrapper.prop('gap')).toBe('big');
-            expect(wrapper.prop('orientation')).toBe('horizontal');
-
-            const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toHaveLength(1);
-
-            const content = wrapper.find('.lumx-generic-block__content');
-            expect(content).toHaveLength(1);
-            expect(content.prop('fillSpace')).toBe(true);
-            expect(content.prop('orientation')).toBe('vertical');
-
-            const actions = wrapper.find('.lumx-generic-block__actions');
-            expect(actions).toHaveLength(1);
-        });
-
-        it('should forward vAlign & hAlign', () => {
-            const wrapper = shallow(
-                <GenericBlock figure="figure" actions="actions" vAlign="left" hAlign="bottom">
-                    Content
-                </GenericBlock>,
-            );
-
-            expect(wrapper.prop('vAlign')).toBe('left');
-            expect(wrapper.prop('hAlign')).toBe('bottom');
-
-            const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toHaveLength(1);
-            expect(figure.prop('vAlign')).toBe('left');
-            expect(figure.prop('hAlign')).toBe('bottom');
-
-            const content = wrapper.find('.lumx-generic-block__content');
-            expect(content).toHaveLength(1);
-            expect(content.prop('vAlign')).toBe('left');
-            expect(content.prop('hAlign')).toBe('bottom');
-
-            const actions = wrapper.find('.lumx-generic-block__actions');
-            expect(actions).toHaveLength(1);
-            expect(actions.prop('vAlign')).toBe('left');
-            expect(actions.prop('hAlign')).toBe('bottom');
-        });
-
-        it('should combine figure props', () => {
-            const wrapper = shallow(
-                <GenericBlock figure="Figure 1" figureProps={{ className: 'figure1', vAlign: 'left' }}>
-                    <GenericBlock.Figure className="figure2" fillSpace>
-                        Figure 2
-                    </GenericBlock.Figure>
-                </GenericBlock>,
-            );
-
-            const figure = wrapper.find('.lumx-generic-block__figure');
-            expect(figure).toHaveClassName('figure1');
-            expect(figure).toHaveClassName('figure2');
-            expect(figure.prop('fillSpace')).toBe(true);
-            expect(figure.prop('vAlign')).toBe('left');
-            expect(figure).toHaveText('Figure 1Figure 2');
-
-            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
-            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
-        });
-
-        it('should combine content props', () => {
-            const wrapper = shallow(
-                <GenericBlock contentProps={{ className: 'content1', vAlign: 'left' }}>
-                    Content 1
-                    <GenericBlock.Content className="content2" fillSpace>
-                        Content 2
-                    </GenericBlock.Content>
-                </GenericBlock>,
-            );
-
-            const content = wrapper.find('.lumx-generic-block__content');
-            expect(content).toHaveClassName('content1');
-            expect(content).toHaveClassName('content2');
-            expect(content.prop('fillSpace')).toBe(true);
-            expect(content.prop('vAlign')).toBe('left');
-            expect(content).toHaveText('Content 2Content 1');
-
-            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
-            expect(wrapper.find('.lumx-generic-block__actions')).toHaveLength(0);
-        });
-
-        it('should combine actions props', () => {
-            const wrapper = shallow(
-                <GenericBlock actions="Actions 1" actionsProps={{ className: 'actions1', vAlign: 'left' }}>
-                    <GenericBlock.Actions className="actions2" fillSpace>
-                        Actions 2
-                    </GenericBlock.Actions>
-                </GenericBlock>,
-            );
-
-            const actions = wrapper.find('.lumx-generic-block__actions');
-            expect(actions).toHaveClassName('actions1');
-            expect(actions).toHaveClassName('actions2');
-            expect(actions.prop('fillSpace')).toBe(true);
-            expect(actions.prop('vAlign')).toBe('left');
-            expect(actions).toHaveText('Actions 1Actions 2');
-
-            expect(wrapper.find('.lumx-generic-block__figure')).toHaveLength(0);
-            expect(wrapper.find('.lumx-generic-block__content')).toHaveLength(0);
-        });
-
-        it('should forward refs', () => {
-            const rootRef = createRef<HTMLDivElement>();
-            const figureRef = createRef<HTMLDivElement>();
-            const contentRef = createRef<HTMLDivElement>();
-            const actionsRef = createRef<HTMLDivElement>();
-            shallow(
-                <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.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

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

@@ -1,222 +0,0 @@
-import React, { Children, forwardRef, 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/react/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';
-
-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,
-        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/dist/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/dist/src/components/generic-block/index.ts

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

package/dist/src/components/grid/Grid.tsx

@@ -1,73 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Alignment, Orientation, Size } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-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;
-}
-
-/**
- * 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: Comp<GridProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { children, className, gutter, hAlign, orientation, vAlign, 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/dist/src/components/grid/GridItem.tsx

@@ -1,54 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Alignment } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-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;
-}
-
-/**
- * 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: Comp<GridItemProps, HTMLDivElement> = forwardRef((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/dist/src/components/grid/index.ts

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

package/dist/src/components/grid-column/GridColumn.stories.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import { GridColumn } from '@lumx/react/components/grid-column/GridColumn';
-
-import range from 'lodash/range';
-import { Size } from '@lumx/react';
-
-const genericBlockStyle = { border: '1px solid red', padding: '2px 8px' };
-
-export default {
-    title: 'LumX components/grid-column/GridColumn',
-    argTypes: {
-        nbItems: {
-            control: 'number',
-            defaultValue: 6,
-            min: 0,
-        },
-        gap: {
-            control: 'select',
-            options: [Size.tiny, Size.regular, Size.big, Size.huge],
-            defaultValue: Size.regular,
-        },
-        itemMinWidth: {
-            control: 'number',
-            defaultValue: 200,
-        },
-        maxColumns: {
-            control: 'number',
-            defaultValue: 4,
-        },
-    },
-    args: {
-        style: {
-            overflow: 'hidden',
-            resize: 'horizontal',
-        },
-    },
-};
-
-const getItems = (nb) =>
-    range(nb).map((key) => (
-        // eslint-disable-next-line react/jsx-key
-        <div style={genericBlockStyle}>
-            <h2>Column {key}</h2>
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Iaculis at erat
-                pellentesque adipiscing commodo elit at imperdiet dui. Ultricies integer quis auctor elit sed vulputate.
-                Mattis enim ut tellus elementum. Ipsum suspendisse ultrices gravida dictum fusce ut..
-            </p>
-        </div>
-    ));
-
-const Template = ({ nbItems = 5, ...props }) => <GridColumn {...props}>{getItems(nbItems)}</GridColumn>;
-
-export const Default = Template.bind({});

package/dist/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',
-    });
-});