@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

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

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

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

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

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

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

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

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