@spaced-out/ui-design-system 0.4.13-beta.0 → 0.4.13-beta.1

package/lib/components/DateRangePicker/DateRangeWrapper.tsx

@@ -1,386 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-import moment from 'moment';
-
-import type {DateRange, DateRangeWithTimezone} from '../../types';
-import {
-  generateAvailableYears,
-  getAvailableMonths,
-  getMonthEndDate,
-  getMonths,
-  getTimezones,
-  MARKERS,
-  NAVIGATION_ACTION,
-} from '../../utils';
-import classify from '../../utils/classify';
-import {
-  addTimezoneEndOfDay,
-  addTimezoneStartOfDay,
-  getFormattedDate,
-  getTranslation,
-  isAfter,
-  isSameOrAfter,
-  isSameOrBefore,
-  TIMEZONES,
-} from '../../utils/date-range-picker';
-import {Button} from '../Button';
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '../Card';
-import {Dropdown} from '../Dropdown';
-import {FocusManager} from '../FocusManager';
-import {ClickableIcon, Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
-import {BodySmall, TEXT_COLORS} from '../Text';
-
-import {Calendar} from './Calendar';
-
-import css from './DateRangeWrapper.module.css';
-
-
-type HeaderProps = {
-  date: string;
-  minDate: string;
-  maxDate: string;
-  rangeStartMonth: string;
-  rangeEndMonth: string;
-  nextDisabled: boolean;
-  prevDisabled: boolean;
-  onClickNext: () => void;
-  onClickPrevious: () => void;
-  marker: typeof MARKERS[keyof typeof MARKERS];
-  setMonth: (date: string) => void;
-  t: ((key: string, fallback: string) => string) | null | undefined;
-};
-
-type DateRangeWrapperProps = {
-  dateRange: DateRange;
-  hoverDay: string;
-  minDate: string;
-  maxDate: string;
-  rangeStartMonth: string;
-  rangeEndMonth: string;
-  cardWrapperClass: string | null | undefined;
-  setRangeStartMonth: (arg1: string) => void;
-  setRangeEndMonth: (arg1: string) => void;
-  setTimezone: (arg1: string) => void;
-  timezone: string;
-  onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void;
-  onCancel: () => void;
-  inHoverRange: (day: string) => boolean;
-  hideTimezone: boolean;
-  handlers: {
-    onDayClick: (day: string) => void;
-    onDayHover: (day: string) => void;
-    onMonthNavigate: (
-      marker: typeof MARKERS[keyof typeof MARKERS],
-      action: typeof NAVIGATION_ACTION[keyof typeof NAVIGATION_ACTION],
-    ) => void;
-  };
-  today: string;
-  startDateLabel?: string;
-  endDateLabel?: string;
-  t?: ((key: string, fallback: string) => string) | null | undefined;
-  locale?: string;
-};
-
-const CalendarHeader = (
-  {
-    t,
-    date,
-    marker,
-    minDate,
-    maxDate,
-    setMonth,
-    rangeStartMonth,
-    rangeEndMonth,
-    onClickNext,
-    nextDisabled,
-    prevDisabled,
-    onClickPrevious,
-  }: HeaderProps,
-) => {
-  const availableYears = generateAvailableYears({
-    marker,
-    minDate,
-    maxDate,
-    rangeStartMonth,
-    rangeEndMonth,
-  });
-  const availableMonths = getAvailableMonths({
-    marker,
-    minDate,
-    maxDate,
-    rangeStartMonth,
-    rangeEndMonth,
-    t,
-  });
-  const MONTHS = getMonths(t);
-
-  return (
-    <div className={css.calendarHeader}>
-      <ClickableIcon
-        ariaLabel={getTranslation(t, 'Select Previous Month')}
-        size="small"
-        name="chevron-left"
-        className={classify(css.headerIcon, {
-          [css.disabledIcon]: prevDisabled,
-        })}
-        onClick={() => !prevDisabled && onClickPrevious()}
-        color={prevDisabled ? 'disabled' : 'secondary'}
-      />
-      <Dropdown
-        size="small"
-        disabled={!availableMonths.length || isAfter(minDate, maxDate)}
-        menu={{
-          selectedKeys: [moment.utc(date).month().toString()],
-          options: availableMonths,
-        }}
-        onChange={(event) => {
-// @ts-ignore - TS2345 - Argument of type 'Moment' is not assignable to parameter of type 'string'. | TS2339 - Property 'key' does not exist on type 'ChangeEvent<HTMLInputElement> | MenuOption'.
-          setMonth(getMonthEndDate(moment.utc(date).set('M', event.key)));
-        }}
-        dropdownInputText={MONTHS[moment.utc(date).month()].label}
-        scrollMenuToBottom
-      />
-      <Dropdown
-        disabled={!availableYears.length || isAfter(minDate, maxDate)}
-        menu={{
-          selectedKeys: [moment.utc(date).year().toString()],
-          options: availableYears,
-        }}
-        size="small"
-        onChange={(event) => {
-// @ts-ignore - TS2345 - Argument of type 'Moment' is not assignable to parameter of type 'string'. | TS2339 - Property 'key' does not exist on type 'ChangeEvent<HTMLInputElement> | MenuOption'.
-          setMonth(getMonthEndDate(moment.utc(date).set('y', event.key)));
-        }}
-// @ts-ignore - TS2769 - No overload matches this call.
-        dropdownInputText={moment.utc(date).year()}
-        scrollMenuToBottom
-      />
-      <ClickableIcon
-        size="small"
-        ariaLabel={getTranslation(t, 'Select Next Month')}
-        name="chevron-right"
-        className={classify(css.headerIcon, {
-          [css.disabledIcon]: nextDisabled,
-        })}
-        onClick={() => !nextDisabled && onClickNext()}
-        color={nextDisabled ? 'disabled' : 'secondary'}
-      />
-    </div>
-  );
-};
-
-export const DateRangeWrapper: Flow.AbstractComponent<DateRangeWrapperProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, DateRangeWrapperProps>((
-  {
-    onApply,
-    onCancel,
-    handlers,
-    hoverDay,
-    minDate,
-    maxDate,
-    timezone,
-    dateRange,
-    rangeStartMonth,
-    setTimezone,
-    rangeEndMonth,
-    inHoverRange,
-    setRangeStartMonth,
-    setRangeEndMonth,
-    cardWrapperClass,
-    hideTimezone,
-    today,
-    startDateLabel,
-    endDateLabel,
-    t,
-    locale,
-  }: DateRangeWrapperProps,
-  ref,
-) => {
-  const canNavigateCloser =
-    moment.utc(rangeStartMonth).year() !== moment.utc(rangeEndMonth).year() ||
-    Math.abs(
-      moment.utc(rangeStartMonth).month() - moment.utc(rangeEndMonth).month(),
-    ) > 1;
-
-  const handleApplyClick = () => {
-    const {startDate, endDate} = dateRange;
-    const startDateUTC =
-      startDate && addTimezoneStartOfDay(startDate, timezone);
-    const endDateUTC = endDate && addTimezoneEndOfDay(endDate, timezone);
-    onApply({
-      startDate,
-      endDate,
-      startDateUTC,
-      endDateUTC,
-      timezone,
-    });
-  };
-
-  const {onMonthNavigate} = handlers;
-
-  const commonProps = {
-    inHoverRange,
-    handlers,
-    hoverDay,
-    dateRange,
-    minDate,
-    maxDate,
-    today,
-    t,
-  } as const;
-
-  return (
-    <FocusManager>
-      <Card
-        classNames={{
-          wrapper: classify(css.dateRangeWrapper, cardWrapperClass),
-        }}
-        ref={ref}
-      >
-        <CardHeader className={css.cardHeader}>
-          <BodySmall
-            className={css.selectedDate}
-            color={TEXT_COLORS.secondary}
-          >
-            {`${
-              startDateLabel || getTranslation(t, 'Start Date')
-            }: ${getFormattedDate(
-              MARKERS.DATE_RANGE_START,
-              dateRange,
-              locale,
-            )}`}
-          </BodySmall>
-
-{ /* @ts-ignore - TS2769 - No overload matches this call. */}
-          <Icon
-            name="minus"
-            size={ICON_SIZE.small}
-            type={ICON_TYPE.regular}
-            color={TEXT_COLORS.secondary}
-          />
-
-          <BodySmall
-            className={css.selectedDate}
-            color={TEXT_COLORS.secondary}
-          >
-            {`${
-              endDateLabel || getTranslation(t, 'End Date')
-            }: ${getFormattedDate(
-              MARKERS.DATE_RANGE_END,
-              dateRange,
-              locale,
-            )}`}
-          </BodySmall>
-        </CardHeader>
-
-        <div className={css.calendarMenuContainer}>
-          <CalendarHeader
-            t={t}
-            marker={MARKERS.DATE_RANGE_START}
-            rangeStartMonth={rangeStartMonth}
-            rangeEndMonth={rangeEndMonth}
-            date={rangeStartMonth}
-            setMonth={setRangeStartMonth}
-            nextDisabled={!canNavigateCloser}
-            prevDisabled={isSameOrBefore(rangeStartMonth, minDate, 'month')}
-            minDate={minDate}
-            maxDate={maxDate}
-            onClickNext={() =>
-              onMonthNavigate(
-                MARKERS.DATE_RANGE_START,
-                NAVIGATION_ACTION.NEXT,
-              )
-            }
-            onClickPrevious={() =>
-              onMonthNavigate(
-                MARKERS.DATE_RANGE_START,
-                NAVIGATION_ACTION.PREV,
-              )
-            }
-          />
-          <CalendarHeader
-            t={t}
-            marker={MARKERS.DATE_RANGE_END}
-            rangeStartMonth={rangeStartMonth}
-            rangeEndMonth={rangeEndMonth}
-            date={rangeEndMonth}
-            setMonth={setRangeEndMonth}
-            nextDisabled={isSameOrAfter(rangeEndMonth, maxDate, 'month')}
-            prevDisabled={!canNavigateCloser}
-            minDate={minDate}
-            maxDate={maxDate}
-            onClickNext={() =>
-              onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.NEXT)
-            }
-            onClickPrevious={() =>
-              onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.PREV)
-            }
-          />
-        </div>
-
-        <CardContent className={css.dateRangeCalendars}>
-          <Calendar
-            marker={MARKERS.DATE_RANGE_START}
-            value={rangeStartMonth}
-            {...commonProps}
-          />
-          <div className={css.divider} />
-          <Calendar
-            marker={MARKERS.DATE_RANGE_END}
-            value={rangeEndMonth}
-            {...commonProps}
-          />
-        </CardContent>
-        <CardFooter className={css.cardFooter}>
-          <CardTitle className={css.timezoneDropdownContainer}>
-            {!hideTimezone && (
-              <Dropdown
-                menu={{
-                  selectedKeys: [timezone],
-                  options: getTimezones(t),
-                  allowSearch: true,
-                  virtualization: {
-                    enable: true,
-                  },
-                  staticLabels: {
-                    SEARCH_PLACEHOLDER: `${getTranslation(t, 'Search')}...`,
-                    RESULT: getTranslation(t, 'result'),
-                    RESULTS: getTranslation(t, 'results'),
-                  },
-                }}
-// @ts-ignore - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ readonly 'Pacific/Niue': "(GMT-11:00) Niue"; readonly 'Pacific/Pago_Pago': "(GMT-11:00) Pago Pago"; readonly 'Pacific/Honolulu': "(GMT-10:00) Hawaii Time"; readonly 'Pacific/Rarotonga': "(GMT-10:00) Rarotonga"; ... 247 more ...; readonly 'Pacific/Kiritimati': "(GMT+14:00) Kiritimati"; }'.
-                dropdownInputText={getTranslation(t, TIMEZONES[timezone])}
-                disabled={isAfter(minDate, maxDate)}
-                classNames={{
-                  box: css.timezoneDropdown,
-                }}
-// @ts-ignore - TS2339 - Property 'key' does not exist on type 'ChangeEvent<HTMLInputElement> | MenuOption'.
-                onChange={(event) => setTimezone(event.key)}
-                size="small"
-              />
-            )}
-          </CardTitle>
-          <CardActions>
-            <Button type="ghost" onClick={onCancel} size="small">
-              {getTranslation(t, 'Cancel')}
-            </Button>
-            <Button
-              onClick={handleApplyClick}
-              size="small"
-              disabled={!(dateRange.startDate && dateRange.endDate)}
-            >
-              {getTranslation(t, 'Apply')}
-            </Button>
-          </CardActions>
-        </CardFooter>
-      </Card>
-    </FocusManager>
-  );
-});

