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

package/lib/components/Table/Table.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = Table;
+var React = _interopRequireWildcard(require("react"));
+var _hooks = require("./hooks");
+var _StaticTable = require("./StaticTable");
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/**
+ * Table
+ * @param {React.ComponentType} Row - React.ComponentType<{data: Data, extras?: Extras, sortedKeys?: string[]}>
+ * @param {string} className - string
+ *
+ **/
+
+/**
+ * Table
+ * @param {React.ComponentType} Row - React.ComponentType<{data: Data, extras?: Extras, sortedKeys?: string[]}>
+ * @param {string} className - string
+ *
+ */
+function Table(props) {
+  const {
+    className,
+    Row,
+    entries,
+    extras,
+    headers,
+    showHeader = true,
+    tableHeaderClassName,
+    sortable = true,
+    defaultSortKey,
+    defaultSortDirection = 'original',
+    onSort,
+    isLoading,
+    idName = 'id',
+    emptyText
+  } = props;
+
+  /**
+   *
+   */
+  const {
+    sortedEntries,
+    sortedKeys,
+    ...sortableProps
+  } = (0, _hooks.useSortableEntries)(entries, idName, {
+    defaultSortKey,
+    defaultSortDirection,
+    onSort
+  });
+  return /*#__PURE__*/React.createElement(_StaticTable.StaticTable, _extends({}, props, sortableProps, {
+    sortable: sortable,
+    entries: entries,
+    rowKeys: sortedKeys
+  }));
+}

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

@@ -0,0 +1,101 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {SortDirection} from './hooks';
+import {useSortableEntries} from './hooks';
+import type {TableRow} from './Row';
+import {StaticTable} from './StaticTable';
+import type {GenericHeaderItems} from './TableHeader';
+
+// type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type GenericObject = {
+  // the + here (not well doc'd by flow) makes all object properties covariant
+  // meaning that the value of any string-keyed property is allowed to have a more
+  // specific type than `mixed` (i.e. string, number fn, etc)
+  // (ie. the likely case for all real instances of GenericObject)
+  // learn more here https://flow.org/blog/2016/10/04/Property-Variance/
+  +[key: string]: mixed,
+};
+
+export type TableProps<T, U> = {
+  className?: string,
+  Row?: TableRow<T, U>,
+  headers: GenericHeaderItems<T, U>,
+  entries: Array<T>,
+  extras?: U,
+  sortable?: boolean,
+  showHeader?: boolean,
+  tableHeaderClassName?: string,
+  headerIconClassName?: string,
+  defaultSortKey?: string,
+  defaultSortDirection?: 'asc' | 'desc' | 'original',
+
+  selectedKeys?: string[],
+  onSelect?: (keys: string[]) => mixed,
+
+  idName?: $Keys<T>,
+  onSort?: (key: $Keys<T>, direction: SortDirection) => void,
+  isLoading?: boolean,
+  emptyText?: React.Node,
+  disabled?: boolean,
+  customLoader?: React.Node,
+};
+
+/**
+ * Table
+ * @param {React.ComponentType} Row - React.ComponentType<{data: Data, extras?: Extras, sortedKeys?: string[]}>
+ * @param {string} className - string
+ *
+ **/
+
+/**
+ * Table
+ * @param {React.ComponentType} Row - React.ComponentType<{data: Data, extras?: Extras, sortedKeys?: string[]}>
+ * @param {string} className - string
+ *
+ */
+export function Table<Data: GenericObject, Extras: GenericObject>(
+  props: TableProps<Data, Extras>,
+): React.Node {
+  const {
+    className,
+    Row,
+    entries,
+    extras,
+    headers,
+    showHeader = true,
+    tableHeaderClassName,
+    sortable = true,
+    defaultSortKey,
+    defaultSortDirection = 'original',
+    onSort,
+    isLoading,
+    idName = 'id',
+    emptyText,
+  } = props;
+
+  /**
+   *
+   */
+  const {sortedEntries, sortedKeys, ...sortableProps} = useSortableEntries(
+    entries,
+    idName,
+    {
+      defaultSortKey,
+      defaultSortDirection,
+      onSort,
+    },
+  );
+
+  return (
+    <StaticTable
+      {...props}
+      {...sortableProps}
+      sortable={sortable}
+      entries={entries}
+      rowKeys={sortedKeys}
+    />
+  );
+}

package/lib/components/Table/Table.module.css

