@superdispatch/dates 0.21.13 → 0.21.16

package/src/date-config/DateConfig.tsx

@@ -1,60 +0,0 @@
-import { FixedOffsetZone, Settings } from 'luxon';
-import {
-  createContext,
-  ReactElement,
-  ReactNode,
-  useContext,
-  useMemo,
-} from 'react';
-
-export function setDefaultTimeZone(offset: number | 'local'): string {
-  if (offset === 'local') {
-    Settings.defaultZoneName = offset;
-  } else {
-    const zone = FixedOffsetZone.instance(offset);
-
-    if (zone.isValid) {
-      Settings.defaultZoneName = zone.name;
-    }
-  }
-
-  return Settings.defaultZoneName;
-}
-
-export function useDefaultTimeZone(offset: number | 'local'): string {
-  return useMemo(() => setDefaultTimeZone(offset), [offset]);
-}
-
-export type DateFormat = 'DateISO' | 'DateTimeISO' | 'JodaISO';
-
-export interface DateConfig {
-  readonly format: DateFormat;
-}
-
-export const defaultDateConfig: DateConfig = { format: 'DateTimeISO' };
-
-const Context = createContext(defaultDateConfig);
-
-export function useDateConfig(options: Partial<DateConfig> = {}): DateConfig {
-  const config = useContext(Context);
-  const { format = config.format } = options;
-
-  return useMemo<DateConfig>(() => ({ format }), [format]);
-}
-
-export interface DateConfigProviderProps extends Partial<DateConfig> {
-  children?: ReactNode;
-}
-
-export function DateConfigProvider({
-  format,
-  children,
-}: DateConfigProviderProps): ReactElement {
-  const prev = useDateConfig();
-  const ctx = useMemo(
-    (): DateConfig => ({ format: format || prev.format }),
-    [format, prev.format],
-  );
-
-  return <Context.Provider value={ctx}>{children}</Context.Provider>;
-}

package/src/date-field/DateField.playroom.tsx

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

package/src/date-field/DateField.spec.tsx

