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

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';

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

@@ -1,228 +0,0 @@
-// @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>
-);

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

@@ -1,2 +0,0 @@
-//@flow strict
-export * from './Dialog';