package/lib/components/DateRangePicker/Day.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import moment from 'moment';
-
-import classify from '../../utils/classify';
-import {UnstyledButton} from '../Button';
-import {BodyMedium, TEXT_COLORS} from '../Text';
-
-import css from './Day.module.css';
-
-
-type DayProps = {
-  date: string;
-  value: string;
-  filled: boolean;
-  hoverDay: string;
-  outlined: boolean;
-  disabled: boolean;
-  endOfRange: boolean;
-  highlighted: boolean;
-  startOfRange: boolean;
-  onClick: () => void;
-  onHover: () => void;
-};
-
-const getTextColor = (disabled: boolean, filled: boolean) => {
-  if (disabled) {
-    return TEXT_COLORS.disabled;
-  } else if (filled) {
-    return TEXT_COLORS.inversePrimary;
-  } else {
-    return TEXT_COLORS.secondary;
-  }
-};
-
-export const Day = (
-  {
-    date,
-    value,
-    filled,
-    onHover,
-    onClick,
-    disabled,
-    hoverDay,
-    outlined,
-    endOfRange,
-    highlighted,
-    startOfRange,
-  }: DayProps,
-) => (<UnstyledButton
-  tabIndex={disabled ? -1 : 0}
-  className={classify(css.calendarItemButton, {
-    [css.calendarRowItemDisabled]: disabled,
-    [css.calendarRowItemHighlighted]:
-      !disabled && (highlighted || startOfRange || endOfRange),
-  })}
-// @ts-ignore - TS2769 - No overload matches this call.
-  onMouseOver={onHover}
-  onClick={onClick}
-  onKeyUp={onHover}
->
-  <BodyMedium
-// @ts-ignore - TS2769 - No overload matches this call.
-    type="ghost"
-    color={getTextColor(disabled, filled)}
-    className={classify(css.calendarRowItem, {
-      [css.calendarRowItemHover]:
-        !disabled && moment.utc(date).isSame(hoverDay),
-      [css.calendarRowItemFilled]: !disabled && filled,
-      [css.calendarRowItemOutlined]: outlined,
-    })}
-  >
-    {value}
-  </BodyMedium>
-</UnstyledButton>);

package/lib/components/DateRangePicker/index.ts

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