@lumx/react 3.1.4 → 3.2.0

package/src/components/user-block/__snapshots__/UserBlock.test.tsx.snap

@@ -1,362 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<UserBlock> Snapshots and structure should render story 'Clickable' 1`] = `
-[
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
-  >
-    <Avatar
-      alt=""
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      onClick={[Function]}
-      size="m"
-      theme="light"
-      thumbnailProps={
-        {
-          "tabIndex": -1,
-        }
-      }
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <Link
-        aria-label="Emmitt O. Lum - open user profile"
-        className="lumx-user-block__name"
-        color="dark"
-        onClick={[Function]}
-      >
-        Emmitt O. Lum
-      </Link>
-      <div
-        className="lumx-user-block__fields"
-      >
-        <span
-          className="lumx-user-block__field"
-          key="0"
-        >
-          Creative developer
-        </span>
-        <span
-          className="lumx-user-block__field"
-          key="1"
-        >
-          Denpasar
-        </span>
-      </div>
-    </div>
-  </div>,
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
-  >
-    <Avatar
-      alt=""
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      linkProps={
-        {
-          "href": "https://example.com",
-        }
-      }
-      size="m"
-      theme="light"
-      thumbnailProps={
-        {
-          "tabIndex": -1,
-        }
-      }
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <Link
-        aria-label="Emmitt O. Lum - open user profile"
-        className="lumx-user-block__name"
-        color="dark"
-        href="https://example.com"
-      >
-        Emmitt O. Lum
-      </Link>
-      <div
-        className="lumx-user-block__fields"
-      >
-        <span
-          className="lumx-user-block__field"
-          key="0"
-        >
-          Creative developer
-        </span>
-        <span
-          className="lumx-user-block__field"
-          key="1"
-        >
-          Denpasar
-        </span>
-      </div>
-    </div>
-  </div>,
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light lumx-user-block--is-clickable"
-  >
-    <Avatar
-      alt=""
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      linkAs={[Function]}
-      size="m"
-      theme="light"
-      thumbnailProps={
-        {
-          "tabIndex": -1,
-        }
-      }
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <Link
-        aria-label="Emmitt O. Lum - open user profile"
-        className="lumx-user-block__name"
-        color="dark"
-        linkAs={[Function]}
-      >
-        Emmitt O. Lum
-      </Link>
-      <div
-        className="lumx-user-block__fields"
-      >
-        <span
-          className="lumx-user-block__field"
-          key="0"
-        >
-          Creative developer
-        </span>
-        <span
-          className="lumx-user-block__field"
-          key="1"
-        >
-          Denpasar
-        </span>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`<UserBlock> Snapshots and structure should render story 'Default' 1`] = `
-<div
-  className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
->
-  <Avatar
-    alt=""
-    className="lumx-user-block__avatar"
-    image="/demo-assets/avatar1.jpg"
-    size="m"
-    theme="light"
-    thumbnailProps={
-      {
-        "tabIndex": -1,
-      }
-    }
-  />
-  <div
-    className="lumx-user-block__wrapper"
-  >
-    <span
-      className="lumx-user-block__name"
-    >
-      Emmitt O. Lum
-    </span>
-    <div
-      className="lumx-user-block__fields"
-    >
-      <span
-        className="lumx-user-block__field"
-        key="0"
-      >
-        Creative developer
-      </span>
-      <span
-        className="lumx-user-block__field"
-        key="1"
-      >
-        Denpasar
-      </span>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<UserBlock> Snapshots and structure should render story 'Sizes' 1`] = `
-[
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-s lumx-user-block--theme-light"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Avatar
-      alt=""
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      size="s"
-      theme="light"
-      thumbnailProps={
-        {
-          "tabIndex": -1,
-        }
-      }
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <span
-        className="lumx-user-block__name"
-      >
-        Emmitt O. Lum
-      </span>
-    </div>
-  </div>,
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Avatar
-      alt=""
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      size="m"
-      theme="light"
-      thumbnailProps={
-        {
-          "tabIndex": -1,
-        }
-      }
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <span
-        className="lumx-user-block__name"
-      >
-        Emmitt O. Lum
-      </span>
-      <div
-        className="lumx-user-block__fields"
-      >
-        <span
-          className="lumx-user-block__field"
-          key="0"
-        >
-          Creative developer
-        </span>
-        <span
-          className="lumx-user-block__field"
-          key="1"
-        >
-          Denpasar
-        </span>
-      </div>
-    </div>
-  </div>,
-  <div
-    className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-l lumx-user-block--theme-light"
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-  >
-    <Avatar
-      alt=""
-      className="lumx-user-block__avatar"
-      image="/demo-assets/avatar1.jpg"
-      size="l"
-      theme="light"
-      thumbnailProps={
-        {
-          "tabIndex": -1,
-        }
-      }
-    />
-    <div
-      className="lumx-user-block__wrapper"
-    >
-      <span
-        className="lumx-user-block__name"
-      >
-        Emmitt O. Lum
-      </span>
-      <div
-        className="lumx-user-block__fields"
-      >
-        <span
-          className="lumx-user-block__field"
-          key="0"
-        >
-          Creative developer
-        </span>
-        <span
-          className="lumx-user-block__field"
-          key="1"
-        >
-          Denpasar
-        </span>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`<UserBlock> Snapshots and structure should render story 'WithBadge' 1`] = `
-<div
-  className="lumx-user-block lumx-user-block--orientation-horizontal lumx-user-block--size-m lumx-user-block--theme-light"
->
-  <Avatar
-    alt=""
-    badge={
-      <Badge
-        color="blue"
-      >
-        <Icon
-          icon="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"
-        />
-      </Badge>
-    }
-    className="lumx-user-block__avatar"
-    image="/demo-assets/avatar1.jpg"
-    size="m"
-    theme="light"
-    thumbnailProps={
-      {
-        "tabIndex": -1,
-      }
-    }
-  />
-  <div
-    className="lumx-user-block__wrapper"
-  >
-    <span
-      className="lumx-user-block__name"
-    >
-      Emmitt O. Lum
-    </span>
-    <div
-      className="lumx-user-block__fields"
-    >
-      <span
-        className="lumx-user-block__field"
-        key="0"
-      >
-        Creative developer
-      </span>
-      <span
-        className="lumx-user-block__field"
-        key="1"
-      >
-        Denpasar
-      </span>
-    </div>
-  </div>
-</div>
-`;

package/src/stories/chromaticForceScreenSize.tsx

@@ -1,7 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-import isChromatic from 'chromatic/isChromatic';
-
-/** Story decorator used to force a minimum screen size when running in chromatic */
-export const chromaticForceScreenSize = (story: any) =>
-    isChromatic() ? <div style={{ minWidth: 1200, minHeight: 800 }}>{story()}</div> : story();

package/src/stories/knobs/buttonKnob.ts

@@ -1,9 +0,0 @@
-import { Button, ButtonProps, Size } from '@lumx/react';
-import { select } from '@storybook/addon-knobs';
-import { ButtonSize } from '@lumx/react/components/button/ButtonRoot';
-
-export const buttonSize = (
-    name = 'Size',
-    value: ButtonSize = Button.defaultProps?.size as any,
-    groupId: string | undefined = undefined,
-): ButtonProps['size'] => select(name, [Size.m, Size.s], value, groupId);

package/src/stories/knobs/emphasisKnob.ts

@@ -1,8 +0,0 @@
-import { Emphasis } from '@lumx/react';
-import { select } from '@storybook/addon-knobs';
-
-export const emphasis = (
-    name = 'Emphasis',
-    value: Emphasis = Emphasis.high,
-    groupId: string | undefined = undefined,
-): Emphasis => select(name, Emphasis, value, groupId);

package/src/stories/knobs/enumKnob.ts

@@ -1,14 +0,0 @@
-import isArray from 'lodash/isArray';
-import { select } from '@storybook/addon-knobs';
-
-export function enumKnob<T>(
-    name: string,
-    enumObj: Readonly<Record<string, T> | Array<T> | [...T[]]>,
-    defaultValue?: T,
-    groupId?: string,
-): T {
-    const values: Record<string, T> = !isArray(enumObj)
-        ? enumObj
-        : Object.fromEntries(Object.values(enumObj).map((value) => [value, value]));
-    return select(name, values, defaultValue, groupId);
-}

package/src/stories/knobs/focusKnob.ts

@@ -1,3 +0,0 @@
-import { number } from '@storybook/addon-knobs';
-
-export const focusKnob = (name: string, value = 0) => number(name, value, { max: 1, min: -1, range: true, step: 0.01 });

package/src/stories/knobs/sizeKnob.ts

@@ -1,5 +0,0 @@
-import { Size } from '@lumx/react';
-import { enumKnob } from '@lumx/react/stories/knobs/enumKnob';
-
-export const sizeKnob = (name = 'Size', size?: Size) =>
-    enumKnob(name, [undefined, Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl] as const, size as any);

package/src/stories/knobs/thumbnailsKnob.ts

@@ -1,9 +0,0 @@
-import { ThumbnailProps } from '@lumx/react';
-import take from 'lodash/take';
-import { imageKnob, IMAGES } from '@lumx/react/stories/knobs/image';
-
-export const thumbnailsKnob = (num: number): ThumbnailProps[] =>
-    take(Object.values(IMAGES), num).map((image, index) => ({
-        alt: `Image ${index + 1}`,
-        image: imageKnob(`Image ${index + 1}`, image),
-    }));

package/src/testing/utils/itShouldRenderStories.tsx

@@ -1,103 +0,0 @@
-/* eslint-disable no-console */
-import isFunction from 'lodash/isFunction';
-import { shallow, ShallowWrapper } from 'enzyme';
-import React from 'react';
-import isArray from 'lodash/isArray';
-import isPlainObject from 'lodash/isPlainObject';
-
-/** Equivalent to CSS `selector1 > selector2 > selector3` selector */
-interface PathSelector {
-    /** Path to traverse (with find and dive) to find the component to snapshot. */
-    path: Selector[];
-}
-const isPathSelector = (s: any): s is PathSelector => isPlainObject(s) && !!s.path;
-
-/** Equivalent to CSS `selector1, selector2, selector3` selector */
-interface OrSelector {
-    or: Selector[];
-}
-const isOrSelector = (s: any): s is OrSelector => isPlainObject(s) && !!s.or;
-
-type Selector = string | React.FC<any> | PathSelector | OrSelector;
-type Wrappers = ShallowWrapper | ShallowWrapper[];
-
-/** Use selector to find and dive into the given ShallowWrapper */
-function findAndDive(wrappers: Wrappers, selector: Selector): Wrappers {
-    if (isOrSelector(selector)) {
-        return selector.or.flatMap((s) => findAndDive(wrappers, s)).filter(Boolean);
-    }
-
-    if (isPathSelector(selector)) {
-        return selector.path.reduce(findAndDive, wrappers);
-    }
-
-    if (isArray(wrappers)) {
-        return wrappers.flatMap((w) => findAndDive(w, selector)).filter(Boolean);
-    }
-
-    // Find.
-    const foundWrapper = wrappers.find(selector as any);
-    if (foundWrapper.length >= 1) {
-        // Dive.
-        return foundWrapper.map((w) => {
-            if (typeof w.getElement().type === 'string') {
-                // Don't dive into host element (ex: div, span, etc.)
-                return w as any;
-            }
-            return w.dive();
-        });
-    }
-    return foundWrapper as any;
-}
-
-interface Options {
-    /** Inject props in stories. */
-    props?: any;
-}
-
-/** Render stories and find wrapper to snapshot using selector. */
-export function generateRenderedStories(
-    stories: Record<string, any>,
-    selector?: Selector,
-    options?: Options,
-): Record<string, Wrappers> {
-    const storyProps: any = {};
-    if (options?.props) {
-        Object.assign(storyProps, options.props);
-    }
-    const rendered: Record<string, Wrappers> = {};
-
-    for (const [name, Story] of Object.entries(stories)) {
-        // eslint-disable-next-line no-continue
-        if (!isFunction(Story)) continue;
-
-        const wrapper = shallow(<Story {...storyProps} />);
-        let toSnapshot: Wrappers = wrapper;
-        if (selector) {
-            toSnapshot = findAndDive(wrapper, selector);
-            if (isArray(toSnapshot) && toSnapshot.length === 1) {
-                // eslint-disable-next-line prefer-destructuring
-                toSnapshot = toSnapshot[0];
-            }
-        }
-        rendered[name] = toSnapshot;
-    }
-    return rendered;
-}
-
-/**
- * Generate jest snapshot testing from stories.
- *
- * **Warning: Always read and validate your snapshots before committing!**
- *
- * @param stories  Object of stories indexed by name.
- * @param selector Selector(s) used to find the correct element to snapshot.
- * @param options  Other options (see {@link Options})
- */
-export function itShouldRenderStories(stories: Record<string, any>, selector?: Selector, options?: Options): void {
-    for (const [story, toSnapshot] of Object.entries(generateRenderedStories(stories, selector, options))) {
-        it(`should render story '${story}'`, () => {
-            expect(toSnapshot).toMatchSnapshot();
-        });
-    }
-}