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

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -0,0 +1,165 @@
+import { Children, ReactNode } from 'react';
+
+import classNames from 'classnames';
+import isEmpty from 'lodash/isEmpty';
+
+import { mdiChevronDown, mdiChevronUp } from '@lumx/icons';
+import { Emphasis, Icon, Size, IconButton, IconButtonProps } from '@lumx/react';
+import { GenericProps, HasCloseMode, isComponent } from '@lumx/react/utils/type';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { useId } from '@lumx/react/hooks/useId';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
+
+/**
+ * Defines the props of the component.
+ */
+export interface SideNavigationItemProps extends GenericProps, HasCloseMode {
+    /** SideNavigationItem elements. */
+    children?: ReactNode;
+    /** Emphasis variant. */
+    emphasis?: Emphasis;
+    /** Label content. */
+    label: string | ReactNode;
+    /** Icon (SVG path). */
+    icon?: string;
+    /** Whether the component is open or not. */
+    isOpen?: boolean;
+    /** Whether the component is selected or not. */
+    isSelected?: boolean;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    /** Props to pass to the link (minus those already set by the SideNavigationItem props). */
+    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+    /** Props to pass to the toggle button (minus those already set by the SideNavigationItem props). */
+    toggleButtonProps: Pick<IconButtonProps, 'label'> &
+        Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color' | 'size'>;
+    /** On action button click callback. */
+    onActionClick?(evt: React.MouseEvent): void;
+    /** On click callback. */
+    onClick?(evt: React.MouseEvent): void;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SideNavigationItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS: Partial<SideNavigationItemProps> = {
+    emphasis: Emphasis.high,
+    closeMode: 'unmount',
+};
+
+/**
+ * SideNavigationItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElement>((props, ref) => {
+    const {
+        children,
+        className,
+        emphasis = DEFAULT_PROPS.emphasis,
+        icon,
+        isOpen,
+        isSelected,
+        label,
+        linkAs,
+        linkProps,
+        onActionClick,
+        onClick,
+        toggleButtonProps,
+        closeMode = DEFAULT_PROPS.closeMode,
+        ...forwardedProps
+    } = props;
+
+    const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
+    const hasContent = !isEmpty(content);
+    const shouldSplitActions = Boolean(onActionClick);
+    const showChildren = hasContent && isOpen;
+
+    const contentId = useId();
+    const ariaProps: any = {};
+    if (hasContent) {
+        ariaProps['aria-expanded'] = !!showChildren;
+        // Associate with content ID only if in DOM (shown or hidden and not unmounted)
+        ariaProps['aria-controls'] = showChildren || closeMode === 'hide' ? contentId : undefined;
+    }
+
+    return (
+        <li
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(
+                className,
+                handleBasicClasses({
+                    emphasis,
+                    isOpen: showChildren,
+                    isSelected,
+                    prefix: CLASSNAME,
+                }),
+            )}
+        >
+            {shouldSplitActions ? (
+                <div className={`${CLASSNAME}__wrapper`}>
+                    <RawClickable
+                        as={linkAs || (linkProps?.href ? 'a' : 'button')}
+                        {...(linkProps as any)}
+                        className={`${CLASSNAME}__link`}
+                        onClick={onClick}
+                    >
+                        {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                        <span>{label}</span>
+                    </RawClickable>
+
+                    <IconButton
+                        {...toggleButtonProps}
+                        className={`${CLASSNAME}__toggle`}
+                        icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                        size={Size.m}
+                        emphasis={Emphasis.low}
+                        onClick={onActionClick}
+                        {...ariaProps}
+                    />
+                </div>
+            ) : (
+                <RawClickable
+                    as={linkAs || (linkProps?.href ? 'a' : 'button')}
+                    {...linkProps}
+                    className={`${CLASSNAME}__link`}
+                    onClick={onClick}
+                    {...ariaProps}
+                >
+                    {icon && <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} />}
+                    <span>{label}</span>
+                    {hasContent && (
+                        <Icon
+                            className={`${CLASSNAME}__chevron`}
+                            icon={isOpen ? mdiChevronUp : mdiChevronDown}
+                            size={Size.xs}
+                        />
+                    )}
+                </RawClickable>
+            )}
+
+            {(closeMode === 'hide' || showChildren) && (
+                <ul className={`${CLASSNAME}__children`} id={contentId}>
+                    {content}
+                </ul>
+            )}
+        </li>
+    );
+});
+SideNavigationItem.displayName = COMPONENT_NAME;
+SideNavigationItem.className = CLASSNAME;
+SideNavigationItem.defaultProps = DEFAULT_PROPS;

package/src/components/side-navigation/index.ts

@@ -0,0 +1,2 @@
+export * from './SideNavigation';
+export * from './SideNavigationItem';

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

@@ -0,0 +1,41 @@
+import { Size, SkeletonCircle, SkeletonCircleProps } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { ALL_COLORS, colorArgType } from '@lumx/react/stories/controls/color';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+
+const sizes: SkeletonCircleProps['size'][] = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
+
+export default {
+    title: 'LumX components/skeleton/Skeleton Circle',
+    component: SkeletonCircle,
+    args: SkeletonCircle.defaultProps,
+    argTypes: {
+        size: getSelectArgType(sizes),
+        color: colorArgType,
+    },
+};
+
+/**
+ * All sizes
+ */
+export const AllSize = {
+    argTypes: { size: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'size', options: sizes } },
+        }),
+    ],
+};
+
+/**
+ * All colors
+ */
+export const AllColor = {
+    args: { size: Size.m },
+    argTypes: { color: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'color', options: ALL_COLORS } },
+        }),
+    ],
+};

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

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

