@lumx/react 3.20.1-alpha.3 → 3.20.1-alpha.30

package/src/components/chip/Chip.tsx

@@ -1,168 +0,0 @@
-import { MouseEventHandler, ReactNode } from 'react';
-
-import classNames from 'classnames';
-import isFunction from 'lodash/isFunction';
-
-import { ColorPalette, Size, Theme } from '@lumx/react';
-import { useStopPropagation } from '@lumx/react/hooks/useStopPropagation';
-
-import { GenericProps, HasTheme } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { onEnterPressed } from '@lumx/core/js/utils';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
-import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
-
-/**
- * Chip sizes.
- */
-type ChipSize = Extract<Size, 's' | 'm'>;
-
-/**
- * Defines the props of the component.
- */
-export interface ChipProps extends GenericProps, HasTheme, HasAriaDisabled {
-    /** A component to be rendered after the content. */
-    after?: ReactNode;
-    /** A component to be rendered before the content. */
-    before?: ReactNode;
-    /** Color variant. */
-    color?: ColorPalette;
-    /** Whether the component is clickable or not. */
-    isClickable?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the chip is currently in a highlighted state or not. */
-    isHighlighted?: boolean;
-    /** Whether the component is selected or not. */
-    isSelected?: boolean;
-    /** Size variant. */
-    size?: ChipSize;
-    /** On "after" element clicked callback. */
-    onAfterClick?: MouseEventHandler;
-    /** On "before" element clicked callback. */
-    onBeforeClick?: MouseEventHandler;
-    /** Children */
-    children?: React.ReactNode;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Chip';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ChipProps> = {
-    size: Size.m,
-};
-
-/**
- * Chip component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
-    const {
-        after,
-        before,
-        children,
-        className,
-        color,
-        isClickable: propIsClickable,
-        isHighlighted,
-        isSelected,
-        onAfterClick,
-        onBeforeClick,
-        onClick,
-        size = DEFAULT_PROPS.size,
-        theme = defaultTheme,
-        href,
-        onKeyDown,
-        ...forwardedProps
-    } = otherProps;
-    const hasAfterClick = isFunction(onAfterClick);
-    const hasBeforeClick = isFunction(onBeforeClick);
-    const hasOnClick = isFunction(props.onClick);
-    const isButton = hasOnClick && !href;
-    const isClickable = Boolean(hasOnClick) || Boolean(href) || propIsClickable;
-
-    // Adapt color to the theme.
-    const chipColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
-
-    const handleOnBeforeClick = useStopPropagation(onBeforeClick);
-    const handleOnAfterClick = useStopPropagation(onAfterClick);
-    const handleKeyDown = (evt: React.KeyboardEvent) => {
-        onKeyDown?.(evt);
-        if (hasOnClick) {
-            onEnterPressed(onClick)(evt);
-        }
-    };
-
-    return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        <a
-            role={isButton ? 'button' : undefined}
-            tabIndex={isClickable && !disabledStateProps.disabled ? 0 : undefined}
-            {...forwardedProps}
-            href={!disabledStateProps.disabled ? href : undefined}
-            ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    clickable: isClickable,
-                    color: chipColor,
-                    isDisabled: isAnyDisabled,
-                    hasAfter: Boolean(after),
-                    hasBefore: Boolean(before),
-                    highlighted: Boolean(isHighlighted),
-                    prefix: CLASSNAME,
-                    selected: Boolean(isSelected),
-                    size,
-                    unselected: Boolean(!isSelected),
-                }),
-            )}
-            aria-disabled={(isClickable && isAnyDisabled) || undefined}
-            onClick={hasOnClick ? onClick : undefined}
-            onKeyDown={handleKeyDown}
-        >
-            {before && (
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-                <div
-                    className={classNames(`${CLASSNAME}__before`, {
-                        [`${CLASSNAME}__before--is-clickable`]: hasBeforeClick,
-                    })}
-                    onClick={handleOnBeforeClick}
-                >
-                    {before}
-                </div>
-            )}
-            <div className={`${CLASSNAME}__label`}>{children}</div>
-            {after && (
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-                <div
-                    className={classNames(`${CLASSNAME}__after`, {
-                        [`${CLASSNAME}__after--is-clickable`]: hasAfterClick,
-                    })}
-                    onClick={handleOnAfterClick}
-                >
-                    {after}
-                </div>
-            )}
-        </a>
-    );
-});
-Chip.displayName = COMPONENT_NAME;
-Chip.className = CLASSNAME;
-Chip.defaultProps = DEFAULT_PROPS;

package/src/components/chip/ChipGroup.stories.tsx

@@ -1,47 +0,0 @@
-import { Chip, ChipGroup, Size } from '@lumx/react';
-
-export default {
-    title: 'LumX components/chip/ChipGroup',
-    component: ChipGroup,
-    args: ChipGroup.defaultProps,
-    argTypes: {},
-};
-
-const chips = (
-    <>
-        <Chip size={Size.s}>Apricot</Chip>
-        <Chip size={Size.s}>Apple</Chip>
-        <Chip size={Size.s}>Banana</Chip>
-        <Chip size={Size.s}>Blueberry</Chip>
-        <Chip size={Size.s}>Lemon</Chip>
-        <Chip size={Size.s}>Orange</Chip>
-        <Chip size={Size.s}>Peach</Chip>
-        <Chip size={Size.s}>Pear</Chip>
-        <Chip size={Size.s}>Pineapple</Chip>
-        <Chip size={Size.s}>Melon</Chip>
-        <Chip size={Size.s}>Raspberry</Chip>
-        <Chip size={Size.s}>Strawberry</Chip>
-        <Chip size={Size.s}>Watermelon</Chip>
-    </>
-);
-
-/**
- * Default chip group
- */
-export const Default = {
-    args: {
-        children: chips,
-    },
-};
-
-/**
- * Small chip group
- */
-export const Small = {
-    args: {
-        children: chips,
-        style: {
-            width: '200px',
-        },
-    },
-};

