@lumx/react 3.0.2 → 3.0.3-alpha.1

package/src/components/slider/Slider.tsx

@@ -6,7 +6,8 @@ import classNames from 'classnames';
 import { InputHelper, InputLabel, Theme } from '@lumx/react';
 
 import useEventCallback from '@lumx/react/hooks/useEventCallback';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { uid } from 'uid';
 import { clamp } from '@lumx/react/utils/clamp';

package/src/components/slideshow/Slides.tsx

@@ -4,7 +4,8 @@ import chunk from 'lodash/chunk';
 import classNames from 'classnames';
 
 import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
 
 export interface SlidesProps extends GenericProps, HasTheme {

package/src/components/slideshow/Slideshow.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { SlideshowControls, SlideshowControlsProps, Theme, Slides, SlidesProps } from '@lumx/react';
 import { DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
-import { Comp, GenericProps } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { buildSlideShowGroupId } from './SlideshowItemGroup';

package/src/components/slideshow/SlideshowControls.tsx

@@ -5,7 +5,8 @@ import range from 'lodash/range';
 
 import { mdiChevronLeft, mdiChevronRight, mdiPlayCircleOutline, mdiPauseCircleOutline } from '@lumx/icons';
 import { Emphasis, IconButton, IconButtonProps, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { WINDOW } from '@lumx/react/constants';
 import { useSlideshowControls, DEFAULT_OPTIONS } from '@lumx/react/hooks/useSlideshowControls';
 import { useRovingTabIndex } from '@lumx/react/hooks/useRovingTabIndex';

package/src/components/slideshow/SlideshowItem.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/slideshow/SlideshowItemGroup.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { useSlideFocusManagement } from './useSlideFocusManagement';
 
 /**

package/src/components/switch/Switch.test.tsx

@@ -7,7 +7,7 @@ import { build, oneOf } from 'test-data-bot';
 import without from 'lodash/without';
 
 import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Theme, Alignment } from '@lumx/react';
 import { Switch, SwitchProps } from './Switch';

package/src/components/switch/Switch.tsx

@@ -7,7 +7,8 @@ import isEmpty from 'lodash/isEmpty';
 
 import { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/table/Table.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/table/TableBody.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/table/TableCell.tsx

@@ -3,7 +3,9 @@ import React, { forwardRef, useCallback } from 'react';
 import classNames from 'classnames';
 
 import { Icon, Size } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, onEnterPressed, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { onEnterPressed } from '@lumx/react/utils/event';
 
 import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';
 

package/src/components/table/TableHeader.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/table/TableRow.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/tabs/Tab.test.tsx

@@ -1,6 +1,6 @@
 import { mdiCheck } from '@lumx/icons';
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';

package/src/components/tabs/Tab.tsx

@@ -1,6 +1,7 @@
 import { Icon, IconProps, Size } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
 import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';

package/src/components/tabs/TabList.test.tsx

@@ -1,7 +1,7 @@
 import { Tab, Alignment } from '@lumx/react';
 
 import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';

package/src/components/tabs/TabList.tsx

@@ -1,6 +1,7 @@
 import { Alignment, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import classNames from 'classnames';

package/src/components/tabs/TabPanel.tsx

@@ -1,6 +1,7 @@
 import { useTabProviderContext } from '@lumx/react/components/tabs/state';
 import { CSS_PREFIX } from '@lumx/react/constants';
-import { Comp, GenericProps, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/react/utils/className';
 
 import classNames from 'classnames';
 import React, { forwardRef } from 'react';

package/src/components/text/{Text.stories.tsx → Text.stories.jsx}

@@ -1,38 +1,37 @@
 import React from 'react';
-import { ColorPalette, ColorVariant, TypographyCustom, TypographyInterface } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, TypographyCustom, TypographyInterface } from '@lumx/react';
+import { mdiEarth, mdiHeart } from '@lumx/icons';
+import { withResizableBox } from '@lumx/react/stories/withResizableBox';
 import { Text } from './Text';
 
 export default { title: 'LumX components/text/Text' };
 
 export const Default = () => <Text as="p">Some text</Text>;
 
-const withResizableBox = (Story: any) => (
-    <div
-        style={{
-            width: 150,
-            height: 60,
-            border: '1px solid red',
-            resize: 'both',
-            overflow: 'hidden',
-        }}
-    >
-        <Story />
-    </div>
-);
-
-export const Truncate = () => (
-    <Text as="p" truncate>
-        Some very very very long text
+export const WithIcon = (args) => (
+    <Text as="p" {...args}>
+        Some text <Icon icon={mdiHeart} /> with icons <Icon icon={mdiEarth} />
     </Text>
 );
-Truncate.decorators = [withResizableBox];
 
-export const TruncateMultiline = () => (
-    <Text as="p" truncate={{ lines: 2 }}>
+export const LongText = (args) => (
+    <Text as="p" {...args}>
         Some very very very very very very very very very long text
     </Text>
 );
-TruncateMultiline.decorators = [withResizableBox];
+LongText.decorators = [withResizableBox()];
+
+export const NoWrap = LongText.bind({});
+NoWrap.args = { noWrap: true };
+NoWrap.decorators = [withResizableBox()];
+
+export const Truncate = LongText.bind({});
+Truncate.args = { truncate: true };
+Truncate.decorators = [withResizableBox()];
+
+export const TruncateMultiline = LongText.bind({});
+TruncateMultiline.args = { truncate: { lines: 2 } };
+TruncateMultiline.decorators = [withResizableBox()];
 
 export const AllTypography = () => {
     const typographies = [undefined, ...Object.values(TypographyInterface), ...Object.values(TypographyCustom)];
@@ -42,9 +41,7 @@ export const AllTypography = () => {
                 <tr key={typography}>
                     <td>{typography}</td>
                     <td>
-                        <Text as="p" typography={typography}>
-                            Some text
-                        </Text>
+                        <WithIcon typography={typography} />
                     </td>
                 </tr>
             ))}
@@ -68,9 +65,7 @@ export const AllColor = () => {
                     <td>{color}</td>
                     {colorVariants.map((colorVariant) => (
                         <td key={colorVariant}>
-                            <Text as="p" color={color} colorVariant={colorVariant}>
-                                Some text
-                            </Text>
+                            <WithIcon color={color} colorVariant={colorVariant} />
                         </td>
                     ))}
                 </tr>

package/src/components/text/Text.test.tsx

@@ -4,7 +4,9 @@ import { shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite } from '@lumx/react/testing/utils';
-import { Text, TextProps } from './Text';
+import { mdiEarth } from '@lumx/icons';
+import { Icon } from '@lumx/react';
+import { Text, TextProps } from '.';
 
 const setup = (props: Partial<TextProps> = {}) => {
     const wrapper = shallow(<Text as="span" {...props} />);
@@ -55,6 +57,18 @@ describe(`<${Text.displayName}>`, () => {
             expect(wrapper).toHaveClassName('lumx-text--is-truncated-multiline');
             expect(wrapper).toHaveStyle({ '--lumx-text-truncate-lines': 2 });
         });
+
+        it('should render noWrap', () => {
+            const { wrapper } = setup({ noWrap: true });
+            expect(wrapper).toHaveDisplayName('span');
+            expect(wrapper).toHaveClassName('lumx-text--no-wrap');
+        });
+
+        it('should wrap icons with spaces', () => {
+            const { wrapper } = setup({ children: ['Some text', <Icon key="icon" icon={mdiEarth} />, 'with icon'] });
+            // Spaces have been inserted around the icon.
+            expect(wrapper).toHaveText('Some text  with icon');
+        });
     });
 
     // Common tests suite.

package/src/components/text/Text.tsx

@@ -1,11 +1,15 @@
-import React, { forwardRef } from 'react';
+import React, { Children, Fragment, forwardRef } from 'react';
 
-import { Color, ColorVariant, Typography } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HeadingElement } from '@lumx/react/utils';
+import { Icon, ColorPalette, ColorVariant, Typography } from '@lumx/react';
+import { Comp, GenericProps, TextElement, isComponent } from '@lumx/react/utils/type';
+import {
+    getFontColorClassName,
+    getRootClassName,
+    handleBasicClasses,
+    getTypographyClassName,
+} from '@lumx/react/utils/className';
 import classNames from 'classnames';
 
-type TextComponents = 'span' | 'p' | HeadingElement;
-
 /**
  * Defines the props of the component.
  */
@@ -13,7 +17,7 @@ export interface TextProps extends GenericProps {
     /**
      * Color variant.
      */
-    color?: Color;
+    color?: ColorPalette;
     /**
      * Lightened or darkened variant of the selected color.
      */
@@ -25,13 +29,18 @@ export interface TextProps extends GenericProps {
     /**
      * Custom component to render the text.
      */
-    as: TextComponents;
+    as: TextElement;
     /**
      * Control whether the text should truncate or not.
      * Setting as `true` will make the text truncate on a single line.
      * Setting as `{ lines: number }` will make the text truncate on a multiple lines.
      */
     truncate?: boolean | { lines: number };
+    /**
+     * Prevents text to wrap on multiple lines
+     * (automatically activated when single line text truncate is activated).
+     */
+    noWrap?: boolean;
 }
 
 /**
@@ -57,11 +66,21 @@ const DEFAULT_PROPS = {} as const;
  * @return React element.
  */
 export const Text: Comp<TextProps> = forwardRef((props, ref) => {
-    const { as, children, className, color, colorVariant, typography, truncate, style, ...forwardedProps } = props;
+    const {
+        as: Component,
+        children,
+        className,
+        color,
+        colorVariant,
+        noWrap,
+        typography,
+        truncate,
+        style,
+        ...forwardedProps
+    } = props;
 
-    const Component = as as TextComponents;
-    const colorClass = color && `lumx-color-font-${color}-${colorVariant || ColorVariant.N}`;
-    const typographyClass = typography && `lumx-typography-${typography}`;
+    const colorClass = color && getFontColorClassName(color, colorVariant);
+    const typographyClass = typography && getTypographyClassName(typography);
 
     // Truncate mode
     const truncateLinesStyle = typeof truncate === 'object' &&
@@ -81,11 +100,18 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
                 }),
                 typographyClass,
                 colorClass,
+                noWrap && `${CLASSNAME}--no-wrap`,
             )}
             style={{ ...truncateLinesStyle, ...style }}
             {...forwardedProps}
         >
-            {children}
+            {Children.toArray(children).map((child, index) => {
+                // Force wrap spaces around icons to make sure they are never stuck against text.
+                if (isComponent(Icon)(child)) {
+                    return <Fragment key={child.key || index}> {child} </Fragment>;
+                }
+                return child;
+            })}
         </Component>
     );
 });

