@veeqo/ui 0.0.4 → 0.0.7

package/src/components/DataTableExp/DataTable.tsx

@@ -1,291 +0,0 @@
-/* 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

@@ -1,329 +0,0 @@
-/* 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

@@ -1,74 +0,0 @@
-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,
-  })),
-}));
-```