@spaced-out/ui-design-system 0.3.38 → 0.3.39-beta.0

package/lib/components/Table/Cell.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import formatDistance from 'date-fns/formatDistance';
+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.ReactNode;
+  className?: string | null | undefined;
+  truncatedText?: React.ReactNode;
+  onClick?:
+    | ((arg0: React.SyntheticEvent<HTMLElement>) => unknown)
+    | null
+    | undefined;
+};
+export const Cells = ({
+  children,
+  className,
+  ...rest
+}: CellsProps): React.ReactElement<'div'> => (
+  <div className={classify(css.row, className)} {...rest}>
+    {children}
+  </div>
+);
+export const Cell = ({
+  children,
+  className,
+}: CellsProps): React.ReactElement<'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.ReactNode;
+  className?: string;
+}): React.ReactNode => (
+  <PaddedContentCell className={className}>
+    <BodyMedium className={css.paddedTitleBlock}>{title}</BodyMedium>
+  </PaddedContentCell>
+);
+export const DoubleCell = ({
+  title,
+  subtitle,
+  className,
+}: {
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  className?: string;
+}): React.ReactNode => (
+  <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.ReactNode => {
+  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.ReactNode => (
+  <Avatar size="small" text={initials} />
+);
+export const MonogramCell = ({
+  initials,
+  className,
+}: {
+  initials: string;
+  className?: string;
+}): React.ReactNode => (
+  <PaddedContentCell className={className}>
+    <Monogram initials={initials} />
+  </PaddedContentCell>
+);

package/lib/components/Table/DefaultRow.d.ts

@@ -0,0 +1,144 @@
+import {$ReadOnly} from 'utility-types';
+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 {GenericHeaderItems} from './DefaultTableHeader';
+import type {GenericObject} from './Table';
+import css from './Table.module.css';
+type ClassNames = $ReadOnly<{
+  tableRow?: string;
+  checkbox?: string;
+}>;
+// 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.ReactNode;
+  isLoading?: boolean;
+  headersLength: number;
+  customLoader?: React.ReactNode;
+};
+export const EmptyRow = ({
+  isLoading,
+  emptyText,
+  headersLength = 0,
+  customLoader,
+}: EmptyRowProps): React.ReactElement<'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 extends GenericObject, U extends GenericObject>({
+  data,
+  extras,
+  headers,
+  selected,
+  onSelect,
+  classNames,
+  disabled,
+}: {
+  data: T;
+  extras?: U;
+  headers: GenericHeaderItems<T, U>;
+  selected?: boolean;
+  // value dependent on checkbox checked value
+  onSelect?: (arg0: {value: string; checked: boolean}) => unknown;
+  classNames?: ClassNames;
+  disabled?: boolean;
+}): React.ReactNode {
+  return (
+    <BasicRow
+      className={classify(
+        selected ? css.defaultSelectedBodyRow : css.defaultBodyRow,
+        classNames?.tableRow,
+      )}
+    >
+      {selected != null && (
+        <PaddedContentCell
+          className={classify(css.checkbox, classNames?.checkbox)}
+        >
+          <Checkbox
+            checked={selected ? true : false}
+            onChange={onSelect}
+            disabled={disabled}
+            ariaLabel="Select row"
+          />
+        </PaddedContentCell>
+      )}
+      {headers.map((item, index) => {
+        const {key, render: Renderer, className: cellClassName, sticky} = item;
+        const value = data[key];
+        return Renderer ? (
+          <Renderer // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            data={data}
+            extras={extras}
+            selected={selected}
+            className={classify({
+              [css.stickyCell]: sticky,
+            })}
+          />
+        ) : (
+          <SingleCell // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            title={String(value)}
+            className={classify(cellClassName, {
+              [css.stickyCell]: sticky,
+            })}
+          />
+        );
+      })}
+    </BasicRow>
+  );
+}

package/lib/components/Table/DefaultTableHeader.d.ts

