@spaced-out/ui-design-system 0.3.45 → 0.3.47-beta.0

package/lib/components/DateRangePicker/Calendar.d.ts

@@ -1,97 +0,0 @@
-import {$Values} from 'utility-types';
-import * as React from 'react';
-// @ts-expect-error[untyped-import]
-import moment from 'moment';
-import type {DateRange} from '../../types';
-import {
-  formatIsoDate,
-  getDaysInMonth,
-  inDateRange,
-  isEndOfRange,
-  isStartDateEndDateSame,
-  isStartOfRange,
-  MARKERS,
-  NAVIGATION_ACTION,
-  WEEKDAYS,
-} from '../../utils';
-import {isAfter, isBefore, isSame} from '../../utils/date-range-picker';
-import {BodySmall, TEXT_COLORS} from '../Text';
-import {Day} from './Day';
-import css from './Calendar.module.css';
-type CalendarProps = {
-  value: string;
-  marker: $Values<typeof MARKERS>;
-  minDate?: string;
-  maxDate?: string;
-  hoverDay: string;
-  dateRange: DateRange;
-  inHoverRange: (day: string) => boolean;
-  handlers: {
-    onDayClick: (day: string) => void;
-    onDayHover: (day: string) => void;
-    onMonthNavigate: (
-      marker: $Values<typeof MARKERS>,
-      action: $Values<typeof NAVIGATION_ACTION>,
-    ) => void;
-  };
-  today: string;
-};
-export const Calendar = ({
-  value,
-  marker,
-  minDate,
-  maxDate = formatIsoDate(),
-  handlers,
-  hoverDay,
-  dateRange,
-  inHoverRange,
-  today,
-}: CalendarProps): React.ReactNode => (
-  <div className={css.calendar}>
-    <div className={css.calendarRow}>
-      {WEEKDAYS.map((day) => (
-        <BodySmall
-          key={day}
-          className={css.calendarRowItem}
-          color={TEXT_COLORS.tertiary}
-        >
-          {day}
-        </BodySmall>
-      ))}
-    </div>
-
-    {getDaysInMonth(value).map((week, index) => (
-      <div key={week[index]} className={css.calendarRow}>
-        {week.map((date: string) => {
-          const isRangeValid = isStartDateEndDateSame(dateRange);
-          const isStart = isStartOfRange(dateRange, date);
-          const isEnd = isEndOfRange(dateRange, date);
-          const highlighted =
-            inDateRange(dateRange, date) || inHoverRange(date);
-          const {onDayClick, onDayHover} = handlers;
-          const dateValue = moment.utc(date);
-          return (
-            <Day
-              key={date}
-              date={date}
-              filled={isStart || isEnd}
-              onClick={() => onDayClick(date)}
-              onHover={() => onDayHover(date)}
-              outlined={isSame(date, today, 'd')}
-              disabled={
-                (minDate && isBefore(date, minDate)) ||
-                isAfter(date, maxDate) ||
-                !isSame(date, value, 'month')
-              }
-              endOfRange={isEnd && !isRangeValid}
-              highlighted={highlighted && !isRangeValid}
-              startOfRange={isStart && !isRangeValid}
-              value={dateValue.date()}
-              hoverDay={hoverDay}
-            />
-          );
-        })}
-      </div>
-    ))}
-  </div>
-);

package/lib/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,196 +0,0 @@
-import {$ReadOnly, $Values} from 'utility-types';
-import * as React from 'react';
-import {isEmpty} from 'lodash';
-// @ts-expect-error[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?: (arg0: DateRangePickerError) => void;
-  onCancel: () => void;
-  hideTimezone?: boolean;
-  minDate?: string;
-  maxDate?: string;
-};
-export const DateRangePicker: React$AbstractComponent<
-  DateRangePickerProps,
-  HTMLDivElement
-> = React.forwardRef<DateRangePickerProps, HTMLDivElement>(
-  (
-    {
-      minDate,
-      maxDate,
-      onApply,
-      onError,
-      onCancel,
-      classNames,
-      hideTimezone = false,
-      selectedDateRange = {},
-    }: DateRangePickerProps,
-    ref,
-  ): React.ReactNode => {
-    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,
-        }),
-      [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}
-      />
-    );
-  },
-);

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts

