@spaced-out/ui-design-system 0.0.38 → 0.0.40

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

@@ -0,0 +1,123 @@
+// @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 Row = Cells;
+
+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/Row.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BasicRow = void 0;
+exports.DefaultRow = DefaultRow;
+exports.EmptyRow = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
+var _Checkbox = require("../Checkbox");
+var _CircularLoader = require("../CircularLoader");
+var _Text = require("../Text");
+var _Cell = require("./Cell");
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const BasicRow = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultRow, 'tr');
+exports.BasicRow = BasicRow;
+const EmptyRow = _ref => {
+  let {
+    isLoading,
+    emptyText,
+    headersLength = 0,
+    customLoader
+  } = _ref;
+  return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    colSpan: headersLength
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.emptyRow
+  }, isLoading ? customLoader ? customLoader : /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.defaultLoader
+  }, ' ', /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    colorToken: "colorFillPrimary",
+    size: "large"
+  })) : emptyText || /*#__PURE__*/React.createElement(_Text.BodyLarge, {
+    color: _Text.TEXT_COLORS.secondary,
+    className: _TableModule.default.defaultEmptyText
+  }, "Nothing to display here."))));
+};
+
+// 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
+exports.EmptyRow = EmptyRow;
+function DefaultRow(_ref2) {
+  let {
+    data,
+    extras,
+    headers,
+    selected,
+    onSelect,
+    className,
+    disabled
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(BasicRow, {
+    className: (0, _classify.default)(className, selected ? _TableModule.default.defaultSelectedBodyRow : _TableModule.default.defaultBodyRow)
+  }, selected != null && /*#__PURE__*/React.createElement(_Cell.PaddedContentCell, null, /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.checkbox
+  }, /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
+    checked: selected ? true : false,
+    onChange: onSelect,
+    disabled: disabled
+  }))), headers.map((item, index) => {
+    const {
+      key,
+      render: Renderer,
+      className: cellClassName,
+      sticky
+    } = item;
+    const value = data[key];
+    return Renderer ? /*#__PURE__*/React.createElement(Renderer, {
+      key: index,
+      data: data,
+      extras: extras,
+      selected: selected,
+      className: (0, _classify.default)({
+        [_TableModule.default.stickyCell]: sticky
+      })
+    }) : /*#__PURE__*/React.createElement(_Cell.SingleCell, {
+      key: index,
+      title: String(value),
+      className: (0, _classify.default)(cellClassName, {
+        [_TableModule.default.stickyCell]: sticky
+      })
+    });
+  }));
+}

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

@@ -0,0 +1,145 @@
+// @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 {GenericObject} from './Table';
+import type {GenericHeaderItems} from './TableHeader';
+
+import css from './Table.module.css';
+
+// 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,
+  className,
+  disabled,
+}: {
+  data: T,
+  extras?: U,
+  headers: GenericHeaderItems<T, U>,
+  selected?: boolean,
+  // value dependent on checkbox checked value
+  onSelect?: ({value: string, checked: boolean}) => mixed,
+  className?: string,
+  disabled?: boolean,
+}): React.Node {
+  return (
+    <BasicRow
+      className={classify(
+        className,
+        selected ? css.defaultSelectedBodyRow : css.defaultBodyRow,
+      )}
+    >
+      {selected != null && (
+        <PaddedContentCell>
+          <div className={css.checkbox}>
+            <Checkbox
+              checked={selected ? true : false}
+              onChange={onSelect}
+              disabled={disabled}
+            />
+          </div>
+        </PaddedContentCell>
+      )}
+      {headers.map((item, index) => {
+        const {key, render: Renderer, className: cellClassName, sticky} = item;
+        const value = data[key];
+        return Renderer ? (
+          <Renderer
+            key={index}
+            data={data}
+            extras={extras}
+            selected={selected}
+            className={classify({[css.stickyCell]: sticky})}
+          />
+        ) : (
+          <SingleCell
+            key={index}
+            title={String(value)}
+            className={classify(cellClassName, {[css.stickyCell]: sticky})}
+          />
+        );
+      })}
+    </BasicRow>
+  );
+}

