@lumx/react 3.1.1 → 3.1.3-alpha.0

package/dist/src/components/list/List.test.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { List, ListProps } from './List';
-import * as stories from './List.stories';
-
-const CLASSNAME = List.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ListProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<List {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${List.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, List);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

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

@@ -1,94 +0,0 @@
-import { Size } from '@lumx/react';
-
-import { useKeyboardListNavigation } from '@lumx/react/hooks/useKeyboardListNavigation';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { mergeRefs } from '@lumx/react/utils/mergeRefs';
-
-import classNames from 'classnames';
-import React, { forwardRef, Key, ReactNode, SyntheticEvent, useRef } from 'react';
-import { useInteractiveList } from './useInteractiveList';
-
-/**
- * Defines the props of the component.
- */
-export interface ListProps extends GenericProps {
-    /** List content (should be ListItem, ListSubheader or ListDivider). */
-    children: ReactNode;
-    /**
-     * Whether the list items are clickable.
-     * @deprecated not needed anymore.
-     */
-    isClickable?: boolean;
-    /** Item padding size. */
-    itemPadding?: Extract<Size, 'big' | 'huge'>;
-    /** Tab index of the list. Default to -1 */
-    tabIndex?: number;
-    /**
-     * On list item selected callback.
-     *
-     * @param key   React key of the selected item.
-     * @param index Index of the selected item among the sibling items.
-     * @param evt   Source event (either mouse or keyboard event).
-     */
-    onListItemSelected?(key: Key, index: number, evt: SyntheticEvent): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'List';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ListProps> = {
-    tabIndex: -1,
-};
-
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-/**
- * List component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const InternalList: Comp<ListProps, HTMLUListElement> = forwardRef((props, ref) => {
-    const { children, className, isClickable, itemPadding, onListItemSelected, tabIndex, ...forwardedProps } = props;
-    const listElementRef = useRef<HTMLUListElement>(null);
-
-    const { items, hasClickableItem } = useInteractiveList({
-        items: children,
-        ref: listElementRef,
-        onListItemSelected,
-    });
-    const clickable = hasClickableItem || isClickable;
-
-    return (
-        <ul
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    itemPadding: itemPadding ?? (clickable ? Size.big : undefined),
-                }),
-            )}
-            tabIndex={tabIndex}
-            ref={mergeRefs(ref, listElementRef)}
-        >
-            {items}
-        </ul>
-    );
-});
-InternalList.displayName = COMPONENT_NAME;
-InternalList.className = CLASSNAME;
-InternalList.defaultProps = DEFAULT_PROPS;
-
-export const List = Object.assign(InternalList, { useKeyboardListNavigation });

package/dist/src/components/list/ListDivider.stories.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import { ListDivider } from './ListDivider';
-
-export default { title: 'LumX components/list/ListDivider' };
-
-export const Default = () => <ListDivider />;

package/dist/src/components/list/ListDivider.test.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { ListDivider, ListDividerProps } from './ListDivider';
-import * as stories from './ListDivider.stories';
-
-const CLASSNAME = ListDivider.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ListDividerProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<ListDivider {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${ListDivider.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, ListDivider);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

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

@@ -1,42 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export type ListDividerProps = GenericProps;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ListDivider';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * ListDivider component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ListDivider: Comp<ListDividerProps, HTMLLIElement> = forwardRef((props, ref) => {
-    const { className, ...forwardedProps } = props;
-
-    return (
-        <li
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
-        />
-    );
-});
-ListDivider.displayName = COMPONENT_NAME;
-ListDivider.className = CLASSNAME;

package/dist/src/components/list/ListItem.stories.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-
-import { Size } from '@lumx/react';
-import { select, text } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-
-import { ListItem } from './ListItem';
-
-export default { title: 'LumX components/list/ListItem' };
-
-export const NonClickable = ({ theme }: any) => <ListItem theme={theme}>{text('text', 'Text')}</ListItem>;
-
-export const Link = ({ theme }: any) => (
-    <ListItem theme={theme} linkProps={{ href: '#' }}>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const Button = ({ theme }: any) => (
-    <ListItem theme={theme} onItemSelected={action('onItemSelected')}>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const LinkDisabled = ({ theme }: any) => (
-    <ListItem theme={theme} linkProps={{ href: '#' }} isDisabled>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const ButtonDisabled = ({ theme }: any) => (
-    <ListItem theme={theme} onItemSelected={action('onItemSelected')} isDisabled>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const Selected = ({ theme }: any) => (
-    <ListItem theme={theme} linkProps={{ href: '#' }} isSelected>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const Highlighted = ({ theme }: any) => (
-    <ListItem theme={theme} linkProps={{ href: '#' }} isHighlighted>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-export const Sizes = ({ theme }: any) => (
-    <ListItem theme={theme} size={select('size', [Size.tiny, Size.regular, Size.big, Size.huge], Size.tiny)}>
-        {text('text', 'Text')}
-    </ListItem>
-);
-
-const CustomLink: React.FC = ({ children, ...props }) =>
-    React.createElement('a', { ...props, style: { color: 'red' }, href: 'http://google.com' }, children);
-
-export const WithCustomLink = ({ theme }: any) => (
-    <ListItem theme={theme} linkAs={CustomLink}>
-        My custom link
-    </ListItem>
-);

package/dist/src/components/list/ListItem.test.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { ListItem, ListItemProps } from './ListItem';
-import * as stories from './ListItem.stories';
-
-const CLASSNAME = ListItem.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ListItemProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<ListItem {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${ListItem.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, ListItem);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

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

@@ -1,154 +0,0 @@
-import React, { forwardRef, ReactNode, Ref, SyntheticEvent, useMemo } from 'react';
-
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-
-import { ListProps, Size } from '@lumx/react';
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { onEnterPressed, onButtonPressed } from '@lumx/react/utils/event';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-import { renderLink } from '@lumx/react/utils/renderLink';
-
-export type ListItemSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;
-
-/**
- * Defines the props of the component.
- */
-export interface ListItemProps extends GenericProps {
-    /** A component to be rendered after the content. */
-    after?: ReactNode;
-    /** A component to be rendered before the content. */
-    before?: ReactNode;
-    /** Content. */
-    children: string | ReactNode;
-    /** Whether the list item should be highlighted or not. */
-    isHighlighted?: boolean;
-    /** Whether the component is selected or not. */
-    isSelected?: boolean;
-    /** Whether link/button is disabled or not. */
-    isDisabled?: boolean;
-    /** Reference to the <li> element. */
-    listItemRef?: Ref<HTMLLIElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    /** Props that will be passed on to the Link */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Reference to the link element. */
-    linkRef?: Ref<HTMLAnchorElement>;
-    /** Size variant. */
-    size?: ListItemSize;
-
-    /** On selected callback. */
-    onItemSelected?(evt: SyntheticEvent): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ListItem';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ListProps> = {
-    size: Size.regular,
-};
-
-/**
- * Check if the list item is clickable.
- * @return `true` if the list item is clickable; `false` otherwise.
- */
-export function isClickable({ linkProps, onItemSelected }: Partial<ListItemProps>): boolean {
-    return !isEmpty(linkProps?.href) || !!onItemSelected;
-}
-
-/**
- * ListItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ListItem: Comp<ListItemProps, HTMLLIElement> = forwardRef((props, ref) => {
-    const {
-        after,
-        before,
-        children,
-        className,
-        isHighlighted,
-        isSelected,
-        isDisabled,
-        linkAs,
-        linkProps = {},
-        linkRef,
-        onItemSelected,
-        size,
-        ...forwardedProps
-    } = props;
-
-    const role = linkAs || linkProps.href ? 'link' : 'button';
-    const onKeyDown = useMemo(() => {
-        if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected as any);
-        if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected as any);
-        return undefined;
-    }, [role, onItemSelected]);
-
-    const content = (
-        <>
-            {before && <div className={`${CLASSNAME}__before`}>{before}</div>}
-            <div className={`${CLASSNAME}__content`}>{children}</div>
-            {after && <div className={`${CLASSNAME}__after`}>{after}</div>}
-        </>
-    );
-
-    return (
-        <li
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    size,
-                }),
-            )}
-        >
-            {isClickable({ linkProps, onItemSelected }) ? (
-                /* Clickable list item */
-                renderLink(
-                    {
-                        linkAs,
-                        tabIndex: !isDisabled && role === 'button' ? 0 : undefined,
-                        role,
-                        'aria-disabled': isDisabled,
-                        ...linkProps,
-                        href: isDisabled ? undefined : linkProps.href,
-                        className: classNames(
-                            handleBasicClasses({
-                                prefix: `${CLASSNAME}__link`,
-                                isHighlighted,
-                                isSelected,
-                                isDisabled,
-                            }),
-                        ),
-                        onClick: isDisabled ? undefined : onItemSelected,
-                        onKeyDown,
-                        ref: linkRef,
-                    },
-                    content,
-                )
-            ) : (
-                /* Non clickable list item */
-                <div className={`${CLASSNAME}__wrapper`}>{content}</div>
-            )}
-        </li>
-    );
-});
-ListItem.displayName = COMPONENT_NAME;
-ListItem.className = CLASSNAME;
-ListItem.defaultProps = DEFAULT_PROPS;

package/dist/src/components/list/ListSubheader.stories.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-
-import { ListSubheader } from '@lumx/react';
-import { text } from '@storybook/addon-knobs';
-
-export default { title: 'LumX components/list/ListSubheader' };
-
-export const Default = () => <ListSubheader>{text('text', 'Text')}</ListSubheader>;

package/dist/src/components/list/ListSubheader.test.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { ListSubheader, ListSubheaderProps } from './ListSubheader';
-import * as stories from './ListSubheader.stories';
-
-const CLASSNAME = ListSubheader.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<ListSubheaderProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<ListSubheader {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${ListSubheader.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, ListSubheader);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

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

@@ -1,43 +0,0 @@
-import React, { forwardRef, ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Comp, GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface ListSubheaderProps extends GenericProps {
-    /** Content. */
-    children: string | ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ListSubheader';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * ListSubheader component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const ListSubheader: Comp<ListSubheaderProps, HTMLLIElement> = forwardRef((props, ref) => {
-    const { children, className, ...forwardedProps } = props;
-
-    return (
-        <li ref={ref} {...forwardedProps} className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}>
-            {children}
-        </li>
-    );
-});
-ListSubheader.displayName = COMPONENT_NAME;
-ListSubheader.className = CLASSNAME;