@@ -0,0 +1,252 @@
+@value (
+  colorFillPrimary,
+  colorFillSecondary,
+  colorTextPrimary,
+  colorTextSecondary,
+  colorBorderPrimary,
+  colorBorderSecondary,
+  colorFillSecondary,
+  colorBackgroundPrimary,
+  colorBackgroundTertiary,
+  colorGrayLightest
+) from '../../styles/variables/_color.css';
+@value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
+@value (sizeFluid, size48, size60, size240, size300) from '../../styles/variables/_size.css';
+@value (borderWidthNone, borderWidthPrimary, borderRadiusNone, borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (fontLineHeight170) from '../../styles/variables/_font.css';
+@value (elevationCard) from '../../styles/variables/_elevation.css';
+
+.fooBar {
+  color: colorFillPrimary;
+}
+
+.tableContainer {
+  composes: borderPrimary from '../../styles/border.module.css';
+  width: sizeFluid;
+  overflow-x: scroll;
+  border-radius: borderRadiusMedium;
+}
+
+.defaultTable {
+  min-width: sizeFluid;
+  flex-flow: column;
+  overflow-x: scroll;
+  border-collapse: collapse;
+  box-sizing: border-box;
+  border-radius: borderRadiusMedium;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone borderWidthPrimary
+    colorBorderPrimary;
+  table-layout: fixed;
+  white-space: nowrap;
+}
+.defaultTableBody {
+  flex-flow: column;
+  border-radius: borderRadiusNone borderRadiusNone borderRadiusMedium
+    borderRadiusMedium;
+  background: colorBackgroundTertiary;
+}
+
+.defaultSelectedBodyRow {
+  background: colorFillSecondary;
+}
+
+.labelContents {
+  display: flex;
+  justify-content: space-between;
+  flex: 1;
+}
+.labelContainer {
+  align-items: center;
+}
+
+.defaultHeaderCellSortable.sorted .sortArrow {
+  visibility: visible;
+}
+
+.defaultCell,
+.defaultSingleCell,
+.defaultDoubleCell {
+  height: size48;
+  align-items: center;
+  padding: spaceNone spaceXSmall;
+  background: colorBackgroundTertiary;
+}
+
+.defaultDoubleCell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.paddedTitleBlock {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.defaultSingleCell {
+  /*used to retain bottom border on cell if content is full-bleed */
+  padding-bottom: borderWidthPrimary;
+}
+
+.defaultHeadCell {
+  composes: defaultCell;
+  background: colorBackgroundPrimary;
+}
+
+.defaultDoubleCell {
+  height: size60;
+}
+
+.singleContentCell {
+  composes: defaultCell;
+  padding: spaceNone spaceXSmall;
+}
+.doubleContentCell {
+  composes: defaultDoubleCell;
+  padding: spaceNone spaceXSmall;
+}
+
+.doubleTitle {
+  margin: spaceNone;
+}
+.doubleSubtitle {
+  display: block;
+  height: fontLineHeight170;
+}
+
+.stickyHeaderCell,
+.stickyCell {
+  position: sticky;
+  left: spaceNone;
+  z-index: elevationCard;
+}
+
+.stickyHeaderCell {
+  background: colorBackgroundPrimary;
+}
+
+.stickyCell {
+  background: colorBackgroundPrimary;
+}
+
+/**
+  Row CSS
+*/
+
+.defaultRow {
+  composes: borderBottomPrimary from '../../styles/border.module.css';
+  height: size48;
+  background: colorBackgroundTertiary;
+}
+
+.defaultTable .defaultRow:last-child td:first-child {
+  border-bottom-left-radius: borderRadiusMedium;
+}
+
+.defaultTable .defaultRow:last-child td:last-child {
+  border-bottom-right-radius: borderRadiusMedium;
+}
+
+.defaultTable .defaultRow:last-child {
+  border-bottom: none;
+}
+
+.emptyRow {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.defaultLoader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: size240;
+}
+
+.defaultEmptyText {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: size240;
+}
+
+.checkbox {
+  padding: spaceSmall spaceMedium spaceSmall spaceNone;
+  max-width: size60;
+}
+
+.defaultTable td:first-child,
+th:first-child {
+  padding-left: spaceMedium;
+}
+
+/* Header CSS */
+
+.defaultTableHead {
+  flex-flow: column;
+  border-radius: borderRadiusMedium borderRadiusMedium borderRadiusNone
+    borderRadiusNone;
+  composes: borderBottomPrimary from '../../styles/border.module.css';
+  padding: spaceSmall;
+}
+
+.defaultHeaderRow {
+  box-sizing: border-box;
+  background: colorBackgroundPrimary;
+  border-radius: borderRadiusMedium borderRadiusMedium borderRadiusNone
+    borderRadiusNone;
+}
+
+.labelContents {
+  display: flex;
+  justify-content: flex-start;
+  flex: 1;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: spaceNone;
+  gap: spaceXXSmall;
+}
+
+.labelContainer {
+  align-items: center;
+}
+
+.defaultHeaderCellSortable {
+  cursor: pointer;
+}
+
+.defaultHeaderCell,
+.defaultHeaderCellSortable {
+  padding: spaceNone spaceXSmall;
+  text-align: left;
+  align-items: center;
+}
+
+.defaultHeaderCell:first-child {
+  border-top-left-radius: borderRadiusMedium;
+}
+
+.defaultHeaderCell:last-child {
+  border-top-right-radius: borderRadiusMedium;
+}
+
+.defaultHeaderCell:not(.selectedHeader):hover {
+  background: colorGrayLightest;
+}
+
+.selectedHeader {
+  color: colorTextPrimary;
+  background: colorFillSecondary;
+}
+
+.sortArrow {
+  color: colorTextSecondary;
+}
+
+.selectedSortArrow {
+  color: colorTextPrimary;
+}

package/lib/components/Table/TableHeader.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BasicTableHead = exports.BasicHeadCell = void 0;
+exports.DefaultTableHeader = DefaultTableHeader;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _makeClassNameComponent = require("../../utils/makeClassNameComponent");
+var _Checkbox = require("../Checkbox");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Row = require("./Row");
+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 BasicHeadCell = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultHeaderCell, 'th');
+exports.BasicHeadCell = BasicHeadCell;
+const BasicTableHead = (0, _makeClassNameComponent.makeClassNameComponent)(_TableModule.default.defaultTableHead, 'thead');
+exports.BasicTableHead = BasicTableHead;
+const SortIcon = _ref => {
+  let {
+    sortDirection,
+    color,
+    className
+  } = _ref;
+  if (sortDirection === 'original') {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      color: color,
+      name: "caret-down",
+      size: "small",
+      type: "solid",
+      className: className
+    });
+  } else if (sortDirection === 'asc') {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      color: color,
+      name: "arrow-up",
+      size: "small",
+      type: "regular",
+      className: className
+    });
+  } else if (sortDirection === 'desc') {
+    return /*#__PURE__*/React.createElement(_Icon.Icon, {
+      color: color,
+      name: "arrow-down",
+      size: "small",
+      type: "regular",
+      className: className
+    });
+  }
+};
+function DefaultTableHeader(props) {
+  const {
+    tableHeaderClassName,
+    className,
+    sortable = false,
+    columns,
+    handleSortClick,
+    sortKey,
+    sortDirection = 'original',
+    handleCheckboxClick,
+    checked,
+    disabled
+  } = props;
+  const tableHeaderCells = () => /*#__PURE__*/React.createElement(React.Fragment, null, columns.map((columnData, index) => {
+    const {
+      key,
+      label,
+      subtext,
+      filterIcon,
+      filtered,
+      className,
+      sticky,
+      sortable: columnSortable = false
+    } = columnData;
+    let headerClassName;
+    const filterable = Boolean(filterIcon);
+    if (sortable && columnSortable || filterable) {
+      headerClassName = (0, _classify.default)(_TableModule.default.defaultHeaderCellSortable, {
+        [_TableModule.default.filtered]: filtered,
+        [_TableModule.default.stickyHeaderCell]: sticky
+      }, _TableModule.default[sortDirection], className);
+    } else {
+      headerClassName = (0, _classify.default)(className, {
+        [_TableModule.default.stickyHeaderCell]: sticky
+      });
+    }
+    const headCellClickHandler = () => {
+      if (sortable && columnSortable && handleSortClick) {
+        handleSortClick(key);
+      }
+    };
+    let columnSortDirection = 'original';
+    if (sortKey === key) {
+      columnSortDirection = sortDirection;
+    }
+    return /*#__PURE__*/React.createElement(BasicHeadCell, {
+      className: (0, _classify.default)({
+        [_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
+      }, headerClassName),
+      key: index,
+      scope: "col",
+      onClick: headCellClickHandler
+    }, /*#__PURE__*/React.createElement("div", {
+      className: (0, _classify.default)(_TableModule.default.labelContents)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _TableModule.default.labelContainer
+    }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
+      color: _Text.TEXT_COLORS.secondary,
+      className: (0, _classify.default)({
+        [_TableModule.default.selectedHeader]: sortKey === key && columnSortDirection !== 'original'
+      })
+    }, label), /*#__PURE__*/React.createElement("span", {
+      className: _TableModule.default.headerSubtext
+    }, subtext && subtext)), (sortable || filterIcon != null) && /*#__PURE__*/React.createElement("div", {
+      className: _TableModule.default.headerIconContainer
+    }, columnSortable && /*#__PURE__*/React.createElement(SortIcon, {
+      color: _Text.TEXT_COLORS.secondary,
+      className: (0, _classify.default)(_TableModule.default.sortArrow, {
+        [_TableModule.default.selectedSortArrow]: sortKey === key
+      }),
+      sortDirection: columnSortDirection
+    }), filterIcon != null && /*#__PURE__*/React.createElement("div", {
+      className: _TableModule.default.filterIcon
+    }, filterIcon))));
+  }));
+  return /*#__PURE__*/React.createElement(BasicTableHead, {
+    className: (0, _classify.default)(_TableModule.default.tableHeaderSortable, tableHeaderClassName, className)
+  }, /*#__PURE__*/React.createElement(_Row.BasicRow, {
+    className: _TableModule.default.defaultHeaderRow
+  }, handleCheckboxClick && /*#__PURE__*/React.createElement(BasicHeadCell, {
+    scope: "col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TableModule.default.checkbox
+  }, /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
+    value: "all",
+    checked: checked === 'true' ? true : false,
+    indeterminate: checked === 'mixed',
+    onChange: handleCheckboxClick,
+    disabled: disabled
+  }))), tableHeaderCells()));
+}