@spaced-out/ui-design-system 0.3.45 → 0.3.46

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

@@ -1,145 +0,0 @@
-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}
-            disabled={disabled}
-            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

@@ -1,237 +0,0 @@
-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;
-    disabled?: 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

@@ -1,205 +0,0 @@
-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,
-    disabledKeys = [],
-    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 && Array.isArray(selectedKeys)
-                  ? selectedKeys.includes(get(data, idName))
-                  : undefined;
-              const isRowDisabled =
-                disabledKeys && Array.isArray(disabledKeys)
-                  ? disabledKeys.includes(get(data, idName))
-                  : false;
-              return TableRow ? (
-                <TableRow
-                  key={key}
-                  data={data}
-                  headers={headers} // extras and rowKeys are both 'optional'
-                  extras={extras}
-                  sortedKeys={rowKeys ?? mappedKeys}
-                  selected={selected}
-                  disabled={disabled || isRowDisabled}
-                />
-              ) : (
-                <DefaultRow
-                  key={key}
-                  data={data}
-                  extras={extras}
-                  headers={headers}
-                  selected={selected}
-                  onSelect={
-                    selectedKeys != null
-                      ? (_v) => onSelect?.(xor(selectedKeys ?? [], [key]))
-                      : undefined
-                  }
-                  disabled={disabled || isRowDisabled}
-                  classNames={{
-                    tableRow: classNames?.tableRow,
-                    checkbox: classNames?.checkbox,
-                  }}
-                />
-              );
-            })
-          )}
-        </BasicTableBody>
-      </BasicTable>
-    </div>
-  );
-}

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

@@ -1,114 +0,0 @@
-import {$ReadOnly, $Keys} from 'utility-types';
-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} from './StaticTable';
-// type ClassNames = $ReadOnly<{wrapper?: string}>;
-export type GenericObject = Readonly<Record<string, unknown>>;
-type ClassNames = $ReadOnly<{
-  wrapper?: string;
-  table?: string;
-  tableHeader?: string;
-  tableBody?: string;
-  tableRow?: string;
-  checkbox?: string;
-}>;
-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[]) => unknown;
-  idName?: $Keys<T>;
-  onSort?: (key: $Keys<T>, direction: SortDirection) => void;
-  isLoading?: boolean;
-  emptyText?: React.ReactNode;
-  disabled?: boolean;
-  customLoader?: React.ReactNode;
-  borderRadius?: string;
-  // For this to work the table wrapper should be scrollable
-  stickyHeader?: boolean;
-};
-
-/**
- * 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 extends GenericObject, Extras extends GenericObject>(
-  props: TableProps<Data, Extras>,
-): React.ReactNode {
-  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,
-  } = props;
-
-  /**
-   *
-   */
-  // eslint-disable-next-line unused-imports/no-unused-vars
-  const {sortedEntries, sortedKeys, ...sortableProps} = useSortableEntries(
-    entries,
-    idName,
-    {
-      defaultSortKey,
-      defaultSortDirection,
-      onSort,
-      enableInternalSorting,
-    },
-  );
-  return (
-    <StaticTable
-      {...props}
-      {...sortableProps}
-      sortable={sortable}
-      entries={entries}
-      rowKeys={sortedKeys}
-    />
-  );
-}