@lumx/react 3.1.1 → 3.1.3-alpha.0

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-import { commonTestsSuite, itShouldRenderStories } from '@lumx/react/testing/utils';
-
-import { CommentBlock, CommentBlockProps } from './CommentBlock';
-import * as stories from './CommentBlock.stories';
-
-const CLASSNAME = CommentBlock.className as string;
-
-/**
- * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
- */
-const setup = (props: Partial<CommentBlockProps> = {}, shallowRendering = true) => {
-    const renderer: any = shallowRendering ? shallow : mount;
-    const wrapper: any = renderer(<CommentBlock {...(props as any)} />);
-    return { props, wrapper };
-};
-
-describe(`<${CommentBlock.displayName}>`, () => {
-    // 1. Test render via snapshot.
-    describe('Snapshots and structure', () => {
-        itShouldRenderStories(stories, CommentBlock);
-    });
-
-    // Common tests suite.
-    commonTestsSuite(setup, { className: 'wrapper', prop: 'wrapper' }, { className: CLASSNAME });
-});

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

@@ -1,174 +0,0 @@
-import React, { Children, forwardRef, KeyboardEvent, KeyboardEventHandler, ReactNode } from 'react';
-
-import classNames from 'classnames';
-
-import { Avatar, Size, Theme, Tooltip } from '@lumx/react';
-import { Comp, GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
-
-import isFunction from 'lodash/isFunction';
-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 informations (xx minutes, x hours, yesterday, 6 days, Month Day, Month Day Year)*/
-    date: string;
-    /** Comment date with the full timestamp informations (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: string;
-    /** On click callback. */
-    onClick?(): void;
-    /** On mouse enter callback. */
-    onMouseEnter?(): void;
-    /** On mouse leave callback. */
-    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> = {
-    theme: Theme.light,
-    variant: CommentBlockVariant.indented,
-};
-
-/**
- * CommentBlock component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const CommentBlock: Comp<CommentBlockProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        actions,
-        avatarProps,
-        children,
-        className,
-        date,
-        fullDate,
-        hasActions,
-        headerActions,
-        isOpen,
-        isRelevant,
-        name,
-        onClick,
-        onMouseEnter,
-        onMouseLeave,
-        text,
-        theme,
-        variant,
-        ...forwardedProps
-    } = props;
-    const enterKeyPress: KeyboardEventHandler<HTMLElement> = (evt: KeyboardEvent<HTMLElement>) => {
-        if (evt.key === 'Enter' && isFunction(onClick)) {
-            onClick();
-        }
-    };
-    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}
-                        tabIndex={onClick ? 0 : -1}
-                        onClick={onClick}
-                        onKeyPress={enterKeyPress}
-                    />
-                </div>
-
-                <div className={`${CLASSNAME}__container`}>
-                    <div className={`${CLASSNAME}__content`}>
-                        <div className={`${CLASSNAME}__meta`}>
-                            <span
-                                className={`${CLASSNAME}__name`}
-                                onClick={onClick}
-                                onKeyPress={enterKeyPress}
-                                onMouseEnter={onMouseEnter}
-                                onMouseLeave={onMouseLeave}
-                                role="button"
-                                tabIndex={onClick ? 0 : -1}
-                            >
-                                {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/dist/src/components/comment-block/__snapshots__/CommentBlock.test.tsx.snap

@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<CommentBlock> Snapshots and structure should render story 'WithHeaderActions' 1`] = `
-<div
-  className="lumx-comment-block lumx-comment-block--theme-light"
->
-  <div
-    className="lumx-comment-block__wrapper"
-  >
-    <div
-      className="lumx-comment-block__avatar"
-    >
-      <Avatar
-        alt="Avatar"
-        image="/demo-assets/avatar1.jpg"
-        onKeyPress={[Function]}
-        size="m"
-        tabIndex={-1}
-        theme="light"
-      />
-    </div>
-    <div
-      className="lumx-comment-block__container"
-    >
-      <div
-        className="lumx-comment-block__content"
-      >
-        <div
-          className="lumx-comment-block__meta"
-        >
-          <span
-            className="lumx-comment-block__name"
-            onKeyPress={[Function]}
-            role="button"
-            tabIndex={-1}
-          >
-            Emmitt O. Lum
-          </span>
-          <span
-            className="lumx-comment-block__header-actions"
-          >
-            <IconButton
-              emphasis="low"
-              icon="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"
-              label="Actions"
-              size="s"
-              theme="light"
-            />
-          </span>
-        </div>
-        <div
-          className="lumx-comment-block__text"
-        >
-          All the rumors have finally died down and many skeptics have tightened their lips, the iPod does support video format now on its fifth generation.
-        </div>
-        <Tooltip
-          label="Monday, March 30, 2021 at 4:06 PM"
-          placement="top"
-        >
-          <span
-            className="lumx-comment-block__date"
-          >
-            5 days
-          </span>
-        </Tooltip>
-      </div>
-      <div
-        className="lumx-comment-block__actions"
-      >
-        <Button
-          emphasis="low"
-          key="button0"
-          leftIcon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
-          size="s"
-          theme="light"
-        >
-          24 likes
-        </Button>
-        <Button
-          emphasis="low"
-          key="button1"
-          leftIcon="M10,9V5L3,12L10,19V14.9C15,14.9 18.5,16.5 21,20C20,15 17,10 10,9Z"
-          size="s"
-          theme="light"
-        >
-          Reply
-        </Button>
-      </div>
-    </div>
-  </div>
-</div>
-`;

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

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

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

@@ -1,41 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper } from '@lumx/react/testing/utils';
-import { DatePickerProps } from '@lumx/react';
-import { DatePicker } from './DatePicker';
-
-const mockedDate = new Date(
-    new Date(1487721600).toLocaleString('en-US', {
-        timeZone: 'America/Toronto',
-    }),
-);
-Date.now = jest.fn(() => mockedDate.valueOf());
-
-type SetupProps = Partial<DatePickerProps>;
-
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: DatePickerProps = {
-        locale: 'fr',
-        onChange: jest.fn(),
-        value: mockedDate,
-        nextButtonProps: { label: 'Next month' },
-        previousButtonProps: { label: 'Previous month' },
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<DatePicker {...props} />);
-
-    return { props, wrapper };
-};
-
-describe(`<${DatePicker.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-});

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

@@ -1,56 +0,0 @@
-import moment from 'moment';
-import React, { forwardRef, useState } from 'react';
-import { Comp } from '@lumx/react/utils/type';
-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: Comp<DatePickerProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { defaultMonth, locale, value, onChange, ...forwardedProps } = props;
-    let castedValue;
-    if (value) {
-        castedValue = moment(value);
-    } else if (defaultMonth) {
-        castedValue = moment(defaultMonth);
-    }
-    if (castedValue && !castedValue.isValid()) {
-        // eslint-disable-next-line no-console
-        console.warn(`[@lumx/react/DatePicker] Invalid date provided ${castedValue}`);
-    }
-    const selectedDay = castedValue && castedValue.isValid() ? castedValue : moment();
-
-    const [monthOffset, setMonthOffset] = useState(0);
-
-    const setPrevMonth = () => setMonthOffset(monthOffset - 1);
-    const setNextMonth = () => setMonthOffset(monthOffset + 1);
-
-    const onDatePickerChange = (newDate?: Date) => {
-        onChange(newDate);
-        setMonthOffset(0);
-    };
-
-    const selectedMonth = moment(selectedDay).locale(locale).add(monthOffset, 'months').toDate();
-
-    return (
-        <DatePickerControlled
-            ref={ref}
-            {...forwardedProps}
-            defaultMonth={defaultMonth}
-            locale={locale}
-            value={value}
-            onPrevMonthChange={setPrevMonth}
-            onNextMonthChange={setNextMonth}
-            selectedMonth={selectedMonth}
-            onChange={onDatePickerChange}
-        />
-    );
-});
-DatePicker.displayName = COMPONENT_NAME;
-DatePicker.className = CLASSNAME;

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

@@ -1,44 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { mount, shallow } from 'enzyme';
-import 'jest-enzyme';
-
-import { Wrapper } from '@lumx/react/testing/utils';
-
-import { DatePickerControlled, DatePickerControlledProps } from './DatePickerControlled';
-
-const mockedDate = new Date(
-    new Date(1487721600).toLocaleString('en-US', {
-        timeZone: 'America/Toronto',
-    }),
-);
-Date.now = jest.fn(() => mockedDate.valueOf());
-
-type SetupProps = Partial<DatePickerControlledProps>;
-
-const setup = ({ ...propsOverride }: SetupProps = {}, shallowRendering = true) => {
-    const props: DatePickerControlledProps = {
-        locale: 'fr',
-        onChange: jest.fn(),
-        onNextMonthChange: jest.fn(),
-        onPrevMonthChange: jest.fn(),
-        selectedMonth: mockedDate,
-        value: mockedDate,
-        nextButtonProps: { label: 'Next month' },
-        previousButtonProps: { label: 'Previous month' },
-        ...propsOverride,
-    };
-    const renderer: (el: ReactElement) => Wrapper = shallowRendering ? shallow : mount;
-    const wrapper: Wrapper = renderer(<DatePickerControlled {...props} />);
-
-    return { props, wrapper };
-};
-
-describe(`<${DatePickerControlled.displayName}>`, () => {
-    describe('Snapshots and structure', () => {
-        it('should render correctly', () => {
-            const { wrapper } = setup();
-            expect(wrapper).toMatchSnapshot();
-        });
-    });
-});

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

@@ -1,128 +0,0 @@
-import React, { forwardRef } from 'react';
-import moment from 'moment';
-import classNames from 'classnames';
-import { DatePickerProps, Emphasis, IconButton, Toolbar } from '@lumx/react';
-import { mdiChevronLeft, mdiChevronRight } from '@lumx/icons';
-import { getAnnotatedMonthCalendar, getWeekDays } from '@lumx/core/js/date-picker';
-import { Comp } from '@lumx/react/utils/type';
-import { CLASSNAME } from './constants';
-
-/**
- * Defines the props of the component.
- */
-export interface DatePickerControlledProps extends DatePickerProps {
-    /** Selected month to display. */
-    selectedMonth: Date;
-    /** On previous month change callback. */
-    onPrevMonthChange(): void;
-    /** On next month change callback. */
-    onNextMonthChange(): void;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'DatePickerControlled';
-
-/**
- * DatePickerControlled component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const DatePickerControlled: Comp<DatePickerControlledProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const {
-        locale,
-        maxDate,
-        minDate,
-        nextButtonProps,
-        onChange,
-        onNextMonthChange,
-        onPrevMonthChange,
-        previousButtonProps,
-        selectedMonth,
-        todayOrSelectedDateRef,
-        value,
-    } = props;
-    const days = React.useMemo(() => {
-        return getAnnotatedMonthCalendar(locale, minDate, maxDate, moment(selectedMonth));
-    }, [locale, minDate, maxDate, selectedMonth]);
-
-    const weekDays = React.useMemo(() => {
-        return getWeekDays(locale);
-    }, [locale]);
-
-    return (
-        <div ref={ref} className={`${CLASSNAME}`}>
-            <Toolbar
-                className={`${CLASSNAME}__toolbar`}
-                after={
-                    <IconButton
-                        {...nextButtonProps}
-                        emphasis={Emphasis.low}
-                        icon={mdiChevronRight}
-                        onClick={onNextMonthChange}
-                    />
-                }
-                before={
-                    <IconButton
-                        {...previousButtonProps}
-                        emphasis={Emphasis.low}
-                        icon={mdiChevronLeft}
-                        onClick={onPrevMonthChange}
-                    />
-                }
-                label={
-                    <span className={`${CLASSNAME}__month`}>
-                        {moment(selectedMonth).locale(locale).format('MMMM YYYY')}
-                    </span>
-                }
-            />
-            <div className={`${CLASSNAME}__calendar`}>
-                <div className={`${CLASSNAME}__week-days ${CLASSNAME}__days-wrapper`}>
-                    {weekDays.map((weekDay) => (
-                        <div key={weekDay.unix()} className={`${CLASSNAME}__day-wrapper`}>
-                            <span className={`${CLASSNAME}__week-day`}>
-                                {weekDay.format('dddd').slice(0, 1).toLocaleUpperCase()}
-                            </span>
-                        </div>
-                    ))}
-                </div>
-
-                <div className={`${CLASSNAME}__month-days ${CLASSNAME}__days-wrapper`}>
-                    {days.map((annotatedDate) => {
-                        if (annotatedDate.isDisplayed) {
-                            return (
-                                <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`}>
-                                    <button
-                                        ref={
-                                            (value && annotatedDate.date.isSame(value, 'day')) ||
-                                            (!value && annotatedDate.isToday)
-                                                ? todayOrSelectedDateRef
-                                                : null
-                                        }
-                                        className={classNames(`${CLASSNAME}__month-day`, {
-                                            [`${CLASSNAME}__month-day--is-selected`]:
-                                                value && annotatedDate.date.isSame(value, 'day'),
-                                            [`${CLASSNAME}__month-day--is-today`]:
-                                                annotatedDate.isClickable && annotatedDate.isToday,
-                                        })}
-                                        disabled={!annotatedDate.isClickable}
-                                        type="button"
-                                        onClick={() => onChange(moment(annotatedDate.date).toDate())}
-                                    >
-                                        <span>{annotatedDate.date.format('DD')}</span>
-                                    </button>
-                                </div>
-                            );
-                        }
-                        return <div key={annotatedDate.date.unix()} className={`${CLASSNAME}__day-wrapper`} />;
-                    })}
-                </div>
-            </div>
-        </div>
-    );
-});
-DatePickerControlled.displayName = COMPONENT_NAME;
-DatePickerControlled.className = CLASSNAME;

package/dist/src/components/date-picker/DatePickerField.stories.tsx

@@ -1,93 +0,0 @@
-import React, { useState } from 'react';
-
-import { DatePickerField } from '@lumx/react';
-
-export default { title: 'LumX components/date-picker/DatePickerField' };
-
-export const Simple = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>();
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Start date"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
-};
-
-export const WithDefaultValue = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>(new Date('2020-05-18'));
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Start date"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
-};
-
-export const WithErrorAndHelper = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>(new Date('2020-05-18'));
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Start date"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            hasError
-            helper="Helper"
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
-};
-
-export const CustomMonth = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>();
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Initialized to 2019 July"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            defaultMonth={new Date('2019-07-14')}
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
-};
-
-export const With28FebruarySelected = ({ theme }: any) => {
-    const [value, setValue] = useState<Date | undefined>(new Date('2019-02-28'));
-
-    return (
-        <DatePickerField
-            locale="fr"
-            label="Start date"
-            placeholder="Pick a date"
-            theme={theme}
-            onChange={setValue}
-            value={value}
-            nextButtonProps={{ label: 'Next month' }}
-            previousButtonProps={{ label: 'Previous month' }}
-        />
-    );
-};