@superdispatch/dates 0.21.13 → 0.21.16

package/src/calendar/Calendar.tsx

@@ -1,534 +0,0 @@
-import { Divider, Grid, GridDirection, Hidden, Theme } from '@material-ui/core';
-import { ClassNameMap, makeStyles } from '@material-ui/styles';
-import { Color, ColorVariant } from '@superdispatch/ui';
-import { DateTime } from 'luxon';
-import { forwardRef, ReactNode, useMemo } from 'react';
-import DayPicker, {
-  DayModifiers,
-  DayPickerProps,
-  FunctionModifier,
-  Modifiers,
-} from 'react-day-picker';
-import {
-  DateConfig,
-  DateFormat,
-  useDateConfig,
-} from '../date-config/DateConfig';
-import {
-  DatePayload,
-  NullableDateInput,
-  stringifyDate,
-} from '../date-time-utils/DateTimeUtils';
-import { useDateTime } from '../use-date-time/useDateTime';
-import {
-  CalendarCaption,
-  CalendarNavbar,
-  CalendarWeekDay,
-} from './InternalCalendarComponents';
-
-//
-// Styles
-//
-
-export type CalendarDayHighlightColor = Exclude<
-  ColorVariant,
-  'grey' | 'silver'
->;
-
-export type CalendarClassNames =
-  | keyof NonNullable<DayPickerProps['classNames']>
-  | CalendarDayHighlightColor
-  | 'firstDayOfMonth'
-  | 'lastDayOfMonth';
-
-export type CalendarClassNameMap = ClassNameMap<CalendarClassNames>;
-
-const useStyles = makeStyles<
-  Theme,
-  { classes?: Partial<CalendarClassNameMap> },
-  CalendarClassNames
->(
-  (theme) => ({
-    container: {
-      display: 'inline-block',
-    },
-
-    wrapper: {
-      userSelect: 'none',
-      position: 'relative',
-      flexDirection: 'row',
-      paddingBottom: theme.spacing(2),
-      '&:focus': {
-        outline: 'none',
-      },
-    },
-
-    interactionDisabled: {},
-
-    navBar: {},
-    navButtonPrev: {
-      position: 'absolute',
-      top: theme.spacing(1.5),
-      left: theme.spacing(1.5),
-    },
-    navButtonNext: {
-      position: 'absolute',
-      top: theme.spacing(1.5),
-      right: theme.spacing(1.5),
-    },
-    navButtonInteractionDisabled: {},
-
-    months: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-    },
-
-    month: {
-      userSelect: 'none',
-      margin: theme.spacing(2, 2, 0, 2),
-    },
-
-    caption: {
-      textAlign: 'center',
-      display: 'table-caption',
-      marginBottom: theme.spacing(1),
-      padding: theme.spacing(0, 1),
-    },
-
-    weekdays: {
-      display: 'table-header-group',
-    },
-    weekdaysRow: {
-      display: 'flex',
-      margin: theme.spacing(1, 0),
-    },
-    weekday: {
-      margin: '1px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      textDecoration: 'none',
-
-      color: Color.Dark300,
-      width: theme.spacing(5),
-      height: theme.spacing(5),
-    },
-
-    weekNumber: {},
-
-    body: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-
-    week: {
-      display: 'flex',
-    },
-
-    // Day modifiers.
-    today: {},
-    outside: {},
-    selected: {},
-    disabled: {},
-    firstDayOfMonth: {},
-    lastDayOfMonth: {},
-
-    blue: {},
-    green: {},
-    purple: {},
-    red: {},
-    teal: {},
-    yellow: {},
-
-    day: {
-      zIndex: 1,
-      margin: '1px',
-      width: theme.spacing(5),
-      height: theme.spacing(5),
-      borderRadius: theme.spacing(0.5),
-
-      position: 'relative',
-
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-
-      transition: theme.transitions.create(['color', 'background-color']),
-
-      '&:before': {
-        content: '""',
-        top: 0,
-        left: -1,
-        right: -1,
-        bottom: 0,
-        zIndex: -1,
-        position: 'absolute',
-        backgroundColor: Color.Transparent,
-        transition: theme.transitions.create('background-color'),
-      },
-
-      '&:first-child, &$firstDayOfMonth': {
-        '&:before': {
-          borderRadius: theme.spacing(0.5, 0, 0, 0.5),
-        },
-      },
-
-      '&:last-child, &$lastDayOfMonth': {
-        '&:before': {
-          borderRadius: theme.spacing(0, 0.5, 0.5, 0),
-        },
-      },
-
-      '&:after': {
-        content: '""',
-        borderRadius: theme.spacing(0.5),
-
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: -1,
-        position: 'absolute',
-        backgroundColor: Color.Transparent,
-        transition: theme.transitions.create('background-color'),
-      },
-
-      '&:hover, &:focus': {
-        outline: 'none',
-      },
-
-      '&$disabled': {
-        color: Color.Dark100,
-        '&$selected:not($outside):after': {
-          backgroundColor: Color.Silver300,
-        },
-      },
-
-      '&:not($outside):not($disabled)': {
-        cursor: 'pointer',
-        color: Color.Dark500,
-
-        '&:not($selected):not(:active)': {
-          '&$today': {
-            color: Color.Blue300,
-          },
-
-          '&:hover, &:focus': {
-            backgroundColor: Color.Silver100,
-          },
-
-          '&$blue': {
-            color: Color.Blue500,
-            '&': {
-              backgroundColor: Color.Blue50,
-            },
-          },
-          '&$green': {
-            color: Color.Green500,
-            '&': {
-              backgroundColor: Color.Green50,
-            },
-          },
-          '&$purple': {
-            color: Color.Purple500,
-            '&': {
-              backgroundColor: Color.Purple50,
-            },
-          },
-          '&$red': {
-            color: Color.Red500,
-            '&': {
-              backgroundColor: Color.Red50,
-            },
-          },
-          '&$teal': {
-            color: Color.Teal500,
-            '&': {
-              backgroundColor: Color.Teal50,
-            },
-          },
-          '&$yellow': {
-            color: Color.Yellow500,
-            '&': {
-              backgroundColor: Color.Yellow50,
-            },
-          },
-        },
-
-        '&:active, &$selected': {
-          color: Color.White,
-          '&:after': {
-            backgroundColor: Color.Blue300,
-          },
-        },
-      },
-    },
-
-    footer: {
-      padding: theme.spacing(2),
-    },
-
-    todayButton: {},
-  }),
-  { name: 'SD-Calendar' },
-);
-
-//
-// Utility Types
-//
-
-export type CalendarModifier = (info: DatePayload) => boolean;
-
-export interface CalendarDateEvent extends DatePayload {
-  disabled: boolean;
-  selected: boolean;
-}
-
-export type CalendarDayEventHandler = (event: CalendarDateEvent) => void;
-
-export interface CalendarModifiers {
-  today?: CalendarModifier;
-  outside?: CalendarModifier;
-  [other: string]: undefined | CalendarModifier;
-}
-
-export type CalendarHighlightedDays = Partial<
-  Record<CalendarDayHighlightColor, CalendarModifier>
->;
-
-//
-// Internal Utils
-//
-
-function toDayPickerModifier(
-  config: DateConfig,
-  modifier: undefined | CalendarModifier,
-): undefined | FunctionModifier {
-  if (!modifier) {
-    return undefined;
-  }
-
-  return (localDate) => {
-    const dateValue = DateTime.fromObject({
-      year: localDate.getFullYear(),
-      month: localDate.getMonth() + 1,
-      day: localDate.getDate(),
-      hour: localDate.getHours(),
-      minute: localDate.getMinutes(),
-      second: localDate.getSeconds(),
-      millisecond: localDate.getMilliseconds(),
-    });
-
-    return modifier({
-      config,
-      dateValue,
-      stringValue: stringifyDate(dateValue, config),
-    });
-  };
-}
-
-function toDayPickerHandler(
-  config: DateConfig,
-  classes: CalendarClassNameMap,
-  initialTime: DateTime,
-  handler: undefined | CalendarDayEventHandler,
-): undefined | ((localDate: Date, modifiers: DayModifiers) => void) {
-  if (!handler) {
-    return undefined;
-  }
-
-  return (localDate: Date, modifiers: DayModifiers) => {
-    const dateValue = DateTime.fromObject({
-      year: localDate.getFullYear(),
-      month: localDate.getMonth() + 1,
-      day: localDate.getDate(),
-      hour: initialTime.hour,
-      minute: initialTime.minute,
-      second: initialTime.second,
-      millisecond: initialTime.millisecond,
-    });
-
-    handler({
-      disabled: !!modifiers[classes.disabled],
-      selected: !!modifiers[classes.selected],
-
-      config,
-      dateValue,
-      stringValue: stringifyDate(dateValue, config),
-    });
-  };
-}
-
-//
-// Calendar
-//
-
-export interface CalendarProps extends Pick<DayPickerProps, 'numberOfMonths'> {
-  direction?: GridDirection;
-  classes?: Partial<CalendarClassNameMap>;
-
-  footer?: ReactNode;
-  quickSelection?: ReactNode;
-
-  format?: DateFormat;
-  initialTime?: NullableDateInput;
-  initialMonth?: NullableDateInput;
-
-  modifiers?: CalendarModifiers;
-  selectedDays?: CalendarModifier;
-  disabledDays?: CalendarModifier;
-  highlightedDays?: CalendarHighlightedDays;
-
-  onDayClick?: CalendarDayEventHandler;
-  onDayKeyDown?: CalendarDayEventHandler;
-  onDayMouseEnter?: CalendarDayEventHandler;
-  onDayMouseLeave?: CalendarDayEventHandler;
-  onDayMouseDown?: CalendarDayEventHandler;
-  onDayMouseUp?: CalendarDayEventHandler;
-  onDayTouchEnd?: CalendarDayEventHandler;
-  onDayTouchStart?: CalendarDayEventHandler;
-}
-
-export const Calendar = forwardRef<HTMLDivElement, CalendarProps>(
-  (
-    {
-      footer,
-      classes,
-      direction,
-      quickSelection,
-      selectedDays,
-      disabledDays,
-
-      onDayClick,
-      onDayKeyDown,
-      onDayMouseEnter,
-      onDayMouseLeave,
-      onDayMouseDown,
-      onDayMouseUp,
-      onDayTouchEnd,
-      onDayTouchStart,
-
-      modifiers,
-      highlightedDays,
-
-      format: formatProp,
-      initialTime: initialTimeInputProp,
-      initialMonth: initialMonthInputProp,
-
-      ...dayPickerProps
-    },
-    ref,
-  ) => {
-    const styles = useStyles({ classes });
-    const config = useDateConfig({ format: formatProp });
-
-    const initialTimeInput = useDateTime(initialTimeInputProp, config);
-    const initialMonthInput = useDateTime(initialMonthInputProp, config);
-
-    const [initialTime, initialMonth] = useMemo(() => {
-      let time = initialTimeInput;
-      let month = initialMonthInput;
-
-      if (!month.isValid) {
-        month = DateTime.local().startOf('month');
-      }
-
-      if (!time.isValid) {
-        time = month;
-      }
-
-      return [
-        time,
-        new Date(
-          month.year,
-          month.month - 1,
-          month.day,
-          month.hour,
-          month.minute,
-          month.second,
-          month.millisecond,
-        ),
-      ];
-    }, [initialTimeInput, initialMonthInput]);
-
-    const wrapModifier = toDayPickerModifier.bind(null, config);
-    const wrapHandler = toDayPickerHandler.bind(
-      null,
-      config,
-      styles,
-      initialTime,
-    );
-
-    const dayPickerModifiers: Partial<Modifiers> = {
-      [styles.firstDayOfMonth]: wrapModifier(
-        ({ dateValue }) => dateValue.day === 1,
-      ),
-      [styles.lastDayOfMonth]: wrapModifier(
-        ({ dateValue }) => dateValue.day === dateValue.daysInMonth,
-      ),
-    };
-
-    if (modifiers) {
-      for (const [key, modifier] of Object.entries(modifiers)) {
-        dayPickerModifiers[key] = wrapModifier(modifier);
-      }
-    }
-
-    if (highlightedDays) {
-      for (const [key, modifier] of Object.entries(highlightedDays) as Array<
-        [CalendarDayHighlightColor, CalendarModifier]
-      >) {
-        dayPickerModifiers[styles[key]] = wrapModifier(modifier);
-      }
-    }
-
-    return (
-      <Grid ref={ref} container={true} direction={direction}>
-        {!!quickSelection && (
-          <>
-            <Grid item={true} xs={12} sm="auto">
-              {quickSelection}
-            </Grid>
-
-            <Hidden xsDown={true}>
-              <Grid item={true} sm="auto">
-                <Divider orientation="vertical" />
-              </Grid>
-            </Hidden>
-
-            <Hidden smUp={true}>
-              <Grid item={true} xs={12}>
-                <Divider orientation="horizontal" />
-              </Grid>
-            </Hidden>
-          </>
-        )}
-
-        <Grid item={true} xs={12} sm="auto">
-          <DayPicker
-            {...dayPickerProps}
-            classNames={styles}
-            navbarElement={CalendarNavbar}
-            captionElement={CalendarCaption}
-            weekdayElement={CalendarWeekDay}
-            initialMonth={initialMonth}
-            modifiers={dayPickerModifiers}
-            selectedDays={wrapModifier(selectedDays)}
-            disabledDays={wrapModifier(disabledDays)}
-            onDayClick={wrapHandler(onDayClick)}
-            onDayKeyDown={wrapHandler(onDayKeyDown)}
-            onDayMouseEnter={wrapHandler(onDayMouseEnter)}
-            onDayMouseLeave={wrapHandler(onDayMouseLeave)}
-            onDayMouseDown={wrapHandler(onDayMouseDown)}
-            onDayMouseUp={wrapHandler(onDayMouseUp)}
-            onDayTouchEnd={wrapHandler(onDayTouchEnd)}
-            onDayTouchStart={wrapHandler(onDayTouchStart)}
-          />
-
-          {!!footer && <div className={styles.footer}>{footer}</div>}
-        </Grid>
-      </Grid>
-    );
-  },
-);

