@lumx/react 3.0.7 → 3.1.0

package/dist/src/components/list/useInteractiveList.tsx

@@ -0,0 +1,202 @@
+import { ListItemProps } from '@lumx/react';
+import { isClickable } from '@lumx/react/components/list/ListItem';
+
+import { isComponent } from '@lumx/react/utils/type';
+import { flattenChildren } from '@lumx/react/utils/flattenChildren';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
+import get from 'lodash/get';
+import {
+    cloneElement,
+    Key,
+    ReactElement,
+    ReactNode,
+    RefObject,
+    SyntheticEvent,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react';
+
+type Listener = (evt: KeyboardEvent) => void;
+
+interface Options {
+    /** List of items to navigate on. */
+    items: ReactNode[] | ReactNode;
+    /** Reference to the list-like element controlling the navigation. */
+    ref: RefObject<HTMLElement>;
+
+    /**
+     * On list item navigated callback (triggered on ARROW key navigation).
+     *
+     * @param index Index of the navigated item among the sibling items.
+     * @param key   React key of the navigated item.
+     */
+    onListItemNavigated?(index: number, key: Key | null): void;
+
+    /**
+     * On list item selected callback (via ENTER key or click).
+     *
+     * @param index Index of the selected item among the sibling items.
+     * @param key   React key of the selected item.
+     * @param evt   Source event (either mouse or keyboard event).
+     */
+    onListItemSelected?(index: number, key: Key | null, evt: SyntheticEvent): void;
+}
+
+interface Output {
+    /** List of items transformed to accommodate keyboard navigation. */
+    items: ReactNode[];
+    /** Whether the list contains clickable items or not. */
+    hasClickableItem: boolean;
+}
+
+export type useInteractiveList = (options: Options) => Output;
+
+const INITIAL_INDEX = -1;
+
+function onKeyboardFocus(props: any, handler: (evt: FocusEvent) => void) {
+    let isMouseDown = false;
+    return {
+        onFocus(evt: FocusEvent) {
+            props.onFocus?.(evt);
+            if (!isMouseDown) {
+                handler(evt);
+            }
+        },
+        onMouseDown(evt: MouseEvent) {
+            props.onMouseDown?.(evt);
+            isMouseDown = true;
+        },
+        onMouseUp(evt: MouseEvent) {
+            props.onMouseUp?.(evt);
+            isMouseDown = false;
+        },
+    };
+}
+
+const isNavigableItem = (node: ReactNode): node is ReactElement => {
+    return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;
+};
+
+/**
+ * This custom hook detects clickable list item in a list and make them navigable with the keyboard.
+ *
+ * @param  options See {@link Options}
+ * @return See {@link Output}
+ */
+export const useInteractiveList: useInteractiveList = (options) => {
+    const { ref, onListItemSelected, onListItemNavigated } = options;
+    const items = useMemo(() => flattenChildren(options.items), [options.items]);
+    const [activeItemIndex, setActiveItemIndex] = useState(INITIAL_INDEX);
+
+    // Attach listeners to the list.
+    useEffect(() => {
+        const { current: listElement } = ref;
+        if (!listElement) {
+            return undefined;
+        }
+
+        /**
+         * This function calculates the next index in the list to be active
+         * @param  index current index
+         * @param  code  key code pressed
+         * @return next index
+         */
+        const getNextIndex = (index: number, key: string): number => {
+            switch (key) {
+                case 'ArrowDown':
+                    return index + 1 < items.length ? index + 1 : 0;
+                case 'ArrowUp':
+                    return index - 1 >= 0 ? index - 1 : items.length - 1;
+                default:
+                    return INITIAL_INDEX;
+            }
+        };
+
+        /**
+         * Resets the active index to the initial state
+         */
+        const resetActiveIndex = () => {
+            setActiveItemIndex(INITIAL_INDEX);
+        };
+
+        /**
+         * Handles navigation with the arrows using the keyboard
+         * @param evt Key event
+         */
+        const onArrowPressed: Listener = (evt) => {
+            const { key } = evt;
+            if (key !== 'ArrowUp' && key !== 'ArrowDown') {
+                return;
+            }
+
+            let nextIndex = activeItemIndex;
+            let iterations = 0;
+
+            // Move to next navigable item.
+            do {
+                nextIndex = getNextIndex(nextIndex, key);
+                iterations += 1;
+            } while (
+                nextIndex !== INITIAL_INDEX &&
+                nextIndex !== activeItemIndex &&
+                !isNavigableItem(items[nextIndex] as any) &&
+                iterations < items.length
+            );
+
+            setActiveItemIndex(nextIndex);
+            evt.preventDefault();
+            evt.stopPropagation();
+            onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));
+        };
+
+        /**
+         * Reset active list item index when focusing outside the list.
+         * @param evt Focus out event
+         */
+        const onFocusOut = (evt: FocusEvent) => {
+            if (!evt.relatedTarget || !listElement.contains(evt.relatedTarget as any)) {
+                resetActiveIndex();
+            }
+        };
+
+        listElement.addEventListener('focusout', onFocusOut);
+        listElement.addEventListener('keydown', onArrowPressed);
+        return () => {
+            listElement.removeEventListener('focusout', onFocusOut);
+            listElement.removeEventListener('keydown', onArrowPressed);
+        };
+    }, [ref, activeItemIndex, items, onListItemNavigated]);
+
+    return useMemo(() => {
+        let hasClickableItem = false;
+        const transformedItems = items.map((item, index) => {
+            // Ignore if list not clickable or item is not a simple list item.
+            if (!isNavigableItem(item)) {
+                return item;
+            }
+
+            hasClickableItem = true;
+            const isHighlighted = index === activeItemIndex;
+
+            // Clone list item: inject ref, add tab index and active state.
+            return cloneElement<ListItemProps>(item, {
+                ...item.props,
+                isHighlighted: item.props.isHighlighted ?? isHighlighted,
+                linkRef: mergeRefs(item.props.linkRef, (element: any) => {
+                    if (isHighlighted) {
+                        element?.focus();
+                    }
+                }),
+                onItemSelected(evt) {
+                    item.props.onItemSelected?.();
+                    onListItemSelected?.(index, item.key, evt);
+                },
+                ...onKeyboardFocus(item.props, () => {
+                    setActiveItemIndex(index);
+                }),
+            });
+        });
+        return { items: transformedItems, hasClickableItem };
+    }, [items, activeItemIndex, onListItemSelected]);
+};

