@veeqo/ui 0.0.1 → 0.0.4

package/src/components/DataTableExp/DataTable.tsx

@@ -0,0 +1,291 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
+
+import React, { useRef } from 'react';
+import { Stack } from '../Stack';
+import { Text } from '../Text';
+
+import { generateTableCss } from './utils';
+import { DataTableProps, CustomState, TableRow } from './types';
+
+import {
+  useCellWidths,
+  useColumns,
+  useDragToScroll,
+  useScrollPosition,
+  useSelection,
+} from './hooks';
+
+import {
+  renderCell,
+  renderFooter,
+  renderHeader,
+  renderLoadingCell,
+  renderNestedCell,
+} from './renderers';
+
+import { ActionBar } from './components/ActionBar';
+import { Cell } from './components/Cell';
+import { ColumnMenu } from './components/ColumnMenu';
+import { EmptyBodyContent, EmptyBodyGlyphWrapper } from './components/EmptyBodyContent';
+import { Header } from './components/Header';
+import { NoWrap } from './components/NoWrap';
+import { Row } from './components/Row';
+import { ScrollContainer } from './components/ScrollContainer';
+import { TableGrid } from './components/TableGrid';
+import { Truncate } from './components/Truncate';
+import { Wrapper } from './components/Wrapper';
+import { SelectionCell } from './components/SelectionCell';
+import { SelectionHeader } from './components/SelectionHeader';
+import { StickyHead } from './components/StickyHead';
+
+import { getRowState } from './utils/getRowState';
+import { InfoIcon } from '../../tempIcons/InfoIcon';
+
+const defaultEmptyState: CustomState = {
+  icon: <InfoIcon width={48} height={48} />,
+  heading: 'No results',
+};
+
+const emptyAction = () => {};
+
+export const DataTableExp = ({
+  ActionBarSlot,
+  borderMode,
+  columns,
+  emptyState = defaultEmptyState,
+  expandedRowIds,
+  loading,
+  loadingRowCount,
+  onChangeSort,
+  rows,
+  disabledRowIds,
+  selectionMode,
+  selectionState,
+  setExpanded,
+  sortState,
+  stripingMode,
+  enableStickyHeader,
+}: DataTableProps) => {
+  // Refs
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
+  const intersectionTargetRef = useRef<HTMLDivElement>(null);
+
+  useDragToScroll(scrollContainerRef);
+
+  // Configure row selection
+
+  const enabledRowIds = rows.map((row) => row.id).filter((id) => !disabledRowIds?.includes(id));
+
+  const { selectionEnabled, selectedRowIds, selectionColumn, setSelected } = useSelection({
+    selectionMode,
+    selectionState,
+    enabledRowIds,
+  });
+
+  // Assign actions
+
+  const actions = {
+    setSelected: setSelected || emptyAction,
+    setExpanded: setExpanded || emptyAction,
+  };
+
+  // Process columns
+
+  const columnsWithSelection = [selectionColumn, ...columns];
+  const allColumns = selectionEnabled ? columnsWithSelection : columns;
+
+  const cellWidths = useCellWidths(tableRef, scrollContainerRef);
+  const { visible, pinnedLeft, pinnedRight } = useColumns(allColumns);
+
+  // Generate styles
+
+  const { scrollPosition } = useScrollPosition(scrollContainerRef);
+  const tableCss = generateTableCss({
+    pinnedLeft,
+    pinnedRight,
+    cellWidths,
+    scrollPosition,
+    visible,
+    stripingMode,
+  });
+
+  // Render states
+
+  if (loading) {
+    const loadingRows: Array<TableRow> = new Array(loadingRowCount).fill(true).map(() => ({
+      // generate random ID forcing all rows to re-render avoid animation de-sync
+      id: Math.random() * 1000,
+      data: null,
+    }));
+
+    return (
+      <Wrapper borderMode={borderMode}>
+        <ScrollContainer ref={scrollContainerRef}>
+          <TableGrid css={tableCss} ref={tableRef} role="table">
+            <thead role="rowgroup">
+              <Row role="row">
+                {visible.map((column) => renderHeader({ column, sortState, onChangeSort }))}
+              </Row>
+            </thead>
+            <tbody role="rowgroup">
+              {loadingRows.map((row) => (
+                <Row key={row.id}>{visible.map((col) => renderLoadingCell(row, col))}</Row>
+              ))}
+            </tbody>
+          </TableGrid>
+        </ScrollContainer>
+      </Wrapper>
+    );
+  }
+
+  if (rows.length === 0) {
+    return (
+      <Wrapper borderMode={borderMode}>
+        <ScrollContainer ref={scrollContainerRef}>
+          <TableGrid css={tableCss} ref={tableRef} role="table">
+            <thead role="rowgroup">
+              <Row role="row">
+                {visible.map((column) => renderHeader({ column, sortState, onChangeSort }))}
+              </Row>
+            </thead>
+            <tbody role="rowgroup">
+              <EmptyBodyContent columnCount={visible.length}>
+                <EmptyBodyGlyphWrapper>
+                  {/* Should be 48x48px */}
+                  {emptyState.icon}
+                </EmptyBodyGlyphWrapper>
+                <Stack spacing="sm" alignX="center">
+                  <Text variant="headingMedium">{emptyState.heading}</Text>
+                  {emptyState.subheading && (
+                    <Text variant="subheadingMedium">{emptyState.subheading}</Text>
+                  )}
+                </Stack>
+              </EmptyBodyContent>
+            </tbody>
+          </TableGrid>
+        </ScrollContainer>
+      </Wrapper>
+    );
+  }
+
+  const renderRow = (row: TableRow) => {
+    const { e2eClassName = '', accentColor } = row;
+    const rowState = getRowState(row.id, { selectedRowIds, expandedRowIds, disabledRowIds });
+
+    return (
+      <Row role="row" key={row.id} accentColor={accentColor} className={e2eClassName} {...rowState}>
+        {visible.map((col) => renderCell(row, col, actions, rowState))}
+      </Row>
+    );
+  };
+
+  const renderNestedRow = (nestedRow: TableRow, rowId: TableRow['id']) => {
+    const nestedRowE2eClassName = nestedRow?.data?.e2eClassNames?.row;
+    const rowState = getRowState(rowId, { selectedRowIds, expandedRowIds, disabledRowIds });
+    return (
+      <Row role="row" key={nestedRow.id} className={nestedRowE2eClassName}>
+        {visible.map((col) => renderNestedCell(nestedRow, col, rowState))}
+      </Row>
+    );
+  };
+
+  const renderSection = (row: TableRow) => {
+    const isExpanded = expandedRowIds?.includes(row.id);
+    return (
+      <tbody role="rowgroup" key={row.id}>
+        {renderRow(row)}
+        {isExpanded && row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))}
+      </tbody>
+    );
+  };
+
+  const renderBody = () => {
+    const hasNestedRows = !!expandedRowIds;
+    const hasMultipleSections = hasNestedRows && stripingMode === 'nested';
+
+    if (hasMultipleSections) {
+      return rows.map(renderSection);
+    }
+
+    if (hasNestedRows) {
+      return (
+        <tbody role="rowgroup">
+          {rows.map((row) => {
+            const rowElement = renderRow(row);
+            const isExpanded = expandedRowIds?.includes(row.id);
+            const nestedRowElements =
+              (isExpanded &&
+                row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))) ||
+              [];
+            return [rowElement, ...nestedRowElements];
+          })}
+        </tbody>
+      );
+    }
+
+    return <tbody role="rowgroup">{rows.map(renderRow)}</tbody>;
+  };
+
+  const headersMarkup = (
+    <Row role="row">
+      {visible.map((column) => renderHeader({ column, sortState, onChangeSort }))}
+    </Row>
+  );
+
+  const shouldRenderFooter = columns.some((column) => !!column.renderFooter);
+  const shouldRenderActionBar = selectedRowIds.length > 0 && !!ActionBarSlot;
+
+  return (
+    <Wrapper borderMode={borderMode}>
+      {shouldRenderActionBar && (
+        <ActionBar
+          selectionColumn={selectionColumn}
+          intersectionTargetRef={intersectionTargetRef}
+          containerRef={scrollContainerRef}
+        >
+          {ActionBarSlot}
+        </ActionBar>
+      )}
+      <ScrollContainer ref={scrollContainerRef}>
+        {enableStickyHeader && (
+          <StickyHead
+            tableCss={tableCss}
+            intersectionTargetRef={intersectionTargetRef}
+            containerRef={scrollContainerRef}
+            cellWidths={cellWidths}
+          >
+            {headersMarkup}
+          </StickyHead>
+        )}
+        <div ref={intersectionTargetRef} style={{ height: 0 }} />
+        <TableGrid css={tableCss} ref={tableRef} role="table">
+          <thead role="rowgroup">{headersMarkup}</thead>
+          {renderBody()}
+          {shouldRenderFooter && (
+            <tfoot role="rowgroup">
+              <Row role="row">{visible.map((column) => renderFooter({ column }))}</Row>
+            </tfoot>
+          )}
+        </TableGrid>
+      </ScrollContainer>
+    </Wrapper>
+  );
+};
+
+DataTableExp.defaultProps = {
+  loading: false,
+  loadingRowCount: 5,
+  selectionMode: 'multiple',
+  stripingMode: 'row',
+  enableStickyHeader: true,
+};
+
+DataTableExp.Cell = Cell;
+DataTableExp.ColumnMenu = ColumnMenu;
+DataTableExp.SelectionCell = SelectionCell;
+DataTableExp.SelectionHeader = SelectionHeader;
+DataTableExp.Header = Header;
+DataTableExp.Truncate = Truncate;
+DataTableExp.NoWrap = NoWrap;