package/src/components/text-field/TextField.test.tsx

@@ -5,7 +5,7 @@ import 'jest-enzyme';
 import { build } from 'test-data-bot';
 
 import { Wrapper, commonTestsSuite } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Kind } from '@lumx/react';
 import { TextField, TextFieldProps } from './TextField';

package/src/components/text-field/TextField.tsx

@@ -6,7 +6,8 @@ import { uid } from 'uid';
 
 import { mdiAlertCircle, mdiCheckCircle, mdiCloseCircle } from '@lumx/icons';
 import { Emphasis, Icon, IconButton, IconButtonProps, InputHelper, InputLabel, Kind, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**

package/src/components/thumbnail/Thumbnail.tsx

@@ -13,7 +13,8 @@ import classNames from 'classnames';
 
 import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';
 
-import { Comp, Falsy, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { mdiImageBroken } from '@lumx/icons';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';

package/src/components/thumbnail/types.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AspectRatio, Size } from '@lumx/react';
-import { ValueOf } from '@lumx/react/utils';
+import { ValueOf } from '@lumx/react/utils/type';
 
 /**
  *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).

package/src/components/toolbar/Toolbar.tsx

@@ -2,7 +2,8 @@ import React, { forwardRef, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Defines the props of the component.

package/src/components/tooltip/Tooltip.tsx

@@ -10,7 +10,8 @@ import { Placement } from '@lumx/react/components/popover/Popover';
 
 import { DOCUMENT } from '@lumx/react/constants';
 
-import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
+import { Comp, GenericProps } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { useInjectTooltipRef } from './useInjectTooltipRef';

package/src/components/tooltip/useTooltipOpen.tsx

@@ -1,4 +1,4 @@
-import { onEscapePressed } from '@lumx/react/utils';
+import { onEscapePressed } from '@lumx/react/utils/event';
 import { useEffect, useState } from 'react';
 import { browserDoesNotSupportHover } from '@lumx/react/utils/browserDoesNotSupportHover';
 import { TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';

package/src/components/uploader/Uploader.test.tsx

@@ -4,7 +4,7 @@ import { mount, shallow } from 'enzyme';
 import 'jest-enzyme';
 
 import { commonTestsSuite, Wrapper } from '@lumx/react/testing/utils';
-import { getBasicClass } from '@lumx/react/utils';
+import { getBasicClass } from '@lumx/react/utils/className';
 
 import { Uploader, UploaderProps } from './Uploader';
 

package/src/components/uploader/Uploader.tsx

@@ -3,7 +3,8 @@ import React, { forwardRef, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
 import { AspectRatio, Icon, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme, ValueOf } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 /**
  * Uploader variants.

package/src/components/user-block/UserBlock.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 import set from 'lodash/set';
 
 import { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';
-import { Comp, GenericProps, getRootClassName, handleBasicClasses, HasTheme } from '@lumx/react/utils';
+import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
 import { AvatarProps } from '../avatar/Avatar';
 

package/src/hooks/useCallbackOnEscape.ts

@@ -1,5 +1,6 @@
 import { DOCUMENT } from '@lumx/react/constants';
-import { Callback, onEscapePressed } from '@lumx/react/utils';
+import { Callback } from '@lumx/react/utils/type';
+import { onEscapePressed } from '@lumx/react/utils/event';
 import { useEffect } from 'react';
 import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
 

package/src/hooks/useClickAway.tsx

@@ -1,6 +1,6 @@
 import { RefObject, useEffect } from 'react';
 
-import { Falsy } from '@lumx/react/utils';
+import { Falsy } from '@lumx/react/utils/type';
 
 import isEmpty from 'lodash/isEmpty';
 

package/src/hooks/useDisableBodyScroll.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
-import { Falsy } from '@lumx/react/utils';
+import { Falsy } from '@lumx/react/utils/type';
 
 /**
  * Disables the scroll on the body to make it only usable in the current modal element.

package/src/hooks/useFocusTrap.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import { DOCUMENT } from '@lumx/react/constants';
 import { getFirstAndLastFocusable } from '@lumx/react/utils/focus/getFirstAndLastFocusable';
-import { Falsy } from '@lumx/react/utils';
+import { Falsy } from '@lumx/react/utils/type';
 import { Listener, makeListenerTowerContext } from '@lumx/react/utils/makeListenerTowerContext';
 
 const FOCUS_TRAPS = makeListenerTowerContext();

package/src/hooks/useInterval.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
 import isFunction from 'lodash/isFunction';
-import { Callback } from '../utils';
+import { Callback } from '@lumx/react/utils/type';
 
 /**
  * Making setInterval Declarative with React Hooks.

package/src/hooks/useOnResize.ts

@@ -1,4 +1,4 @@
-import { Callback, Falsy } from '@lumx/react/utils';
+import { Callback, Falsy } from '@lumx/react/utils/type';
 import { MutableRefObject, RefObject, useEffect, useRef } from 'react';
 import { WINDOW } from '@lumx/react/constants';
 import { ResizeObserver as Polyfill } from '@juggle/resize-observer';

package/src/index.ts

@@ -1,3 +1,7 @@
+/**
+ * Components listed here will be exposed to NPM in '@lumx/react'.
+ */
+
 export * from './components';
 export * from './components/alert-dialog';
 export * from './components/autocomplete';
@@ -20,6 +24,7 @@ export * from './components/heading';
 export * from './components/grid';
 export * from './components/icon';
 export * from './components/image-block';
+export * from './components/inline-list';
 export * from './components/input-helper';
 export * from './components/input-label';
 export * from './components/lightbox';

package/src/stories/generated/GenericBlock/Demos.stories.tsx

@@ -3,4 +3,6 @@
  */
 export default { title: 'LumX components/generic-block/GenericBlock Demos' };
 
-export { App as Default } from './default';
+export { App as HorizontalAlignment } from './horizontal-alignment';
+export { App as Sizes } from './sizes';
+export { App as VerticalAlignment } from './vertical-alignment';

package/src/stories/generated/Heading/Demos.stories.tsx

@@ -0,0 +1,6 @@
+/**
+ * File generated when storybook is started. Do not edit directly!
+ */
+export default { title: 'LumX components/heading/Heading Demos' };
+
+export { App as AutomaticHeadingLevel } from './automatic-heading-level';

package/src/stories/withResizableBox.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+/** Storybook decorator wrapping story in a resizable box  */
+// eslint-disable-next-line react/display-name
+export const withResizableBox = ({ width = 150, height = 50 } = {}) => (Story: any) => (
+    <div
+        style={{
+            display: 'flex',
+            width,
+            height,
+            border: '1px solid red',
+            resize: 'both',
+            overflow: 'hidden',
+        }}
+    >
+        <Story />
+    </div>
+);

package/src/testing/utils/commonTestsSuite.ts

@@ -4,7 +4,7 @@ import 'jest-enzyme';
 import isArray from 'lodash/isArray';
 import isEmpty from 'lodash/isEmpty';
 
-import { GenericProps } from '@lumx/react/utils';
+import { GenericProps } from '@lumx/react/utils/type';
 
 export type Wrapper = ShallowWrapper | ReactWrapper;