@spaced-out/ui-design-system 0.0.37 → 0.0.39

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>
+  );
+}

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;
+}