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

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

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

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

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

@@ -0,0 +1,119 @@
+/* eslint-disable react/display-name */
+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

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

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

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

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

@@ -0,0 +1,69 @@
+import { mdiHeart } from '@lumx/icons';
+import { AspectRatio, Badge, ColorPalette, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/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

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

@@ -0,0 +1,58 @@
+import { 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;

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

@@ -0,0 +1,75 @@
+import { mdiAccount, mdiBee, mdiHeart } from '@lumx/icons';
+import { Badge, BadgeWrapper, Button, Chip, ColorPalette, FlexBox, Icon, Orientation, Size } from '@lumx/react';
+
+export default {
+    title: 'LumX components/badge/BadgeWrapper',
+    component: BadgeWrapper,
+    argTypes: {
+        children: { control: false },
+    },
+};
+
+/**
+ * Using badge wrapper with icon
+ */
+export const WithIcon = {
+    args: {
+        badge: (
+            <Badge color={ColorPalette.red}>
+                <Icon icon={mdiHeart} />
+            </Badge>
+        ),
+        children: <Icon icon={mdiAccount} size={Size.m} color={ColorPalette.dark} />,
+    },
+};
+
+/**
+ * Using badge wrapper with icon
+ */
+export const WithButton = {
+    args: {
+        badge: (
+            <Badge color={ColorPalette.red}>
+                <Icon icon={mdiHeart} />
+            </Badge>
+        ),
+        children: <Button>Some button</Button>,
+    },
+};
+
+export const WithChip = {
+    args: {
+        badge: (
+            <Badge color={ColorPalette.red}>
+                <Icon icon={mdiHeart} />
+            </Badge>
+        ),
+        children: <Chip>Some chip</Chip>,
+    },
+};
+
+const InFlexbox = ({ orientation }: { orientation: Orientation }) => (
+    <FlexBox orientation={orientation} gap={Size.medium} vAlign="left">
+        <BadgeWrapper
+            badge={
+                <Badge color={ColorPalette.yellow}>
+                    <Icon icon={mdiBee} />
+                </Badge>
+            }
+        >
+            <Chip color={ColorPalette.green}>Some chip</Chip>
+        </BadgeWrapper>
+        <BadgeWrapper
+            badge={
+                <Badge color={ColorPalette.red}>
+                    <Icon icon={mdiHeart} />
+                </Badge>
+            }
+        >
+            <Chip color={ColorPalette.blue}>Some other chip</Chip>
+        </BadgeWrapper>
+    </FlexBox>
+);
+
+export const InVerticalFlexbox = () => <InFlexbox orientation={Orientation.vertical} />;
+export const InHorizontalFlexbox = () => <InFlexbox orientation={Orientation.horizontal} />;

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

@@ -0,0 +1,47 @@
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import omit from 'lodash/omit';
+import last from 'lodash/last';
+
+import { mdiAccount, mdiHeart } from '@lumx/icons';
+import { Badge, BadgeWrapper, BadgeWrapperProps, ColorPalette, Icon } from '@lumx/react';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+import { render } from '@testing-library/react';
+
+const CLASSNAME = BadgeWrapper.className as string;
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: Partial<BadgeWrapperProps> = {}) => {
+    const props = {
+        badge: (
+            <Badge color={ColorPalette.red}>
+                <Icon icon={mdiHeart} />
+            </Badge>
+        ),
+        children: <Icon icon={mdiAccount} />,
+        ...propsOverride,
+    };
+    render(<BadgeWrapper {...omit(props, 'children')}>{props.children}</BadgeWrapper>);
+    const badgeWrapper = getByClassName(document.body, CLASSNAME);
+    return { badgeWrapper, props };
+};
+
+describe(`<${BadgeWrapper.displayName}>`, () => {
+    describe('Props', () => {
+        it('should render badge', () => {
+            const { badgeWrapper } = setup();
+
+            expect(badgeWrapper).toHaveClass('lumx-badge-wrapper');
+            expect(badgeWrapper.children).toHaveLength(2);
+            expect(last(badgeWrapper.children)).toHaveClass('lumx-badge-wrapper__badge');
+        });
+    });
+
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'badgeWrapper',
+        forwardAttributes: 'badgeWrapper',
+        forwardRef: 'badgeWrapper',
+    });
+});

package/src/components/badge/BadgeWrapper.tsx

@@ -0,0 +1,37 @@
+import { ReactElement, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { GenericProps } from '@lumx/react/utils/type';
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+
+export interface BadgeWrapperProps extends GenericProps {
+    /** Badge. */
+    badge: ReactElement;
+    /** Node to display the badge on */
+    children: ReactNode;
+}
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'BadgeWrapper';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+export const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props, ref) => {
+    const { badge, children, className, ...forwardedProps } = props;
+
+    return (
+        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
+            {children}
+            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}
+        </div>
+    );
+});
+BadgeWrapper.displayName = 'BadgeWrapper';
+BadgeWrapper.className = CLASSNAME;

package/src/components/badge/index.ts

@@ -0,0 +1,2 @@
+export * from './Badge';
+export * from './BadgeWrapper';