@superdispatch/dates 0.21.13 → 0.21.14

package/src/calendar/Calendar.spec.tsx

@@ -1,531 +0,0 @@
-import { Typography } from '@material-ui/core';
-import {
-  mockDate,
-  renderComponent,
-  renderCSS,
-} from '@superdispatch/ui-testutils';
-import { EventType, fireEvent, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { DateObjectUnits, DateTime } from 'luxon';
-import { setDefaultTimeZone } from '../date-config/DateConfig';
-import {
-  DatePayload,
-  DateString,
-  NullableDateString,
-} from '../date-time-utils/DateTimeUtils';
-import {
-  Calendar,
-  CalendarDateEvent,
-  CalendarDayHighlightColor,
-} from './Calendar';
-import {
-  CalendarQuickSelection,
-  CalendarQuickSelectionItem,
-} from './CalendarQuickSelection';
-
-type MockCalendarDayEventHandler = jest.Mock<void, [CalendarDateEvent]>;
-
-beforeEach(() => {
-  mockDate();
-  setDefaultTimeZone('local');
-});
-
-test('month', () => {
-  renderComponent(<Calendar />);
-
-  expect(screen.getByRole('heading')).toHaveTextContent('May 2019');
-
-  userEvent.click(screen.getByLabelText('Previous Month'));
-
-  expect(screen.getByRole('heading')).toHaveTextContent('April 2019');
-
-  userEvent.click(screen.getByLabelText('Next Month'));
-
-  expect(screen.getByRole('heading')).toHaveTextContent('May 2019');
-});
-
-test('weeks', () => {
-  renderComponent(<Calendar />);
-
-  const [weeksRow] = screen.getAllByRole('row');
-  expect(weeksRow!.childNodes).toHaveLength(7);
-  expect(weeksRow!.childNodes[0]).toHaveTextContent('S');
-  expect(weeksRow!.childNodes[1]).toHaveTextContent('M');
-  expect(weeksRow!.childNodes[2]).toHaveTextContent('T');
-  expect(weeksRow!.childNodes[3]).toHaveTextContent('W');
-  expect(weeksRow!.childNodes[4]).toHaveTextContent('T');
-  expect(weeksRow!.childNodes[5]).toHaveTextContent('F');
-  expect(weeksRow!.childNodes[6]).toHaveTextContent('S');
-});
-
-test('days', () => {
-  renderComponent(<Calendar />);
-  expect(screen.getByLabelText(/May 24 2019/)).toHaveTextContent('24');
-});
-
-test.each<
-  [
-    initialTime: NullableDateString,
-    ...cases: Array<
-      [
-        offset: number,
-        expectedString: DateString,
-        expectedObject: DateObjectUnits,
-      ]
-    >
-  ]
->([
-  // Sets time to 00:00
-  [
-    undefined,
-    [-7, '2019-05-24T00:00:00.000-07:00', { hour: 0 }],
-    [-5, '2019-05-24T00:00:00.000-05:00', { hour: 0 }],
-    [-3, '2019-05-24T00:00:00.000-03:00', { hour: 0 }],
-    [7, '2019-05-24T00:00:00.000+07:00', { hour: 0 }],
-    [5, '2019-05-24T00:00:00.000+05:00', { hour: 0 }],
-    [3, '2019-05-24T00:00:00.000+03:00', { hour: 0 }],
-  ],
-
-  // Gets time from 00:00Z
-  [
-    '0000-01-01T00:00:00.000Z',
-    [-7, '2019-05-24T17:00:00.000-07:00', { hour: 17 }],
-    [-5, '2019-05-24T19:00:00.000-05:00', { hour: 19 }],
-    [-3, '2019-05-24T21:00:00.000-03:00', { hour: 21 }],
-    [3, '2019-05-24T03:00:00.000+03:00', { hour: 3 }],
-    [5, '2019-05-24T05:00:00.000+05:00', { hour: 5 }],
-    [7, '2019-05-24T07:00:00.000+07:00', { hour: 7 }],
-  ],
-
-  // Gets time from 5:00Z
-  [
-    '0000-01-01T05:00:00.000Z',
-    [-7, '2019-05-24T22:00:00.000-07:00', { hour: 22 }],
-    [-5, '2019-05-24T00:00:00.000-05:00', { hour: 0 }],
-    [-3, '2019-05-24T02:00:00.000-03:00', { hour: 2 }],
-    [3, '2019-05-24T08:00:00.000+03:00', { hour: 8 }],
-    [5, '2019-05-24T10:00:00.000+05:00', { hour: 10 }],
-    [7, '2019-05-24T12:00:00.000+07:00', { hour: 12 }],
-  ],
-
-  // Gets time from 15:00Z
-  [
-    '0000-01-01T15:00:00.000Z',
-    [-7, '2019-05-24T08:00:00.000-07:00', { hour: 8 }],
-    [-5, '2019-05-24T10:00:00.000-05:00', { hour: 10 }],
-    [-3, '2019-05-24T12:00:00.000-03:00', { hour: 12 }],
-    [3, '2019-05-24T18:00:00.000+03:00', { hour: 18 }],
-    [5, '2019-05-24T20:00:00.000+05:00', { hour: 20 }],
-    [7, '2019-05-24T22:00:00.000+07:00', { hour: 22 }],
-  ],
-
-  // Gets time from 20:00Z
-  [
-    '0000-01-01T20:00:00.000Z',
-    [-7, '2019-05-24T13:00:00.000-07:00', { hour: 13 }],
-    [-5, '2019-05-24T15:00:00.000-05:00', { hour: 15 }],
-    [-3, '2019-05-24T17:00:00.000-03:00', { hour: 17 }],
-    [3, '2019-05-24T23:00:00.000+03:00', { hour: 23 }],
-    [5, '2019-05-24T01:00:00.000+05:00', { hour: 1 }],
-    [7, '2019-05-24T03:00:00.000+07:00', { hour: 3 }],
-  ],
-])('initialTime(%p)', (initialTime, ...cases) => {
-  const view = renderComponent(<Calendar />);
-
-  for (const [offset, expectedString, expectedObject] of cases) {
-    setDefaultTimeZone(offset * 60);
-
-    const handlers: Partial<Record<EventType, jest.Mock>> = {
-      click: jest.fn(),
-      keyDown: jest.fn(),
-      mouseEnter: jest.fn(),
-      mouseLeave: jest.fn(),
-      mouseDown: jest.fn(),
-      mouseUp: jest.fn(),
-      touchEnd: jest.fn(),
-      touchStart: jest.fn(),
-    };
-
-    view.rerender(
-      <Calendar
-        key={offset /* force rerender on offset change */}
-        initialTime={initialTime}
-        onDayClick={handlers.click}
-        onDayKeyDown={handlers.keyDown}
-        onDayMouseEnter={handlers.mouseEnter}
-        onDayMouseLeave={handlers.mouseLeave}
-        onDayMouseDown={handlers.mouseDown}
-        onDayMouseUp={handlers.mouseUp}
-        onDayTouchEnd={handlers.touchEnd}
-        onDayTouchStart={handlers.touchStart}
-      />,
-    );
-
-    for (const [event, handler] of Object.entries(handlers) as Array<
-      [EventType, MockCalendarDayEventHandler]
-    >) {
-      expect(handler).not.toHaveBeenCalled();
-      fireEvent[event](screen.getByLabelText(/May 24/));
-      expect(handler).toHaveBeenCalledTimes(1);
-
-      const [call] = handler.mock.calls;
-
-      expect(call).toHaveLength(1);
-
-      const [info] = call!;
-
-      expect(info.stringValue).toBe(expectedString);
-      expect(info.dateValue.toObject()).toEqual({
-        year: 2019,
-        month: 5,
-        day: 24,
-        minute: 0,
-        second: 0,
-        millisecond: 0,
-        ...expectedObject,
-      });
-    }
-  }
-});
-
-test('onDayClick', () => {
-  const onDayClick: MockCalendarDayEventHandler = jest.fn();
-
-  const now = DateTime.local().startOf('day');
-  renderComponent(
-    <Calendar
-      onDayClick={onDayClick}
-      selectedDays={({ dateValue }) => dateValue >= now}
-    />,
-  );
-
-  expect(screen.getByLabelText(/May 23 2019/)).not.toHaveClass(
-    'SD-Calendar-selected',
-  );
-
-  for (let idx = 1; idx < now.day; idx++) {
-    const day = String(idx).padStart(2, '0');
-    const element = screen.getByLabelText(new RegExp(`May ${day} 2019`));
-
-    expect(element).not.toHaveClass('SD-Calendar-selected');
-  }
-
-  for (let idx = now.day; idx <= now.daysInMonth; idx++) {
-    const day = String(idx).padStart(2, '0');
-    const element = screen.getByLabelText(new RegExp(`May ${day} 2019`));
-
-    expect(element).toHaveClass('SD-Calendar-selected');
-
-    userEvent.click(element);
-
-    expect(onDayClick).toHaveBeenCalledTimes(1);
-
-    const info = onDayClick.mock.calls[0]![0]!;
-
-    expect(info.stringValue).toBe(`2019-05-${day}T00:00:00.000-05:00`);
-
-    onDayClick.mockClear();
-  }
-});
-
-test('disabledDays', () => {
-  const onDayClick: MockCalendarDayEventHandler = jest.fn();
-  renderComponent(
-    <Calendar
-      onDayClick={onDayClick}
-      disabledDays={({ dateValue }) => dateValue.day === 24}
-    />,
-  );
-
-  expect(screen.getByLabelText(/May 24 2019/)).toHaveClass(
-    'SD-Calendar-disabled',
-  );
-
-  userEvent.click(screen.getByLabelText(/May 24 2019/));
-
-  expect(onDayClick).toHaveBeenCalledTimes(1);
-
-  const info = onDayClick.mock.calls[0]![0]!;
-
-  expect(info.disabled).toBe(true);
-  expect(info.selected).toBe(false);
-  expect(info.stringValue).toBe('2019-05-24T00:00:00.000-05:00');
-});
-
-test('highlightedDays', () => {
-  const view = renderComponent(<Calendar />);
-  const highlights: CalendarDayHighlightColor[] = [
-    'blue',
-    'green',
-    'purple',
-    'red',
-    'teal',
-    'yellow',
-  ];
-
-  function modifier({ dateValue }: DatePayload): boolean {
-    return dateValue.day === 24;
-  }
-
-  for (const currentHighlight of highlights) {
-    view.rerender(
-      <Calendar highlightedDays={{ [currentHighlight]: modifier }} />,
-    );
-
-    const day = screen.getByLabelText(/May 24 2019/);
-
-    for (const highlight of highlights) {
-      if (highlight === currentHighlight) {
-        // eslint-disable-next-line jest/no-conditional-expect
-        expect(day).toHaveClass(`SD-Calendar-${highlight}`);
-      } else {
-        // eslint-disable-next-line jest/no-conditional-expect
-        expect(day).not.toHaveClass(`SD-Calendar-${highlight}`);
-      }
-    }
-  }
-});
-
-test('footer', () => {
-  renderComponent(
-    <Calendar
-      footer={<Typography color="textSecondary">Footer helper text</Typography>}
-    />,
-  );
-
-  expect(screen.getByText('Footer helper text')).toBeInTheDocument();
-});
-
-test('quickSelection', () => {
-  renderComponent(
-    <Calendar
-      quickSelection={
-        <CalendarQuickSelection>
-          <CalendarQuickSelectionItem>Today</CalendarQuickSelectionItem>
-          <CalendarQuickSelectionItem>Tomorrow</CalendarQuickSelectionItem>
-          <CalendarQuickSelectionItem>Yesterday</CalendarQuickSelectionItem>
-        </CalendarQuickSelection>
-      }
-    />,
-  );
-
-  expect(screen.getByText('Today')).toBeInTheDocument();
-  expect(screen.getByText('Tomorrow')).toBeInTheDocument();
-  expect(screen.getByText('Yesterday')).toBeInTheDocument();
-});
-
-test('css', () => {
-  expect(renderCSS(<Calendar />, ['SD-Calendar'])).toMatchInlineSnapshot(`
-.SD-Calendar-container {
-  display: inline-block;
-}
-
-.SD-Calendar-wrapper {
-  position: relative;
-  user-select: none;
-  flex-direction: row;
-  padding-bottom: 16px;
-}
-
-.SD-Calendar-wrapper:focus {
-  outline: none;
-}
-
-.SD-Calendar-navButtonPrev {
-  top: 12px;
-  left: 12px;
-  position: absolute;
-}
-
-.SD-Calendar-navButtonNext {
-  top: 12px;
-  right: 12px;
-  position: absolute;
-}
-
-.SD-Calendar-months {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-
-.SD-Calendar-month {
-  margin: 16px 16px 0px 16px;
-  user-select: none;
-}
-
-.SD-Calendar-caption {
-  display: table-caption;
-  padding: 0px 8px;
-  text-align: center;
-  margin-bottom: 8px;
-}
-
-.SD-Calendar-weekdays {
-  display: table-header-group;
-}
-
-.SD-Calendar-weekdaysRow {
-  margin: 8px 0px;
-  display: flex;
-}
-
-.SD-Calendar-weekday {
-  color: Color.Dark300;
-  width: 40px;
-  height: 40px;
-  margin: 1px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-}
-
-.SD-Calendar-body {
-  display: flex;
-  flex-direction: column;
-}
-
-.SD-Calendar-week {
-  display: flex;
-}
-
-.SD-Calendar-day {
-  width: 40px;
-  height: 40px;
-  margin: 1px;
-  display: flex;
-  z-index: 1;
-  position: relative;
-  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  align-items: center;
-  border-radius: 4px;
-  justify-content: center;
-}
-
-.SD-Calendar-day:before {
-  top: 0;
-  left: -1px;
-  right: -1px;
-  bottom: 0;
-  content: '';
-  z-index: -1;
-  position: absolute;
-  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  background-color: Color.Transparent;
-}
-
-.SD-Calendar-day:after {
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  content: '';
-  z-index: -1;
-  position: absolute;
-  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  border-radius: 4px;
-  background-color: Color.Transparent;
-}
-
-.SD-Calendar-day:hover,
-.SD-Calendar-day:focus {
-  outline: none;
-}
-
-.SD-Calendar-day.SD-Calendar-disabled {
-  color: Color.Dark100;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled) {
-  color: Color.Dark500;
-  cursor: pointer;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):active,
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled).SD-Calendar-selected {
-  color: Color.White;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):active:after,
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled).SD-Calendar-selected:after {
-  background-color: Color.Blue300;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-today {
-  color: Color.Blue300;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active):hover,
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active):focus {
-  background-color: Color.Silver100;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-blue {
-  color: Color.Blue500;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-green {
-  color: Color.Green500;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-purple {
-  color: Color.Purple500;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-red {
-  color: Color.Red500;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-teal {
-  color: Color.Teal500;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-yellow {
-  color: Color.Yellow500;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-yellow {
-  background-color: Color.Yellow50;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-teal {
-  background-color: Color.Teal50;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-red {
-  background-color: Color.Red50;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-purple {
-  background-color: Color.Purple50;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-green {
-  background-color: Color.Green50;
-}
-
-.SD-Calendar-day:not(.SD-Calendar-outside):not(.SD-Calendar-disabled):not(.SD-Calendar-selected):not(:active).SD-Calendar-blue {
-  background-color: Color.Blue50;
-}
-
-.SD-Calendar-day.SD-Calendar-disabled.SD-Calendar-selected:not(.SD-Calendar-outside):after {
-  background-color: Color.Silver300;
-}
-
-.SD-Calendar-day:last-child:before,
-.SD-Calendar-day.SD-Calendar-lastDayOfMonth:before {
-  border-radius: 0px 4px 4px 0px;
-}
-
-.SD-Calendar-day:first-child:before,
-.SD-Calendar-day.SD-Calendar-firstDayOfMonth:before {
-  border-radius: 4px 0px 0px 4px;
-}
-
-.SD-Calendar-footer {
-  padding: 16px;
-}
-`);
-});

package/src/calendar/Calendar.stories.tsx

@@ -1,50 +0,0 @@
-import { Typography } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { Calendar } from './Calendar.playroom';
-import {
-  CalendarQuickSelection,
-  CalendarQuickSelectionItem,
-} from './CalendarQuickSelection';
-
-export default {
-  title: 'Dates/Calendar',
-  component: Calendar,
-  subcomponents: { CalendarQuickSelection, CalendarQuickSelectionItem },
-} as Meta;
-
-export const basic = () => <Calendar />;
-
-export const disabledDays = () => (
-  <Calendar disabledDays={({ dateValue }) => dateValue.day % 2 === 0} />
-);
-
-export const highlightedDays = () => (
-  <Calendar
-    highlightedDays={{
-      blue: ({ dateValue }) => dateValue.day === 0 || dateValue.day === 6,
-      green: ({ dateValue }) => dateValue.day === 1,
-      purple: ({ dateValue }) => dateValue.day === 2,
-      red: ({ dateValue }) => dateValue.day === 3,
-      teal: ({ dateValue }) => dateValue.day === 4,
-      yellow: ({ dateValue }) => dateValue.day === 5,
-    }}
-  />
-);
-
-export const footer = () => (
-  <Calendar
-    footer={<Typography color="textSecondary">Footer helper text</Typography>}
-  />
-);
-
-export const quickSelection = () => (
-  <Calendar
-    quickSelection={
-      <CalendarQuickSelection>
-        <CalendarQuickSelectionItem>Today</CalendarQuickSelectionItem>
-        <CalendarQuickSelectionItem>Tomorrow</CalendarQuickSelectionItem>
-        <CalendarQuickSelectionItem>Yesterday</CalendarQuickSelectionItem>
-      </CalendarQuickSelection>
-    }
-  />
-);