package/src/components/DataTableExp/DataTableExp.stories.tsx

@@ -0,0 +1,329 @@
+/* eslint-disable react/destructuring-assignment, react/jsx-one-expression-per-line */
+
+import React, { useState } from 'react';
+import { theme } from '../../theme';
+import { Button } from '../Button';
+import { Text } from '../Text';
+import { Stack } from '../Stack';
+import { DataTable } from './DataTable';
+import { useNested } from './hooks/useNested';
+
+import { ColumnConfigs, SortDirection, SortState, TableRows } from './types';
+import { DownArrowIcon } from '../../tempIcons/DownArrowIcon';
+
+export default {
+  title: 'Components/Layout/DataTableExp',
+  component: DataTable,
+};
+
+const defaultRows: TableRows = [
+  {
+    id: '1',
+    data: { name: 'T-shirt', quantity: 15, country: 'GB' },
+  },
+  {
+    id: '2',
+    data: { name: 'Jeans', quantity: 7, country: 'GB' },
+  },
+  {
+    id: '3',
+    data: { name: 'Shoes', quantity: 72, country: 'US' },
+  },
+  {
+    id: '4',
+    data: { name: 'Skirt', quantity: 3, country: 'FR' },
+  },
+  {
+    id: '5',
+    data: { name: 'Dress', quantity: 156, country: 'CA' },
+  },
+  {
+    id: '6',
+    data: { name: 'Hat', quantity: 61, country: 'CA' },
+  },
+  {
+    id: '7',
+    data: { name: 'Bracelet', quantity: 15, country: 'DE' },
+  },
+  {
+    id: '8',
+    data: { name: 'Glasses', quantity: 2, country: 'CA' },
+  },
+  {
+    id: '9',
+    data: { name: 'Shorts', quantity: 46, country: 'FR' },
+  },
+  {
+    id: '10',
+    data: { name: 'Jacket', quantity: 14, country: 'GB' },
+  },
+];
+
+const defaultRowsWithNested: TableRows = [
+  {
+    ...defaultRows[0],
+    nestedRows: [
+      {
+        id: 'a',
+        data: { name: 'Small', sku: 'TS_S', quantity: 3 },
+      },
+      {
+        id: 'b',
+        data: { name: 'Large', sku: 'TS_L', quantity: 2 },
+      },
+    ],
+  },
+  {
+    ...defaultRows[1],
+    nestedRows: [
+      {
+        id: 'c',
+        data: { name: 'Small', sku: 'TS_S', quantity: 3 },
+      },
+      {
+        id: 'd',
+        data: { name: 'Large', sku: 'TS_L', quantity: 4 },
+      },
+    ],
+  },
+];
+
+const defaultColumns: ColumnConfigs = [
+  {
+    id: 'name',
+    title: 'Name',
+    tooltip: undefined,
+    renderCell: (row, cellProps) => (
+      <DataTable.Cell {...cellProps}>
+        <DataTable.NoWrap>
+          <Text variant="linkSmall">{row.data.name}</Text>
+        </DataTable.NoWrap>
+      </DataTable.Cell>
+    ),
+    renderNestedCell: (row, cellProps) => (
+      <DataTable.Cell style={{ paddingLeft: 32 }} {...cellProps}>
+        {row.data.name}
+      </DataTable.Cell>
+    ),
+    renderFooter: (columns, footerProps) => <DataTable.Cell {...footerProps}>Total</DataTable.Cell>,
+  },
+  {
+    id: 'sku',
+    title: 'SKU',
+    icon: 'clipboard',
+    renderCell: (row, cellProps) => <DataTable.Cell {...cellProps}>-</DataTable.Cell>,
+    renderNestedCell: (row, cellProps) => (
+      <DataTable.Cell {...cellProps}>{row.data.sku}</DataTable.Cell>
+    ),
+  },
+  {
+    id: 'country',
+    icon: 'international',
+    tooltip: 'Origin country',
+    align: 'center',
+    renderCell: (row, cellProps) => (
+      <DataTable.Cell {...cellProps}>{row.data.country}</DataTable.Cell>
+    ),
+    renderNestedCell: (row, cellProps) => <DataTable.Cell {...cellProps}>-</DataTable.Cell>,
+  },
+  {
+    id: 'quantity',
+    title: 'Quantity',
+    align: 'right',
+    renderCell: (row, cellProps) => (
+      <DataTable.Cell {...cellProps}>{row.data.quantity}</DataTable.Cell>
+    ),
+    renderNestedCell: (row, cellProps) => (
+      <DataTable.Cell {...cellProps}>{row.data.quantity}</DataTable.Cell>
+    ),
+    renderFooter: (column, footerProps) => (
+      <DataTable.Cell {...footerProps}>
+        {defaultRows.reduce((total, row) => total + row.data.quantity, 0)}
+      </DataTable.Cell>
+    ),
+  },
+  {
+    id: 'actions',
+    title: 'Actions',
+    align: 'center',
+    renderCell: (row, cellProps) => (
+      <DataTable.Cell {...cellProps}>
+        <Button size="sm">Edit</Button>
+      </DataTable.Cell>
+    ),
+    renderNestedCell: (row, cellProps) => <DataTable.Cell {...cellProps} />,
+  },
+];
+
+const defaultColumnsWithNested: ColumnConfigs = [
+  {
+    id: 'expand',
+    width: 'auto',
+    renderCell: (row, cellProps, actions, rowState) => (
+      <DataTable.Cell {...cellProps}>
+        <Button
+          size="sm"
+          icon={<DownArrowIcon />}
+          onClick={() => actions.setExpanded(!rowState.expanded, row.id)}
+        />
+      </DataTable.Cell>
+    ),
+    renderNestedCell: (row, cellProps) => <DataTable.Cell {...cellProps} />,
+  },
+  ...defaultColumns,
+];
+
+export function Simple(args: any) {
+  return <DataTable columns={defaultColumns} rows={defaultRows} {...args} />;
+}
+
+export function NestedRows(args: any) {
+  const { nestedTableProps } = useNested();
+  return (
+    <DataTable
+      {...args}
+      columns={defaultColumnsWithNested}
+      rows={defaultRowsWithNested}
+      stripingMode="nested"
+      {...nestedTableProps}
+    />
+  );
+}
+
+export function PinnedColumns(args: any) {
+  const columns = defaultColumns.map((col) => ({ ...col }));
+  columns[0].pinned = 'left';
+  columns[4].pinned = 'right';
+  columns[1].width = '60%';
+  columns[2].width = '60%';
+
+  return <DataTable columns={columns} rows={defaultRows} {...args} />;
+}
+
+export function Sortable(args: any) {
+  const [sortState, setSortState] = useState<SortState>({
+    columnId: defaultColumns[0].id,
+    direction: SortDirection.ascending,
+  });
+
+  const columns = defaultColumns.map((col) => ({ ...col }));
+  columns[0].sortable = true;
+  columns[2].sortable = true;
+  columns[3].sortable = true;
+
+  const sortedRows = defaultRows.sort((a: any, b: any) => {
+    const { columnId } = sortState;
+    if (a.data[columnId] > b.data[columnId]) return 1;
+    if (a.data[columnId] < b.data[columnId]) return -1;
+    return 0;
+  });
+
+  if (sortState.direction === 'descending') {
+    sortedRows.reverse();
+  }
+
+  return (
+    <DataTable
+      columns={columns}
+      rows={sortedRows}
+      sortState={sortState}
+      onChangeSort={setSortState}
+      {...args}
+    />
+  );
+}
+
+export function LoadingState(args: any) {
+  return <DataTable columns={defaultColumns} rows={defaultRows} {...args} />;
+}
+
+LoadingState.args = {
+  loading: true,
+  loadingRowCount: 4,
+};
+
+export function EmptyState(args: any) {
+  return <DataTable columns={defaultColumns} rows={[]} {...args} />;
+}
+
+export function CustomState(args: any) {
+  return <DataTable columns={defaultColumns} rows={[]} {...args} />;
+}
+
+CustomState.args = {
+  emptyState: {
+    icon: 'inventory',
+    heading: 'Nothing in your inventory!',
+    subheading: 'Please select some stuff!',
+  },
+};
+
+export function RowAccentColors(args: any) {
+  const rows = defaultRows.map((row) => ({ ...row }));
+  rows[0].accentColor = theme.colors.secondary.red.base;
+  rows[1].accentColor = theme.colors.secondary.orange.base;
+  rows[2].accentColor = theme.colors.secondary.yellow.base;
+  rows[3].accentColor = theme.colors.secondary.green.base;
+  rows[4].accentColor = theme.colors.secondary.blue.base;
+
+  return <DataTable columns={defaultColumns} rows={rows} {...args} />;
+}
+
+export function SelectingRows(args: any) {
+  const selectionState = useState([]);
+
+  return (
+    <DataTable
+      {...args}
+      columns={defaultColumns}
+      rows={defaultRows}
+      selectionState={selectionState}
+    />
+  );
+}
+
+SelectingRows.args = {
+  disabledRowIds: ['2', '4'],
+};
+
+export function ActionBar(args: any) {
+  const selectionState = useState([]);
+
+  const ActionBarContent = (
+    <Stack direction="horizontal" alignY="center" alignX="between">
+      <Stack direction="horizontal" alignY="center" spacing="sm">
+        <Button size="sm" dropdown>
+          {selectionState[0].length} items selected
+        </Button>
+        <Button size="sm" dropdown>
+          Print
+        </Button>
+        <Button size="sm">Tags</Button>
+        <Button size="sm" dropdown>
+          More actions
+        </Button>
+      </Stack>
+      <Stack direction="horizontal" alignY="center" spacing="sm">
+        <Button size="sm" dropdown>
+          Edit packages
+        </Button>
+        <Button size="sm" dropdown>
+          Edit services
+        </Button>
+        <Button size="sm" variant="primary">
+          Buy {selectionState[0].length} labels: $7.01
+        </Button>
+      </Stack>
+    </Stack>
+  );
+
+  return (
+    <DataTable
+      {...args}
+      columns={defaultColumns}
+      rows={defaultRows}
+      selectionState={selectionState}
+      ActionBarSlot={ActionBarContent}
+    />
+  );
+}

