@lumx/react 3.21.1 → 3.21.2-alpha.1

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

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

package/src/components/date-picker/DatePicker.stories.tsx

@@ -1,118 +0,0 @@
-import { DatePicker, GridColumn } from '@lumx/react';
-import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
-import { withNestedProps } from '@lumx/react/stories/decorators/withNestedProps';
-import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
-import { withTheming } from '@lumx/react/stories/utils/theming';
-
-export default {
-    title: 'LumX components/date-picker/DatePicker',
-    component: DatePicker,
-    argTypes: {
-        onChange: { action: true },
-    },
-    decorators: [withValueOnChange(), withNestedProps()],
-};
-
-/**
- * Default date picker
- */
-export const Default = {
-    args: {
-        defaultMonth: new Date('2023-02'),
-        'nextButtonProps.label': 'Next month',
-        'previousButtonProps.label': 'Previous month',
-    },
-};
-
-/**
- * Demonstrate variations based on the given locale code
- */
-export const LocalesVariations = {
-    ...Default,
-    decorators: [
-        withCombinations({
-            combinations: { sections: { key: 'locale', options: ['fr', 'en-US', 'ar', 'zh-HK', 'ar-eg'] } },
-        }),
-        withWrapper({ maxColumns: 5, itemMinWidth: 300 }, GridColumn),
-    ],
-};
-
-/**
- * Demo LumX CSS theming variables
- */
-export const Theming = {
-    args: { ...Default.args, value: new Date('2023-02-15') },
-    decorators: [
-        withTheming({
-            values: `
-            --lumx-button-border-radius: 10px;
-
-            /////////////
-            --lumx-button-emphasis-low-state-default-padding-horizontal: 1px;
-            --lumx-button-emphasis-low-state-default-border-width: 1px;
-            --lumx-button-emphasis-low-state-hover-padding-horizontal: 2px;
-            --lumx-button-emphasis-low-state-hover-border-width: 1px;
-            --lumx-button-emphasis-low-state-active-padding-horizontal: 3px;
-            --lumx-button-emphasis-low-state-active-border-width: 1px;
-
-            --lumx-button-emphasis-low-state-default-theme-light-background-color: rgb(from green r g b / 10%);
-            --lumx-button-emphasis-low-state-default-theme-light-color: black;
-            --lumx-button-emphasis-low-state-default-theme-light-border-color: transparent;
-            --lumx-button-emphasis-low-state-hover-theme-light-background-color: rgb(from darkslategray r g b / 50%);
-            --lumx-button-emphasis-low-state-hover-theme-light-color: crimson;
-            --lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent;
-            --lumx-button-emphasis-low-state-active-theme-light-background-color: rgb(from blanchedalmond r g b / 50%);
-            --lumx-button-emphasis-low-state-active-theme-light-color: firebrick;
-            --lumx-button-emphasis-low-state-active-theme-light-border-color: transparent;
-
-            /////////////
-            --lumx-button-emphasis-selected-state-default-padding-horizontal: 1px;
-            --lumx-button-emphasis-selected-state-default-border-width: 1px;
-            --lumx-button-emphasis-selected-state-hover-padding-horizontal: 2px;
-            --lumx-button-emphasis-selected-state-hover-border-width: 1px;
-            --lumx-button-emphasis-selected-state-active-padding-horizontal: 3px;
-            --lumx-button-emphasis-selected-state-active-border-width: 1px;
-
-            --lumx-button-emphasis-selected-state-default-theme-light-background-color: rgb(from green r g b / 50%);
-            --lumx-button-emphasis-selected-state-default-theme-light-color: green;
-            --lumx-button-emphasis-selected-state-default-theme-light-border-color: currentcolor;
-            --lumx-button-emphasis-selected-state-hover-theme-light-background-color: rgb(from darkslategray r g b / 50%);
-            --lumx-button-emphasis-selected-state-hover-theme-light-color: crimson;
-            --lumx-button-emphasis-selected-state-hover-theme-light-border-color: currentcolor;
-            --lumx-button-emphasis-selected-state-active-theme-light-background-color: rgb(from blanchedalmond r g b / 50%);
-            --lumx-button-emphasis-selected-state-active-theme-light-color: firebrick;
-            --lumx-button-emphasis-selected-state-active-theme-light-border-color: currentcolor;
-
-            /////////
-            --lumx-text-field-input-min-height: 26px;
-            --lumx-text-field-input-padding-horizontal: 5px;
-            --lumx-text-field-input-border-radius: 10px;
-            --lumx-text-field-state-default-input-border-top-width: 0;
-            --lumx-text-field-state-default-input-border-right-width: 0;
-            --lumx-text-field-state-default-input-border-bottom-width: 0;
-            --lumx-text-field-state-default-input-border-left-width: 0;
-            --lumx-text-field-state-default-theme-light-header-label-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-default-theme-light-input-background-color: rgb(from green r g b / 10%);
-            --lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L4);
-            --lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-hover-input-border-top-width: 1px;
-            --lumx-text-field-state-hover-input-border-right-width: 1px;
-            --lumx-text-field-state-hover-input-border-bottom-width: 1px;
-            --lumx-text-field-state-hover-input-border-left-width: 1px;
-            --lumx-text-field-state-hover-theme-light-header-label-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-hover-theme-light-input-background-color: rgb(from green r g b / 30%);
-            --lumx-text-field-state-hover-theme-light-input-border-color: green;
-            --lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-focus-input-border-top-width: 2px;
-            --lumx-text-field-state-focus-input-border-right-width: 2px;
-            --lumx-text-field-state-focus-input-border-bottom-width: 2px;
-            --lumx-text-field-state-focus-input-border-left-width: 2px;
-            --lumx-text-field-state-focus-theme-light-header-label-color: var(--lumx-color-dark-N);
-            --lumx-text-field-state-focus-theme-light-input-background-color: rgb(from green r g b / 50%);
-            --lumx-text-field-state-focus-theme-light-input-border-color: green;
-            --lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N);
-        `,
-        }),
-    ],
-};

