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

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

@@ -0,0 +1,236 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ColorTypes} from '../../types/typography';
+import classify from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {Checkbox} from '../Checkbox';
+import {Icon} from '../Icon';
+import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+
+import type {SortDirection} from './hooks';
+import {BasicRow} from './Row';
+import type {GenericObject} from './Table';
+
+import css from './Table.module.css';
+
+
+export type GenericHeaderItem<T: GenericObject, U: GenericObject> = {
+  label: React.Node,
+  key: $Keys<T>,
+  className?: string,
+  filterIcon?: React.Node,
+  filtered?: boolean,
+  subtext?: string,
+  sortable?: boolean,
+  headerIconClassName?: string,
+  sticky?: boolean,
+  render?: React.ComponentType<{
+    data: T,
+    extras?: U,
+    className?: string,
+    selected?: boolean,
+  }>,
+};
+
+export type GenericHeaderItems<T, U> = GenericHeaderItem<T, U>[];
+
+export const BasicHeadCell: ClassNameComponent<'th'> = makeClassNameComponent(
+  css.defaultHeaderCell,
+  'th',
+);
+
+export const BasicTableHead: ClassNameComponent<'thead'> =
+  makeClassNameComponent(css.defaultTableHead, 'thead');
+
+export type TableHeaderProps<T, U> = {
+  className?: string,
+  tableHeaderClassName?: string,
+  sortable?: boolean,
+  columns: GenericHeaderItems<T, U>,
+  handleSortClick?: (sortKey: $Keys<T>) => mixed,
+  sortKey?: $Keys<T>,
+  sortDirection?: SortDirection,
+  checked?: 'true' | 'false' | 'mixed',
+  handleCheckboxClick?: ({value: string, checked: boolean}) => mixed,
+  disabled?: boolean,
+};
+
+const SortIcon = ({
+  sortDirection,
+  color,
+  className,
+}: {
+  sortDirection: SortDirection,
+  className: string,
+  color: ColorTypes,
+}) => {
+  if (sortDirection === 'original') {
+    return (
+      <Icon
+        color={color}
+        name="caret-down"
+        size="small"
+        type="solid"
+        className={className}
+      />
+    );
+  } else if (sortDirection === 'asc') {
+    return (
+      <Icon
+        color={color}
+        name="arrow-up"
+        size="small"
+        type="regular"
+        className={className}
+      />
+    );
+  } else if (sortDirection === 'desc') {
+    return (
+      <Icon
+        color={color}
+        name="arrow-down"
+        size="small"
+        type="regular"
+        className={className}
+      />
+    );
+  }
+};
+
+export function DefaultTableHeader<T: GenericObject, U: GenericObject>(
+  props: TableHeaderProps<T, U>,
+): React.Node {
+  const {
+    tableHeaderClassName,
+    className,
+    sortable = false,
+    columns,
+    handleSortClick,
+    sortKey,
+    sortDirection = 'original',
+    handleCheckboxClick,
+    checked,
+    disabled,
+  } = props;
+
+  const tableHeaderCells = () => (
+    <>
+      {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 = classify(
+            css.defaultHeaderCellSortable,
+            {
+              [css.filtered]: filtered,
+              [css.stickyHeaderCell]: sticky,
+            },
+            css[sortDirection],
+            className,
+          );
+        } else {
+          headerClassName = classify(className, {
+            [css.stickyHeaderCell]: sticky,
+          });
+        }
+
+        const headCellClickHandler = () => {
+          if (sortable && columnSortable && handleSortClick) {
+            handleSortClick(key);
+          }
+        };
+        let columnSortDirection = 'original';
+
+        if (sortKey === key) {
+          columnSortDirection = sortDirection;
+        }
+
+        return (
+          <BasicHeadCell
+            className={classify(
+              {
+                [css.selectedHeader]:
+                  sortKey === key && columnSortDirection !== 'original',
+              },
+              headerClassName,
+            )}
+            key={index}
+            scope="col"
+            onClick={headCellClickHandler}
+          >
+            <div className={classify(css.labelContents)}>
+              <div className={css.labelContainer}>
+                <SubTitleExtraSmall
+                  color={TEXT_COLORS.secondary}
+                  className={classify({
+                    [css.selectedHeader]:
+                      sortKey === key && columnSortDirection !== 'original',
+                  })}
+                >
+                  {label}
+                </SubTitleExtraSmall>
+                <span className={css.headerSubtext}>{subtext && subtext}</span>
+              </div>
+              {(sortable || filterIcon != null) && (
+                <div className={css.headerIconContainer}>
+                  {columnSortable && (
+                    <SortIcon
+                      color={TEXT_COLORS.secondary}
+                      className={classify(css.sortArrow, {
+                        [css.selectedSortArrow]: sortKey === key,
+                      })}
+                      sortDirection={columnSortDirection}
+                    />
+                  )}
+                  {filterIcon != null && (
+                    <div className={css.filterIcon}>{filterIcon}</div>
+                  )}
+                </div>
+              )}
+            </div>
+          </BasicHeadCell>
+        );
+      })}
+    </>
+  );
+
+  return (
+    <BasicTableHead
+      className={classify(
+        css.tableHeaderSortable,
+        tableHeaderClassName,
+        className,
+      )}
+    >
+      <BasicRow className={css.defaultHeaderRow}>
+        {handleCheckboxClick && (
+          <BasicHeadCell scope="col">
+            <div className={css.checkbox}>
+              <Checkbox
+                value="all"
+                checked={checked === 'true' ? true : false}
+                indeterminate={checked === 'mixed'}
+                onChange={handleCheckboxClick}
+                disabled={disabled}
+              />
+            </div>
+          </BasicHeadCell>
+        )}
+        {tableHeaderCells()}
+      </BasicRow>
+    </BasicTableHead>
+  );
+}

