@lumx/react 3.21.1 → 3.21.2-alpha.0

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -1,156 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { mdiClose } from '@lumx/icons';
-
-import { Autocomplete, AutocompleteProps, Chip, HorizontalAlignment, Icon, Size } from '@lumx/react';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-
-/**
- * Defines the props of the component.
- */
-export interface AutocompleteMultipleProps extends AutocompleteProps {
-    /** Selected values. */
-    values: any[];
-    /** Alignment of the chips in the autocomplete. */
-    chipsAlignment?: HorizontalAlignment;
-    /** Selected value render function. Default: Renders the value inside of a Chip. */
-    selectedChipRender(
-        choice: any,
-        index: number,
-        onClear?: (event: React.MouseEvent, choice: any) => void,
-        isDisabled?: boolean,
-    ): ReactNode | string;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'AutocompleteMultiple';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<AutocompleteMultipleProps> = {
-    closeOnClickAway: true,
-    closeOnEscape: true,
-    selectedChipRender(choice, index, onClear, isDisabled) {
-        const onClick = (event: React.MouseEvent) => onClear && onClear(event, choice);
-        return (
-            <Chip
-                key={index}
-                after={onClear && <Icon icon={mdiClose} size={Size.xxs} />}
-                isDisabled={isDisabled}
-                size={Size.s}
-                onAfterClick={onClick}
-                onClick={onClick}
-            >
-                {choice}
-            </Chip>
-        );
-    },
-    values: [],
-};
-
-/**
- * AutocompleteMultiple component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme();
-    const { disabledStateProps, otherProps } = useDisableStateProps(props);
-    const {
-        anchorToInput,
-        children,
-        // `chipsAlignment` needs to be here to remove it from `forwardedProps`.
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        chipsAlignment,
-        className,
-        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
-        closeOnEscape = DEFAULT_PROPS.closeOnEscape,
-        fitToAnchorWidth,
-        hasError,
-        helper,
-        icon,
-        inputRef,
-        clearButtonProps,
-        isRequired,
-        isOpen,
-        isValid,
-        label,
-        name,
-        offset,
-        onBlur,
-        onChange,
-        onClear,
-        onClose,
-        onFocus,
-        onInfiniteScroll,
-        onKeyDown,
-        placeholder,
-        placement,
-        selectedChipRender = DEFAULT_PROPS.selectedChipRender,
-        shouldFocusOnClose,
-        theme = defaultTheme,
-        type,
-        value,
-        values = DEFAULT_PROPS.values,
-        ...forwardedProps
-    } = otherProps;
-
-    return (
-        <Autocomplete
-            ref={ref}
-            {...forwardedProps}
-            anchorToInput={anchorToInput}
-            className={classNames(className, CLASSNAME)}
-            name={name}
-            value={value}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            onBlur={onBlur}
-            shouldFocusOnClose={shouldFocusOnClose}
-            onFocus={onFocus}
-            hasError={hasError}
-            helper={helper}
-            icon={icon}
-            inputRef={inputRef}
-            chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}
-            {...disabledStateProps}
-            isRequired={isRequired}
-            clearButtonProps={clearButtonProps}
-            isValid={isValid}
-            label={label}
-            placeholder={placeholder}
-            theme={theme}
-            type={type}
-            isOpen={isOpen}
-            closeOnClick={false}
-            closeOnClickAway={closeOnClickAway}
-            closeOnEscape={closeOnEscape}
-            onClose={onClose}
-            offset={offset}
-            placement={placement}
-            fitToAnchorWidth={fitToAnchorWidth}
-            onInfiniteScroll={onInfiniteScroll}
-        >
-            {children}
-        </Autocomplete>
-    );
-});
-AutocompleteMultiple.displayName = COMPONENT_NAME;
-AutocompleteMultiple.className = CLASSNAME;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS;

package/src/components/autocomplete/__mockData__/index.ts

@@ -1,39 +0,0 @@
-export interface Suggestion {
-    id: string;
-    text: string;
-}
-
-export const CITIES: Suggestion[] = [
-    {
-        text: 'Los Angeles',
-        id: 'losangeles',
-    },
-    {
-        text: 'San Francisco',
-        id: 'sanfrancisco',
-    },
-    {
-        text: 'Paris',
-        id: 'paris',
-    },
-    {
-        text: 'Montpellier',
-        id: 'montpellier',
-    },
-    {
-        text: 'Bordeaux',
-        id: 'bordeaux',
-    },
-    {
-        text: 'Toulouse',
-        id: 'toulouse',
-    },
-    {
-        text: 'Lyon',
-        id: 'lyon',
-    },
-    {
-        text: 'Montevideo',
-        id: 'montevideo',
-    },
-];

package/src/components/autocomplete/index.ts

@@ -1,2 +0,0 @@
-export * from './Autocomplete';
-export * from './AutocompleteMultiple';

package/src/components/avatar/Avatar.stories.tsx

@@ -1,121 +0,0 @@
-/* eslint-disable react/display-name */
-import React from 'react';
-
-import { mdiDelete, mdiEye, mdiPencil, mdiStar } from '@lumx/icons';
-import { AvatarSize, Badge, ColorPalette, FlexBox, Icon, IconButton, Size } from '@lumx/react';
-import { avatarImageArgType, AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
-import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
-
-import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { colorArgType } from '@lumx/react/stories/controls/color';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { iconArgType } from '@lumx/react/stories/controls/icons';
-import { Avatar } from './Avatar';
-
-const AVATAR_SIZES = [Size.xxs, Size.xs, Size.s, Size.m, Size.l, Size.xl, Size.xxl];
-
-export default {
-    title: 'LumX components/avatar/Avatar',
-    component: Avatar,
-    argTypes: {
-        image: avatarImageArgType,
-        size: getSelectArgType<AvatarSize>(AVATAR_SIZES),
-    },
-    args: { image: AVATAR_IMAGES.avatar1 },
-};
-
-/**
- * Default avatar
- */
-export const Default = {};
-
-/**
- * Having onClick transforming the avatar into a button
- */
-export const AvatarButton = {
-    argTypes: {
-        onClick: { action: true },
-    },
-};
-
-/**
- * Having href transforming the avatar into a link
- */
-export const AvatarLink = {
-    args: {
-        href: 'https://example.com',
-        target: '_blank',
-    },
-};
-
-/**
- * Having linkAs transforming the avatar into a custom link
- */
-export const AvatarCustomLink = {
-    args: {
-        linkAs: CustomLink,
-    },
-};
-
-/**
- * Avatar with actions
- */
-export const WithActions = {
-    args: { size: Size.xl },
-    render: (props: any) => (
-        <Avatar
-            {...props}
-            actions={
-                <FlexBox orientation="horizontal" gap="regular" vAlign="center">
-                    <IconButton label="Edit" emphasis="low" hasBackground icon={mdiPencil} size="s" />
-                    <IconButton label="See" emphasis="low" hasBackground icon={mdiEye} size="s" />
-                    <IconButton label="Delete" emphasis="low" hasBackground icon={mdiDelete} size="s" />
-                </FlexBox>
-            }
-        />
-    ),
-};
-
-/**
- * All sizes
- */
-export const AllSizes = {
-    argTypes: {
-        size: { control: false },
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                cols: { key: 'size', options: AVATAR_SIZES },
-            },
-        }),
-    ],
-};
-
-/**
- * All sizes with badge
- */
-export const AllSizesWithBadge = {
-    ...AllSizes,
-    args: {
-        'badge.color': ColorPalette.blue,
-        'badge.icon': mdiStar,
-    },
-    argTypes: {
-        ...AllSizes.argTypes,
-        'badge.color': colorArgType,
-        'badge.icon': iconArgType,
-    },
-    decorators: [...AllSizes.decorators, withNestedProps()],
-    render: ({ badge, ...props }: any) => (
-        <Avatar
-            {...(props as any)}
-            badge={
-                <Badge color={badge.color}>
-                    <Icon icon={badge.icon} />
-                </Badge>
-            }
-        />
-    ),
-};

