@spaced-out/ui-design-system 0.3.38-beta.0 → 0.3.39-beta.0

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

@@ -0,0 +1,119 @@
+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, SubTitleExtraSmall, 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;
+};
+
+const getFormattedDate = (marker: string, dateRange: DateRange) => {
+  const {startDate, endDate} = dateRange;
+
+  switch (marker) {
+    case MARKERS.DATE_RANGE_START:
+      return startDate
+        ? moment.utc(startDate).format('MMMM D, YYYY')
+        : 'Start Date';
+
+    default:
+      return endDate ? moment.utc(endDate).format('MMMM D, YYYY') : 'End Date';
+  }
+};
+
+export const Calendar = ({
+  value,
+  marker,
+  minDate,
+  maxDate = formatIsoDate(),
+  handlers,
+  hoverDay,
+  dateRange,
+  inHoverRange,
+  today,
+}: CalendarProps): React.ReactNode => (
+  <div className={css.calendar}>
+    <SubTitleExtraSmall
+      className={css.selectedDate}
+      color={TEXT_COLORS.secondary}
+    >
+      {getFormattedDate(marker, dateRange)}
+    </SubTitleExtraSmall>
+
+    <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

@@ -0,0 +1,196 @@
+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

@@ -0,0 +1,311 @@
+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,
+  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} from '../Icon';
+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;
+};
+
+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,
+    }: 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}>
+            <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)
+              }
+            />
+          </CardHeader>
+          <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>
+            <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

@@ -0,0 +1,70 @@
+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

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