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

package/lib/components/ConditionalWrapper/ConditionalWrapper.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ConditionalWrapper = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const ConditionalWrapper = _ref => {
   let {
     condition,

package/lib/components/ConditionalWrapper/ConditionalWrapper.js.flow

@@ -0,0 +1,16 @@
+// @flow strict
+import * as React from 'react';
+
+
+export type ConditionalWrapperProps = {
+  condition?: boolean,
+  wrapper?: (children: React.Node) => React.Node,
+  children?: React.Node,
+};
+
+export const ConditionalWrapper = ({
+  condition,
+  wrapper,
+  children,
+}: ConditionalWrapperProps): React.Node =>
+  condition ? wrapper?.(children) : children;

package/lib/components/ConditionalWrapper/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export {ConditionalWrapper} from './ConditionalWrapper';

package/lib/components/DateRangePicker/Calendar.js

@@ -13,10 +13,10 @@ var _Day = require("./Day");
 var _CalendarModule = _interopRequireDefault(require("./Calendar.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// $FlowFixMe[untyped-import]
 const Calendar = _ref => {
   let {
     value,
-    // @ts-ignore - TS6133 - 'marker' is declared but its value is never read.
     marker,
     minDate,
     maxDate = (0, _utils.formatIsoDate)(),
@@ -58,9 +58,7 @@ const Calendar = _ref => {
       disabled: minDate && (0, _dateRangePicker.isBefore)(date, minDate) || (0, _dateRangePicker.isAfter)(date, maxDate) || !(0, _dateRangePicker.isSame)(date, value, 'month'),
       endOfRange: isEnd && !isRangeValid,
       highlighted: highlighted && !isRangeValid,
-      startOfRange: isStart && !isRangeValid
-      // @ts-ignore - TS2322 - Type 'number' is not assignable to type 'string'.
-      ,
+      startOfRange: isStart && !isRangeValid,
       value: dateValue.date(),
       hoverDay: hoverDay
     });

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

@@ -0,0 +1,112 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowFixMe[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 {
+  getTranslation,
+  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,
+  t: ?(key: string, fallback: string) => string,
+};
+
+export const Calendar = ({
+  value,
+  marker,
+  minDate,
+  maxDate = formatIsoDate(),
+  handlers,
+  hoverDay,
+  dateRange,
+  inHoverRange,
+  today,
+  t,
+}: CalendarProps): React.Node => (
+  <div className={css.calendar}>
+    <div className={css.calendarRow}>
+      {WEEKDAYS.map((day) => (
+        <BodySmall
+          key={day}
+          className={css.calendarRowItem}
+          color={TEXT_COLORS.tertiary}
+        >
+          {getTranslation(t, 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.js

@@ -14,6 +14,7 @@ var _DateRangeWrapper = require("./DateRangeWrapper");
 var _DateRangePickerModule = _interopRequireDefault(require("./DateRangePicker.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// $FlowFixMe[untyped-import]
 const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     minDate,

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

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

@@ -15,11 +15,11 @@ var _Dropdown = require("../Dropdown");
 var _FocusManager = require("../FocusManager");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
-var _Calendar = require("./Calendar");
+var _Calendar = require("./Calendar.js");
 var _DateRangeWrapperModule = _interopRequireDefault(require("./DateRangeWrapper.module.css"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // $FlowFixMe[untyped-import]
 const CalendarHeader = _ref => {
   let {
     t,
@@ -70,7 +70,6 @@ const CalendarHeader = _ref => {
       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((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', event.key)));
     },
     dropdownInputText: MONTHS[_moment.default.utc(date).month()].label,
@@ -83,11 +82,8 @@ const CalendarHeader = _ref => {
     },
     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((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('y', event.key)));
-    }
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    },
     dropdownInputText: _moment.default.utc(date).year(),
     scrollMenuToBottom: true
   }), /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
@@ -227,16 +223,12 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
         RESULT: (0, _dateRangePicker.getTranslation)(t, 'result'),
         RESULTS: (0, _dateRangePicker.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: (0, _dateRangePicker.getTranslation)(t, _dateRangePicker.TIMEZONES[timezone]),
     disabled: (0, _dateRangePicker.isAfter)(minDate, maxDate),
     classNames: {
       box: _DateRangeWrapperModule.default.timezoneDropdown
-    }
-    // @ts-ignore - TS2339 - Property 'key' does not exist on type 'ChangeEvent<HTMLInputElement> | MenuOption'.
-    ,
+    },
     onChange: event => setTimezone(event.key),
     size: "small"
   })), /*#__PURE__*/React.createElement(_Card.CardActions, null, /*#__PURE__*/React.createElement(_Button.Button, {