@lumx/react 3.0.7 → 3.1.0

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,93 @@
+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' }}
+        />
+    );
+};