package/lib/components/Table/hooks.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSortableEntries = useSortableEntries;
+var React = _interopRequireWildcard(require("react"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
+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; }
+
+function useSortableEntries(entries, idName, _ref) {
+  let {
+    defaultSortKey = 'id',
+    defaultSortDirection = 'original',
+    onSort
+  } = _ref;
+  const [sortKey, setSortKey] = React.useState(defaultSortKey);
+  const [sortDirection, setSortDirection] = React.useState(defaultSortDirection);
+  const getNextDirection = direction => {
+    switch (direction) {
+      case 'original':
+        return 'desc';
+      case 'asc':
+        return 'original';
+      case 'desc':
+        return 'asc';
+      default:
+        return 'original';
+    }
+  };
+  const advanceSortDirection = dir => {
+    const nextDirection = getNextDirection(dir);
+    setSortDirection(dir => nextDirection);
+    return nextDirection;
+  };
+  const handleSortClick = React.useCallback(nextSortKey => {
+    let nextSortDirection = sortDirection;
+    if (nextSortKey === sortKey) {
+      nextSortDirection = advanceSortDirection(sortDirection);
+    } else {
+      setSortKey(nextSortKey);
+      setSortDirection('desc');
+    }
+    onSort?.(nextSortKey, nextSortDirection);
+  }, [sortKey, sortDirection, entries]);
+  const sortedEntries = React.useMemo(() => {
+    if (sortDirection === 'original') {
+      return entries;
+    }
+    const sortedDesc = (0, _sortBy.default)(entries, sortKey);
+    if (sortDirection === 'asc') {
+      return sortedDesc;
+    } else {
+      return sortedDesc.reverse();
+    }
+  }, [sortDirection, sortKey, entries]);
+  const sortedKeys = React.useMemo(() => sortedEntries.map(ent => (0, _get.default)(ent, idName)), [sortedEntries]);
+  return {
+    sortedEntries,
+    sortedKeys,
+    sortDirection,
+    sortKey,
+    handleSortClick
+  };
+}

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

@@ -0,0 +1,91 @@
+// @flow strict
+
+import * as React from 'react';
+import get from 'lodash/get';
+import sortBy from 'lodash/sortBy';
+
+import type {GenericObject} from './Table';
+
+
+export type SortDirection = 'asc' | 'desc' | 'original';
+
+export function useSortableEntries<T: GenericObject>(
+  entries: Array<T>,
+  idName: $Keys<T>,
+  {
+    defaultSortKey = 'id',
+    defaultSortDirection = 'original',
+    onSort,
+  }: {
+    defaultSortKey?: $Keys<T>,
+    defaultSortDirection?: SortDirection,
+    onSort?: (sortKey: string, sortDirection: SortDirection) => mixed,
+  },
+): {
+  handleSortClick: (sortKey: $Keys<T>) => mixed,
+  sortDirection: SortDirection,
+  sortKey?: string,
+  sortedEntries: T[],
+  sortedKeys: $Keys<T>[],
+} {
+  const [sortKey, setSortKey] = React.useState(defaultSortKey);
+  const [sortDirection, setSortDirection] =
+    React.useState<SortDirection>(defaultSortDirection);
+
+  const getNextDirection = (direction: SortDirection): SortDirection => {
+    switch (direction) {
+    case 'original':
+      return 'desc';
+    case 'asc':
+      return 'original';
+    case 'desc':
+      return 'asc';
+    default:
+      return 'original';
+    }
+  };
+  const advanceSortDirection = (dir: SortDirection) => {
+    const nextDirection = getNextDirection(dir);
+    setSortDirection((dir) => nextDirection);
+    return nextDirection;
+  };
+
+  const handleSortClick = React.useCallback(
+    (nextSortKey: string) => {
+      let nextSortDirection = sortDirection;
+      if (nextSortKey === sortKey) {
+        nextSortDirection = advanceSortDirection(sortDirection);
+      } else {
+        setSortKey(nextSortKey);
+        setSortDirection('desc');
+      }
+      onSort?.(nextSortKey, nextSortDirection);
+    },
+    [sortKey, sortDirection, entries],
+  );
+
+  const sortedEntries = React.useMemo(() => {
+    if (sortDirection === 'original') {
+      return entries;
+    }
+    const sortedDesc = sortBy(entries, sortKey);
+    if (sortDirection === 'asc') {
+      return sortedDesc;
+    } else {
+      return sortedDesc.reverse();
+    }
+  }, [sortDirection, sortKey, entries]);
+
+  const sortedKeys = React.useMemo(
+    () => sortedEntries.map((ent) => get(ent, idName)),
+    [sortedEntries],
+  );
+
+  return {
+    sortedEntries,
+    sortedKeys,
+    sortDirection,
+    sortKey,
+    handleSortClick,
+  };
+}

package/lib/components/Table/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BasicSingleCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.BasicSingleCell;
+  }
+});
+Object.defineProperty(exports, "DateCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.DateCell;
+  }
+});
+Object.defineProperty(exports, "DefaultRow", {
+  enumerable: true,
+  get: function () {
+    return _Row.DefaultRow;
+  }
+});
+Object.defineProperty(exports, "DoubleCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.DoubleCell;
+  }
+});
+Object.defineProperty(exports, "Monogram", {
+  enumerable: true,
+  get: function () {
+    return _Cell.Monogram;
+  }
+});
+Object.defineProperty(exports, "MonogramCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.MonogramCell;
+  }
+});
+Object.defineProperty(exports, "SingleCell", {
+  enumerable: true,
+  get: function () {
+    return _Cell.SingleCell;
+  }
+});
+Object.defineProperty(exports, "StaticTable", {
+  enumerable: true,
+  get: function () {
+    return _StaticTable.StaticTable;
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function () {
+    return _Table.Table;
+  }
+});
+var _Cell = require("./Cell");
+var _Row = require("./Row");
+var _StaticTable = require("./StaticTable");
+var _Table = require("./Table");

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

@@ -0,0 +1,14 @@
+// @flow strict
+
+export {
+  BasicSingleCell,
+  DateCell,
+  DoubleCell,
+  Monogram,
+  MonogramCell,
+  SingleCell,
+} from './Cell';
+export {DefaultRow} from './Row';
+export {StaticTable} from './StaticTable';
+export type {TableProps} from './Table';
+export {Table} from './Table';

package/lib/components/Tabs/TabList/TabList.js

@@ -8,7 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _size = require("../../../styles/variables/_size");
 var _space = require("../../../styles/variables/_space");
 var _classify = require("../../../utils/classify");
-var _TabDropdown = require("./TabDropdown.js");
+var _TabDropdown = require("./TabDropdown");
 var _TabListModule = _interopRequireDefault(require("./TabList.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); }

package/lib/components/Tabs/TabList/TabList.js.flow

@@ -6,7 +6,7 @@ import {size36, size100} from '../../../styles/variables/_size';
 import {spaceMedium} from '../../../styles/variables/_space';
 import {classify} from '../../../utils/classify';
 
-import {TabDropdown} from './TabDropdown.js';
+import {TabDropdown} from './TabDropdown';
 
 import css from './TabList.module.css';
 

package/lib/styles/variables/_size.css

@@ -32,10 +32,14 @@
 
 @value size42: 42px;
 
+@value size48: 48px;
+
 @value size58: 58px;
 
 @value size60: 60px;
 
+@value size90: 90px;
+
 @value size100: 100px;
 
 @value size110: 110px;
@@ -71,3 +75,5 @@
 @value sizeFluid: 100%;
 
 @value sizeFullViewportHeight: 100vh;
+
+@value sizeFullViewportWidth: 100vw;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -39,10 +39,14 @@ const size40 = '40px';
 exports.size40 = size40;
 const size42 = '42px';
 exports.size42 = size42;
+const size48 = '48px';
+exports.size48 = size48;
 const size58 = '58px';
 exports.size58 = size58;
 const size60 = '60px';
 exports.size60 = size60;
+const size90 = '90px';
+exports.size90 = size90;
 const size100 = '100px';
 exports.size100 = size100;
 const size110 = '110px';
@@ -78,4 +82,6 @@ exports.size960 = size960;
 const sizeFluid = '100%';
 exports.sizeFluid = sizeFluid;
 const sizeFullViewportHeight = '100vh';
-exports.sizeFullViewportHeight = sizeFullViewportHeight;
+exports.sizeFullViewportHeight = sizeFullViewportHeight;
+const sizeFullViewportWidth = '100vw';
+exports.sizeFullViewportWidth = sizeFullViewportWidth;

package/lib/styles/variables/_size.js.flow

@@ -34,10 +34,14 @@ export const size40 = '40px';
 
 export const size42 = '42px';
 
+export const size48 = '48px';
+
 export const size58 = '58px';
 
 export const size60 = '60px';
 
+export const size90 = '90px';
+
 export const size100 = '100px';
 
 export const size110 = '110px';
@@ -73,3 +77,5 @@ export const size960 = '960px';
 export const sizeFluid = '100%';
 
 export const sizeFullViewportHeight = '100vh';
+
+export const sizeFullViewportWidth = '100vw';

package/lib/utils/makeClassNameComponent.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = makeClassNameComponent;
+exports.makeClassNameComponent = makeClassNameComponent;
 exports.makeClassNameComponentCustom = makeClassNameComponentCustom;
 exports.nameHoc = nameHoc;
 var React = _interopRequireWildcard(require("react"));

package/lib/utils/makeClassNameComponent.js.flow

@@ -21,7 +21,7 @@ export type ClassNameComponent<
   I = React.ElementRef<T>,
 > = React.AbstractComponent<React.ElementConfig<T>, I>;
 
-export default function makeClassNameComponent<C: string>(
+export function makeClassNameComponent<C: string>(
   baseClassName: string,
   // $FlowFixMe not sure how to type this correctly
   ComponentType: C = 'div',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -45,6 +45,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^1.0.0",
     "@floating-ui/react-dom-interactions": "^0.10.1",
+    "date-fns": "^2.29.3",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
@@ -66,6 +67,7 @@
     "@storybook/testing-react": "^1.3.0",
     "@storybook/theming": "^6.5.13",
     "@testing-library/react": "^11.2.7",
+    "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.3",
     "babel-loader": "^8.2.5",
@@ -102,8 +104,7 @@
     "standard-version": "^9.5.0",
     "storybook-css-modules": "^1.0.8",
     "storybook-vscode-component": "^1.0.8",
-    "style-dictionary": "^3.7.1",
-    "all-contributors-cli": "^6.20.0"
+    "style-dictionary": "^3.7.1"
   },
   "homepage": "https://spaced-out.github.io/ui-design-system",
   "repository": {