@@ -1,350 +0,0 @@
-import { InputAdornment } from '@material-ui/core';
-import { mockDate, renderComponent } from '@superdispatch/ui-testutils';
-import { fireEvent, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { DateTime } from 'luxon';
-import { useState } from 'react';
-import {
-  DateConfigProvider,
-  DateFormat,
-  defaultDateConfig,
-} from '../date-config/DateConfig';
-import {
-  DatePayload,
-  DateString,
-  NullableDateString,
-} from '../date-time-utils/DateTimeUtils';
-import { DateField, DateFieldProps } from './DateField';
-
-beforeEach(() => {
-  mockDate();
-});
-
-function UncontrolledDateField(props: DateFieldProps) {
-  const [info, setInfo] = useState<DatePayload>();
-
-  return <DateField {...props} onChange={setInfo} value={info?.stringValue} />;
-}
-
-test('basic', () => {
-  const onChange = jest.fn();
-  renderComponent(<DateField onChange={onChange} />);
-
-  expect(screen.queryByRole('grid')).toBeNull();
-  expect(screen.getByRole('textbox')).toHaveValue('');
-
-  userEvent.click(screen.getByRole('textbox'));
-
-  expect(onChange).not.toHaveBeenCalled();
-  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
-  expect(onChange).toHaveBeenCalledTimes(1);
-  expect(onChange).toHaveBeenLastCalledWith({
-    config: defaultDateConfig,
-    dateValue: expect.any(DateTime),
-    stringValue: '2019-05-24T00:00:00.000-05:00',
-  });
-
-  expect(screen.queryByRole('grid')).toBeNull();
-  expect(screen.getByRole('textbox')).toHaveValue('');
-});
-
-test('uncontrolled', () => {
-  renderComponent(<UncontrolledDateField />);
-
-  expect(screen.getByRole('textbox')).toHaveValue('');
-
-  userEvent.click(screen.getByRole('textbox'));
-  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
-
-  expect(screen.getByRole('textbox')).toHaveValue('May 24, 2019');
-});
-
-test.each<
-  [
-    contextFormat: undefined | DateFormat,
-    propsFormat: undefined | DateFormat,
-    input: NullableDateString,
-    inputValue: string,
-    expectedFormat: DateFormat,
-    expectedValue: DateString,
-  ]
->([
-  [
-    undefined,
-    undefined,
-    '2019-05-20',
-    'May 20, 2019',
-    'DateTimeISO',
-    '2019-05-24T00:00:00.000-05:00',
-  ],
-
-  [
-    'JodaISO',
-    undefined,
-    '2019-05-20T00:00:00.000-0500',
-    'May 20, 2019',
-    'JodaISO',
-    '2019-05-24T00:00:00.000-0500',
-  ],
-
-  ['JodaISO', 'DateISO', '2019-05-20', 'May 20, 2019', 'DateISO', '2019-05-24'],
-])(
-  'DateConfig format={%p}: DateField format={%p} value={%p}',
-  (
-    contextFormat,
-    propsFormat,
-    input,
-    inputValue,
-    expectedFormat,
-    expectedValue,
-  ) => {
-    const onChange = jest.fn();
-    renderComponent(
-      <DateConfigProvider format={contextFormat}>
-        <DateField value={input} onChange={onChange} format={propsFormat} />
-      </DateConfigProvider>,
-    );
-
-    expect(screen.getByRole('textbox')).toHaveValue(inputValue);
-
-    userEvent.click(screen.getByRole('textbox'));
-    userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
-
-    expect(onChange).toHaveBeenLastCalledWith({
-      dateValue: expect.any(DateTime),
-      stringValue: expectedValue,
-      config: { format: expectedFormat },
-    });
-  },
-);
-
-test('close on select', () => {
-  renderComponent(<DateField />);
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  userEvent.click(screen.getByRole('textbox'));
-  userEvent.click(screen.getByRole('gridcell', { name: /May 25/ }));
-
-  expect(screen.queryByRole('grid')).toBeNull();
-});
-
-test('onClick', () => {
-  let prevent = false;
-
-  renderComponent(
-    <DateField
-      onClick={(event) => {
-        if (prevent) event.preventDefault();
-      }}
-    />,
-  );
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  userEvent.click(screen.getByRole('textbox'));
-  userEvent.click(screen.getByRole('gridcell', { name: /May 25/ }));
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  prevent = true;
-
-  userEvent.click(screen.getByRole('textbox'));
-  expect(screen.queryByRole('grid')).toBeNull();
-});
-
-test('onKeyDown', () => {
-  let prevent = false;
-
-  renderComponent(
-    <DateField
-      onKeyDown={(event) => {
-        if (prevent) event.preventDefault();
-      }}
-    />,
-  );
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  fireEvent.keyDown(screen.getByRole('textbox'), { key: ' ' });
-
-  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
-
-  userEvent.click(screen.getByRole('gridcell', { name: /May 25/ }));
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  prevent = true;
-
-  fireEvent.keyDown(screen.getByRole('textbox'), { key: ' ' });
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
-
-  expect(screen.queryByRole('grid')).toBeNull();
-});
-
-test('disabled', () => {
-  renderComponent(<DateField disabled={true} />);
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  userEvent.click(screen.getByRole('textbox'));
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  fireEvent.keyDown(screen.getByRole('textbox'), { key: ' ' });
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
-
-  expect(screen.queryByRole('grid')).toBeNull();
-});
-
-test('disabledDays', () => {
-  const onChange = jest.fn();
-  const onDayClick = jest.fn();
-
-  renderComponent(
-    <DateField
-      onChange={onChange}
-      CalendarProps={{
-        onDayClick,
-        disabledDays: ({ dateValue }) => dateValue.day >= 24,
-      }}
-    />,
-  );
-
-  userEvent.click(screen.getByRole('textbox'));
-
-  expect(onChange).not.toHaveBeenCalled();
-  expect(onDayClick).not.toHaveBeenCalled();
-
-  expect(screen.getByRole('gridcell', { name: /May 24/ })).toHaveClass(
-    'SD-Calendar-disabled',
-  );
-
-  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
-
-  expect(onChange).not.toHaveBeenCalled();
-  expect(onDayClick).toHaveBeenCalledTimes(1);
-});
-
-test('enableClearable', () => {
-  const onChange = jest.fn();
-  const view = renderComponent(<DateField enableClearable={true} />);
-
-  expect(screen.queryByRole('button', { name: 'clear' })).toBeNull();
-
-  view.rerender(
-    <DateField value={Date.now()} onChange={onChange} enableClearable={true} />,
-  );
-
-  expect(onChange).not.toHaveBeenCalled();
-
-  userEvent.click(screen.getByRole('button', { name: 'clear' }));
-
-  expect(onChange).toHaveBeenCalledTimes(1);
-  expect(onChange).toHaveBeenLastCalledWith({
-    config: defaultDateConfig,
-    stringValue: null,
-    dateValue: expect.any(DateTime),
-  });
-
-  view.rerender(
-    <DateField
-      label="Custom Label"
-      value={Date.now()}
-      onChange={onChange}
-      enableClearable={true}
-    />,
-  );
-
-  expect(screen.queryByRole('button', { name: 'clear' })).toBeNull();
-
-  userEvent.click(screen.getByRole('button', { name: 'clear Custom Label' }));
-
-  expect(onChange).toHaveBeenCalledTimes(2);
-  expect(onChange).toHaveBeenLastCalledWith({
-    config: defaultDateConfig,
-    stringValue: null,
-    dateValue: expect.any(DateTime),
-  });
-});
-
-test('disableCloseOnSelect', () => {
-  const onChange = jest.fn();
-  const view = renderComponent(<DateField onChange={onChange} />);
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  userEvent.click(screen.getByRole('textbox'));
-  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
-
-  expect(screen.queryByRole('grid')).toBeNull();
-  expect(onChange).toHaveBeenCalledTimes(1);
-  expect(onChange).toHaveBeenLastCalledWith(
-    expect.objectContaining({ stringValue: '2019-05-24T00:00:00.000-05:00' }),
-  );
-
-  view.rerender(<DateField onChange={onChange} disableCloseOnSelect={true} />);
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  userEvent.click(screen.getByRole('textbox'));
-  userEvent.click(screen.getByRole('gridcell', { name: /May 25/ }));
-
-  expect(screen.getByRole('grid')).toBeInTheDocument();
-  expect(onChange).toHaveBeenCalledTimes(2);
-  expect(onChange).toHaveBeenLastCalledWith(
-    expect.objectContaining({ stringValue: '2019-05-25T00:00:00.000-05:00' }),
-  );
-
-  userEvent.click(screen.getByRole('gridcell', { name: /May 26/ }));
-
-  expect(screen.getByRole('grid')).toBeInTheDocument();
-  expect(onChange).toHaveBeenCalledTimes(3);
-  expect(onChange).toHaveBeenLastCalledWith(
-    expect.objectContaining({ stringValue: '2019-05-26T00:00:00.000-05:00' }),
-  );
-
-  fireEvent.keyDown(screen.getByRole('presentation'), { key: 'Escape' });
-
-  expect(screen.queryByRole('grid')).toBeNull();
-  expect(onChange).toHaveBeenCalledTimes(3);
-});
-
-test('startAdornment', () => {
-  renderComponent(
-    <DateField
-      InputProps={{
-        'aria-labelledby': 'label',
-        startAdornment: (
-          <InputAdornment id="label" position="start">
-            Start Adornment
-          </InputAdornment>
-        ),
-      }}
-    />,
-  );
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  userEvent.click(screen.getByLabelText('Start Adornment'));
-
-  expect(screen.getByRole('grid')).toBeInTheDocument();
-
-  fireEvent.keyDown(screen.getByRole('presentation'), { key: 'Escape' });
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  userEvent.click(screen.getByText('Start Adornment'));
-
-  expect(screen.getByRole('grid')).toBeInTheDocument();
-});

package/src/date-field/DateField.stories.tsx

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

package/src/date-field/DateField.tsx

@@ -1,155 +0,0 @@
-import { BaseTextFieldProps, InputBaseProps } from '@material-ui/core';
-import { forwardRef, ReactNode, useMemo, useRef } from 'react';
-import {
-  BaseDatePicker,
-  InternalBaseDateFieldAPI,
-} from '../base-date-picker/BaseDatePicker';
-import { Calendar, CalendarProps } from '../calendar/Calendar';
-import { DateFormat, useDateConfig } from '../date-config/DateConfig';
-import {
-  DateDisplayVariant,
-  DatePayload,
-  NullableDateInput,
-  stringifyDate,
-  toDatePayload,
-} from '../date-time-utils/DateTimeUtils';
-import { useFormattedDate } from '../formatted-date/FormattedDate';
-import { useDateTime } from '../use-date-time/useDateTime';
-
-export interface DateFieldAPI extends DatePayload {
-  close: () => void;
-  change: (value: NullableDateInput) => void;
-}
-
-export interface DateFieldProps
-  extends Pick<
-    BaseTextFieldProps,
-    | 'disabled'
-    | 'error'
-    | 'fullWidth'
-    | 'helperText'
-    | 'id'
-    | 'label'
-    | 'name'
-    | 'onClick'
-    | 'onKeyDown'
-    | 'placeholder'
-    | 'required'
-  > {
-  format?: DateFormat;
-  value?: NullableDateInput;
-
-  onBlur?: () => void;
-  onFocus?: () => void;
-  onChange?: (event: DatePayload) => void;
-
-  fallback?: string;
-  variant?: DateDisplayVariant;
-  enableClearable?: boolean;
-  disableCloseOnSelect?: boolean;
-  renderFooter?: (api: DateFieldAPI) => ReactNode;
-  renderQuickSelection?: (api: DateFieldAPI) => ReactNode;
-
-  InputProps?: Pick<
-    InputBaseProps,
-    'aria-label' | 'aria-labelledby' | 'startAdornment'
-  >;
-  CalendarProps?: Omit<
-    CalendarProps,
-    | 'classes'
-    | 'footer'
-    | 'initialMonth'
-    | 'numberOfMonths'
-    | 'quickSelection'
-    | 'selectedDays'
-  >;
-}
-
-export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
-  (
-    {
-      onBlur,
-      onFocus,
-      onChange,
-      renderFooter,
-      renderQuickSelection,
-
-      value: valueProp,
-      format: formatProp,
-
-      fallback = '',
-      variant = 'Date',
-
-      enableClearable,
-      disableCloseOnSelect,
-
-      CalendarProps: { onDayClick, ...calendarProps } = {},
-      ...textFieldProps
-    },
-    ref,
-  ) => {
-    const config = useDateConfig({ format: formatProp });
-    const apiRef = useRef<InternalBaseDateFieldAPI>(null);
-
-    const date = useDateTime(valueProp, config);
-    const displayValue = useFormattedDate(date, {
-      variant,
-      fallback,
-      ...config,
-    });
-    const dateString = useMemo(
-      () => stringifyDate(date, config),
-      [date, config],
-    );
-
-    function handleClose(): void {
-      apiRef.current?.close();
-    }
-
-    function handleChange(nextInput: NullableDateInput): void {
-      if (onChange) {
-        onChange(toDatePayload(nextInput, config));
-      }
-
-      if (!disableCloseOnSelect) {
-        handleClose();
-      }
-    }
-
-    const api: DateFieldAPI = {
-      config,
-      dateValue: date,
-      stringValue: dateString,
-      close: handleClose,
-      change: handleChange,
-    };
-
-    return (
-      <BaseDatePicker
-        {...textFieldProps}
-        ref={ref}
-        api={apiRef}
-        onClose={onBlur}
-        value={displayValue || fallback}
-        enableClearable={enableClearable && date.isValid}
-        onClear={() => {
-          handleChange(undefined);
-        }}
-      >
-        <Calendar
-          {...calendarProps}
-          initialMonth={date}
-          footer={renderFooter?.(api)}
-          quickSelection={renderQuickSelection?.(api)}
-          selectedDays={({ dateValue }) => date.hasSame(dateValue, 'day')}
-          onDayClick={(event) => {
-            onDayClick?.(event);
-            if (!event.disabled) {
-              handleChange(event.dateValue);
-            }
-          }}
-        />
-      </BaseDatePicker>
-    );
-  },
-);

package/src/date-range-field/DateRangeField.playroom.tsx

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