@lumx/react 3.21.1-alpha.0 → 3.21.2-alpha.0

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

@@ -1,165 +0,0 @@
-import React, { 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

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

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

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

@@ -1,29 +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 { 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

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

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

@@ -1,29 +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 { 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

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