package/lib/components/Table/StaticTable.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BasicTableBody = exports.BasicTable = void 0;
+exports.StaticTable = StaticTable;
+var React = _interopRequireWildcard(require("react"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _xor = _interopRequireDefault(require("lodash/xor"));
+var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
+var _Row = require("./Row");
+var _TableHeader = require("./TableHeader");
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const BasicTable = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTable, 'table');
+exports.BasicTable = BasicTable;
+const BasicTableBody = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTableBody, 'tbody');
+
+/**
+ * A Static Default Table.
+ *
+ * Our
+ */
+exports.BasicTableBody = BasicTableBody;
+function StaticTable(props) {
+  const {
+    className,
+    Row,
+    entries,
+    extras,
+    rowKeys,
+    headers,
+    showHeader = true,
+    tableHeaderClassName,
+    sortable,
+    defaultSortKey,
+    defaultSortDirection = 'original',
+    onSort,
+    handleSortClick,
+    sortKey,
+    sortDirection,
+    selectedKeys,
+    onSelect,
+    isLoading,
+    idName = 'id',
+    emptyText,
+    disabled,
+    customLoader
+  } = props;
+
+  // this is a fallback and honestly probably doesn't need the
+  // memo'ing
+  const mappedKeys = React.useMemo(() => rowKeys ?? entries.map(e => (0, _get.default)(e, idName)), [entries, idName, rowKeys]);
+
+  /**
+   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined incase selectedKeys is not there.
+   */
+
+  const handleHeaderCheckboxClick = selectedKeys ? _ref => {
+    let {
+      checked
+    } = _ref;
+    let selectedRowIds = [];
+    if (selectedKeys) {
+      if (checked === true) {
+        selectedRowIds = entries.map(singleRowObj => (0, _get.default)(singleRowObj, idName));
+      }
+      onSelect?.(selectedRowIds);
+    }
+  } : undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.tableContainer,
+    "data-id": "table-wrap"
+  }, /*#__PURE__*/React.createElement(BasicTable, {
+    "data-id": "basic-table",
+    className: className
+  }, showHeader && /*#__PURE__*/React.createElement(_TableHeader.DefaultTableHeader, {
+    tableHeaderClassName: tableHeaderClassName,
+    className: tableHeaderClassName,
+    sortable: sortable,
+    columns: headers,
+    handleSortClick: handleSortClick,
+    sortKey: sortKey,
+    sortDirection: sortDirection,
+    disabled: disabled,
+    handleCheckboxClick: handleHeaderCheckboxClick,
+    checked: selectedKeys == null || selectedKeys.length === 0 ? 'false' : selectedKeys.length < entries.length ? 'mixed' : 'true'
+  }), /*#__PURE__*/React.createElement(BasicTableBody, null, isLoading || !entries.length ? /*#__PURE__*/React.createElement(_Row.EmptyRow, {
+    isLoading: isLoading,
+    emptyText: emptyText,
+    headersLength: handleHeaderCheckboxClick ? headers.length + 1 : headers.length,
+    customLoader: customLoader
+  }) : mappedKeys.map(key => {
+    const data = entries.find(e => (0, _get.default)(e, idName) === key);
+    if (data == null) {
+      return null;
+    }
+    data;
+    const selected = selectedKeys?.includes((0, _get.default)(data, idName)) ?? undefined;
+    return Row ? /*#__PURE__*/React.createElement(Row, {
+      key: key,
+      data: data,
+      headers: headers
+      // extras and rowKeys are both 'optional'
+      ,
+      extras: extras,
+      sortedKeys: rowKeys ?? mappedKeys,
+      selected: selected,
+      disabled: disabled
+    }) : /*#__PURE__*/React.createElement(_Row.DefaultRow, {
+      key: key,
+      data: data,
+      extras: extras,
+      headers: headers,
+      selected: selected,
+      onSelect: selectedKeys != null ? _v => onSelect?.((0, _xor.default)(selectedKeys ?? [], [key])) : undefined,
+      disabled: disabled
+    });
+  }))));
+}

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

