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

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

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

@@ -12,6 +12,8 @@ var _Text = require("../Text");
 var _DayModule = _interopRequireDefault(require("./Day.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]
+// $FlowFixMe[untyped-import]
 const getTextColor = (disabled, filled) => {
   if (disabled) {
     return _Text.TEXT_COLORS.disabled;
@@ -40,15 +42,11 @@ const Day = _ref => {
     className: (0, _classify.default)(_DayModule.default.calendarItemButton, {
       [_DayModule.default.calendarRowItemDisabled]: disabled,
       [_DayModule.default.calendarRowItemHighlighted]: !disabled && (highlighted || startOfRange || endOfRange)
-    })
-    // @ts-ignore - TS2769 - No overload matches this call.
-    ,
+    }),
     onMouseOver: onHover,
     onClick: onClick,
     onKeyUp: onHover
-  }, /*#__PURE__*/React.createElement(_Text.BodyMedium
-  // @ts-ignore - TS2769 - No overload matches this call.
-  , {
+  }, /*#__PURE__*/React.createElement(_Text.BodyMedium, {
     type: "ghost",
     color: getTextColor(disabled, filled),
     className: (0, _classify.default)(_DayModule.default.calendarRowItem, {

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

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

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

package/lib/components/Dialog/Dialog.js.flow

@@ -0,0 +1,228 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {TEXT_COLORS} from '../../types/typography';
+import classify from '../../utils/classify';
+import {Button} from '../Button';
+import {Icon} from '../Icon';
+import type {ModalProps} from '../Modal';
+import {Modal} from '../Modal';
+
+import css from './Dialog.module.css';
+
+
+type FooterClassNames = $ReadOnly<{
+  wrapper?: string,
+  actions?: string,
+}>;
+
+export const DIALOG_SEMANTIC = Object.freeze({
+  neutral: 'neutral',
+  success: 'success',
+  information: 'information',
+  warning: 'warning',
+  danger: 'danger',
+});
+
+export type DialogSemanticType = $Values<typeof DIALOG_SEMANTIC>;
+
+export type DialogHeaderProps = {
+  children?: React.Node,
+  className?: string,
+};
+
+export type DialogFooterProps = {
+  children?: React.Node,
+  classNames?: FooterClassNames,
+};
+
+export type DialogBodyProps = {
+  children?: React.Node,
+  className?: string,
+};
+
+export type DialogPropsBase = {
+  ...ModalProps,
+};
+
+export type DialogProps = {
+  ...DialogPropsBase,
+  semantic?: DialogSemanticType,
+  iconName?: string,
+};
+
+export type BasicDialogProps = {
+  ...DialogProps,
+  heading?: React.Node,
+  body?: React.Node,
+  confirmText?: string,
+  abortText?: string,
+  handleConfirm?: (event: SyntheticEvent<>) => mixed,
+  handleAbort?: (event: SyntheticEvent<>) => mixed,
+};
+
+const DialogIcon = ({
+  semantic,
+  iconName,
+}: {
+  semantic: DialogSemanticType,
+  iconName: string,
+}) => {
+  switch (semantic) {
+  case DIALOG_SEMANTIC.neutral:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name={iconName ? iconName : 'face-smile'}
+        type="solid"
+      />
+    );
+  case DIALOG_SEMANTIC.success:
+    return (
+      <Icon
+        name={iconName ? iconName : 'circle-check'}
+        color={TEXT_COLORS.success}
+        type="solid"
+      />
+    );
+
+  case DIALOG_SEMANTIC.information:
+    return (
+      <Icon
+        name={iconName ? iconName : 'circle-info'}
+        color={TEXT_COLORS.information}
+        type="solid"
+      />
+    );
+
+  case DIALOG_SEMANTIC.warning:
+    return (
+      <Icon
+        name={iconName ? iconName : 'circle-exclamation'}
+        color={TEXT_COLORS.warning}
+        type="solid"
+      />
+    );
+
+  case DIALOG_SEMANTIC.danger:
+    return (
+      <Icon
+        name={iconName ? iconName : 'shield-exclamation'}
+        color={TEXT_COLORS.danger}
+        type="solid"
+      />
+    );
+
+  default:
+    return (
+      <Icon
+        color={TEXT_COLORS.neutral}
+        name={iconName ? iconName : 'face-smile'}
+        type="solid"
+      />
+    );
+  }
+};
+
+export const DialogHeader = ({
+  children,
+  className,
+}: DialogHeaderProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={classify(css.dialogHeader, className)}>
+        <div className={css.headerContent}>{children}</div>
+      </div>
+    )}
+  </>
+);
+
+export const DialogBody = ({
+  children,
+  className,
+}: DialogBodyProps): React.Node => (
+  <div className={classify(css.dialogBody, className)}>{children}</div>
+);
+
+export const DialogFooter = ({
+  children,
+  classNames,
+}: DialogFooterProps): React.Node => (
+  <>
+    {React.Children.count(children) > 0 && (
+      <div className={classify(css.dialogFooter, classNames?.wrapper)}>
+        <div className={classify(css.dialogFooterActions, classNames?.actions)}>
+          {children}
+        </div>
+      </div>
+    )}
+  </>
+);
+
+export const Dialog = ({
+  children,
+  isOpen = false,
+  hideBackdrop = false,
+  onClose,
+  tapOutsideToClose = false,
+  iconName = '',
+  semantic = 'neutral',
+  classNames,
+  ...restDialogProps
+}: DialogProps): React.Node => (
+  <Modal
+    isOpen={isOpen}
+    onClose={onClose}
+    hideBackdrop={hideBackdrop}
+    tapOutsideToClose={tapOutsideToClose}
+    {...restDialogProps}
+    classNames={{
+      content: classify(css.dialog, classNames?.content),
+      container: classify(classNames?.container),
+      backdrop: classify(classNames?.backdrop),
+    }}
+  >
+    <div className={css.topBlock}>
+      <div
+        className={classify(css.iconContainer, {
+          [css.neutral]: semantic === DIALOG_SEMANTIC.neutral,
+          [css.success]: semantic === DIALOG_SEMANTIC.success,
+          [css.information]: semantic === DIALOG_SEMANTIC.information,
+          [css.warning]: semantic === DIALOG_SEMANTIC.warning,
+          [css.danger]: semantic === DIALOG_SEMANTIC.danger,
+        })}
+      >
+        <DialogIcon semantic={semantic} iconName={iconName} />
+      </div>
+    </div>
+    {children}
+  </Modal>
+);
+
+export const BasicDialog = ({
+  heading,
+  body,
+  confirmText,
+  abortText,
+  handleConfirm,
+  handleAbort,
+  ...restDialogProps
+}: BasicDialogProps): React.Node => (
+  <Dialog {...restDialogProps}>
+    {!!heading && <DialogHeader>{heading}</DialogHeader>}
+    {!!body && <DialogBody>{body}</DialogBody>}
+    <DialogFooter>
+      {!!abortText && (
+        <Button isFluid type="tertiary" onClick={handleAbort}>
+          {abortText}
+        </Button>
+      )}
+      {!!confirmText && (
+        <Button isFluid onClick={handleConfirm}>
+          {confirmText}
+        </Button>
+      )}
+    </DialogFooter>
+  </Dialog>
+);