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

package/src/components/autocomplete/AutocompleteMultiple.stories.tsx

@@ -1,167 +0,0 @@
-import { useMemo, useRef, useState } from 'react';
-
-import { AutocompleteMultiple, Chip, ChipGroup, Icon, List, ListItem, Size } from '@lumx/react';
-
-import { mdiClose, mdiFlag } from '@lumx/icons';
-
-import { CITIES } from './__mockData__';
-
-export default { title: 'LumX components/autocomplete/AutocompleteMultiple' };
-
-interface City {
-    id: string;
-    text: string;
-}
-
-export const Simple = () => {
-    const INITIAL_STATE_SHOW_SUGGESTIONS = false;
-    const INITIAL_STATE_NAVIGATION_SUGGESTION = '';
-
-    const [showSuggestions, setShowSuggestions] = useState(INITIAL_STATE_SHOW_SUGGESTIONS);
-    const [filterValue, setFilterValue] = useState('');
-    const [navigationSuggestionValue, setNavigationSuggestionValue] = useState(INITIAL_STATE_NAVIGATION_SUGGESTION);
-    const [selectedValues, setSelectedValues] = useState<City[]>([]);
-    const inputRef = useRef<HTMLInputElement>(null);
-
-    const filteredCities = useMemo(
-        () =>
-            CITIES.filter((city) => {
-                const noSpacesCity = city.text.replace(' ', '').toLowerCase();
-                return noSpacesCity.includes(filterValue.replace(' ', '').toLowerCase());
-            }),
-        [filterValue],
-    );
-
-    const hasSuggestions = filteredCities.length > 0;
-
-    const onChipDeleted = () => {
-        selectedValues.pop();
-        setSelectedValues(selectedValues);
-    };
-
-    const {
-        activeChip,
-        onBackspacePressed: chipBackspaceNavigation,
-        resetChipNavigation,
-    } = ChipGroup.useChipGroupNavigation(selectedValues, onChipDeleted);
-
-    const closeAutocomplete = () => {
-        setShowSuggestions(false);
-        resetChipNavigation();
-    };
-
-    const setSelectedCity = (city: City) => {
-        setSelectedValues([...selectedValues, city]);
-        setFilterValue('');
-        setShowSuggestions(INITIAL_STATE_SHOW_SUGGESTIONS);
-        setNavigationSuggestionValue(INITIAL_STATE_NAVIGATION_SUGGESTION);
-    };
-
-    const onNewCityCreated = (newCity: string) => {
-        if (!newCity || newCity.length <= 0) {
-            return;
-        }
-
-        setSelectedCity({
-            id: newCity.replace(' ', '').toLowerCase(),
-            text: newCity,
-        });
-        setNavigationSuggestionValue(INITIAL_STATE_NAVIGATION_SUGGESTION);
-    };
-
-    const clearSelectedValue = (city: City) => () => {
-        inputRef?.current?.focus();
-        setSelectedValues(city ? selectedValues.filter((c) => c.id !== city.id) : []);
-    };
-
-    const onChange = (value: string) => {
-        setFilterValue(value);
-        setShowSuggestions(value.length > 0);
-        setNavigationSuggestionValue(INITIAL_STATE_NAVIGATION_SUGGESTION);
-        resetChipNavigation();
-    };
-
-    const onItemNavigated = (city: City) => {
-        if (city && showSuggestions) {
-            setNavigationSuggestionValue(city.text);
-        }
-    };
-
-    const isTextFieldEmpty = () => filterValue.length === 0 && !navigationSuggestionValue;
-
-    const onBackspacePressed = () => {
-        if (isTextFieldEmpty()) {
-            chipBackspaceNavigation();
-        } else if (navigationSuggestionValue) {
-            onChange(navigationSuggestionValue);
-            setNavigationSuggestionValue(INITIAL_STATE_NAVIGATION_SUGGESTION);
-            resetChipNavigation();
-        }
-    };
-
-    const { activeItemIndex } = List.useKeyboardListNavigation(
-        filteredCities,
-        inputRef,
-        setSelectedCity,
-        onItemNavigated,
-        onNewCityCreated,
-        onBackspacePressed,
-        true,
-    );
-
-    const onFocus = () => {
-        setShowSuggestions(filterValue.length > 0);
-    };
-
-    const onBlur = () => {
-        resetChipNavigation();
-    };
-
-    const renderChip = (city: City, index: number) => (
-        <Chip
-            isClickable
-            key={index}
-            after={<Icon icon={mdiClose} size={Size.xxs} />}
-            size={Size.s}
-            onAfterClick={clearSelectedValue(city)}
-            onClick={clearSelectedValue(city)}
-            isHighlighted={index === activeChip}
-        >
-            {city.text}
-        </Chip>
-    );
-
-    return (
-        <AutocompleteMultiple
-            isOpen={showSuggestions && hasSuggestions}
-            onClose={closeAutocomplete}
-            value={navigationSuggestionValue || filterValue}
-            onChange={onChange}
-            onFocus={onFocus}
-            values={selectedValues}
-            inputRef={inputRef}
-            shouldFocusOnClose
-            fitToAnchorWidth
-            onBlur={onBlur}
-            selectedChipRender={renderChip}
-            icon={mdiFlag}
-            label="Label"
-        >
-            <List isClickable>
-                {filteredCities.map((city, index) => {
-                    const onItemSelected = () => setSelectedCity(city);
-                    return (
-                        <ListItem
-                            size={Size.tiny}
-                            key={city.id}
-                            isHighlighted={index === activeItemIndex}
-                            onItemSelected={onItemSelected}
-                        >
-                            {city.text}
-                        </ListItem>
-                    );
-                })}
-            </List>
-        </AutocompleteMultiple>
-    );
-};