package/src/components/date-picker/DatePicker.test.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import { DatePickerProps } 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 { DatePicker } from '.';
-import { CLASSNAME } from './constants';
-
-const mockedDate = new Date(1487721600000);
-Date.now = vi.fn(() => mockedDate.valueOf());
-vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
-    getYearDisplayName: () => 'année',
-}));
-
-const setup = (propsOverride: Partial<DatePickerProps> = {}) => {
-    const props: DatePickerProps = {
-        locale: 'fr',
-        onChange: vi.fn(),
-        value: mockedDate,
-        nextButtonProps: { label: 'Next month' },
-        previousButtonProps: { label: 'Previous month' },
-        ...propsOverride,
-    };
-    render(<DatePicker {...props} />);
-    const datePicker = getByClassName(document.body, CLASSNAME);
-    return { props, datePicker };
-};
-
-describe(`<${DatePicker.displayName}>`, () => {
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardRef: 'datePicker',
-    });
-});

package/src/components/date-picker/DatePicker.tsx

@@ -1,52 +0,0 @@
-import React, { useState } from 'react';
-
-import { addMonthResetDay } from '@lumx/react/utils/date/addMonthResetDay';
-import { isDateValid } from '@lumx/react/utils/date/isDateValid';
-import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-
-import { CLASSNAME, COMPONENT_NAME } from './constants';
-import { DatePickerControlled } from './DatePickerControlled';
-import { DatePickerProps } from './types';
-
-/**
- * DatePicker component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const DatePicker = forwardRef<DatePickerProps, HTMLDivElement>((props, ref) => {
-    const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
-
-    let referenceDate = value || defaultMonth || new Date();
-    if (!isDateValid(referenceDate)) {
-        // eslint-disable-next-line no-console
-        console.warn(`[@lumx/react/DatePicker] Invalid date provided ${referenceDate}`);
-        referenceDate = new Date();
-    }
-
-    const [selectedMonth, setSelectedMonth] = useState(referenceDate);
-    const setPrevMonth = () => setSelectedMonth((current) => addMonthResetDay(current, -1));
-    const setNextMonth = () => setSelectedMonth((current) => addMonthResetDay(current, +1));
-
-    const onDatePickerChange = (newDate?: Date) => {
-        onChange(newDate);
-    };
-
-    return (
-        <DatePickerControlled
-            ref={ref}
-            {...forwardedProps}
-            defaultMonth={defaultMonth}
-            locale={locale}
-            value={value}
-            onPrevMonthChange={setPrevMonth}
-            onNextMonthChange={setNextMonth}
-            selectedMonth={selectedMonth}
-            onChange={onDatePickerChange}
-            onMonthChange={setSelectedMonth}
-        />
-    );
-});
-DatePicker.displayName = COMPONENT_NAME;
-DatePicker.className = CLASSNAME;

package/src/components/date-picker/DatePickerControlled.test.tsx

@@ -1,93 +0,0 @@
-import React from 'react';
-
-import { render, screen, waitFor } from '@testing-library/react';
-import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
-import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import userEvent from '@testing-library/user-event';
-import { VISUALLY_HIDDEN } from '@lumx/react/constants';
-
-import { DatePickerControlled, DatePickerControlledProps } from './DatePickerControlled';
-import { CLASSNAME } from './constants';
-
-const mockedDate = new Date(1487721600000);
-Date.now = vi.fn(() => mockedDate.valueOf());
-vi.mock('@lumx/react/utils/date/getYearDisplayName', () => ({
-    getYearDisplayName: () => 'année',
-}));
-
-type SetupProps = Partial<DatePickerControlledProps>;
-
-const setup = (propsOverride: SetupProps = {}) => {
-    const props: DatePickerControlledProps = {
-        locale: 'fr',
-        onChange: vi.fn(),
-        onNextMonthChange: vi.fn(),
-        onPrevMonthChange: vi.fn(),
-        selectedMonth: mockedDate,
-        value: mockedDate,
-        nextButtonProps: { label: 'Next month' },
-        previousButtonProps: { label: 'Previous month' },
-        onMonthChange: vi.fn(),
-        ...propsOverride,
-    };
-    render(<DatePickerControlled {...props} />);
-    const datePickerControlled = getByClassName(document.body, CLASSNAME);
-    return { props, datePickerControlled };
-};
-
-const queries = {
-    getYear: () =>
-        screen.getByRole('spinbutton', {
-            name: /année/i,
-        }),
-    getAccessibleMonthYear: (container: HTMLElement) => getByClassName(container, VISUALLY_HIDDEN),
-};
-
-describe(`<${DatePickerControlled.displayName}>`, () => {
-    it('should render', () => {
-        const { datePickerControlled } = setup();
-        expect(datePickerControlled).toBeInTheDocument();
-
-        const month = queryByClassName(datePickerControlled, `${CLASSNAME}__month`);
-        expect(month).toHaveTextContent('février');
-
-        expect(queries.getYear()).toBeInTheDocument();
-        expect(queries.getYear()).toHaveAttribute('value', '2017');
-        expect(queries.getYear()).toHaveAttribute('aria-label', 'année');
-
-        const toolbar = getByClassName(document.body, 'lumx-toolbar__label');
-        expect(queries.getAccessibleMonthYear(toolbar)).toBeInTheDocument();
-        expect(queries.getAccessibleMonthYear(toolbar)).toHaveTextContent('février 2017');
-
-        const selected = queryByClassName(datePickerControlled, `lumx-button--is-selected`);
-        expect(selected).toBe(screen.queryByRole('button', { name: /22 février 2017/i }));
-    });
-
-    it('should validate year when pressing Enter', async () => {
-        const { datePickerControlled, props } = setup();
-        expect(datePickerControlled).toBeInTheDocument();
-
-        expect(queries.getYear()).toHaveAttribute('value', '2017');
-
-        await userEvent.type(queries.getYear(), '{Backspace}6{Enter}'); // set year to 2016
-        await waitFor(() => expect(props.onMonthChange).toHaveBeenCalledTimes(1));
-        expect(props.onMonthChange).toHaveBeenCalledWith(new Date(1454284800000)); // 2017 - 12 months = 2016
-    });
-
-    it('should validate year when on Blur', async () => {
-        const { datePickerControlled, props } = setup();
-        expect(datePickerControlled).toBeInTheDocument();
-
-        expect(queries.getYear()).toHaveAttribute('value', '2017');
-
-        await userEvent.type(queries.getYear(), '{Backspace}5'); // change value to 2015
-        await userEvent.tab(); // set year to 2015
-        await waitFor(() => expect(props.onMonthChange).toHaveBeenCalledTimes(1));
-        expect(props.onMonthChange).toHaveBeenCalledWith(new Date(1422748800000)); // 2017 - 24 months = 2015
-    });
-
-    commonTestsSuiteRTL(setup, {
-        baseClassName: CLASSNAME,
-        forwardRef: 'datePickerControlled',
-    });
-});