@@ -0,0 +1,170 @@
+// @flow strict
+
+import * as React from 'react';
+import get from 'lodash/get';
+import xor from 'lodash/xor';
+
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+
+import type {SortDirection} from './hooks';
+import {DefaultRow, EmptyRow} from './Row';
+import type {GenericObject, TableProps} from './Table';
+import {DefaultTableHeader} from './TableHeader';
+
+import css from './Table.module.css';
+
+
+export const BasicTable: ClassNameComponent<'table'> = makeClassNameComponent(
+  css.defaultTable,
+  'table',
+);
+
+export const BasicTableBody: ClassNameComponent<'tbody'> =
+  makeClassNameComponent(css.defaultTableBody, 'tbody');
+
+/**
+ * A Static Default Table.
+ *
+ * Our
+ */
+
+export function StaticTable<Data: GenericObject, Extras: GenericObject>(props: {
+  ...TableProps<Data, Extras>,
+  handleSortClick?: (sortKey: string) => mixed,
+  sortKey?: string,
+  sortDirection?: SortDirection,
+  rowKeys?: string[],
+}): React.Node {
+  const {
+    className,
+
+    Row,
+
+    entries,
+    extras,
+    rowKeys,
+
+    headers,
+    showHeader = true,
+    tableHeaderClassName,
+
+    sortable,
+    defaultSortKey,
+    defaultSortDirection = 'original',
+    onSort,
+    handleSortClick,
+    sortKey,
+    sortDirection,
+    selectedKeys,
+    onSelect,
+
+    isLoading,
+    idName = 'id',
+    emptyText,
+    disabled,
+    customLoader,
+  } = props;
+
+  // this is a fallback and honestly probably doesn't need the
+  // memo'ing
+  const mappedKeys = React.useMemo(
+    () => rowKeys ?? entries.map((e) => get(e, idName)),
+    [entries, idName, rowKeys],
+  );
+
+  /**
+   * this function is also used to decide weather to show checkbox in header or not. so it's value is undefined incase selectedKeys is not there.
+   */
+
+  const handleHeaderCheckboxClick = selectedKeys
+    ? ({checked}: {value: string, checked: boolean}) => {
+      let selectedRowIds = [];
+      if (selectedKeys) {
+        if (checked === true) {
+          selectedRowIds = entries.map((singleRowObj) =>
+            get(singleRowObj, idName),
+          );
+        }
+        onSelect?.(selectedRowIds);
+      }
+    }
+    : undefined;
+
+  return (
+    <div className={css.tableContainer} data-id="table-wrap">
+      <BasicTable data-id="basic-table" className={className}>
+        {showHeader && (
+          <DefaultTableHeader
+            tableHeaderClassName={tableHeaderClassName}
+            className={tableHeaderClassName}
+            sortable={sortable}
+            columns={headers}
+            handleSortClick={handleSortClick}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            disabled={disabled}
+            handleCheckboxClick={handleHeaderCheckboxClick}
+            checked={
+              selectedKeys == null || selectedKeys.length === 0
+                ? 'false'
+                : selectedKeys.length < entries.length
+                  ? 'mixed'
+                  : 'true'
+            }
+          />
+        )}
+
+        <BasicTableBody>
+          {isLoading || !entries.length ? (
+            <EmptyRow
+              isLoading={isLoading}
+              emptyText={emptyText}
+              headersLength={
+                handleHeaderCheckboxClick ? headers.length + 1 : headers.length
+              }
+              customLoader={customLoader}
+            />
+          ) : (
+            mappedKeys.map((key) => {
+              const data = entries.find((e) => get(e, idName) === key);
+              if (data == null) {
+                return null;
+              }
+              (data: Data);
+              const selected =
+                selectedKeys?.includes(get(data, idName)) ?? undefined;
+
+              return Row ? (
+                <Row
+                  key={key}
+                  data={data}
+                  headers={headers}
+                  // extras and rowKeys are both 'optional'
+                  extras={extras}
+                  sortedKeys={rowKeys ?? mappedKeys}
+                  selected={selected}
+                  disabled={disabled}
+                />
+              ) : (
+                <DefaultRow
+                  key={key}
+                  data={data}
+                  extras={extras}
+                  headers={headers}
+                  selected={selected}
+                  onSelect={
+                    selectedKeys != null
+                      ? (_v) => onSelect?.(xor(selectedKeys ?? [], [key]))
+                      : undefined
+                  }
+                  disabled={disabled}
+                />
+              );
+            })
+          )}
+        </BasicTableBody>
+      </BasicTable>
+    </div>
+  );
+}