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

package/lib/components/DateRangePicker/DateRangePicker.js.flow

@@ -1,214 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import {isEmpty} from 'lodash';
-// $FlowFixMe[untyped-import]
-import moment from 'moment-timezone';
-
-import type {
-  DateRange,
-  DateRangePickerError,
-  DateRangeWithTimezone,
-} from '../../types';
-import {
-  getAddedDate,
-  getMonthEndDate,
-  getSubtractedDate,
-  getValidDates,
-  MARKERS,
-  NAVIGATION_ACTION,
-} from '../../utils';
-import classify from '../../utils/classify';
-import {
-  getTodayInTimezone,
-  isAfter,
-  isBefore,
-  isBetween,
-  isSame,
-  isSameOrAfter,
-  isSameOrBefore,
-} from '../../utils/date-range-picker';
-
-import {DateRangeWrapper} from './DateRangeWrapper';
-
-import css from './DateRangePicker.module.css';
-
-
-type ClassNames = $ReadOnly<{wrapper?: string}>;
-
-export type DateRangePickerProps = {
-  classNames?: ClassNames,
-  selectedDateRange?: DateRangeWithTimezone,
-  onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void,
-  onError?: (DateRangePickerError) => void,
-  onCancel: () => void,
-  hideTimezone?: boolean,
-  minDate?: string,
-  maxDate?: string,
-  startDateLabel?: string,
-  endDateLabel?: string,
-  t?: ?(key: string, fallback: string) => string,
-  locale?: string,
-};
-
-export const DateRangePicker: React$AbstractComponent<
-  DateRangePickerProps,
-  HTMLDivElement,
-> = React.forwardRef<DateRangePickerProps, HTMLDivElement>(
-  (
-    {
-      minDate,
-      maxDate,
-      onApply,
-      onError,
-      onCancel,
-      classNames,
-      hideTimezone = false,
-      selectedDateRange = {},
-      startDateLabel,
-      endDateLabel,
-      t,
-      locale,
-    }: DateRangePickerProps,
-    ref,
-  ): React.Node => {
-    const localTimezone = moment.tz.guess();
-    const {timezone: inputTimezone = ''} = selectedDateRange;
-
-    const validTimezone = isEmpty(inputTimezone)
-      ? localTimezone
-      : inputTimezone;
-
-    const [today, setToday] = React.useState(() =>
-      getTodayInTimezone(validTimezone),
-    );
-
-    const {validMinDate, validMaxDate, validDateRange} = React.useMemo(
-      () =>
-        getValidDates({
-          selectedDateRange,
-          minDate,
-          maxDate,
-          today,
-          onError,
-          t,
-        }),
-      [today],
-    );
-
-    const {startDate, endDate} = validDateRange;
-    const validRangeEndMonth = endDate
-      ? getMonthEndDate(endDate)
-      : getMonthEndDate(today);
-    const validRangeStartMonth =
-      startDate && endDate && !isSame(startDate, endDate, 'month')
-        ? getMonthEndDate(startDate)
-        : getMonthEndDate(getSubtractedDate(validRangeEndMonth, 1, 'M'));
-
-    const [dateRange, setDateRange] = React.useState<DateRange>(validDateRange);
-    const [timezone, setTimezone] = React.useState<string>(validTimezone);
-    const [hoverDay, setHoverDay] = React.useState<string>('');
-    const [rangeStartMonth, setRangeStartMonth] =
-      React.useState<string>(validRangeStartMonth);
-    const [rangeEndMonth, setRangeEndMonth] =
-      React.useState<string>(validRangeEndMonth);
-
-    const setRangeStartMonthValidated = (date: string) => {
-      if (isSameOrAfter(date, validMinDate) && isBefore(date, rangeEndMonth)) {
-        setRangeStartMonth(date);
-      } else {
-        setRangeStartMonth(getMonthEndDate(validMinDate));
-      }
-    };
-    const setRangeEndMonthValidated = (date: string) => {
-      if (
-        isSameOrBefore(date, validMaxDate) &&
-        isAfter(date, rangeStartMonth)
-      ) {
-        setRangeEndMonth(date);
-      } else {
-        setRangeEndMonth(getMonthEndDate(validMaxDate));
-      }
-    };
-
-    const onMonthNavigate = (
-      marker: $Values<typeof MARKERS>,
-      action: $Values<typeof NAVIGATION_ACTION>,
-    ) => {
-      if (marker === MARKERS.DATE_RANGE_START) {
-        const newMonth =
-          action === NAVIGATION_ACTION.NEXT
-            ? getMonthEndDate(getAddedDate(rangeStartMonth, 1, 'M'))
-            : getMonthEndDate(getSubtractedDate(rangeStartMonth, 1, 'M'));
-
-        setRangeStartMonthValidated(newMonth);
-      } else {
-        const newMonth =
-          action === NAVIGATION_ACTION.NEXT
-            ? getMonthEndDate(getAddedDate(rangeEndMonth, 1, 'M'))
-            : getMonthEndDate(getSubtractedDate(rangeEndMonth, 1, 'M'));
-
-        setRangeEndMonthValidated(newMonth);
-      }
-    };
-
-    const onDayClick = (day: string) => {
-      const {startDate, endDate} = dateRange;
-      if (startDate && !endDate && isSameOrAfter(day, startDate)) {
-        setDateRange({startDate, endDate: day});
-      } else {
-        setDateRange({startDate: day});
-      }
-      setHoverDay(day);
-    };
-
-    const inHoverRange = (day: string): boolean => {
-      const {startDate, endDate} = dateRange;
-      return Boolean(
-        startDate &&
-          !endDate &&
-          hoverDay &&
-          isAfter(hoverDay, startDate) &&
-          isBetween(day, startDate, hoverDay),
-      );
-    };
-
-    const handlers = {
-      onDayClick,
-      onDayHover: setHoverDay,
-      onMonthNavigate,
-    };
-
-    const handleTimeZone = (newTimezone) => {
-      setToday(getTodayInTimezone(newTimezone));
-      setTimezone(newTimezone);
-    };
-
-    return (
-      <DateRangeWrapper
-        ref={ref}
-        minDate={validMinDate}
-        maxDate={validMaxDate}
-        onApply={onApply}
-        handlers={handlers}
-        hoverDay={hoverDay}
-        onCancel={onCancel}
-        timezone={timezone}
-        dateRange={dateRange}
-        setTimezone={handleTimeZone}
-        rangeStartMonth={rangeStartMonth}
-        rangeEndMonth={rangeEndMonth}
-        inHoverRange={inHoverRange}
-        setRangeStartMonth={setRangeStartMonthValidated}
-        setRangeEndMonth={setRangeEndMonthValidated}
-        hideTimezone={hideTimezone}
-        cardWrapperClass={classify(css.container, classNames?.wrapper)}
-        today={today}
-        startDateLabel={startDateLabel}
-        endDateLabel={endDateLabel}
-        t={t}
-        locale={locale}
-      />
-    );
-  },
-);

