@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

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

@@ -0,0 +1,154 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {TableRow} from './DefaultRow';
+import type {GenericHeaderItems} from './DefaultTableHeader';
+import type {SortDirection} from './hooks';
+import {useSortableEntries} from './hooks';
+import {StaticTable, StaticTableVirtualized} from './StaticTable';
+
+// 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 ClassNames = $ReadOnly<{
+  wrapper?: string,
+  table?: string,
+  tableHeader?: string,
+  tableBody?: string,
+  tableRow?: string,
+  checkbox?: string,
+}>;
+
+type VirtualizationOptions = {
+  rowsCount: number,
+  rowHeight?: string,
+  onEndReached?: () => void,
+  isEndLoading?: boolean,
+  isAllDataFetched?: boolean,
+};
+
+export type TableProps<T, U> = {
+  classNames?: ClassNames,
+  className?: string,
+  TableRow?: 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',
+  // Please start using this prop if you want internal sorting to work in the table
+  enableInternalSorting?: boolean,
+
+  selectedKeys?: string[],
+  disabledKeys?: 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,
+  borderRadius?: string,
+
+  // For this to work the table wrapper should be scrollable
+  stickyHeader?: boolean,
+  virtualizationOptions?: VirtualizationOptions,
+};
+
+/**
+ * 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 {
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    className,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    classNames,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    TableRow,
+    entries,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    extras,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    headers,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    showHeader = true,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    tableHeaderClassName,
+    sortable = true,
+    defaultSortKey,
+    defaultSortDirection = 'original',
+    onSort,
+    enableInternalSorting,
+
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    isLoading,
+    idName = 'id',
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    emptyText,
+    virtualizationOptions,
+  } = props;
+
+  /**
+   *
+   */
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  const {sortedEntries, sortedKeys, ...sortableProps} = useSortableEntries(
+    entries,
+    idName,
+    {
+      defaultSortKey,
+      defaultSortDirection,
+      onSort,
+      enableInternalSorting,
+    },
+  );
+
+  const virtualized = !!(
+    virtualizationOptions && virtualizationOptions.rowsCount > 0
+  );
+
+  return virtualized ? (
+    <StaticTableVirtualized
+      {...props}
+      {...sortableProps}
+      sortable={sortable}
+      entries={sortedEntries}
+      rowKeys={sortedKeys}
+    />
+  ) : (
+    <StaticTable
+      {...props}
+      {...sortableProps}
+      sortable={sortable}
+      entries={sortedEntries}
+      rowKeys={sortedKeys}
+    />
+  );
+}

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

@@ -10,11 +10,35 @@
   colorBackgroundTertiary,
   colorGrayLightest
 ) from '../../styles/variables/_color.css';
-@value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium) from '../../styles/variables/_space.css';
-@value (sizeFluid, size2, size48, size60, size240, size300) from '../../styles/variables/_size.css';
-@value (borderWidthNone, borderWidthPrimary, borderRadiusNone, borderRadiusMedium, borderWidthSecondary) from '../../styles/variables/_border.css';
-@value (fontLineHeight170) from '../../styles/variables/_font.css';
-@value (elevationCard) from '../../styles/variables/_elevation.css';
+@value (
+  spaceNone, 
+  spaceXXSmall, 
+  spaceXSmall,
+   spaceSmall, 
+   spaceMedium
+) from '../../styles/variables/_space.css';
+@value (
+  sizeFluid, 
+  size2, 
+  size8, 
+  size48, 
+  size60, 
+  size240, 
+  size300
+) from '../../styles/variables/_size.css';
+@value (
+  borderWidthNone, 
+  borderWidthPrimary, 
+  borderRadiusNone, 
+  borderRadiusMedium, 
+  borderWidthSecondary
+) from '../../styles/variables/_border.css';
+@value (
+  fontLineHeight170
+) from '../../styles/variables/_font.css';
+@value (
+  elevationCard
+) from '../../styles/variables/_elevation.css';
 
 @value tableRowTotalPadding: calc(spaceMedium * 2);
 
@@ -287,3 +311,10 @@
   height: calc(size2 / 2);
   background: colorBorderPrimary;
 }
+
+.fetchMoreLoaderContainer {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  padding: size8;
+}

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

@@ -0,0 +1,55 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import type {ButtonProps} from '../Button';
+import {Button} from '../Button';
+import type {SimpleButtonDropdownProps} from '../ButtonDropdown';
+import {SimpleButtonDropdown} from '../ButtonDropdown';
+
+import css from './TableBar.module.css';
+
+
+export type TableActionBarProps = {
+  children?: React.Node,
+  className?: string,
+  ...
+};
+
+export const ButtonCta = ({classNames, ...props}: ButtonProps): React.Node => (
+  <Button
+    {...props}
+    data-testid="table-action-bar-button-cta"
+    type="primary"
+    size="small"
+    classNames={{...classNames, wrapper: css.buttonCta}}
+  />
+);
+
+export const DropdownCta = ({
+  classNames,
+  ...props
+}: SimpleButtonDropdownProps): React.Node => (
+  <SimpleButtonDropdown
+    {...props}
+    data-testid="table-action-bar-dropdown-cta"
+    type="primary"
+    size="small"
+    classNames={{...classNames, buttonWrapper: css.buttonCta}}
+  />
+);
+
+export const TableActionBar = ({
+  children,
+  className,
+  ...props
+}: TableActionBarProps): React.Node => (
+  <div
+    {...props}
+    className={classify(css.tableActionBar, className)}
+    data-testid="table-action-bar"
+  >
+    {children}
+  </div>
+);

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

@@ -0,0 +1,28 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './TableBar.module.css';
+
+
+export type TableBottomBarProps = {
+  children?: React.Node,
+  className?: string,
+  ...
+};
+
+export const TableBottomBar = ({
+  children,
+  className,
+  ...props
+}: TableBottomBarProps): React.Node => (
+  <div
+    {...props}
+    className={classify(css.tableBar, css.bottomBar, className)}
+    data-testid="table-bottom-bar"
+  >
+    {children}
+  </div>
+);

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

@@ -0,0 +1,28 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+
+import css from './TableBar.module.css';
+
+
+export type TableTopBarProps = {
+  children?: React.Node,
+  className?: string,
+  ...
+};
+
+export const TableTopBar = ({
+  children,
+  className,
+  ...props
+}: TableTopBarProps): React.Node => (
+  <div
+    {...props}
+    className={classify(css.tableBar, css.topBar, className)}
+    data-testid="table-top-bar"
+  >
+    {children}
+  </div>
+);