@@ -1,347 +0,0 @@
-import {$Values} from 'utility-types';
-import * as React from 'react';
-// @ts-expect-error[untyped-import]
-import moment from 'moment';
-import type {DateRange, DateRangeWithTimezone} from '../../types';
-import {
-  generateAvailableYears,
-  getAvailableMonths,
-  getMonthEndDate,
-  getTimezones,
-  MARKERS,
-  MONTHS,
-  NAVIGATION_ACTION,
-} from '../../utils';
-import classify from '../../utils/classify';
-import {
-  addTimezoneEndOfDay,
-  addTimezoneStartOfDay,
-  getFormattedDate,
-  isAfter,
-  isSameOrAfter,
-  isSameOrBefore,
-} from '../../utils/date-range-picker';
-import {Button} from '../Button';
-import {
-  Card,
-  CardActions,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from '../Card';
-import {Dropdown, SimpleDropdown} 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: $Values<typeof MARKERS>;
-  setMonth: (date: string) => void;
-};
-type DateRangeWrapperProps = {
-  dateRange: DateRange;
-  hoverDay: string;
-  minDate: string;
-  maxDate: string;
-  rangeStartMonth: string;
-  rangeEndMonth: string;
-  cardWrapperClass: string | null | undefined;
-  setRangeStartMonth: (arg0: string) => void;
-  setRangeEndMonth: (arg0: string) => void;
-  setTimezone: (arg0: 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;
-};
-
-const CalendarHeader = ({
-  date,
-  marker,
-  minDate,
-  maxDate,
-  setMonth,
-  rangeStartMonth,
-  rangeEndMonth,
-  onClickNext,
-  nextDisabled,
-  prevDisabled,
-  onClickPrevious,
-}: HeaderProps): React.ReactNode => {
-  const availableYears = generateAvailableYears({
-    marker,
-    minDate,
-    maxDate,
-    rangeStartMonth,
-    rangeEndMonth,
-  });
-  const availableMonths = getAvailableMonths({
-    marker,
-    minDate,
-    maxDate,
-    rangeStartMonth,
-    rangeEndMonth,
-  });
-  return (
-    <div className={css.calendarHeader}>
-      <ClickableIcon
-        ariaLabel="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="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 = 'Start Date',
-      endDateLabel = 'End Date',
-    }: DateRangeWrapperProps,
-    ref,
-  ): React.ReactNode => {
-    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,
-    };
-    return (
-      <FocusManager>
-        <Card
-          classNames={{
-            wrapper: classify(css.dateRangeWrapper, cardWrapperClass),
-          }}
-          ref={ref}
-        >
-          <CardHeader className={css.cardHeader}>
-            <BodySmall
-              className={css.selectedDate}
-              color={TEXT_COLORS.secondary}
-            >
-              {`${startDateLabel}: ${getFormattedDate(
-                MARKERS.DATE_RANGE_START,
-                dateRange,
-              )}`}
-            </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}: ${getFormattedDate(
-                MARKERS.DATE_RANGE_END,
-                dateRange,
-              )}`}
-            </BodySmall>
-          </CardHeader>
-
-          <div className={css.calendarMenuContainer}>
-            <CalendarHeader
-              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
-              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 && (
-                <SimpleDropdown
-                  options={getTimezones()}
-                  disabled={isAfter(minDate, maxDate)}
-                  classNames={{
-                    box: css.timezoneDropdown,
-                  }}
-                  selectedKeys={[timezone]}
-                  onChange={(event) => setTimezone(event.key)}
-                  size="small"
-                  menuVirtualization={{
-                    enable: true,
-                  }}
-                  allowSearch
-                />
-              )}
-            </CardTitle>
-            <CardActions>
-              <Button type="ghost" onClick={onCancel} size="small">
-                Cancel
-              </Button>
-              <Button
-                onClick={handleApplyClick}
-                size="small"
-                disabled={!(dateRange.startDate && dateRange.endDate)}
-              >
-                Apply
-              </Button>
-            </CardActions>
-          </CardFooter>
-        </Card>
-      </FocusManager>
-    );
-  },
-);

package/lib/components/DateRangePicker/Day.d.ts

@@ -1,70 +0,0 @@
-import * as React from 'react';
-// @ts-expect-error[untyped-import]
-import moment from 'moment';
-// @ts-expect-error[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.ReactNode => (
-  <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.d.ts

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