package/src/components/DataTableExp/Docs.mdx

@@ -0,0 +1,74 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
+import * as DataTableExpStories from './DataTableExp.stories';
+
+<Meta of={DataTableExpStories} />
+
+# DataTableExp
+
+Here you will find additional information for using the `DataTableExp` component.
+
+- [Columns](#columns)
+- [Rows](#rows)
+
+## Columns
+
+### All configuration options
+
+```js
+const columns = [
+  {
+    // Required
+    id: 'productTitle',
+    renderCell: (row, cellProps) => (
+      <DataTableExp.Cell {...cellProps}>
+        {row.data.title}
+      </DataTableExp.Cell>
+    ),
+    // Optional
+    align: 'center',
+    hidden: false,
+    icon: <Icon />, // Pass though icon, NOT string.
+    pinned: 'left',
+    sortable: false,
+    spacing: 'sm',
+    span: 1,
+    title: 'Product Title',
+    tooltip: 'Custom tooltip text',
+    width: 'auto',
+    renderFooter: (column, footerProps) => (
+      <DataTableExp.Cell {...footerProps}>
+        Custom footer content
+      </DataTableExp.Cell>
+    ),
+    renderHeader: (column, headerProps) => (
+      <DataTableExp.Header {...headerProps}>
+        Custom header content
+      </DataTableExp.Header>
+    ),
+    renderNestedCell: (nestedRow, cellProps) => (
+      <DataTableExp.Cell {...cellProps}>
+        {nestedRow.data.title}
+      </DataTableExp.Cell>
+    )
+  },
+  ...
+];
+```
+
+## Rows
+
+### Example mapping from data
+
+```js
+const rows = orders.map((order) => ({
+  // Required
+  id: order.id,
+  data: order,
+  // Optional
+  accentColor: '#f4f456',
+  nestedRows: order.allocations.map((allocation) => ({
+    id: allocation.id,
+    data: allocation,
+  })),
+}));
+```