@lumx/react 3.1.0 → 3.1.2

package/dist/src/components/skeleton/__snapshots__/SkeletonTypography.test.tsx.snap

@@ -1,174 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SkeletonTypography> Snapshots and structure should render story 'TextTypography' 1`] = `
-[
-  <div
-    className="lumx-spacing-margin-bottom lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-title"
-    style={
-      {
-        "width": "30%",
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1"
-    style={
-      {
-        "width": "70%",
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-primary"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-secondary"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-blue"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-dark"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-green"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-yellow"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-red"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-light"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-  <div
-    className="lumx-skeleton-typography lumx-skeleton-typography--theme-light lumx-skeleton-typography--typography-body1 lumx-skeleton-typography--color-grey"
-    style={
-      {
-        "width": undefined,
-      }
-    }
-  >
-    <div
-      className="lumx-skeleton-typography__inner"
-    />
-  </div>,
-]
-`;

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

@@ -1,3 +0,0 @@
-export * from './SkeletonCircle';
-export * from './SkeletonRectangle';
-export * from './SkeletonTypography';

package/dist/src/components/slider/Slider.stories.tsx

@@ -1,29 +0,0 @@
-import { Slider } from '@lumx/react';
-import { number, text } from '@storybook/addon-knobs';
-import noop from 'lodash/noop';
-import React from 'react';
-
-export default { title: 'LumX components/slider/Slider' };
-
-export const DefaultSlider = ({ theme }: any) => (
-    <Slider
-        label={text('label', 'Default')}
-        max={number('max', 10)}
-        min={number('min', 0)}
-        theme={theme}
-        value={5}
-        onChange={noop}
-    />
-);
-
-export const WithHelperSlider = ({ theme }: any) => (
-    <Slider
-        label={text('label', 'Default')}
-        helper={text('helper', 'This is an helper text')}
-        max={number('max', 10)}
-        min={number('min', 0)}
-        theme={theme}
-        value={5}
-        onChange={noop}
-    />
-);

package/dist/src/components/slider/Slider.test.tsx

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

package/dist/src/components/slider/Slider.tsx

@@ -1,299 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { forwardRef, SyntheticEvent, useMemo, useRef } from 'react';
-
-import classNames from 'classnames';
-
-import { InputHelper, InputLabel, Theme } from '@lumx/react';
-
-import useEventCallback from '@lumx/react/hooks/useEventCallback';
-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';
-
-/**
- * Defines the props of the component.
- */
-export interface SliderProps extends GenericProps, HasTheme {
-    /** Helper text. */
-    helper?: string;
-    /** Whether the min and max labels should be hidden or not. */
-    hideMinMaxLabel?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Label text. */
-    label?: string;
-    /** Maximum value on the range. */
-    max: number;
-    /** Minimum value of the range. */
-    min: number;
-    /** Native input name property. */
-    name?: string;
-    /** Number of digits in the fractional part of the selected value. */
-    precision?: number;
-    /** Range step value. */
-    steps?: number;
-    /** Selected ranged value. */
-    value: number;
-    /** On change callback. */
-    onChange(value: number, name?: string, event?: SyntheticEvent): void;
-    /** On click callback. */
-    onMouseDown?(event: React.SyntheticEvent): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Slider';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<SliderProps> = {
-    precision: 0,
-    steps: 0,
-    theme: Theme.light,
-};
-
-/**
- * Convert a percent value to a value in range min - max.
- *
- * @param percent   Value to convert.
- * @param min       Minimum value.
- * @param max       Maximum value.
- * @param precision Precision.
- * @return Value in range min - max
- */
-const computeValueFromPercent = (percent: number, min: number, max: number, precision = 0): number =>
-    Number((min + percent * (max - min)).toFixed(precision));
-
-/**
- * Convert a value in range min - max to a percent value.
- *
- * @param value Value to convert.
- * @param min   Minimum value.
- * @param max   Maximum value.
- * @return Value in percent
- */
-const computePercentFromValue = (value: number, min: number, max: number): number =>
-    Number((value - min) / (max - min));
-
-/**
- * Slider component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Slider: Comp<SliderProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        className,
-        disabled,
-        helper,
-        hideMinMaxLabel,
-        id,
-        isDisabled = disabled,
-        label,
-        max,
-        min,
-        name,
-        onChange,
-        onMouseDown,
-        precision,
-        steps,
-        theme,
-        value,
-        ...forwardedProps
-    } = props;
-    const sliderId = useMemo(() => id || `slider-${uid()}`, [id]);
-    const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
-    const sliderRef = useRef<HTMLDivElement>(null);
-
-    // build a lookup array for the steps.
-    const availableSteps = useMemo((): number[] => {
-        if (!steps) return [];
-
-        const available = [0];
-        const percentStep = 1 / ((max - min) / steps);
-        let ptr = 0;
-        while (ptr + percentStep < 1) {
-            ptr += percentStep;
-            available.push(ptr);
-        }
-        return available;
-    }, [steps, min, max]);
-
-    /**
-     * Try to find the closest step to the current slider position.
-     *
-     * @param percentValue Reference value
-     * @return The closest step value
-     */
-    const findClosestStep = (percentValue: number): number => {
-        const closest = availableSteps.reduce(
-            (acc, step) => {
-                const aDst = Math.abs(percentValue - step);
-                if (aDst < acc.dst) {
-                    return { dst: aDst, val: step };
-                }
-                return acc;
-            },
-            { dst: Infinity, val: -1 },
-        );
-        return closest.val;
-    };
-
-    /**
-     * Convert slider's handle position to percent.
-     *
-     * @param event The interaction event
-     * @param slider the slider element
-     * @return The computed percent value
-     */
-    const getPercentValue = (event: React.MouseEvent, slider: HTMLDivElement): number => {
-        const { width, left } = slider.getBoundingClientRect();
-        let percent = (event.pageX - left - window.pageXOffset) / width;
-        percent = clamp(percent, 0, 1);
-        if (steps) {
-            percent = findClosestStep(percent);
-        }
-        return percent;
-    };
-
-    /**
-     * Register a handler for the mouse move event.
-     */
-    const handleMove = useEventCallback((event: React.MouseEvent) => {
-        const { current: slider } = sliderRef;
-        if (!slider || !onChange) return;
-        const newValue = getPercentValue(event, slider);
-        onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
-    });
-
-    /**
-     * Register a handler for the mouse up event.
-     * Clean a all listeners.
-     */
-    const handleEnd = useEventCallback(() => {
-        document.body.removeEventListener('mousemove', handleMove);
-        document.body.removeEventListener('mouseup', handleEnd);
-        document.body.removeEventListener('touchmove', handleMove);
-        document.body.removeEventListener('touchend', handleEnd);
-    });
-
-    /**
-     * Move to the next or previous value (i.e. + or - 10%) or next step
-     * @param previous Should seek the previous value.
-     */
-    const hopToValue = (previous = false) => {
-        const oldPercent = computePercentFromValue(value, min, max);
-        let percent = clamp(oldPercent + (previous ? -0.1 : 0.1), 0, 1);
-        if (steps) {
-            percent = oldPercent + availableSteps[1] * (previous ? -1 : 1);
-            percent = findClosestStep(percent);
-        }
-        if (onChange) {
-            onChange(computeValueFromPercent(percent, min, max, precision), name);
-        }
-    };
-
-    /**
-     * Register a handler for keyboard interactions
-     */
-    const handleKeyDown = useEventCallback((event: React.KeyboardEvent) => {
-        if (event.key === 'ArrowRight') {
-            hopToValue();
-        } else if (event.key === 'ArrowLeft') {
-            hopToValue(true);
-        }
-    });
-
-    /**
-     * Register a handler for the mouseDown event.
-     */
-    const handleMouseDown = useEventCallback((event: React.MouseEvent) => {
-        onMouseDown?.(event);
-
-        const { current: slider } = sliderRef;
-        if (isDisabled || !slider) return;
-        const newValue = getPercentValue(event, slider);
-        if (onChange) {
-            onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
-        }
-
-        document.body.addEventListener('mousemove', handleMove);
-        document.body.addEventListener('mouseup', handleEnd);
-    });
-
-    const percentString = `${computePercentFromValue(value, min, max) * 100}%`;
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({ prefix: CLASSNAME, theme, hasLabel: Boolean(label) }),
-            )}
-            onMouseDown={handleMouseDown}
-            aria-disabled={isDisabled}
-        >
-            {label && (
-                <InputLabel id={sliderLabelId} htmlFor={sliderId} className={`${CLASSNAME}__label`} theme={theme}>
-                    {label}
-                </InputLabel>
-            )}
-
-            {helper && (
-                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>
-                    {helper}
-                </InputHelper>
-            )}
-
-            <div className={`${CLASSNAME}__ui-wrapper`}>
-                {!hideMinMaxLabel && (
-                    <span className={`${CLASSNAME}__value-label ${CLASSNAME}__value-label--min`}>{min}</span>
-                )}
-                <div className={`${CLASSNAME}__wrapper`} ref={sliderRef}>
-                    <div className={`${CLASSNAME}__track ${CLASSNAME}__track--background`} />
-                    <div
-                        className={`${CLASSNAME}__track ${CLASSNAME}__track--active`}
-                        style={{ width: percentString }}
-                    />
-                    {steps ? (
-                        <div className={`${CLASSNAME}__ticks`}>
-                            {availableSteps.map((step, idx) => (
-                                <div
-                                    key={`tick_${idx}`}
-                                    className={`${CLASSNAME}__tick`}
-                                    style={{ left: `${step * 100}%` }}
-                                />
-                            ))}
-                        </div>
-                    ) : null}
-                    <button
-                        type="button"
-                        aria-labelledby={sliderLabelId}
-                        name={name}
-                        id={sliderId}
-                        className={`${CLASSNAME}__handle`}
-                        style={{ left: percentString }}
-                        onKeyDown={handleKeyDown}
-                        disabled={isDisabled}
-                    />
-                </div>
-                {!hideMinMaxLabel && (
-                    <span className={`${CLASSNAME}__value-label ${CLASSNAME}__value-label--max`}>{max}</span>
-                )}
-            </div>
-        </div>
-    );
-});
-Slider.displayName = COMPONENT_NAME;
-Slider.className = CLASSNAME;
-Slider.defaultProps = DEFAULT_PROPS;

package/dist/src/components/slider/__snapshots__/Slider.test.tsx.snap

@@ -1,122 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Slider> Snapshots and structure should render story 'DefaultSlider' 1`] = `
-<div
-  className="lumx-slider lumx-slider--theme-light lumx-slider--has-label"
-  onMouseDown={[Function]}
->
-  <InputLabel
-    className="lumx-slider__label"
-    htmlFor="slider-uid"
-    id="label-slider-uid"
-    theme="light"
-  >
-    Default
-  </InputLabel>
-  <div
-    className="lumx-slider__ui-wrapper"
-  >
-    <span
-      className="lumx-slider__value-label lumx-slider__value-label--min"
-    >
-      0
-    </span>
-    <div
-      className="lumx-slider__wrapper"
-    >
-      <div
-        className="lumx-slider__track lumx-slider__track--background"
-      />
-      <div
-        className="lumx-slider__track lumx-slider__track--active"
-        style={
-          {
-            "width": "50%",
-          }
-        }
-      />
-      <button
-        aria-labelledby="label-slider-uid"
-        className="lumx-slider__handle"
-        id="slider-uid"
-        onKeyDown={[Function]}
-        style={
-          {
-            "left": "50%",
-          }
-        }
-        type="button"
-      />
-    </div>
-    <span
-      className="lumx-slider__value-label lumx-slider__value-label--max"
-    >
-      10
-    </span>
-  </div>
-</div>
-`;
-
-exports[`<Slider> Snapshots and structure should render story 'WithHelperSlider' 1`] = `
-<div
-  className="lumx-slider lumx-slider--theme-light lumx-slider--has-label"
-  onMouseDown={[Function]}
->
-  <InputLabel
-    className="lumx-slider__label"
-    htmlFor="slider-uid"
-    id="label-slider-uid"
-    theme="light"
-  >
-    Default
-  </InputLabel>
-  <InputHelper
-    className="lumx-slider__helper"
-    kind="info"
-    theme="light"
-  >
-    This is an helper text
-  </InputHelper>
-  <div
-    className="lumx-slider__ui-wrapper"
-  >
-    <span
-      className="lumx-slider__value-label lumx-slider__value-label--min"
-    >
-      0
-    </span>
-    <div
-      className="lumx-slider__wrapper"
-    >
-      <div
-        className="lumx-slider__track lumx-slider__track--background"
-      />
-      <div
-        className="lumx-slider__track lumx-slider__track--active"
-        style={
-          {
-            "width": "50%",
-          }
-        }
-      />
-      <button
-        aria-labelledby="label-slider-uid"
-        className="lumx-slider__handle"
-        id="slider-uid"
-        onKeyDown={[Function]}
-        style={
-          {
-            "left": "50%",
-          }
-        }
-        type="button"
-      />
-    </div>
-    <span
-      className="lumx-slider__value-label lumx-slider__value-label--max"
-    >
-      10
-    </span>
-  </div>
-</div>
-`;

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

@@ -1,2 +0,0 @@
-export * from './Slider';
-export { clamp } from '@lumx/react/utils/clamp';