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

package/lib/components/SubMenu/SubMenuItem.js

@@ -53,9 +53,7 @@ const SubMenuItemBadges = _ref3 => {
 };
 exports.SubMenuItemBadges = SubMenuItemBadges;
 SubMenuItemBadges.displayName = 'SubMenuItemBadges';
-const SubMenuItemAction = exports.SubMenuItemAction = /*#__PURE__*/React.forwardRef((_ref4, ref
-// @ts-ignore - TS2322 - Type 'ForwardedRef<HTMLElement>' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
-) => {
+const SubMenuItemAction = exports.SubMenuItemAction = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     children,
     className,
@@ -93,12 +91,8 @@ const SubMenuItem = exports.SubMenuItem = /*#__PURE__*/React.forwardRef((_ref5,
     if (childrenArray.length) {
       const nodes = [];
       for (const child of childrenArray) {
-        // @ts-ignore - TS2339 - Property 'type' does not exist on type 'string | number | bigint | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>'.
         if (child?.type?.displayName === comp) {
-          nodes.push(
-          /*#__PURE__*/
-          // @ts-ignore - TS2769 - No overload matches this call.
-          React.cloneElement(child, {
+          nodes.push(/*#__PURE__*/React.cloneElement(child, {
             selected,
             disabled
           }));
@@ -114,13 +108,9 @@ const SubMenuItem = exports.SubMenuItem = /*#__PURE__*/React.forwardRef((_ref5,
       [_SubMenuModule.default.disabled]: disabled
     }, classNames?.wrapper),
     onKeyDown: onKeyDownHandler,
-    onClick: onChangeHandler
-    // @ts-ignore - TS2322 - Type 'string | number' is not assignable to type 'number | undefined'.
-    ,
+    onClick: onChangeHandler,
     tabIndex: disabled ? '-1' : 0,
-    disabled: disabled
-    // @ts-ignore - TS2322 - Type 'ForwardedRef<HTMLElement>' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
-    ,
+    disabled: disabled,
     ref: ref
   }), /*#__PURE__*/React.createElement("div", {
     className: _SubMenuModule.default.menuIconName

package/lib/components/SubMenu/SubMenuItem.js.flow

@@ -0,0 +1,170 @@
+//@flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {IconProps} from '../Icon';
+import {Icon} from '../Icon';
+import type {TextProps} from '../Text';
+import {ButtonTextMedium, TEXT_COLORS} from '../Text';
+import {Truncate} from '../Truncate';
+
+import css from './SubMenu.module.css';
+
+
+export const SubMenuItemIcon = ({
+  className,
+  ...props
+}: IconProps): React.Node => (
+  <Icon
+    {...props}
+    size="small"
+    color={TEXT_COLORS.inverseSecondary}
+    className={classify(css.menuIcon, className)}
+  />
+);
+
+SubMenuItemIcon.displayName = 'SubMenuItemIcon';
+
+export const SubMenuItemText = ({
+  children,
+  className,
+  ...props
+}: TextProps): React.Node => (
+  <ButtonTextMedium
+    {...props}
+    className={classify(css.subMenuItemText, className)}
+    color={TEXT_COLORS.inversePrimary}
+  >
+    <Truncate showFullTextOnHover={true}>{children}</Truncate>
+  </ButtonTextMedium>
+);
+SubMenuItemText.displayName = 'SubMenuItemText';
+
+export type SubMenuItemBadgesProps = {
+  children?: React.Node,
+  className?: string,
+  ...
+};
+export const SubMenuItemBadges = ({
+  children,
+  className,
+  ...props
+}: SubMenuItemBadgesProps): React.Node => (
+  <div {...props} className={classify(css.subMenuItemBadges, className)}>
+    {children}
+  </div>
+);
+SubMenuItemBadges.displayName = 'SubMenuItemBadges';
+
+export type SubMenuItemActionProps = {
+  isMenuItemSelected?: boolean,
+  children?: React.Node,
+  color?: ColorTypes,
+  className?: string,
+  ...
+};
+export const SubMenuItemAction: React$AbstractComponent<
+  SubMenuItemActionProps,
+  HTMLElement,
+> = React.forwardRef(
+  (
+    {children, className, ...props}: SubMenuItemActionProps,
+    ref,
+  ): React.Node => (
+    <div {...props} className={classify(css.actionItems, className)} ref={ref}>
+      {children}
+    </div>
+  ),
+);
+SubMenuItemAction.displayName = 'SubMenuItemAction';
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type SubMenuItemProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  selectedMenuKey?: string,
+  disabled?: boolean,
+  onChange?: (selectedMenuKey: string) => mixed,
+  menuKey: string,
+  ...
+};
+
+export const SubMenuItem: React$AbstractComponent<
+  SubMenuItemProps,
+  HTMLElement,
+> = React.forwardRef(
+  (
+    {
+      children,
+      selectedMenuKey,
+      disabled,
+      classNames,
+      onChange,
+      menuKey,
+      ...props
+    }: SubMenuItemProps,
+    ref,
+  ): React.Node => {
+    const onChangeHandler = () => {
+      if (!disabled) {
+        onChange?.(menuKey);
+      }
+    };
+
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onChangeHandler();
+      }
+    };
+
+    const selected = selectedMenuKey === menuKey;
+
+    const getNamedComp = (comp: string) => {
+      const childrenArray = React.Children.toArray(children);
+      if (childrenArray.length) {
+        const nodes: React.Node[] = [];
+        for (const child of childrenArray) {
+          if (child?.type?.displayName === comp) {
+            nodes.push(
+              React.cloneElement(child, {
+                selected,
+                disabled,
+              }),
+            );
+          }
+        }
+        return nodes.length > 1 ? nodes : nodes[0];
+      }
+      return null;
+    };
+
+    return (
+      <div
+        {...props}
+        className={classify(
+          css.menuItem,
+          {
+            [css.selected]: selected,
+            [css.disabled]: disabled,
+          },
+          classNames?.wrapper,
+        )}
+        onKeyDown={onKeyDownHandler}
+        onClick={onChangeHandler}
+        tabIndex={disabled ? '-1' : 0}
+        disabled={disabled}
+        ref={ref}
+      >
+        <div className={css.menuIconName}>
+          {getNamedComp('SubMenuItemIcon')}
+          {getNamedComp('SubMenuItemText')}
+          {getNamedComp('SubMenuItemBadges')}
+        </div>
+        {getNamedComp('SubMenuItemAction')}
+      </div>
+    );
+  },
+);

package/lib/components/SubMenu/SubMenuLink.js

@@ -41,12 +41,8 @@ const SubMenuLink = exports.SubMenuLink = /*#__PURE__*/React.forwardRef((_ref, r
       [_SubMenuModule.default.highlightedMenu]: isMenuLinkSelected
     }),
     onKeyDown: onKeyDownHandler,
-    onClick: onChangeHandler
-    // @ts-ignore - TS2322 - Type 'ForwardedRef<HTMLElement>' is not assignable to type 'Ref<HTMLDivElement> | undefined'.
-    ,
-    ref: ref
-    // @ts-ignore - TS2322 - Type 'string | number' is not assignable to type 'number | undefined'.
-    ,
+    onClick: onChangeHandler,
+    ref: ref,
     tabIndex: disabled ? '-1' : 0
   }, /*#__PURE__*/React.createElement("div", {
     className: _SubMenuModule.default.groupTitleWrapper

package/lib/components/SubMenu/SubMenuLink.js.flow

@@ -0,0 +1,89 @@
+//@flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import type {IconSize, IconType} from '../Icon';
+import {Icon} from '../Icon';
+import {ButtonTextMedium, TEXT_COLORS} from '../Text';
+import {Truncate} from '../Truncate';
+
+import css from './SubMenu.module.css';
+
+
+export type SubMenuLinkProps = {
+  menuLinkTitle?: string,
+  menuLinkIcon: string,
+  menuLinkIconSize?: IconSize,
+  menuLinkIconType?: IconType,
+  menuKey: string,
+  selectedMenuKey?: string,
+  disabled?: boolean,
+  onChange?: (selectedMenuLinkKey: string) => mixed,
+  ...
+};
+
+export const SubMenuLink: React$AbstractComponent<
+  SubMenuLinkProps,
+  HTMLElement,
+> = React.forwardRef(
+  (
+    {
+      menuLinkTitle,
+      menuLinkIcon,
+      menuLinkIconSize = 'medium',
+      menuLinkIconType,
+      menuKey,
+      selectedMenuKey,
+      disabled = false,
+      onChange,
+    }: SubMenuLinkProps,
+    ref,
+  ): React.Node => {
+    const isMenuLinkSelected = selectedMenuKey === menuKey;
+
+    const onChangeHandler = () => {
+      if (!disabled) {
+        onChange && onChange(menuKey);
+      }
+    };
+
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onChangeHandler();
+      }
+    };
+
+    return (
+      <div className={classify(css.subMenuLinkWrapper)}>
+        <div
+          className={classify(css.subMenuLink, {
+            [css.highlightedMenu]: isMenuLinkSelected,
+          })}
+          onKeyDown={onKeyDownHandler}
+          onClick={onChangeHandler}
+          ref={ref}
+          tabIndex={disabled ? '-1' : 0}
+        >
+          <div className={css.groupTitleWrapper}>
+            {!!menuLinkIcon && (
+              <Icon
+                color={TEXT_COLORS.inverseSecondary}
+                name={menuLinkIcon}
+                size={menuLinkIconSize}
+                type={menuLinkIconType}
+                className={css.menuLinkIcon}
+              />
+            )}
+            <ButtonTextMedium
+              color={TEXT_COLORS.inverseSecondary}
+              className={css.menuLinkTitle}
+            >
+              <Truncate>{menuLinkTitle}</Truncate>
+            </ButtonTextMedium>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);

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

@@ -0,0 +1,6 @@
+// @flow strict
+
+export * from './SubMenu';
+export * from './SubMenuGroup';
+export * from './SubMenuItem';
+export * from './SubMenuLink';

package/lib/components/Table/Cell.js

@@ -14,9 +14,9 @@ var _Text = require("../Text");
 var _TableModule = _interopRequireDefault(require("./Table.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); }
-const Cells = (_ref // @ts-ignore - TS2322 - Type '{ children: ReactNode; truncatedText?: ReactNode; onClick?: ((arg1: SyntheticEvent<HTMLElement, Event>) => unknown) | null | undefined; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-) => {
+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); } // $FlowIssue[nonstrict-import] date-fns
+// $FlowIssue[nonstrict-import] date-fns
+const Cells = _ref => {
   let {
     children,
     className,

package/lib/components/Table/Cell.js.flow

@@ -0,0 +1,122 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowIssue[nonstrict-import] date-fns
+import formatDistance from 'date-fns/formatDistance';
+// $FlowIssue[nonstrict-import] date-fns
+import parseISO from 'date-fns/parseISO';
+
+import {classify} from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {Avatar} from '../Avatar';
+import {BodyMedium, BodySmall, TEXT_COLORS} from '../Text';
+
+import css from './Table.module.css';
+
+
+type CellsProps = {
+  children?: React.Node,
+  className?: ?string,
+  truncatedText?: React.Node,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+};
+
+export const Cells = ({
+  children,
+  className,
+  ...rest
+}: CellsProps): React.Element<'div'> => (
+  <div className={classify(css.row, className)} {...rest}>
+    {children}
+  </div>
+);
+
+export const Cell = ({
+  children,
+  className,
+}: CellsProps): React.Element<'div'> => (
+  <div className={classify(css.cell, className)}>{children}</div>
+);
+
+export const BasicSingleCell: ClassNameComponent<'td'> = makeClassNameComponent(
+  css.defaultSingleCell,
+  'td',
+);
+export const BasicDoubleCell: ClassNameComponent<'td'> = makeClassNameComponent(
+  css.defaultDoubleCell,
+  'td',
+);
+
+export const PaddedContentCell: ClassNameComponent<'td'> =
+  makeClassNameComponent(css.singleContentCell, 'td');
+
+export const PaddedDoubleContentCell: ClassNameComponent<'td'> =
+  makeClassNameComponent(css.doubleContentCell, 'td');
+
+export const SingleCell = ({
+  title,
+  className,
+}: {
+  title: string,
+  icon?: React.Node,
+  className?: string,
+}): React.Node => (
+  <PaddedContentCell className={className}>
+    <BodyMedium className={css.paddedTitleBlock}>{title}</BodyMedium>
+  </PaddedContentCell>
+);
+
+export const DoubleCell = ({
+  title,
+  subtitle,
+  className,
+}: {
+  title: React.Node,
+  subtitle?: React.Node,
+  className?: string,
+}): React.Node => (
+  <PaddedDoubleContentCell className={className}>
+    <div className={css.paddedTitleBlock}>
+      <BodyMedium className={css.doubleTitle}>{title}</BodyMedium>
+      <BodySmall color={TEXT_COLORS.tertiary} className={css.doubleSubtitle}>
+        {subtitle ?? ''}
+      </BodySmall>
+    </div>
+  </PaddedDoubleContentCell>
+);
+
+export const DateCell = ({
+  date,
+  className,
+}: {
+  date: string | Date,
+  className?: string,
+}): React.Node => {
+  const parsedDate: Date = typeof date === 'object' ? date : parseISO(date);
+  return (
+    <DoubleCell
+      title={`${parsedDate.getMonth() + 1} / ${
+        parsedDate.getDate() + 1
+      } / ${parsedDate.getFullYear()}`}
+      subtitle={`${formatDistance(parsedDate, new Date())} ago`}
+      className={className}
+    />
+  );
+};
+
+export const Monogram = ({initials}: {initials: string}): React.Node => (
+  <Avatar size="small" text={initials} />
+);
+
+export const MonogramCell = ({
+  initials,
+  className,
+}: {
+  initials: string,
+  className?: string,
+}): React.Node => (
+  <PaddedContentCell className={className}>
+    <Monogram initials={initials} />
+  </PaddedContentCell>
+);

package/lib/components/Table/DefaultRow.js

@@ -22,7 +22,6 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 // Note that b/c extras is often optional, you will need to explicitly include
 // `invariant(extras, 'extras exists');` in order to pull values out of
 // extras (flow will remind you that it is of type `U | void`)
-
 const BasicRow = exports.BasicRow = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultRow, 'tr');
 const EmptyRow = _ref => {
   let {
@@ -50,6 +49,7 @@ const EmptyRow = _ref => {
 // initially stubbing out a design, the idea is you just avoid
 // passing in a Row component and instead let this render out
 // all the fields in the header in the short term
+//
 // Using the default row has the benefit that mismatches between
 // header and entries _will_ error out even though there are the
 // suppressions below

package/lib/components/Table/DefaultRow.js.flow

@@ -0,0 +1,152 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {Checkbox} from '../Checkbox';
+import {CircularLoader} from '../CircularLoader';
+import {BodyLarge, TEXT_COLORS} from '../Text';
+
+import {PaddedContentCell, SingleCell} from './Cell';
+import type {GenericHeaderItems} from './DefaultTableHeader';
+import type {GenericObject} from './Table';
+
+import css from './Table.module.css';
+
+
+type ClassNames = $ReadOnly<{tableRow?: string, checkbox?: string}>;
+
+// When using a custom Row prop, you need to create a component that looks like
+//     MyRow = (props: TableRowProps<Entries, Extras>): React.Node => {...}
+// otherwise flow will complain.
+// Note that b/c extras is often optional, you will need to explicitly include
+// `invariant(extras, 'extras exists');` in order to pull values out of
+// extras (flow will remind you that it is of type `U | void`)
+export type TableRowProps<T, U> = {
+  data: T,
+  extras?: U,
+  sortedKeys?: string[],
+  headers?: GenericHeaderItems<T, U>,
+  selected?: boolean,
+  disabled?: boolean,
+};
+
+export type TableRow<T, U> = React.ComponentType<TableRowProps<T, U>>;
+
+export const BasicRow: ClassNameComponent<'tr'> = makeClassNameComponent(
+  css.defaultRow,
+  'tr',
+);
+
+type EmptyRowProps = {
+  emptyText?: React.Node,
+  isLoading?: boolean,
+  headersLength: number,
+  customLoader?: React.Node,
+};
+
+export const EmptyRow = ({
+  isLoading,
+  emptyText,
+  headersLength = 0,
+  customLoader,
+}: EmptyRowProps): React.Element<'tr'> => (
+  <tr>
+    <td colSpan={headersLength}>
+      <div className={css.emptyRow}>
+        {isLoading ? (
+          customLoader ? (
+            customLoader
+          ) : (
+            <div className={css.defaultLoader}>
+              {' '}
+              <CircularLoader colorToken="colorFillPrimary" size="large" />
+            </div>
+          )
+        ) : (
+          emptyText || (
+            <BodyLarge
+              color={TEXT_COLORS.secondary}
+              className={css.defaultEmptyText}
+            >
+              Nothing to display here.
+            </BodyLarge>
+          )
+        )}
+      </div>
+    </td>
+  </tr>
+);
+
+// This is a fallback row we use to render a table when
+// initially stubbing out a design, the idea is you just avoid
+// passing in a Row component and instead let this render out
+// all the fields in the header in the short term
+//
+// Using the default row has the benefit that mismatches between
+// header and entries _will_ error out even though there are the
+// suppressions below
+export function DefaultRow<T: GenericObject, U: GenericObject>({
+  data,
+  extras,
+  headers,
+  selected,
+  onSelect,
+  classNames,
+  disabled,
+}: {
+  data: T,
+  extras?: U,
+  headers: GenericHeaderItems<T, U>,
+  selected?: boolean,
+  // value dependent on checkbox checked value
+  onSelect?: ({value: string, checked: boolean}) => mixed,
+  classNames?: ClassNames,
+  disabled?: boolean,
+}): React.Node {
+  return (
+    <BasicRow
+      className={classify(
+        selected ? css.defaultSelectedBodyRow : css.defaultBodyRow,
+        classNames?.tableRow,
+      )}
+    >
+      {selected != null && (
+        <PaddedContentCell
+          className={classify(css.checkbox, classNames?.checkbox)}
+        >
+          <Checkbox
+            checked={selected ? true : false}
+            onChange={onSelect}
+            disabled={disabled}
+            ariaLabel="Select row"
+          />
+        </PaddedContentCell>
+      )}
+      {headers.map((item, index) => {
+        const {key, render: Renderer, className: cellClassName, sticky} = item;
+        const value = data[key];
+        return Renderer ? (
+          <Renderer
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            data={data}
+            extras={extras}
+            selected={selected}
+            disabled={disabled}
+            className={classify({[css.stickyCell]: sticky})}
+          />
+        ) : (
+          <SingleCell
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            title={String(value)}
+            className={classify(cellClassName, {[css.stickyCell]: sticky})}
+          />
+        );
+      })}
+    </BasicRow>
+  );
+}

package/lib/components/Table/DefaultTableHeader.js

@@ -15,8 +15,6 @@ var _DefaultRow = require("./DefaultRow");
 var _TableModule = _interopRequireDefault(require("./Table.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); }
-// @ts-ignore - TS2344 - Type 'T' does not satisfy the constraint 'GenericObject'.
-
 const BasicHeadCell = exports.BasicHeadCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultHeaderCell, 'th');
 const BasicTableHead = exports.BasicTableHead = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTableHead, 'thead');
 const SortIcon = _ref => {
@@ -118,16 +116,11 @@ function DefaultTableHeader(props) {
       className: _TableModule.default.headerSubtext
     }, subtext && subtext)), (sortable || filterIcon != null) && /*#__PURE__*/React.createElement("div", {
       className: _TableModule.default.headerIconContainer
-    }, columnSortable &&
-    /*#__PURE__*/
-    // @ts-ignore - TS2786 - 'SortIcon' cannot be used as a JSX component.
-    React.createElement(SortIcon, {
+    }, columnSortable && /*#__PURE__*/React.createElement(SortIcon, {
       color: _Text.TEXT_COLORS.secondary,
       className: (0, _classify.default)(_TableModule.default.sortArrow, {
         [_TableModule.default.selectedSortArrow]: sortKey === key
-      })
-      // @ts-ignore - TS2322 - Type 'string' is not assignable to type 'SortDirection'.
-      ,
+      }),
       sortDirection: columnSortDirection
     }), filterIcon != null && /*#__PURE__*/React.createElement("div", {
       className: _TableModule.default.filterIcon