@superdispatch/dates 0.21.13 → 0.21.16

package/src/date-utils/DateUtils.ts

@@ -1,333 +0,0 @@
-import { DateTime } from 'luxon';
-import { useMemo } from 'react';
-
-/** @deprecated */
-export type DateUnit =
-  | 'year'
-  | 'month'
-  | 'day'
-  | 'hour'
-  | 'minute'
-  | 'second'
-  | 'millisecond';
-/** @deprecated */
-export type DateDurationUnit = DateUnit | 'quarter' | 'week';
-
-/** @deprecated */
-export type DateObject = Record<DateUnit, number>;
-
-/** @deprecated */
-export type NullableDate = null | undefined | Date;
-/** @deprecated */
-export type DateLike = number | Date;
-/** @deprecated */
-export type NullableDateLike = null | undefined | DateLike;
-/** @deprecated */
-export type DateRange = [Date?, Date?];
-/** @deprecated */
-export type DateRangeLike = [DateLike?, DateLike?];
-/** @deprecated */
-export type NullableDateRange =
-  | null
-  | undefined
-  | [NullableDate?, NullableDate?];
-
-/** @deprecated */
-export type NullableDateRangeLike =
-  | null
-  | undefined
-  | [NullableDateLike?, NullableDateLike?];
-
-/** @deprecated */
-function toDateTime(value: DateLike): DateTime {
-  return typeof value === 'number'
-    ? DateTime.fromMillis(value)
-    : DateTime.fromJSDate(value);
-}
-
-/** @deprecated */
-export function isDate(value: unknown): value is Date {
-  return value != null && value instanceof Date;
-}
-
-/** @deprecated */
-export function isDateLike(value: unknown): value is DateLike {
-  return (
-    isDate(value) || (typeof value === 'number' && Number.isInteger(value))
-  );
-}
-
-/** @deprecated */
-export function isValidDate(value: unknown): value is Date {
-  return isDate(value) && Number.isFinite(value.getTime());
-}
-
-/** @deprecated */
-function checkRange(
-  range: unknown,
-  validator: (value: unknown) => boolean,
-): boolean {
-  if (!Array.isArray(range) || range.length > 2) {
-    return false;
-  }
-
-  const [start, finish] = range as unknown[];
-
-  return (
-    (start == null || validator(start)) && (finish == null || validator(finish))
-  );
-}
-
-/** @deprecated */
-export function isDateRange(range: unknown): range is DateRange {
-  return checkRange(range, isDate);
-}
-
-/** @deprecated */
-export function isDateRangeLike(range: unknown): range is DateRangeLike {
-  return checkRange(range, isDateLike);
-}
-
-/** @deprecated */
-export function isValidDateRange(range: unknown): range is DateRange {
-  return checkRange(range, isValidDate);
-}
-
-/** @deprecated */
-export function toDate(value: NullableDateLike): Date {
-  return !isDateLike(value) ? new Date(NaN) : new Date(value);
-}
-
-/** @deprecated */
-export function toDateRange(range: NullableDateRangeLike): DateRange {
-  if (range == null || !isDateRangeLike(range)) {
-    return [];
-  }
-
-  return range
-    .filter((x) => x != null)
-    .map((x) => (x == null ? undefined : toDate(x)))
-    .sort((a, b) =>
-      !isValidDate(a) ? -1 : !isValidDate(b) ? 1 : a.valueOf() - b.valueOf(),
-    ) as DateRange;
-}
-
-/** @deprecated */
-export type DateFormatVariant = 'date' | 'shortDate' | 'time' | 'dateTime';
-/** @deprecated */
-export type DateFormatOptions = Omit<
-  Intl.DateTimeFormatOptions,
-  'timeZone' | 'timeZoneName'
->;
-
-/** @deprecated */
-export type RelativeTimeFormatStyle = 'narrow' | 'short' | 'long';
-/** @deprecated */
-export interface RelativeTimeFormatOptions {
-  style?: RelativeTimeFormatStyle;
-  compare?: DateLike;
-}
-
-/** @deprecated */
-export class DateUtils {
-  /** @deprecated */
-  toObject(value: DateLike): DateObject {
-    const {
-      year = NaN,
-      month = NaN,
-      day = NaN,
-      hour = NaN,
-      minute = NaN,
-      second = NaN,
-      millisecond = NaN,
-    } = toDateTime(value).toObject({
-      includeConfig: false,
-    });
-
-    return { year, month, day, hour, minute, second, millisecond };
-  }
-
-  /** @deprecated */
-  fromObject({
-    year = 0,
-    month = 1,
-    day = 1,
-    hour = 0,
-    minute = 0,
-    second = 0,
-    millisecond = 0,
-  }: Partial<DateObject>): Date {
-    if (
-      Number.isNaN(year) ||
-      Number.isNaN(month) ||
-      Number.isNaN(day) ||
-      Number.isNaN(hour) ||
-      Number.isNaN(minute) ||
-      Number.isNaN(second) ||
-      Number.isNaN(millisecond)
-    ) {
-      return new Date(NaN);
-    }
-
-    return DateTime.fromObject({
-      year,
-      month,
-      day,
-      hour,
-      minute,
-      second,
-      millisecond,
-    }).toJSDate();
-  }
-
-  /** @deprecated */
-  update(value: DateLike, values: Partial<DateObject>): Date {
-    return toDateTime(value).set(values).toJSDate();
-  }
-
-  /** @deprecated */
-  mergeDateAndTime(date: DateLike, time: DateLike): Date {
-    const { hour, minute, second, millisecond } = this.toObject(time);
-
-    if (
-      Number.isNaN(hour) ||
-      Number.isNaN(minute) ||
-      Number.isNaN(second) ||
-      Number.isNaN(millisecond)
-    ) {
-      return new Date(NaN);
-    }
-
-    return this.update(date, { hour, minute, second, millisecond });
-  }
-
-  /** @deprecated */
-  startOf(value: DateLike, unit: DateDurationUnit): Date {
-    return toDateTime(value).startOf(unit).toJSDate();
-  }
-
-  /** @deprecated */
-  endOf(value: DateLike, unit: DateDurationUnit): Date {
-    return toDateTime(value).endOf(unit).toJSDate();
-  }
-
-  /** @deprecated */
-  plus(value: DateLike, values: Partial<DateObject>): Date {
-    return toDateTime(value).plus(values).toJSDate();
-  }
-
-  /** @deprecated */
-  minus(value: DateLike, values: Partial<DateObject>): Date {
-    return toDateTime(value).minus(values).toJSDate();
-  }
-
-  /** @deprecated */
-  isSameDate(
-    value: NullableDateLike,
-    compare: NullableDateLike,
-    unit: DateUnit = 'millisecond',
-  ): boolean {
-    if (value == null && compare == null) {
-      return true;
-    }
-
-    if (value == null || compare == null) {
-      return false;
-    }
-
-    const dateTimeValue = toDateTime(value);
-    const dateTimeCompare = toDateTime(compare);
-
-    return (
-      dateTimeValue.isValid &&
-      dateTimeCompare.isValid &&
-      dateTimeValue.startOf(unit).equals(dateTimeCompare.startOf(unit))
-    );
-  }
-
-  /** @deprecated */
-  isSameDateRange(
-    value: NullableDateRangeLike,
-    compare: NullableDateRangeLike,
-    unit?: DateUnit,
-  ): boolean {
-    const range1 = toDateRange(value);
-    const range2 = toDateRange(compare);
-
-    return !range1.some(
-      (date, idx) => !this.isSameDate(date, range2[idx], unit),
-    );
-  }
-
-  /** @deprecated */
-  diff(value: DateLike, compare: DateLike, unit: DateUnit): number {
-    const valueDateTime = toDateTime(value);
-    const compareDateTime = toDateTime(compare);
-
-    return valueDateTime.diff(compareDateTime, unit).as(unit);
-  }
-
-  /** @deprecated */
-  toLocaleString(value: DateLike, options?: DateFormatOptions): string {
-    return toDateTime(value).toLocaleString(options);
-  }
-
-  /** @deprecated */
-  format(value: DateLike, variant: DateFormatVariant): string {
-    return this.toLocaleString(
-      value,
-      variant === 'date'
-        ? { day: '2-digit', month: 'short', year: 'numeric' }
-        : variant === 'shortDate'
-        ? { day: '2-digit', month: 'short' }
-        : variant === 'time'
-        ? { hour: 'numeric', minute: 'numeric' }
-        : {
-            day: '2-digit',
-            month: 'short',
-            year: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-          },
-    );
-  }
-
-  /** @deprecated */
-  formatRange(value: NullableDateRangeLike, emptyText = ''): string {
-    const range = toDateRange(value);
-
-    if (!isValidDateRange(range)) {
-      return 'Invalid Date Range';
-    }
-
-    const [start, finish] = range;
-
-    if (!start) {
-      return emptyText;
-    }
-
-    const startText = this.format(
-      start,
-      !this.isSameDate(start, finish, 'year') ? 'date' : 'shortDate',
-    );
-
-    const finishText = !finish ? '…' : this.format(finish, 'date');
-
-    return `${startText} - ${finishText}`;
-  }
-
-  /** @deprecated */
-  formatRelativeTime(
-    value: DateLike,
-    { style = 'long', compare = Date.now() }: RelativeTimeFormatOptions = {},
-  ): string {
-    const valueDateTime = toDateTime(value);
-    const compareDateTime = toDateTime(compare);
-
-    return valueDateTime.toRelative({ style, base: compareDateTime }) as string;
-  }
-}
-
-export function useDateUtils(): DateUtils {
-  return useMemo(() => new DateUtils(), []);
-}

