@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -1,88 +0,0 @@
-import classNames from 'classnames';
-
-import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Skeleton variants.
- */
-export const SkeletonRectangleVariant = { squared: 'squared', rounded: 'rounded', pill: 'pill' } as const;
-export type SkeletonRectangleVariant = ValueOf<typeof SkeletonRectangleVariant>;
-
-/**
- * Defines the props of the component.
- */
-export interface SkeletonRectangleProps extends GenericProps, HasTheme {
-    /** Aspect ratio (use with width and not height). */
-    aspectRatio?: Extract<AspectRatio, 'square' | 'horizontal' | 'vertical' | 'wide'>;
-    /** Height size. */
-    height?: GlobalSize;
-    /** Border variant. */
-    variant?: SkeletonRectangleVariant;
-    /** Width size. */
-    width?: GlobalSize;
-    /** The color of the skeleton. */
-    color?: ColorPalette;
-}
-
-const DEFAULT_PROPS: Partial<SkeletonRectangleProps> = {
-    variant: SkeletonRectangleVariant.squared,
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SkeletonRectangle';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SkeletonRectangle component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SkeletonRectangle = forwardRef<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        aspectRatio,
-        className,
-        height,
-        theme = defaultTheme,
-        variant = DEFAULT_PROPS.variant,
-        width,
-        color,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    prefix: CLASSNAME,
-                    aspectRatio,
-                    height: aspectRatio ? undefined : height,
-                    theme,
-                    variant,
-                    width,
-                    color,
-                }),
-            )}
-        >
-            <div className={`${CLASSNAME}__inner`} />
-        </div>
-    );
-});
-SkeletonRectangle.displayName = COMPONENT_NAME;
-SkeletonRectangle.className = CLASSNAME;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS;

package/src/components/skeleton/SkeletonTypography.stories.tsx

@@ -1,19 +0,0 @@
-import { SkeletonTypography, Typography, ColorPalette } from '@lumx/react';
-
-export default { title: 'LumX components/skeleton/Skeleton Typography' };
-
-const colors = Object.values(ColorPalette);
-
-export const TextTypography = () => (
-    <>
-        <SkeletonTypography typography={Typography.title} width="30%" className="lumx-spacing-margin-bottom" />
-        <SkeletonTypography typography={Typography.body1} />
-        <SkeletonTypography typography={Typography.body1} />
-        <SkeletonTypography typography={Typography.body1} />
-        <SkeletonTypography typography={Typography.body1} width="70%" />
-        Colors:
-        {colors.map((color) => (
-            <SkeletonTypography key={color} color={color} typography={Typography.body1} />
-        ))}
-    </>
-);

package/src/components/skeleton/SkeletonTypography.test.tsx

@@ -1,27 +0,0 @@
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { SkeletonTypography, SkeletonTypographyProps } from './SkeletonTypography';
-
-const CLASSNAME = SkeletonTypography.className as string;
-
-const setup = (props: Partial<SkeletonTypographyProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<SkeletonTypography {...(props as any)} />, { wrapper });
-    const skeletonTypography = queryByClassName(document.body, CLASSNAME);
-    return { props, skeletonTypography };
-};
-
-describe(`<${SkeletonTypography.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'skeletonTypography',
-        forwardAttributes: 'skeletonTypography',
-        applyTheme: {
-            affects: [{ element: 'skeletonTypography' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/skeleton/SkeletonTypography.tsx

@@ -1,59 +0,0 @@
-import { CSSProperties } from 'react';
-
-import classNames from 'classnames';
-
-import { Theme, TypographyInterface, ColorPalette } from '@lumx/react';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface SkeletonTypographyProps extends GenericProps, HasTheme {
-    /** Typography variant. */
-    typography: TypographyInterface;
-    /** Width CSS property. */
-    width?: CSSProperties['width'];
-    /** The color of the skeleton. */
-    color?: ColorPalette;
-}
-
-const DEFAULT_PROPS: Partial<SkeletonTypographyProps> = {};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'SkeletonTypography';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * SkeletonTypography component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const SkeletonTypography = forwardRef<SkeletonTypographyProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { className, theme = defaultTheme, typography, width, color, ...forwardedProps } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme, typography, color }))}
-            style={{ ...forwardedProps.style, width }}
-        >
-            <div className={`${CLASSNAME}__inner`} />
-        </div>
-    );
-});
-SkeletonTypography.displayName = COMPONENT_NAME;
-SkeletonTypography.defaultProps = DEFAULT_PROPS;
-SkeletonTypography.className = CLASSNAME;

package/src/components/skeleton/index.ts

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

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

@@ -1,45 +0,0 @@
-import { Slider } from '@lumx/react';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-
-export default {
-    title: 'LumX components/slider/Slider',
-    component: Slider,
-    args: {
-        ...Slider.defaultProps,
-        min: 0,
-        max: 30,
-        value: 15,
-        name: 'slider-html-name',
-    },
-    argTypes: {
-        onChange: { action: true },
-    },
-    decorators: [withValueOnChange({})],
-};
-
-/**
- * Default slider with required props
- */
-export const Default = {};
-
-/**
- * With label and helper
- */
-export const WithLabelAndHelper = {
-    args: { label: 'Slider label', helper: loremIpsum('tiny') },
-};
-
-/**
- * With steps
- */
-export const WithSteps = {
-    args: { steps: 5 },
-};
-
-/**
- * With precision (three digits after the decimal point)
- */
-export const WithPrecision = {
-    args: { steps: 0, precision: 3 },
-};

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

@@ -1,29 +0,0 @@
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { Slider, SliderProps } from './Slider';
-
-const CLASSNAME = Slider.className as string;
-
-vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
-
-const setup = (props: Partial<SliderProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(<Slider {...(props as any)} />, { wrapper });
-    const slider = queryByClassName(document.body, CLASSNAME);
-    return { props, slider };
-};
-
-describe(`<${Slider.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'slider',
-        forwardAttributes: 'slider',
-        applyTheme: {
-            affects: [{ element: 'slider' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/slider/Slider.tsx

@@ -1,299 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-import { SyntheticEvent, useMemo, useRef } from 'react';
-
-import classNames from 'classnames';
-
-import { InputHelper, InputLabel, Theme } from '@lumx/react';
-import useEventCallback from '@lumx/react/hooks/useEventCallback';
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { clamp } from '@lumx/react/utils/number/clamp';
-import { useId } from '@lumx/react/hooks/useId';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-
-/**
- * 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,
-};
-
-/**
- * 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 = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        className,
-        helper,
-        hideMinMaxLabel,
-        id,
-        label,
-        max,
-        min,
-        name,
-        onChange,
-        onMouseDown,
-        precision = DEFAULT_PROPS.precision,
-        steps = DEFAULT_PROPS.steps,
-        theme = defaultTheme,
-        value,
-        ...forwardedProps
-    } = otherProps;
-    const generatedId = useId();
-    const sliderId = id || generatedId;
-    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 (isAnyDisabled || !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}
-        >
-            {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={isAnyDisabled ? undefined : handleKeyDown}
-                        {...disabledStateProps}
-                    />
-                </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/src/components/slider/index.ts

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