package/lib/components/DateRangePicker/DateRangeWrapper.js.flow

@@ -1,384 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-// $FlowFixMe[untyped-import]
-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.js';
-
-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: $Values<typeof MARKERS>,
-  setMonth: (date: string) => void,
-  t: ?(key: string, fallback: string) => string,
-};
-
-type DateRangeWrapperProps = {
-  dateRange: DateRange,
-  hoverDay: string,
-  minDate: string,
-  maxDate: string,
-  rangeStartMonth: string,
-  rangeEndMonth: string,
-  cardWrapperClass: ?string,
-  setRangeStartMonth: (string) => void,
-  setRangeEndMonth: (string) => void,
-  setTimezone: (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: $Values<typeof MARKERS>,
-      action: $Values<typeof NAVIGATION_ACTION>,
-    ) => void,
-  },
-  today: string,
-  startDateLabel?: string,
-  endDateLabel?: string,
-  t?: ?(key: string, fallback: string) => string,
-  locale?: string,
-};
-
-const CalendarHeader = ({
-  t,
-  date,
-  marker,
-  minDate,
-  maxDate,
-  setMonth,
-  rangeStartMonth,
-  rangeEndMonth,
-  onClickNext,
-  nextDisabled,
-  prevDisabled,
-  onClickPrevious,
-}: HeaderProps): React.Node => {
-  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) => {
-          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) => {
-          setMonth(getMonthEndDate(moment.utc(date).set('y', event.key)));
-        }}
-        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: React$AbstractComponent<
-  DateRangeWrapperProps,
-  HTMLDivElement,
-> = React.forwardRef<DateRangeWrapperProps, HTMLDivElement>(
-  (
-    {
-      onApply,
-      onCancel,
-      handlers,
-      hoverDay,
-      minDate,
-      maxDate,
-      timezone,
-      dateRange,
-      rangeStartMonth,
-      setTimezone,
-      rangeEndMonth,
-      inHoverRange,
-      setRangeStartMonth,
-      setRangeEndMonth,
-      cardWrapperClass,
-      hideTimezone,
-      today,
-      startDateLabel,
-      endDateLabel,
-      t,
-      locale,
-    }: DateRangeWrapperProps,
-    ref,
-  ): React.Node => {
-    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,
-    };
-
-    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>
-
-            <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'),
-                    },
-                  }}
-                  dropdownInputText={getTranslation(t, TIMEZONES[timezone])}
-                  disabled={isAfter(minDate, maxDate)}
-                  classNames={{
-                    box: css.timezoneDropdown,
-                  }}
-                  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.js.flow

@@ -1,75 +0,0 @@
-// @flow strict
-import * as React from 'react';
-// $FlowFixMe[untyped-import]
-import moment from 'moment';
-
-// $FlowFixMe[untyped-import]
-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): React.Node => (
-  <UnstyledButton
-    tabIndex={disabled ? -1 : 0}
-    className={classify(css.calendarItemButton, {
-      [css.calendarRowItemDisabled]: disabled,
-      [css.calendarRowItemHighlighted]:
-        !disabled && (highlighted || startOfRange || endOfRange),
-    })}
-    onMouseOver={onHover}
-    onClick={onClick}
-    onKeyUp={onHover}
-  >
-    <BodyMedium
-      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.js.flow

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