@lumx/react 3.21.1 → 3.21.2-alpha.0

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

@@ -1,31 +0,0 @@
-import React from 'react';
-
-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 React, { 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';

package/src/components/slideshow/Slides.tsx

@@ -1,130 +0,0 @@
-import React, { Children, CSSProperties } from 'react';
-
-import chunk from 'lodash/chunk';
-import classNames from 'classnames';
-
-import { FULL_WIDTH_PERCENT } from '@lumx/react/components/slideshow/constants';
-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';
-
-import { buildSlideShowGroupId, SlideshowItemGroup } from './SlideshowItemGroup';
-
-export interface SlidesProps extends GenericProps, HasTheme {
-    /** current slide active */
-    activeIndex: number;
-    /** slides id to be added to the wrapper */
-    id?: string;
-    /** Whether the automatic rotation of the slideshow is enabled or not. */
-    autoPlay?: boolean;
-    /** Whether the image has to fill its container height or not. */
-    fillHeight?: boolean;
-    /** Number of slides to group together. */
-    groupBy?: number;
-    /** whether the slides are currently playing or not */
-    isAutoPlaying?: boolean;
-    /** id to be passed in into the slides */
-    slidesId?: string;
-    /** callback to change whether the slideshow is playing or not */
-    toggleAutoPlay: () => void;
-    /** component to be rendered after the slides */
-    afterSlides?: React.ReactNode;
-    /** Whether the slides have controls linked */
-    hasControls?: boolean;
-    /**
-     * Accessible label to set on a slide group.
-     * Receives the group position starting from 1 and the total number of groups.
-     * */
-    slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Slideshow';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Slides component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Slides = forwardRef<SlidesProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme();
-    const {
-        activeIndex,
-        id,
-        className,
-        theme = defaultTheme,
-        fillHeight,
-        groupBy,
-        isAutoPlaying,
-        toggleAutoPlay,
-        slidesId,
-        children,
-        afterSlides,
-        hasControls,
-        slideGroupLabel,
-        ...forwardedProps
-    } = props;
-    const wrapperRef = React.useRef<HTMLDivElement>(null);
-    const startIndexVisible = activeIndex;
-    const endIndexVisible = startIndexVisible + 1;
-
-    // Inline style of wrapper element.
-    const wrapperStyle: CSSProperties = { transform: `translateX(-${FULL_WIDTH_PERCENT * activeIndex}%)` };
-
-    const groups = React.useMemo(() => {
-        const childrenArray = Children.toArray(children);
-        return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
-    }, [children, groupBy]);
-
-    return (
-        <section
-            id={id}
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }), {
-                [`${CLASSNAME}--fill-height`]: fillHeight,
-                [`${CLASSNAME}--group-by-${groupBy}`]: Boolean(groupBy),
-            })}
-            aria-roledescription="carousel"
-        >
-            <div
-                id={slidesId}
-                className={`${CLASSNAME}__slides`}
-                onMouseEnter={toggleAutoPlay}
-                onMouseLeave={toggleAutoPlay}
-                aria-live={isAutoPlaying ? 'off' : 'polite'}
-            >
-                <div ref={wrapperRef} className={`${CLASSNAME}__wrapper`} style={wrapperStyle}>
-                    {groups.map((group, index) => (
-                        <SlideshowItemGroup
-                            key={index}
-                            id={slidesId && buildSlideShowGroupId(slidesId, index)}
-                            role={hasControls ? 'tabpanel' : 'group'}
-                            label={slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : undefined}
-                            isDisplayed={index >= startIndexVisible && index < endIndexVisible}
-                        >
-                            {group}
-                        </SlideshowItemGroup>
-                    ))}
-                </div>
-            </div>
-
-            {afterSlides}
-        </section>
-    );
-});
-
-Slides.displayName = COMPONENT_NAME;
-Slides.className = CLASSNAME;

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,180 +0,0 @@
-import React from 'react';
-import range from 'lodash/range';
-import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation } from '@lumx/react';
-import { IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';
-
-export default {
-    title: 'LumX components/slideshow/Slideshow',
-    component: Slideshow,
-    args: Slideshow.defaultProps,
-    argTypes: {
-        activeIndex: { control: 'number' },
-        groupBy: { control: 'number' },
-        autoPlay: { control: 'boolean' },
-        interval: { control: 'number' },
-    },
-};
-
-export const Simple = ({ images = Object.values(LANDSCAPE_IMAGES), ...props }: any) => {
-    return (
-        <Slideshow
-            aria-label="Simple carousel example"
-            slideshowControlsProps={{
-                nextButtonProps: { label: 'Next' },
-                previousButtonProps: { label: 'Previous' },
-            }}
-            {...props}
-            style={{ width: '50%' }}
-            slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
-        >
-            {images.map((image: string, index: number) => (
-                <SlideshowItem key={`${image}-${index}`}>
-                    <ImageBlock
-                        thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
-                        image={image}
-                        alt=""
-                    />
-                </SlideshowItem>
-            ))}
-        </Slideshow>
-    );
-};
-
-export const SimpleWithAutoPlay: any = Simple.bind({});
-SimpleWithAutoPlay.args = { autoPlay: true };
-
-export const ResponsiveSlideShowSwipe = () => {
-    const slides = range(5);
-    return (
-        <>
-            In responsive mode
-            <ul>
-                <li>The slideshow is swipe-able (horizontal left/right)</li>
-                <li>The vertical scroll should still be possible</li>
-                <li>Clicking on elements inside a slide should work correctly</li>
-            </ul>
-            <FlexBox vAlign="center">
-                <Slideshow
-                    aria-label="Responsive SlideShow Swipe"
-                    activeIndex={0}
-                    slideshowControlsProps={{
-                        nextButtonProps: { label: 'Next' },
-                        previousButtonProps: { label: 'Previous' },
-                    }}
-                    slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
-                >
-                    {slides.map((slide) => (
-                        <SlideshowItem key={`${slide}`}>
-                            <FlexBox
-                                style={{ border: '1px solid grey', maxWidth: 300, height: 300 }}
-                                hAlign="center"
-                                vAlign="center"
-                            >
-                                <Button onClick={() => alert(`Clicked button ${slide}`)}>Button {slide}</Button>
-                            </FlexBox>
-                        </SlideshowItem>
-                    ))}
-                </Slideshow>
-            </FlexBox>
-            {
-                /* Line padding to test the vertical scroll.*/
-                range(100).map((i) => (
-                    <br key={i} />
-                ))
-            }
-        </>
-    );
-};
-
-const slides = [
-    {
-        id: 0,
-        src: IMAGES.landscape1,
-        alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
-        title: 'Foyle’s War Revisited',
-        subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
-        link: '#',
-    },
-    {
-        id: 1,
-        src: IMAGES.landscape2,
-        alt: 'British flag with WILL-TV host David Thiel.',
-        title: 'Great Britain Vote: 7 pm Sat.',
-        link: '#',
-    },
-    {
-        id: 2,
-        src: IMAGES.landscape3,
-        alt: 'Mid-American Gardener panelists on the set.',
-        title: 'Mid-American Gardener: Thursdays at 7 pm',
-        subtitle: 'Watch the latest episode',
-        link: '#',
-    },
-    {
-        id: 3,
-        src: IMAGES.portrait1,
-        alt: 'A man in a suit and fedora and a woman with coiffed hair look sternly into the camera.',
-        title: 'Foyle’s War Revisited',
-        subtitle: '8 pm Sunday, March 8, on TV: Sneak peek at the final season',
-        link: '#',
-    },
-    {
-        id: 4,
-        src: IMAGES.portrait2,
-        alt: 'British flag with WILL-TV host David Thiel.',
-        title: 'Great Britain Vote: 7 pm Sat.',
-        link: '#',
-    },
-    {
-        id: 5,
-        src: IMAGES.portrait3,
-        alt: 'Mid-American Gardener panelists on the set.',
-        title: 'Mid-American Gardener: Thursdays at 7 pm',
-        subtitle: 'Watch the latest episode',
-        link: '#',
-    },
-];
-export const WithComplexContent = ({ slideCount, ...props }: any) => (
-    <Slideshow
-        aria-label="Carousel with complex content"
-        slideshowControlsProps={{
-            nextButtonProps: { label: 'Next' },
-            previousButtonProps: { label: 'Previous' },
-            playButtonProps: { label: 'Play/Pause' },
-            paginationItemProps: (index) => ({ label: `Slide ${index + 1}` }),
-        }}
-        slideGroupLabel={(currentGroup, totalGroup) => `${currentGroup} of ${totalGroup}`}
-        {...props}
-    >
-        {range(slideCount).map((nb) => {
-            const slide = slides[nb % slides.length];
-
-            return (
-                <SlideshowItem key={slide.id}>
-                    <a href={slide.link}>
-                        <ImageBlock
-                            thumbnailProps={{ aspectRatio: AspectRatio.horizontal, loading: 'eager' }}
-                            image={slide.src}
-                            alt={slide.alt}
-                        />
-                    </a>
-                    <FlexBox orientation={Orientation.vertical}>
-                        <h3>
-                            <a href={slide.link}>{slide.title}</a>
-                            {/* Add a non focusable element to test that it stays that way after a page change. */}
-                            <button type="button" tabIndex={-1} aria-hidden="true">
-                                Not focusable
-                            </button>
-                            <button type="button">Focusable</button>
-                        </h3>
-                        {slide.subtitle && <p>{slide.subtitle}</p>}
-                    </FlexBox>
-                </SlideshowItem>
-            );
-        })}
-    </Slideshow>
-);
-WithComplexContent.args = {
-    groupBy: 2,
-    slideCount: 6,
-};

package/src/components/slideshow/Slideshow.test.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { render } from '@testing-library/react';
-import { queryByClassName } from '@lumx/react/testing/utils/queries';
-import { Slideshow, SlideshowProps } from './Slideshow';
-import { Slides } from './Slides';
-
-const CLASSNAME = Slides.className as string;
-
-const setup = (propsOverride: Partial<SlideshowProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: SlideshowProps = {
-        slideshowControlsProps: {
-            nextButtonProps: { label: 'Next' },
-            previousButtonProps: { label: 'Prev' },
-        },
-        ...propsOverride,
-    };
-    render(<Slideshow {...props} />, { wrapper });
-    const slideShow = queryByClassName(document.body, CLASSNAME);
-    return { props, slideShow };
-};
-
-describe(`<${Slideshow.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'slideShow',
-        forwardAttributes: 'slideShow',
-        applyTheme: {
-            affects: [{ element: 'slideShow' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});