@@ -0,0 +1,236 @@
+import {$Keys} from 'utility-types';
+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 {BasicRow} from './DefaultRow';
+import type {SortDirection} from './hooks';
+import type {GenericObject} from './Table';
+import css from './Table.module.css';
+export type GenericHeaderItem<
+  T extends GenericObject,
+  U extends GenericObject,
+> = {
+  label: React.ReactNode;
+  key: $Keys<T>;
+  className?: string;
+  filterIcon?: React.ReactNode;
+  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>) => unknown;
+  sortKey?: $Keys<T>;
+  sortDirection?: SortDirection;
+  checked?: 'true' | 'false' | 'mixed';
+  handleCheckboxClick?: (arg0: {value: string; checked: boolean}) => unknown;
+  disabled?: boolean;
+  stickyHeader?: 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 extends GenericObject,
+  U extends GenericObject,
+>(props: TableHeaderProps<T, U>): React.ReactNode {
+  const {
+    className,
+    sortable = false,
+    columns,
+    handleSortClick,
+    sortKey,
+    sortDirection = 'original',
+    handleCheckboxClick,
+    checked,
+    disabled,
+    stickyHeader,
+  } = 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,
+            )} // eslint-disable-next-line react/no-array-index-key
+            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,
+        {
+          [css.stickyHeader]: stickyHeader,
+        },
+        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}
+                ariaLabel="Select all rows"
+              />
+            </div>
+          </BasicHeadCell>
+        )}
+        {tableHeaderCells()}
+      </BasicRow>
+    </BasicTableHead>
+  );
+}

package/lib/components/Table/StaticTable.d.ts

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import get from 'lodash/get';
+import xor from 'lodash/xor';
+import {useWindowSize} from '../../hooks/useWindowSize';
+import {sizeFluid} from '../../styles/variables/_size';
+import {classify} from '../../utils/classify';
+import type {ClassNameComponent} from '../../utils/makeClassNameComponent';
+import {makeClassNameComponent} from '../../utils/makeClassNameComponent';
+import {DefaultRow, EmptyRow} from './DefaultRow';
+import {DefaultTableHeader} from './DefaultTableHeader';
+import type {SortDirection} from './hooks';
+import type {GenericObject, TableProps} from './Table';
+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 extends GenericObject,
+  Extras extends GenericObject,
+>(
+  props: TableProps<Data, Extras> & {
+    handleSortClick?: (sortKey: string) => unknown;
+    sortKey?: string;
+    sortDirection?: SortDirection;
+    rowKeys?: string[];
+  },
+): React.ReactNode {
+  const {
+    classNames,
+    className,
+    TableRow,
+    entries,
+    extras,
+    rowKeys,
+    headers,
+    showHeader = true,
+    tableHeaderClassName,
+    sortable,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    defaultSortKey,
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    defaultSortDirection = 'original',
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    onSort,
+    handleSortClick,
+    sortKey,
+    sortDirection,
+    selectedKeys,
+    onSelect,
+    isLoading,
+    idName = 'id',
+    emptyText,
+    disabled,
+    customLoader,
+    borderRadius,
+    stickyHeader,
+  } = 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],
+  );
+  const tableRef = React.useRef(null);
+  const {width} = useWindowSize();
+  const [tableWidth, setTableWidth] = React.useState();
+  React.useEffect(() => {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [width]);
+
+  /**
+   * 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={classify(css.tableContainer, classNames?.wrapper)}
+      data-id="table-wrap"
+      ref={tableRef}
+      style={{
+        '--border-radius': borderRadius,
+        '--table-width': tableWidth ? `${tableWidth}px` : sizeFluid,
+      }}
+    >
+      <BasicTable
+        data-id="basic-table"
+        className={classify(
+          className,
+          {
+            [css.fullHeightTable]:
+              isLoading || (!entries.length && !!emptyText),
+          },
+          classNames?.table,
+        )}
+      >
+        {showHeader && (
+          <DefaultTableHeader
+            className={classify(tableHeaderClassName, classNames?.tableHeader)}
+            sortable={sortable}
+            columns={headers}
+            handleSortClick={handleSortClick}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            disabled={disabled}
+            handleCheckboxClick={handleHeaderCheckboxClick}
+            stickyHeader={stickyHeader}
+            checked={
+              selectedKeys == null || selectedKeys.length === 0
+                ? 'false'
+                : selectedKeys.length < entries.length
+                ? 'mixed'
+                : 'true'
+            }
+          />
+        )}
+
+        <BasicTableBody className={classNames?.tableBody}>
+          {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 as Data;
+              const selected =
+                selectedKeys?.includes(get(data, idName)) ?? undefined;
+              return TableRow ? (
+                <TableRow
+                  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}
+                  classNames={{
+                    tableRow: classNames?.tableRow,
+                    checkbox: classNames?.checkbox,
+                  }}
+                />
+              );
+            })
+          )}
+        </BasicTableBody>
+      </BasicTable>
+    </div>
+  );
+}