package/src/components/chip/ChipGroup.test.tsx

@@ -1,37 +0,0 @@
-import { render } from '@testing-library/react';
-import { getByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { ChipGroup, ChipGroupProps } from './ChipGroup';
-import { Chip } from './Chip';
-
-const CLASSNAME = ChipGroup.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (propOverrides: Partial<ChipGroupProps> = {}) => {
-    const props = {
-        children: [<Chip key="1">Chip 1</Chip>, <Chip key="2">Chip 2</Chip>, <Chip key="3">Chip 3</Chip>],
-        ...propOverrides,
-    };
-    render(<ChipGroup {...props} />);
-    const chipGroup = getByClassName(document.body, CLASSNAME);
-
-    return { props, chipGroup };
-};
-
-describe('<ChipGroup />', () => {
-    describe('Props', () => {
-        it('should render default', () => {
-            const { chipGroup } = setup();
-            expect(chipGroup).toBeInTheDocument();
-            expect(chipGroup).toHaveClass(CLASSNAME);
-        });
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'chipGroup',
-        forwardAttributes: 'chipGroup',
-    });
-});

package/src/components/chip/ChipGroup.tsx

@@ -1,60 +0,0 @@
-import { ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { HorizontalAlignment } from '@lumx/core/js/constants';
-import { GenericProps } from '@lumx/react/utils/type';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useChipGroupNavigation } from '@lumx/react/hooks/useChipGroupNavigation';
-
-/**
- * Defines the props of the component.
- */
-export interface ChipGroupProps extends GenericProps {
-    /**
-     * Chip horizontal alignment.
-     * @deprecated
-     */
-    align?: HorizontalAlignment;
-    /** List of Chip. */
-    children: ReactNode;
-}
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<ChipGroupProps> = {};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'ChipGroup';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * ChipGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const InternalChipGroup = forwardRef<ChipGroupProps, HTMLDivElement>((props, ref) => {
-    const { align, children, className, ...forwardedProps } = props;
-
-    return (
-        <div ref={ref} {...forwardedProps} className={classNames(className, CLASSNAME)}>
-            {children}
-        </div>
-    );
-});
-InternalChipGroup.displayName = COMPONENT_NAME;
-InternalChipGroup.className = CLASSNAME;
-InternalChipGroup.defaultProps = DEFAULT_PROPS;
-
-export const ChipGroup = Object.assign(InternalChipGroup, { useChipGroupNavigation });

package/src/components/chip/index.ts

@@ -1,2 +0,0 @@
-export * from './Chip';
-export * from './ChipGroup';

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -1,91 +0,0 @@
-/* eslint-disable react/jsx-key,react/display-name */
-import { mdiDotsHorizontal, mdiHeart, mdiReply } from '@lumx/icons';
-import { Button, CommentBlock } from '@lumx/react';
-import { IconButton } from '@lumx/react/components/button/IconButton';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { avatarImageArgType, AVATAR_IMAGES } from '@lumx/react/stories/controls/image';
-import { loremIpsum } from '@lumx/react/stories/utils/lorem';
-
-export default {
-    title: 'LumX components/comment-block/CommentBlock',
-    component: CommentBlock,
-    decorators: [withNestedProps()],
-    args: {
-        'avatarProps.image': AVATAR_IMAGES.avatar1,
-    },
-    argTypes: {
-        'avatarProps.image': avatarImageArgType,
-        actions: { control: false },
-        headerActions: { control: false },
-        children: { control: false },
-    },
-};
-
-/**
- * Minimal comment block
- */
-export const Minimal = {
-    args: {
-        text: loremIpsum('short'),
-    },
-};
-
-/**
- * Full-featured comment block
- */
-export const FullFeatured = {
-    args: {
-        name: 'Emmitt O. Lum',
-        text: loremIpsum('short'),
-        date: '5 days ago',
-        fullDate: 'Monday, March 30, 2021 at 4:06 PM',
-        hasActions: true,
-    },
-    render: (props: any) => (
-        <CommentBlock
-            {...props}
-            actions={[
-                <Button emphasis="low" size="s" leftIcon={mdiHeart}>
-                    24 likes
-                </Button>,
-                <Button emphasis="low" size="s" leftIcon={mdiReply}>
-                    Reply
-                </Button>,
-            ]}
-            headerActions={<IconButton label="Actions" icon={mdiDotsHorizontal} emphasis="low" size="s" />}
-        />
-    ),
-};
-
-/**
- * Marked as relevant
- */
-export const Relevant = {
-    ...FullFeatured,
-    args: { ...FullFeatured.args, isRelevant: true },
-};
-
-/**
- * Comment thread
- */
-export const Thread = {
-    ...FullFeatured,
-    args: {
-        ...FullFeatured.args,
-        isOpen: true,
-        children: [
-            <CommentBlock
-                avatarProps={{ image: AVATAR_IMAGES.avatar2, alt: '' }}
-                name="John Doe"
-                date="5 days ago"
-                text={loremIpsum('tiny')}
-            />,
-            <CommentBlock
-                avatarProps={{ image: AVATAR_IMAGES.avatar4, alt: '' }}
-                name="Jane Doe"
-                date="5 days ago"
-                text={loremIpsum('tiny')}
-            />,
-        ],
-    },
-};

package/src/components/comment-block/CommentBlock.test.tsx

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

package/src/components/comment-block/CommentBlock.tsx

@@ -1,172 +0,0 @@
-import { Children, ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
-import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { AvatarProps } from '../avatar/Avatar';
-
-/**
- * Comment block variants.
- */
-export const CommentBlockVariant = {
-    indented: 'indented',
-    linear: 'linear',
-} as const;
-export type CommentBlockVariant = ValueOf<typeof CommentBlockVariant>;
-
-/**
- * Defines the props of the component.
- */
-export interface CommentBlockProps extends GenericProps, HasTheme {
-    /** Action toolbar content. */
-    actions?: ReactNode;
-    /** Props to pass to the avatar. */
-    avatarProps: AvatarProps;
-    /** Comment block replies. */
-    children?: ReactNode;
-    /** Comment date with the minimal timestamp information (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/
-    date?: string;
-    /** Comment date with the full timestamp information (day, month, year, time) */
-    fullDate?: string;
-    /** Whether the component has actions to display or not. */
-    hasActions?: boolean;
-    /** Action toolbar header content. */
-    headerActions?: ReactNode;
-    /** Whether the component is open or not. */
-    isOpen?: boolean;
-    /** Whether the comment is relevant or not. */
-    isRelevant?: boolean;
-    /** Comment author name. */
-    name?: React.ReactNode;
-    /**
-     * On click callback.
-     * @deprecated Use avatarProps instead and/or inject a clickable component in `name`
-     */
-    onClick?(): void;
-    /**
-     * On mouse enter callback.
-     * @deprecated Use avatarProps instead and/or inject a clickable component in `name`
-     */
-    onMouseEnter?(): void;
-    /**
-     * On mouse leave callback.
-     * @deprecated Use avatarProps instead and/or inject a clickable component in `name`
-     */
-    onMouseLeave?(): void;
-    /** Comment content. */
-    text: ReactNode | string;
-    /** Comment variant. */
-    variant?: CommentBlockVariant;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'CommentBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<CommentBlockProps> = {
-    variant: CommentBlockVariant.indented,
-};
-
-/**
- * CommentBlock component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const CommentBlock = forwardRef<CommentBlockProps, HTMLDivElement>((props, ref) => {
-    const defaultTheme = useTheme() || Theme.light;
-    const {
-        actions,
-        avatarProps,
-        children,
-        className,
-        date,
-        fullDate,
-        hasActions,
-        headerActions,
-        isOpen,
-        isRelevant,
-        name,
-        onClick,
-        onMouseEnter,
-        onMouseLeave,
-        text,
-        theme = defaultTheme,
-        variant = DEFAULT_PROPS.variant,
-        ...forwardedProps
-    } = props;
-    const hasChildren = Children.count(children) > 0;
-
-    return (
-        <div
-            ref={ref}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    hasChildren: hasChildren && isOpen,
-                    hasIndentedChildren: hasChildren && variant === CommentBlockVariant.indented,
-                    hasLinearChildren: hasChildren && variant === CommentBlockVariant.linear,
-                    isRelevant,
-                    prefix: CLASSNAME,
-                    theme,
-                }),
-            )}
-            {...forwardedProps}
-        >
-            <div className={`${CLASSNAME}__wrapper`}>
-                <div className={`${CLASSNAME}__avatar`}>
-                    <Avatar {...avatarProps} size={Size.m} onClick={onClick} />
-                </div>
-
-                <div className={`${CLASSNAME}__container`}>
-                    <div className={`${CLASSNAME}__content`}>
-                        <div className={`${CLASSNAME}__meta`}>
-                            {name && (
-                                // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-                                <span
-                                    className={`${CLASSNAME}__name`}
-                                    onClick={onClick}
-                                    onMouseEnter={onMouseEnter}
-                                    onMouseLeave={onMouseLeave}
-                                >
-                                    {name}
-                                </span>
-                            )}
-                            {headerActions && <span className={`${CLASSNAME}__header-actions`}>{headerActions}</span>}
-                        </div>
-
-                        <div className={`${CLASSNAME}__text`}>{text}</div>
-                        {date &&
-                            (fullDate ? (
-                                <Tooltip label={fullDate} placement="top">
-                                    <span className={`${CLASSNAME}__date`}>{date}</span>
-                                </Tooltip>
-                            ) : (
-                                <span className={`${CLASSNAME}__date`}>{date}</span>
-                            ))}
-                    </div>
-                    {hasActions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}
-                </div>
-            </div>
-            {hasChildren && isOpen && <div className={`${CLASSNAME}__children`}>{children}</div>}
-        </div>
-    );
-});
-CommentBlock.displayName = COMPONENT_NAME;
-CommentBlock.className = CLASSNAME;
-CommentBlock.defaultProps = DEFAULT_PROPS;

package/src/components/comment-block/index.ts

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