package/src/formatted-date/FormattedDate.spec.tsx

@@ -1,103 +0,0 @@
-import { Typography } from '@material-ui/core';
-import { mockDate, renderComponent } from '@superdispatch/ui-testutils';
-import { renderHook } from '@testing-library/react-hooks';
-import { NullableDateInput } from '../date-time-utils/DateTimeUtils';
-import {
-  FormattedDate,
-  FormattedDateConfig,
-  useFormattedDate,
-} from './FormattedDate';
-
-beforeEach(() => {
-  mockDate();
-});
-
-describe('useFormattedDate', () => {
-  interface HookProps extends FormattedDateConfig {
-    input: NullableDateInput;
-  }
-
-  test('basic', () => {
-    const { result, rerender } = renderHook(
-      ({ input, ...options }: HookProps) => useFormattedDate(input, options),
-      { initialProps: { input: Date.now(), variant: 'DateTime' } },
-    );
-
-    expect(result.current).toBe('May 24, 2019, 7:13 AM');
-
-    rerender({ input: Date.now(), variant: 'Date' });
-
-    expect(result.current).toBe('May 24, 2019');
-
-    rerender({ input: Date.now(), variant: 'ShortDate' });
-
-    expect(result.current).toBe('May 24');
-
-    rerender({ input: Date.now(), variant: 'Time' });
-
-    expect(result.current).toBe('7:13 AM');
-  });
-
-  test('invalid', () => {
-    const { result, rerender } = renderHook(
-      ({ input, ...options }: HookProps) => useFormattedDate(input, options),
-      { initialProps: { input: NaN, variant: 'DateTime' } },
-    );
-
-    expect(result.current).toBe('Invalid Date');
-
-    rerender({
-      input: NaN,
-      variant: 'DateTime',
-      fallback: 'Custom Empty Text',
-    });
-
-    expect(result.current).toBe('Custom Empty Text');
-  });
-});
-
-describe('FormattedDate', () => {
-  test('basic', () => {
-    const { container } = renderComponent(
-      <>
-        <FormattedDate date={Date.now()} variant="DateTime" />
-        <FormattedDate date={Date.now()} variant="Date" />
-        <FormattedDate date={Date.now()} variant="Time" />
-        <FormattedDate date={Date.now()} variant="ShortDate" />
-      </>,
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        May 24, 2019, 7:13 AM
-        May 24, 2019
-        7:13 AM
-        May 24
-      </div>
-    `);
-  });
-
-  test('invalid', () => {
-    const { container } = renderComponent(
-      <>
-        <FormattedDate date={NaN} variant="Date" />
-        <FormattedDate
-          date={NaN}
-          variant="Date"
-          fallback={<Typography color="textSecondary">N/A</Typography>}
-        />
-      </>,
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        Invalid Date
-        <p
-          class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary"
-        >
-          N/A
-        </p>
-      </div>
-    `);
-  });
-});