package/dist/src/components/message/Message.stories.tsx

@@ -0,0 +1,27 @@
+import { Kind, Message } from '@lumx/react';
+import { boolean, text } from '@storybook/addon-knobs';
+import React from 'react';
+import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
+import { mdiDelete } from '@lumx/icons/';
+
+export default { title: 'LumX components/message/Message' };
+
+export const Default = () => (
+    <Message
+        kind={enumKnob('Kind of message', [undefined, ...Object.values(Kind)], undefined)}
+        hasBackground={boolean('Has background', false)}
+    >
+        {text(
+            'Message',
+            `Message text quisque tincidunt lobortis dui non auctor.Donec porta,
+                ligula volutpat vehicula aliquet, dui sapien tempus felis, sed.`,
+        )}
+    </Message>
+);
+
+export const CustomIcon = () => (
+    <Message icon={mdiDelete} kind="info" hasBackground>
+        Lorem ipsum quisque tincidunt lobortis dui non auctor.Donec porta, ligula volutpat vehicula aliquet, dui sapien
+        tempus felis, sed.
+    </Message>
+);

package/dist/src/components/message/Message.test.tsx

@@ -0,0 +1,76 @@
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+import { Kind } from '@lumx/react';
+import { getBasicClass } from '@lumx/react/utils/className';
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+import React, { ReactElement } from 'react';
+import { Message, MessageProps } from './Message';
+
+const CLASSNAME = Message.className as string;
+
+type SetupProps = Partial<MessageProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
+    const props: any = { ...propsOverride };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper: Wrapper = renderer(
+        <Message {...props}>
+            <span>Lorem Ipsum</span>
+        </Message>,
+    );
+    const message: Wrapper = wrapper.find('div').first();
+
+    return { message, props, wrapper };
+};
+
+describe(`<${Message.displayName}>`, () => {
+    // 1. Test render via snapshot (default states of component).
+    describe('Snapshots and structure', () => {
+        // Here is an example of a basic rendering check, with snapshot.
+
+        it('should render correctly', () => {
+            const { wrapper } = setup();
+            expect(wrapper).toMatchSnapshot();
+
+            expect(wrapper).toExist();
+            expect(wrapper).toHaveClassName(CLASSNAME);
+        });
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        // Here are some examples of basic props check.
+
+        it('should use the given `kind`', () => {
+            const testedProp = 'kind';
+            const modifiedProps: Partial<MessageProps> = {
+                [testedProp]: Kind.success,
+            };
+
+            const { message } = setup(modifiedProps);
+
+            expect(message).toHaveClassName(getBasicClass({ prefix: CLASSNAME, type: 'color', value: `green` }));
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        // Nothing to do here.
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        // Nothing to do here.
+    });
+
+    // 5. Test state.
+    describe('State', () => {
+        // Nothing to do here.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
+});

package/dist/src/components/message/Message.tsx

@@ -0,0 +1,74 @@
+import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';
+import { ColorPalette, Icon, Kind, Size } from '@lumx/react';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import classNames from 'classnames';
+import React, { forwardRef, ReactNode } from 'react';
+
+/**
+ * Defines the props of the component.
+ */
+export interface MessageProps extends GenericProps {
+    /** Content. */
+    children?: ReactNode;
+    /** Whether the message has a background or not. */
+    hasBackground?: boolean;
+    /** Message variant. */
+    kind?: Kind;
+    /** Message custom icon SVG path. */
+    icon?: string;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Message';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Associative map from message kind to color and icon.
+ */
+const CONFIG = {
+    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },
+    [Kind.info]: { color: ColorPalette.dark, icon: mdiInformation },
+    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },
+    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },
+};
+
+/**
+ * Message component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, ref) => {
+    const { children, className, hasBackground, kind, icon: customIcon, ...forwardedProps } = props;
+    const { color, icon } = CONFIG[kind as Kind] || {};
+
+    return (
+        <div
+            ref={ref}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    color,
+                    hasBackground,
+                    prefix: CLASSNAME,
+                }),
+            )}
+            {...forwardedProps}
+        >
+            {(customIcon || icon) && (
+                <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} color={color} />
+            )}
+            <div className={`${CLASSNAME}__text`}>{children}</div>
+        </div>
+    );
+});
+Message.displayName = COMPONENT_NAME;
+Message.className = CLASSNAME;

package/dist/src/components/message/__snapshots__/Message.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Message> Snapshots and structure should render correctly 1`] = `
+<div
+  className="lumx-message"
+>
+  <div
+    className="lumx-message__text"
+  >
+    <span>
+      Lorem Ipsum
+    </span>
+  </div>
+</div>
+`;

package/dist/src/components/message/index.ts

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

package/dist/src/components/mosaic/Mosaic.stories.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useRef, useState } from 'react';
+
+import { Alignment, ImageBlock, Lightbox, Slideshow, SlideshowItem, Theme } from '@lumx/react';
+import { boolean, number } from '@storybook/addon-knobs';
+import { thumbnailsKnob } from '@lumx/react/stories/knobs/thumbnailsKnob';
+import { Mosaic } from './Mosaic';
+
+export default { title: 'LumX components/mosaic/Mosaic' };
+
+export const OneThumbnail = ({ theme }: any) => (
+    <div style={{ width: 250 }}>
+        <Mosaic theme={theme} thumbnails={thumbnailsKnob(1)} />
+    </div>
+);
+
+export const TwoThumbnails = ({ theme }: any) => (
+    <div style={{ width: 250 }}>
+        <Mosaic theme={theme} thumbnails={thumbnailsKnob(2)} />
+    </div>
+);
+
+export const ThreeThumbnails = ({ theme }: any) => (
+    <div style={{ width: 250 }}>
+        <Mosaic theme={theme} thumbnails={thumbnailsKnob(3)} />
+    </div>
+);
+
+export const FourThumbnails = ({ theme }: any) => (
+    <div style={{ width: 250 }}>
+        <Mosaic theme={theme} thumbnails={thumbnailsKnob(4)} />
+    </div>
+);
+
+export const FiveThumbnails = ({ theme }: any) => (
+    <div style={{ width: 250 }}>
+        <Mosaic theme={theme} thumbnails={thumbnailsKnob(5)} />
+    </div>
+);
+
+export const SixThumbnails = ({ theme }: any) => {
+    const enableSlideShow = boolean('Enable slideshow', true);
+    const thumbnails = thumbnailsKnob(number('Number of thumbnails', 6, { min: 1, max: 6 }));
+    const [activeIndex, setActiveIndex] = useState<number>();
+    const lightBoxParent = useRef(null);
+    const closeLightBox = useCallback(() => {
+        setActiveIndex(undefined);
+    }, [setActiveIndex]);
+
+    return (
+        <div ref={lightBoxParent} style={{ width: 250 }}>
+            <Mosaic theme={theme} onImageClick={enableSlideShow ? setActiveIndex : undefined} thumbnails={thumbnails} />
+
+            {enableSlideShow && (
+                <Lightbox
+                    isOpen={activeIndex !== undefined}
+                    parentElement={lightBoxParent}
+                    onClose={closeLightBox}
+                    closeButtonProps={{ label: 'Close' }}
+                >
+                    <Slideshow
+                        activeIndex={activeIndex}
+                        slideshowControlsProps={{
+                            nextButtonProps: { label: 'Next' },
+                            previousButtonProps: { label: 'Previous' },
+                        }}
+                        fillHeight
+                        theme={Theme.dark}
+                    >
+                        {thumbnails.map((thumbnail, index) => (
+                            <SlideshowItem key={`${thumbnail.alt}-${thumbnail.image}-${index}`}>
+                                <ImageBlock
+                                    alt={thumbnail.alt}
+                                    image={thumbnail.image}
+                                    theme={Theme.dark}
+                                    align={Alignment.center}
+                                    fillHeight
+                                />
+                            </SlideshowItem>
+                        ))}
+                    </Slideshow>
+                </Lightbox>
+            )}
+        </div>
+    );
+};

package/dist/src/components/mosaic/Mosaic.test.tsx

@@ -0,0 +1,120 @@
+import { Mosaic, MosaicProps } from '@lumx/react/components/mosaic/Mosaic';
+import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
+
+import { mount, shallow } from 'enzyme';
+import 'jest-enzyme';
+
+import React, { ReactElement } from 'react';
+import { Theme } from '..';
+import * as stories from './Mosaic.stories';
+
+const CLASSNAME = Mosaic.className as string;
+
+// Mock out the useIntersectionObserver hook since it can't work with Jest/Enzyme.
+jest.mock('@lumx/react/hooks/useIntersectionObserver', () => ({
+    useIntersectionObserver: () => new Map(),
+}));
+
+type SetupProps = Partial<MosaicProps>;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: SetupProps = {}, shallowRendering = true) => {
+    const props: any = { ...propsOverride };
+    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
+    const wrapper = renderer(<Mosaic {...props} />);
+
+    return {
+        thumbnails: wrapper.find('Thumbnail'),
+        props,
+        wrapper,
+    };
+};
+
+describe(`<${Mosaic.displayName}>`, () => {
+    // 1. Test render via snapshot.
+    describe('Snapshots and structure', () => {
+        // Do snapshot render test on every stories.
+        for (const [storyName, Story] of Object.entries(stories)) {
+            if (typeof Story !== 'function') {
+                continue;
+            }
+
+            it(`should render story ${storyName}`, () => {
+                const wrapper = shallow(<Story />);
+                expect(wrapper.find('Mosaic').dive()).toMatchSnapshot();
+            });
+        }
+    });
+
+    // 2. Test defaultProps value and important props custom values.
+    describe('Props', () => {
+        it('should pass theme prop to Thumbnails', () => {
+            const expectedTheme = Theme.dark;
+            const { thumbnails } = setup({
+                theme: expectedTheme,
+                thumbnails: [
+                    { alt: 'image0', image: 'image/file/path/0' },
+                    { alt: 'image1', image: 'image/file/path/1' },
+                    { alt: 'image2', image: 'image/file/path/2' },
+                    { alt: 'image3', image: 'image/file/path/3' },
+                ],
+            });
+            thumbnails.forEach((thumbnail: Wrapper) => {
+                expect(thumbnail.prop('theme')).toBe(expectedTheme);
+            });
+        });
+    });
+
+    // 3. Test events.
+    describe('Events', () => {
+        it('should keep Thumbnail onClick', () => {
+            const onClick = jest.fn();
+            const { thumbnails } = setup({
+                thumbnails: [
+                    { alt: 'image0', image: 'image/file/path/0', onClick },
+                    { alt: 'image1', image: 'image/file/path/1' },
+                    { alt: 'image2', image: 'image/file/path/2' },
+                    { alt: 'image3', image: 'image/file/path/3' },
+                ],
+            });
+            thumbnails.forEach((thumbnail: Wrapper) => {
+                thumbnail.simulate('click');
+            });
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+
+        it('should handle both Thumbnail onClick and Mosaic onImageClick', () => {
+            const onImageClick = jest.fn();
+            const onClick = jest.fn();
+            const { thumbnails } = setup({
+                onImageClick,
+                thumbnails: [
+                    { alt: 'image0', image: 'image/file/path/0', onClick },
+                    { alt: 'image1', image: 'image/file/path/1' },
+                    { alt: 'image2', image: 'image/file/path/2' },
+                    { alt: 'image3', image: 'image/file/path/3' },
+                ],
+            });
+            thumbnails.forEach((thumbnail: Wrapper) => {
+                thumbnail.simulate('click');
+            });
+            expect(onClick).toHaveBeenCalledTimes(1);
+            expect(onImageClick).toHaveBeenCalledTimes(4);
+        });
+    });
+
+    // 4. Test conditions (i.e. things that display or not in the UI based on props).
+    describe('Conditions', () => {
+        // Nothing to do here.
+    });
+
+    // 5. Test state.
+    describe('State', () => {
+        // Nothing to do here.
+    });
+
+    // Common tests suite.
+    commonTestsSuite(setup, { className: 'wrapper' }, { className: CLASSNAME });
+});