package/src/components/skeleton/SkeletonCircle.tsx

@@ -0,0 +1,52 @@
+import classNames from 'classnames';
+
+import { GlobalSize, Theme, 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 SkeletonCircleProps extends GenericProps, HasTheme {
+    /** Size variant. */
+    size: GlobalSize;
+    /** The color of the skeleton. */
+    color?: ColorPalette;
+}
+
+const DEFAULT_PROPS: Partial<SkeletonCircleProps> = {};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'SkeletonCircle';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export const SkeletonCircle = forwardRef<SkeletonCircleProps, HTMLDivElement>((props, ref) => {
+    const defaultTheme = useTheme() || Theme.light;
+    const { className, size, color, theme = defaultTheme, ...forwardedProps } = props;
+
+    return (
+        <div
+            ref={ref}
+            {...forwardedProps}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, color, theme }))}
+        />
+    );
+});
+SkeletonCircle.displayName = COMPONENT_NAME;
+SkeletonCircle.defaultProps = DEFAULT_PROPS;
+SkeletonCircle.className = CLASSNAME;

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

@@ -0,0 +1,82 @@
+import { AspectRatio, Size, SkeletonRectangle, SkeletonRectangleVariant, SkeletonRectangleProps } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { ALL_COLORS, colorArgType } from '@lumx/react/stories/controls/color';
+import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+
+const variants: SkeletonRectangleProps['variant'][] = [
+    SkeletonRectangleVariant.squared,
+    SkeletonRectangleVariant.rounded,
+    SkeletonRectangleVariant.pill,
+];
+const sizes: SkeletonRectangleProps['size'][] = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
+const aspectRatios: SkeletonRectangleProps['aspectRatio'][] = [
+    AspectRatio.wide,
+    AspectRatio.horizontal,
+    AspectRatio.square,
+    AspectRatio.vertical,
+];
+
+export default {
+    title: 'LumX components/skeleton/Skeleton Rectangle',
+    component: SkeletonRectangle,
+    args: SkeletonRectangle.defaultProps,
+    argTypes: {
+        width: getSelectArgType(sizes),
+        height: getSelectArgType(sizes),
+        aspectRatio: getSelectArgType(aspectRatios),
+        color: colorArgType,
+        variant: getSelectArgType(variants),
+    },
+};
+
+/**
+ * All sizes
+ */
+export const AllSize = {
+    argTypes: { width: { control: false }, height: { control: false } },
+    decorators: [
+        withCombinations({
+            // Using same width than height
+            combinations: { cols: Object.fromEntries(sizes.map((s) => [s, { height: s, width: s }])) },
+        }),
+    ],
+};
+
+/**
+ * All ratios (for a fixed width)
+ */
+export const AllRatios = {
+    args: { width: Size.xl },
+    argTypes: { aspectRatio: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'aspectRatio', options: aspectRatios } },
+        }),
+    ],
+};
+
+/**
+ * All variants
+ */
+export const AllVariants = {
+    args: { width: Size.l, height: Size.m },
+    argTypes: { variant: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'variant', options: variants } },
+        }),
+    ],
+};
+
+/**
+ * All colors
+ */
+export const AllColors = {
+    args: { width: Size.l, height: Size.m },
+    argTypes: { color: { control: false } },
+    decorators: [
+        withCombinations({
+            combinations: { cols: { key: 'color', options: ALL_COLORS } },
+        }),
+    ],
+};

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

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

package/src/components/skeleton/SkeletonRectangle.tsx

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

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

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

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

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

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

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

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