package/src/formatted-date/FormattedDate.ts

@@ -1,42 +0,0 @@
-import { renderChildren } from '@superdispatch/ui';
-import { ReactElement, ReactNode, useMemo } from 'react';
-import { DateConfig, useDateConfig } from '../date-config/DateConfig';
-import {
-  formatDate,
-  FormatDateConfig,
-  NullableDateInput,
-} from '../date-time-utils/DateTimeUtils';
-import { useDateTime } from '../use-date-time/useDateTime';
-
-export interface FormattedDateConfig
-  extends Partial<DateConfig>,
-    FormatDateConfig {}
-
-export function useFormattedDate(
-  input: NullableDateInput,
-  { variant, fallback, ...dateConfig }: FormattedDateConfig,
-): string {
-  const config = useDateConfig(dateConfig);
-  const date = useDateTime(input, config);
-
-  return useMemo(
-    () => formatDate(date, { variant, fallback }, config),
-    [date, config, variant, fallback],
-  );
-}
-
-export interface FormattedDateProps
-  extends Omit<FormattedDateConfig, 'fallback'> {
-  fallback?: ReactNode;
-  date: NullableDateInput;
-}
-
-export function FormattedDate({
-  date,
-  fallback = 'Invalid Date',
-  ...options
-}: FormattedDateProps): null | ReactElement {
-  const formatted = useFormattedDate(date, { ...options, fallback: '' });
-
-  return renderChildren(formatted || fallback);
-}

