@lumx/react 3.1.1 → 3.1.3-alpha.0

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

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

package/dist/src/components/divider/Divider.test.tsx

@@ -1,93 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils/className';
-
-import { Theme } from '@lumx/react';
-import { Divider, DividerProps } from './Divider';
-
-const DEFAULT_PROPS = Divider.defaultProps as any;
-const CLASSNAME = Divider.className as string;
-
-type SetupProps = Partial<DividerProps>;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: DividerProps = {
-        children: 'Label',
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Divider {...props} />);
-
-    return {
-        hr: wrapper.find('hr'),
-        props,
-        wrapper,
-    };
-};
-
-describe(`<${Divider.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { hr, wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-
-            expect(hr).toExist();
-            expect(hr).toHaveClassName(CLASSNAME);
-        });
-    });
-
-    // 2. Test defaultProps value and important props custom values.
-    describe('Props', () => {
-        it('should use default props', () => {
-            const { hr } = setup();
-
-            Object.keys(DEFAULT_PROPS).forEach((prop: string) => {
-                expect(hr).toHaveClassName(
-                    getBasicClass({ prefix: CLASSNAME, type: prop, value: DEFAULT_PROPS[prop] }),
-                );
-            });
-        });
-
-        it('should use the given `theme`', () => {
-            const testedProp = 'theme';
-            const modifiedProps: SetupProps = {
-                [testedProp]: Theme.dark,
-            };
-
-            const { hr } = setup(modifiedProps);
-
-            expect(hr).toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: modifiedProps[testedProp] }),
-            );
-            expect(hr).not.toHaveClassName(
-                getBasicClass({ prefix: CLASSNAME, type: testedProp, value: DEFAULT_PROPS[testedProp] }),
-            );
-        });
-    });
-
-    // 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: 'hr', prop: 'hr' }, { className: CLASSNAME });
-});

package/dist/src/components/divider/Divider.tsx

@@ -1,51 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import { Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface DividerProps extends GenericProps, HasTheme {}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Divider';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<DividerProps> = {
-    theme: Theme.light,
-};
-
-/**
- * Divider component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Divider: Comp<DividerProps, HTMLHRElement> = forwardRef((props, ref) => {
-    const { className, theme, ...forwardedProps } = props;
-
-    return (
-        <hr
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
-        />
-    );
-});
-Divider.displayName = COMPONENT_NAME;
-Divider.className = CLASSNAME;
-Divider.defaultProps = DEFAULT_PROPS;

package/dist/src/components/divider/__snapshots__/Divider.test.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Divider> Snapshots and structure should render correctly 1`] = `
-<hr
-  className="lumx-divider lumx-divider--theme-light"
->
-  Label
-</hr>
-`;

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

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

package/dist/src/components/drag-handle/DragHandle.tsx

@@ -1,50 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import classNames from 'classnames';
-
-import { mdiDragVertical } from '@lumx/icons';
-import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-/**
- * Defines the props of the component.
- */
-export interface DragHandleProps extends GenericProps, HasTheme {}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'DragHandle';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * DragHandle component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { className, theme, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
-        >
-            <Icon
-                icon={mdiDragVertical}
-                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}
-                size={Size.xs}
-            />
-        </div>
-    );
-});
-DragHandle.displayName = COMPONENT_NAME;
-DragHandle.className = CLASSNAME;

package/dist/src/components/drag-handle/index.ts

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

package/dist/src/components/dropdown/Dropdown.stories.tsx

