@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.22

package/src/components/slider/Slider.tsx

@@ -0,0 +1,299 @@
+/* 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

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

package/src/components/slideshow/Slides.tsx

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,179 @@
+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

@@ -0,0 +1,35 @@
+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',
+        },
+    });
+});