package/src/formatted-relative-time/FormattedRelativeTime.spec.tsx

@@ -1,93 +0,0 @@
-import { Typography } from '@material-ui/core';
-import { mockDate, renderComponent } from '@superdispatch/ui-testutils';
-import { DateTime } from 'luxon';
-import { FormattedRelativeTime } from '../formatted-relative-time/FormattedRelativeTime';
-
-beforeEach(() => {
-  mockDate();
-});
-
-describe('FormattedRelativeTime', () => {
-  test('basic', () => {
-    const now = DateTime.fromMillis(Date.now());
-    const { container } = renderComponent(
-      <>
-        <FormattedRelativeTime date={now} />
-        <FormattedRelativeTime date={now.startOf('minute')} />
-        <FormattedRelativeTime date={now.endOf('minute')} />
-        <FormattedRelativeTime date={now.startOf('hour')} />
-        <FormattedRelativeTime date={now.endOf('hour')} />
-        <FormattedRelativeTime date={now.startOf('day')} />
-        <FormattedRelativeTime date={now.endOf('day')} />
-        <FormattedRelativeTime date={now.startOf('week')} />
-        <FormattedRelativeTime date={now.endOf('week')} />
-        <FormattedRelativeTime date={now.startOf('month')} />
-        <FormattedRelativeTime date={now.endOf('month')} />
-        <FormattedRelativeTime date={now.startOf('year')} />
-        <FormattedRelativeTime date={now.endOf('year')} />
-        <FormattedRelativeTime date={now.minus({ year: 1 })} />
-      </>,
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        in 0s
-        14s ago
-        in 45s
-        13m ago
-        in 46m
-        7h ago
-        in 16h
-        4d ago
-        in 2d
-        23d ago
-        in 7d
-        4mo ago
-        in 7mo
-        1y ago
-      </div>
-    `);
-  });
-
-  test('base', () => {
-    const now = DateTime.fromMillis(Date.now());
-    const { container } = renderComponent(
-      <FormattedRelativeTime
-        date={now.plus({ days: 10 })}
-        base={now.minus({ days: 10 })}
-      />,
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        in 20d
-      </div>
-    `);
-  });
-
-  test('invalid', () => {
-    const now = DateTime.fromMillis(Date.now());
-    const { container } = renderComponent(
-      <>
-        <FormattedRelativeTime date={NaN} />
-        <FormattedRelativeTime date={now.startOf('month')} base={NaN} />
-        <FormattedRelativeTime
-          date={NaN}
-          fallback={<Typography color="textSecondary">N/A</Typography>}
-        />
-      </>,
-    );
-
-    expect(container).toMatchInlineSnapshot(`
-      <div>
-        Invalid Date
-        Invalid Date
-        <p
-          class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary"
-        >
-          N/A
-        </p>
-      </div>
-    `);
-  });
-});