@@ -1,216 +0,0 @@
-import range from 'lodash/range';
-import React, { useRef, useState } from 'react';
-
-import { mdiHome } from '@lumx/icons';
-import {
-    Alignment,
-    Button,
-    Dropdown,
-    FlexBox,
-    IconButton,
-    List,
-    ListItem,
-    Orientation,
-    Placement,
-    Size,
-} from '@lumx/react';
-
-export default { title: 'LumX components/dropdown/Dropdown' };
-
-export const MatchAnchorWithMinWidth = () => {
-    const buttonRef1 = useRef<any>(null);
-    const buttonRef2 = useRef<any>(null);
-    return (
-        <>
-            <div>Match anchor width only if the dropdown is smaller</div>
-            <FlexBox orientation={Orientation.horizontal}>
-                <IconButton label="Home" icon={mdiHome} ref={buttonRef1} />
-                <Dropdown anchorRef={buttonRef1} isOpen>
-                    Big dropdown
-                </Dropdown>
-
-                <FlexBox marginAuto={Alignment.left}>
-                    <Button ref={buttonRef2}>Big button with long text</Button>
-                </FlexBox>
-                <Dropdown anchorRef={buttonRef2} isOpen>
-                    Small Dropdown
-                </Dropdown>
-            </FlexBox>
-        </>
-    );
-};
-
-export const LongPagePlacement = () => {
-    const anchorFirstRef = React.useRef(null);
-    const [isFirstOpen, setFirstIsOpen] = React.useState(false);
-    const toggleFirstMenu = () => setFirstIsOpen(!isFirstOpen);
-    const closeFirstMenu = () => setFirstIsOpen(false);
-
-    const onFirstMenuSelected = (item: string) => () => {
-        console.log('selected item', item);
-        closeFirstMenu();
-    };
-
-    const anchorSecondRef = React.useRef(null);
-    const [isSecondOpen, setSecondIsOpen] = React.useState(false);
-    const toggleSecondMenu = () => setSecondIsOpen(!isSecondOpen);
-    const closeSecondMenu = () => setSecondIsOpen(false);
-
-    const onSecondMenuSelected = (item: string) => () => {
-        console.log('selected item', item);
-        closeSecondMenu();
-    };
-
-    const anchorThirdRef = React.useRef(null);
-    const [isThirdOpen, setThirdIsOpen] = React.useState(false);
-    const toggleThirdMenu = () => setThirdIsOpen(!isThirdOpen);
-    const closeThirdMenu = () => setThirdIsOpen(false);
-
-    const onThirdMenuSelected = (item: string) => () => {
-        console.log('selected item', item);
-        closeThirdMenu();
-    };
-
-    return (
-        <div className="demo-grid">
-            Scroll down and open the dropdown.
-            <div style={{ marginTop: '100px' }}>
-                <Button ref={anchorFirstRef} onClick={toggleFirstMenu}>
-                    First Menu
-                </Button>
-
-                <Dropdown
-                    closeOnClickAway
-                    closeOnEscape
-                    isOpen={isFirstOpen}
-                    onClose={closeFirstMenu}
-                    placement={Placement.BOTTOM_START}
-                    anchorRef={anchorFirstRef}
-                >
-                    <List isClickable>
-                        <ListItem onItemSelected={onFirstMenuSelected('losangeles')} size={Size.tiny}>
-                            Los Angeles
-                        </ListItem>
-
-                        <ListItem onItemSelected={onFirstMenuSelected('monterrey')} size={Size.tiny}>
-                            Monterrey
-                        </ListItem>
-
-                        <ListItem onItemSelected={onFirstMenuSelected('georgetown')} size={Size.tiny}>
-                            Georgetown
-                        </ListItem>
-
-                        <ListItem onItemSelected={onFirstMenuSelected('cali')} size={Size.tiny}>
-                            Cali
-                        </ListItem>
-
-                        <ListItem onItemSelected={onFirstMenuSelected('trondheim')} size={Size.tiny}>
-                            Trondheim
-                        </ListItem>
-                    </List>
-                </Dropdown>
-            </div>
-            <div style={{ marginTop: '1000px' }}>
-                <Button ref={anchorSecondRef} onClick={toggleSecondMenu}>
-                    Second Menu
-                </Button>
-
-                <Dropdown
-                    closeOnClickAway
-                    closeOnEscape
-                    isOpen={isSecondOpen}
-                    onClose={closeSecondMenu}
-                    placement={Placement.BOTTOM_START}
-                    anchorRef={anchorSecondRef}
-                >
-                    <List isClickable>
-                        <ListItem onItemSelected={onSecondMenuSelected('losangeles')} size={Size.tiny}>
-                            Los Angeles
-                        </ListItem>
-
-                        <ListItem onItemSelected={onSecondMenuSelected('monterrey')} size={Size.tiny}>
-                            Monterrey
-                        </ListItem>
-
-                        <ListItem onItemSelected={onSecondMenuSelected('georgetown')} size={Size.tiny}>
-                            Georgetown
-                        </ListItem>
-
-                        <ListItem onItemSelected={onSecondMenuSelected('cali')} size={Size.tiny}>
-                            Cali
-                        </ListItem>
-
-                        <ListItem onItemSelected={onSecondMenuSelected('trondheim')} size={Size.tiny}>
-                            Trondheim
-                        </ListItem>
-                    </List>
-                </Dropdown>
-            </div>
-            <div style={{ marginTop: '2000px' }}>
-                <Button ref={anchorThirdRef} onClick={toggleThirdMenu}>
-                    Third Menu
-                </Button>
-
-                <Dropdown
-                    closeOnClickAway
-                    closeOnEscape
-                    isOpen={isThirdOpen}
-                    onClose={closeThirdMenu}
-                    placement={Placement.BOTTOM_START}
-                    anchorRef={anchorThirdRef}
-                >
-                    <List isClickable>
-                        <ListItem onItemSelected={onThirdMenuSelected('losangeles')} size={Size.tiny}>
-                            Los Angeles
-                        </ListItem>
-
-                        <ListItem onItemSelected={onThirdMenuSelected('monterrey')} size={Size.tiny}>
-                            Monterrey
-                        </ListItem>
-
-                        <ListItem onItemSelected={onThirdMenuSelected('georgetown')} size={Size.tiny}>
-                            Georgetown
-                        </ListItem>
-
-                        <ListItem onItemSelected={onThirdMenuSelected('cali')} size={Size.tiny}>
-                            Cali
-                        </ListItem>
-
-                        <ListItem onItemSelected={onThirdMenuSelected('trondheim')} size={Size.tiny}>
-                            Trondheim
-                        </ListItem>
-                    </List>
-                </Dropdown>
-            </div>
-        </div>
-    );
-};
-LongPagePlacement.parameters = {
-    // Disables Chromatic snapshot (not relevant for this story).
-    chromatic: { disable: true },
-};
-
-export const InfiniteScroll = () => {
-    const buttonRef = useRef(null);
-    const [items, setItems] = useState(range(10));
-    const onInfiniteScroll = () => {
-        setItems([...items, ...range(items.length, items.length + 10)]);
-    };
-
-    return (
-        <>
-            <Button ref={buttonRef}>Anchor</Button>
-            <Dropdown anchorRef={buttonRef} isOpen onInfiniteScroll={onInfiniteScroll}>
-                <List>
-                    {items.map((item) => (
-                        <ListItem key={item}>{item}</ListItem>
-                    ))}
-                </List>
-            </Dropdown>
-        </>
-    );
-};
-InfiniteScroll.parameters = {
-    // Disables Chromatic snapshot (not relevant for this story).
-    chromatic: { disable: true },
-};