package/src/components/autocomplete/AutocompleteMultiple.test.tsx

@@ -1,61 +0,0 @@
-import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
-import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { render } from '@testing-library/react';
-
-import { CITIES as suggestions } from './__mockData__';
-import { AutocompleteMultiple, AutocompleteMultipleProps } from './AutocompleteMultiple';
-
-const CLASSNAME = AutocompleteMultiple.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<AutocompleteMultipleProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
-    render(
-        <AutocompleteMultiple {...(props as any)}>
-            <List>
-                {suggestions.map((suggestion) => (
-                    <ListItem size={Size.tiny} key={suggestion.id}>
-                        <div>{suggestion.text}</div>
-                    </ListItem>
-                ))}
-            </List>
-        </AutocompleteMultiple>,
-        { wrapper },
-    );
-    const autocompleteMultiple = getByClassName(document.body, CLASSNAME);
-    const textField = getByClassName(autocompleteMultiple, TextField.className as string);
-    const getDropdown = () => queryByClassName(document.body, Dropdown.className as string);
-    return { props, autocompleteMultiple, textField, getDropdown };
-};
-
-describe(`<${AutocompleteMultiple.displayName}>`, () => {
-    it('should render default', () => {
-        const { autocompleteMultiple, textField, getDropdown } = setup({});
-
-        expect(autocompleteMultiple).toBeInTheDocument();
-        expect(autocompleteMultiple.className).toMatchInlineSnapshot('"lumx-autocomplete-multiple lumx-autocomplete"');
-        expect(textField).toBeInTheDocument();
-        expect(getDropdown()).not.toBeInTheDocument();
-    });
-
-    it('should render open', () => {
-        const { getDropdown } = setup({ isOpen: true });
-        expect(getDropdown()).toBeInTheDocument();
-    });
-
-    // Common tests suite.
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardClassName: 'autocompleteMultiple',
-        forwardRef: 'autocompleteMultiple',
-        forwardAttributes: 'autocompleteMultiple',
-        applyTheme: {
-            affects: [{ element: 'textField' }],
-            viaProp: true,
-            viaContext: true,
-            defaultTheme: 'light',
-        },
-    });
-});

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -1,156 +0,0 @@
-import { 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,119 +0,0 @@
-/* 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

@@ -1,32 +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 { 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 { 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';