package/src/formatted-relative-time/FormattedRelativeTime.ts

@@ -1,60 +0,0 @@
-import { renderChildren } from '@superdispatch/ui';
-import { ReactElement, ReactNode, useMemo } from 'react';
-import { DateConfig, useDateConfig } from '../date-config/DateConfig';
-import {
-  formatRelativeTime,
-  FormatRelativeTimeOptions,
-  NullableDateInput,
-} from '../date-time-utils/DateTimeUtils';
-import { useDateTime } from '../use-date-time/useDateTime';
-
-export interface FormattedRelativeTimeOptions
-  extends Partial<DateConfig>,
-    FormatRelativeTimeOptions {}
-
-export function useFormattedRelativeTime(
-  input: NullableDateInput,
-  {
-    unit,
-    round,
-    padding,
-    fallback,
-
-    base: baseOption,
-    ...dateConfig
-  }: FormattedRelativeTimeOptions = {},
-): string {
-  const config = useDateConfig(dateConfig);
-  const date = useDateTime(input, config);
-  const baseOptionDate = useDateTime(baseOption, config);
-  const base = baseOption == null ? undefined : baseOptionDate;
-
-  return useMemo(
-    () =>
-      formatRelativeTime(
-        date,
-        { base, unit, round, padding, fallback },
-        config,
-      ),
-    [base, date, unit, round, config, padding, fallback],
-  );
-}
-
-export interface FormattedRelativeTimeProps
-  extends Omit<FormattedRelativeTimeOptions, 'fallback'> {
-  date: NullableDateInput;
-  fallback?: ReactNode;
-}
-
-export function FormattedRelativeTime({
-  date,
-  fallback = 'Invalid Date',
-  ...options
-}: FormattedRelativeTimeProps): null | ReactElement {
-  const formatted = useFormattedRelativeTime(date, {
-    ...options,
-    fallback: '',
-  });
-
-  return renderChildren(formatted || fallback);
-}

package/src/index.ts

@@ -1,12 +0,0 @@
-export * from './calendar/Calendar';
-export * from './calendar/CalendarQuickSelection';
-export * from './date-config/DateConfig';
-export * from './date-field/DateField';
-export * from './date-range-field/DateRangeField';
-export * from './date-time-utils/DateTimeUtils';
-export * from './date-utils/DateUtils';
-export * from './formatted-date/FormattedDate';
-export * from './formatted-relative-time/FormattedRelativeTime';
-export * from './time-field/TimeField';
-export * from './use-date-time-range/useDateTimeRange';
-export * from './use-date-time/useDateTime';

package/src/time-field/TimeField.playroom.tsx

@@ -1,21 +0,0 @@
-import { forwardRef, useState } from 'react';
-import { NullableDateInput } from '../date-time-utils/DateTimeUtils';
-import { TimeField as SDTimeField, TimeFieldProps } from './TimeField';
-
-export const TimeField = forwardRef<HTMLDivElement, TimeFieldProps>(
-  ({ value, onChange, ...props }, ref) => {
-    const [state, setState] = useState<NullableDateInput>();
-
-    return (
-      <SDTimeField
-        {...props}
-        ref={ref}
-        value={value || state}
-        onChange={(date) => {
-          onChange?.(date);
-          setState(date.stringValue);
-        }}
-      />
-    );
-  },
-);

package/src/time-field/TimeField.stories.tsx

@@ -1,35 +0,0 @@
-import { InputAdornment } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { TimeField } from './TimeField.playroom';
-
-export default {
-  title: 'Dates/TimeField',
-  component: TimeField,
-} as Meta;
-
-export const basic = () => <TimeField />;
-
-export const advanced = () => (
-  <TimeField label="Label" placeholder="Placeholder" helperText="Helper Text" />
-);
-
-export const errorState = () => (
-  <TimeField
-    label="Label"
-    error={true}
-    placeholder="Placeholder"
-    helperText="Error Text"
-  />
-);
-
-export const adornment = () => (
-  <TimeField
-    InputProps={{
-      startAdornment: (
-        <InputAdornment position="start">Start Adornment:</InputAdornment>
-      ),
-    }}
-  />
-);
-
-export const disabled = () => <TimeField disabled={true} />;