package/dist/src/components/dropdown/Dropdown.test.tsx

@@ -1,97 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-
-import { Dropdown, DropdownProps } from './Dropdown';
-
-const CLASSNAME = Dropdown.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = ({ ...propsOverride }: Partial<DropdownProps> = {}, shallowRendering = true) => {
-    const anchorRef = React.createRef<HTMLButtonElement>();
-    const props: DropdownProps = {
-        anchorRef,
-        children: <div>This is the content of the dropdown</div>,
-        isOpen: true,
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<Dropdown {...props} />);
-    return {
-        props,
-        wrapper,
-    };
-};
-
-describe(`<${Dropdown.displayName}>`, () => {
-    // 1. Test render via snapshot (default states of component).
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-            expect(wrapper).toHaveClassName(CLASSNAME);
-        });
-    });
-
-    // 3. Test events.
-    describe('Events', () => {
-        const onClose: jest.Mock = jest.fn();
-        let eventListeners: {
-            keydown?(evt: any): void;
-        };
-
-        beforeEach(() => {
-            document.body.addEventListener = jest.fn((type, cb) => {
-                (eventListeners as any)[type] = cb;
-            });
-            eventListeners = {};
-            onClose.mockClear();
-        });
-
-        it('should trigger `onClose` when pressing `escape` key', () => {
-            setup(
-                {
-                    closeOnEscape: true,
-                    onClose,
-                    isOpen: true,
-                },
-                false,
-            );
-
-            eventListeners.keydown?.({ key: 'Escape' });
-            expect(onClose).toHaveBeenCalled();
-        });
-
-        it('should not trigger `onClose` when pressing any other key', () => {
-            setup({ isOpen: true, onClose, closeOnEscape: true }, false);
-
-            eventListeners.keydown?.({ key: 'a' });
-            expect(onClose).not.toHaveBeenCalled();
-        });
-
-        it('should not trigger `onClose` when pressing `escape` key with `closeOnEscape` set to `false`', () => {
-            setup({ isOpen: true, onClose, closeOnEscape: false }, false);
-
-            eventListeners.keydown?.({ key: 'Escape' });
-            expect(onClose).not.toHaveBeenCalled();
-        });
-    });
-
-    // 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 });
-});