package/src/components/avatar/Avatar.test.tsx

@@ -1,34 +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 { Avatar, AvatarProps } from './Avatar';
-
-const CLASSNAME = Avatar.className as string;
-
-const setup = (propsOverride: Partial<AvatarProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    const props: AvatarProps = {
-        image: 'path/to/avatar/image.png',
-        alt: 'Image',
-        ...propsOverride,
-    };
-    render(<Avatar {...props} />, { wrapper });
-    const avatar = queryByClassName(document.body, CLASSNAME);
-    return { avatar, props };
-};
-
-describe(`<${Avatar.displayName}>`, () => {
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'avatar',
-        forwardAttributes: 'avatar',
-        applyTheme: {
-            affects: [{ element: 'avatar' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/avatar/Avatar.tsx

@@ -1,114 +0,0 @@
-import React, { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } 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';
-
-/**
- * Avatar sizes.
- */
-export type AvatarSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-
-/**
- * Defines the props of the component.
- */
-export interface AvatarProps extends GenericProps, HasTheme {
-    /** Action toolbar content. */
-    actions?: ReactNode;
-    /** Image alternative text. */
-    alt: string;
-    /** Badge. */
-    badge?: ReactElement;
-    /** Image URL. */
-    image: string;
-    /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
-    /** On click callback. */
-    onClick?: MouseEventHandler<HTMLDivElement>;
-    /** On key press callback. */
-    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;
-    /** Size variant. */
-    size?: AvatarSize;
-    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */
-    thumbnailProps?: Omit<
-        ThumbnailProps,
-        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'
-    >;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Avatar';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<AvatarProps> = {
-    size: Size.m,
-};
-
-/**
- * Avatar component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        actions,
-        alt,
-        badge,
-        className,
-        image,
-        linkProps,
-        linkAs,
-        onClick,
-        onKeyPress,
-        size = DEFAULT_PROPS.size,
-        theme = defaultTheme,
-        thumbnailProps,
-        ...forwardedProps
-    } = props;
-
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}
-        >
-            <Thumbnail
-                linkProps={linkProps}
-                linkAs={linkAs}
-                className={`${CLASSNAME}__thumbnail`}
-                onClick={onClick}
-                onKeyPress={onKeyPress}
-                {...thumbnailProps}
-                aspectRatio={AspectRatio.square}
-                size={size}
-                image={image}
-                alt={alt}
-                theme={theme}
-            />
-            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
-            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}
-        </div>
-    );
-});
-Avatar.displayName = COMPONENT_NAME;
-Avatar.className = CLASSNAME;
-Avatar.defaultProps = DEFAULT_PROPS;

package/src/components/avatar/index.ts

@@ -1 +0,0 @@
-export * from './Avatar';

package/src/components/badge/Badge.stories.tsx

@@ -1,70 +0,0 @@
-import { mdiHeart } from '@lumx/icons';
-import { AspectRatio, Badge, ColorPalette, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
-import React from 'react';
-import { colorArgType } from '@lumx/react/stories/controls/color';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-
-export default {
-    title: 'LumX components/badge/Badge',
-    component: Badge,
-    argTypes: {
-        color: colorArgType,
-        children: { control: false },
-    },
-};
-
-/**
- * Using badge with text children
- */
-export const WithText = {
-    args: { children: <span>30</span> },
-};
-
-/**
- * Using badge with icon children
- */
-export const WithIcon = {
-    args: { children: <Icon icon={mdiHeart} /> },
-};
-
-/**
- * Using badge with thumbnail children
- */
-export const WithThumbnail = {
-    args: {
-        children: (
-            <Thumbnail
-                alt="Logo"
-                aspectRatio={AspectRatio.square}
-                image="/logo.svg"
-                size={Size.xxs}
-                variant={ThumbnailVariant.rounded}
-            />
-        ),
-    },
-};
-
-/**
- * All combinations of colors and children types
- */
-export const AllColors = {
-    argTypes: {
-        color: { control: false },
-    },
-    decorators: [
-        withCombinations({
-            combinations: {
-                cols: {
-                    key: 'color',
-                    options: withUndefined(ColorPalette),
-                },
-                rows: {
-                    'With text': WithText.args,
-                    'With icon': WithIcon.args,
-                    'With thumbnail': WithThumbnail.args,
-                },
-            },
-        }),
-    ],
-};

package/src/components/badge/Badge.test.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { ColorPalette } from '@lumx/react';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-import { Badge, BadgeProps } from './Badge';
-
-const CLASSNAME = Badge.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propsOverride: Partial<BadgeProps> = {}) => {
-    const props: BadgeProps = {
-        children: <span>30</span>,
-        ...propsOverride,
-    };
-    render(<Badge {...props} />);
-    const badge = getByClassName(document.body, CLASSNAME);
-    return { badge, props };
-};
-
-describe(`<${Badge.displayName}>`, () => {
-    describe('Props', () => {
-        it('should use default props', () => {
-            const { badge } = setup();
-
-            expect(badge.className).toMatchInlineSnapshot('"lumx-badge lumx-badge--color-primary"');
-            expect(badge).toHaveTextContent(/30/);
-        });
-
-        it('should render color', () => {
-            const { badge } = setup({ color: ColorPalette.red });
-
-            expect(badge).toHaveClass('lumx-badge--color-red');
-        });
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'badge',
-        forwardAttributes: 'badge',
-        forwardRef: 'badge',
-    });
-});

package/src/components/badge/Badge.tsx

@@ -1,58 +0,0 @@
-import React, { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { ColorPalette } from '@lumx/react';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-/**
- * Defines the props of the component.
- */
-export interface BadgeProps extends GenericProps {
-    /** Badge content. */
-    children?: ReactNode;
-    /** Color variant. */
-    color?: ColorPalette;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Badge';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<BadgeProps> = {
-    color: ColorPalette.primary,
-};
-
-/**
- * Badge component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Badge = forwardRef<BadgeProps, HTMLDivElement>((props, ref) => {
-    const { children, className, color = DEFAULT_PROPS.color, ...forwardedProps } = props;
-    return (
-        <div
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color }))}
-        >
-            {children}
-        </div>
-    );
-});
-Badge.displayName = COMPONENT_NAME;
-Badge.className = CLASSNAME;
-Badge.defaultProps = DEFAULT_PROPS;