package/src/calendar/CalendarQuickSelection.tsx

@@ -1,34 +0,0 @@
-import { List, ListItem, Typography } from '@material-ui/core';
-import { forwardRef, ReactNode } from 'react';
-
-export interface CalendarQuickSelectionItemProps {
-  children?: ReactNode;
-  selected?: boolean;
-  onClick?: () => void;
-}
-
-export const CalendarQuickSelectionItem = forwardRef<
-  HTMLDivElement,
-  CalendarQuickSelectionItemProps
->(({ onClick, selected, children }, ref) => (
-  <ListItem ref={ref} button={true} selected={selected} onClick={onClick}>
-    {children}
-  </ListItem>
-));
-
-export interface CalendarQuickSelectionProps {
-  children?: ReactNode;
-}
-
-export const CalendarQuickSelection = forwardRef<
-  HTMLUListElement,
-  CalendarQuickSelectionProps
->(({ children }, ref) => (
-  <List ref={ref}>
-    <ListItem>
-      <Typography variant="h4">Quick Selection</Typography>
-    </ListItem>
-
-    {children}
-  </List>
-));

package/src/calendar/InternalCalendarComponents.tsx

@@ -1,79 +0,0 @@
-import { IconButton, Typography } from '@material-ui/core';
-import { ChevronLeft, ChevronRight } from '@material-ui/icons';
-import { ReactElement } from 'react';
-import {
-  CaptionElementProps,
-  NavbarElementProps,
-  WeekdayElementProps,
-} from 'react-day-picker';
-
-export function CalendarCaption({
-  date,
-  localeUtils,
-  classNames,
-  onClick,
-}: CaptionElementProps): ReactElement {
-  return (
-    <Typography variant="h4" onClick={onClick} className={classNames.caption}>
-      {localeUtils.formatMonthTitle(date)}
-    </Typography>
-  );
-}
-
-export function CalendarNavbar({
-  labels,
-  classNames,
-  onNextClick,
-  onPreviousClick,
-  showNextButton,
-  showPreviousButton,
-}: NavbarElementProps): ReactElement {
-  return (
-    <>
-      <IconButton
-        size="small"
-        color="primary"
-        disabled={!showPreviousButton}
-        onClick={() => {
-          onPreviousClick();
-        }}
-        aria-label={labels.previousMonth}
-        className={classNames.navButtonPrev}
-      >
-        <ChevronLeft color="action" />
-      </IconButton>
-
-      <IconButton
-        size="small"
-        color="primary"
-        disabled={!showNextButton}
-        onClick={() => {
-          onNextClick();
-        }}
-        aria-label={labels.nextMonth}
-        className={classNames.navButtonNext}
-      >
-        <ChevronRight color="action" />
-      </IconButton>
-    </>
-  );
-}
-
-const SHORT_WEEKDAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
-
-export function CalendarWeekDay({
-  weekday,
-  className,
-  localeUtils,
-}: WeekdayElementProps): ReactElement {
-  return (
-    <Typography
-      variant="h5"
-      component="abbr"
-      className={className}
-      title={localeUtils.formatWeekdayLong(weekday)}
-    >
-      {SHORT_WEEKDAYS[weekday]}
-    </Typography>
-  );
-}

package/src/date-config/DateConfig.spec.tsx

@@ -1,23 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { ReactElement } from 'react';
-import {
-  DateConfigProvider,
-  DateConfigProviderProps,
-  useDateConfig,
-} from './DateConfig';
-
-test('basic', () => {
-  const { result } = renderHook(useDateConfig);
-
-  expect(result.current.format).toBe('DateTimeISO');
-});
-
-test('format overrides', () => {
-  function Wrapper(props: DateConfigProviderProps): ReactElement {
-    return <DateConfigProvider {...props} format="JodaISO" />;
-  }
-
-  const { result } = renderHook(useDateConfig, { wrapper: Wrapper });
-
-  expect(result.current.format).toBe('JodaISO');
-});