@veeqo/ui 0.0.1 → 0.0.3

package/src/components/DataTableExp/hooks/useCellWidths.ts

@@ -0,0 +1,34 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { RefObject, useEffect, useState } from 'react';
+import throttle from 'lodash.throttle';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export function useCellWidths(
+  tableRef: RefObject<HTMLElement>,
+  containerRef: RefObject<HTMLElement>,
+) {
+  const [cellWidths, setCellWidths] = useState<number[]>([]);
+
+  const updateCellWidths = () => {
+    if (!tableRef.current) return;
+    const cells = tableRef.current.querySelectorAll('tbody tr:first-child td');
+    const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);
+    setCellWidths(widths);
+  };
+
+  useEffect(() => {
+    updateCellWidths();
+  }, [tableRef.current]);
+
+  // Update cell widths when container is resized.
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const resizeObserverCallback = throttle(updateCellWidths, 50); // Throttle events
+    const resizeObserver = new ResizeObserver(resizeObserverCallback);
+    resizeObserver.observe(containerRef.current);
+    // eslint-disable-next-line consistent-return
+    return () => resizeObserver.disconnect();
+  }, [containerRef.current]);
+
+  return cellWidths;
+}

package/src/components/DataTableExp/hooks/useColumns.ts

@@ -0,0 +1,14 @@
+import { ColumnConfigs } from '../types';
+
+export function useColumns(columns: ColumnConfigs) {
+  const visible = columns.filter((col) => col.hidden !== true);
+  const pinnedLeft = visible.filter((col) => col.pinned === 'left');
+  const pinnedRight = visible.filter((col) => col.pinned === 'right');
+  const notPinned = visible.filter((col) => col.pinned === 'none' || !col.pinned);
+
+  return {
+    visible: [...pinnedLeft, ...notPinned, ...pinnedRight],
+    pinnedLeft,
+    pinnedRight,
+  };
+}

package/src/components/DataTableExp/hooks/useDragToScroll.ts

@@ -0,0 +1,48 @@
+import { useEffect, RefObject } from 'react';
+
+export function useDragToScroll(targetRef: RefObject<HTMLElement>) {
+  useEffect(() => {
+    if (!targetRef.current) return;
+
+    let isDragging = false;
+    const scrollTarget = targetRef.current;
+    const position = {
+      left: 0,
+      x: 0,
+    };
+
+    const mouseMoveHandler = (e: any) => {
+      if (!scrollTarget) return;
+      const dx = e.clientX - position.x;
+      scrollTarget.scrollLeft = position.left - dx;
+      if (!isDragging) {
+        scrollTarget.style.cursor = 'grabbing';
+        scrollTarget.style.userSelect = 'none';
+      }
+      isDragging = true;
+    };
+
+    const mouseUpHandler = () => {
+      document.removeEventListener('mousemove', mouseMoveHandler);
+      document.removeEventListener('mouseup', mouseUpHandler);
+      isDragging = false;
+      if (!scrollTarget) return;
+      scrollTarget.style.removeProperty('cursor');
+      scrollTarget.style.removeProperty('user-select');
+    };
+
+    const mouseDownHandler = (e: any) => {
+      if (!scrollTarget) return;
+      position.left = scrollTarget.scrollLeft;
+      position.x = e.clientX;
+      document.addEventListener('mousemove', mouseMoveHandler);
+      document.addEventListener('mouseup', mouseUpHandler);
+    };
+
+    scrollTarget.addEventListener('mousedown', mouseDownHandler);
+
+    /* eslint-disable-next-line consistent-return */
+    return () => scrollTarget?.removeEventListener('mousedown', mouseDownHandler);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetRef.current]);
+}

package/src/components/DataTableExp/hooks/useNested.ts

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { RowId, SetExpandedAction } from '../types';
+
+export function useNested() {
+  const [expandedRowIds, setExpandedRowIds] = useState<RowId[]>([]);
+
+  // TODO: Memoise this
+  const setExpanded: SetExpandedAction = (expanded, rowId) => {
+    if (!rowId) return;
+    if (expanded) {
+      // Add rowId to expandedRowIds
+      if (expandedRowIds.includes(rowId)) return;
+      const rowIds = [...expandedRowIds, rowId];
+      setExpandedRowIds(rowIds);
+    } else {
+      // Remove rowIds from expandedRowIds
+      const index = expandedRowIds.findIndex((id) => id === rowId);
+      if (index < 0) return;
+      const rowIds = [...expandedRowIds];
+      rowIds.splice(index, 1);
+      setExpandedRowIds(rowIds);
+    }
+  };
+
+  return {
+    nestedTableProps: {
+      expandedRowIds,
+      setExpanded,
+    },
+  };
+}

package/src/components/DataTableExp/hooks/useScrollPosition.ts

@@ -0,0 +1,45 @@
+/* eslint-disable consistent-return */
+/* eslint-disable react-hooks/exhaustive-deps */
+import { RefObject, useEffect, useState } from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+import throttle from 'lodash.throttle';
+import { ScrollPosition } from '../types';
+
+export function useScrollPosition(containerRef: RefObject<HTMLElement>) {
+  const [scrollPosition, setScrollPosition] = useState<ScrollPosition>('start');
+
+  const updateScrollPosition = () => {
+    if (!containerRef.current) return;
+    const { width } = containerRef.current.getBoundingClientRect();
+    const { scrollLeft, scrollWidth } = containerRef.current;
+    if (scrollWidth < width) {
+      setScrollPosition('none');
+      return;
+    }
+    if (scrollLeft === 0) {
+      setScrollPosition('start');
+      return;
+    }
+    if (scrollLeft + width >= scrollWidth) {
+      setScrollPosition('end');
+      return;
+    }
+    setScrollPosition('middle');
+  };
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    containerRef.current.addEventListener('scroll', updateScrollPosition);
+    return () => containerRef.current?.removeEventListener('scroll', updateScrollPosition);
+  }, [containerRef.current]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const resizeObserverCallback = throttle(updateScrollPosition, 50);
+    const resizeObserver = new ResizeObserver(resizeObserverCallback);
+    resizeObserver.observe(containerRef.current);
+    return () => resizeObserver.disconnect();
+  }, [containerRef.current]);
+
+  return { scrollPosition, containerRef };
+}

package/src/components/DataTableExp/hooks/useSelection.tsx

@@ -0,0 +1,92 @@
+/* eslint-disable react/destructuring-assignment */
+
+import React from 'react';
+
+import { ColumnConfig, RowId, SelectionState, SelectionMode, SetSelectedAction } from '../types';
+
+import { SelectionHeader } from '../components/SelectionHeader';
+import { SelectionCell } from '../components/SelectionCell';
+
+export type UseSelectionConfig = {
+  selectionMode?: SelectionMode;
+  selectionState?: SelectionState;
+  enabledRowIds: RowId[];
+};
+
+const emptySelectionState: SelectionState = [[], () => {}];
+
+export function useSelection({
+  selectionMode = 'multiple',
+  selectionState,
+  enabledRowIds,
+}: UseSelectionConfig) {
+  const selectionEnabled = !!selectionState;
+  const [selectedRowIds, setSelectedRowIds] = selectionState || emptySelectionState;
+
+  // TODO: Memoise this
+  const setSelected: SetSelectedAction = (selected, rowId) => {
+    if (rowId === undefined || rowId === null) return; // Can't use falsey, must allow number 0
+    if (selected && selectionMode === 'single') {
+      // Replace selectedRowIds with only the current rowId
+      setSelectedRowIds([rowId]);
+      return;
+    }
+    if (selected) {
+      // Add rowId to selectedRowIds
+      if (selectedRowIds.includes(rowId)) return;
+      const rowIds = [...selectedRowIds, rowId];
+      setSelectedRowIds(rowIds);
+    } else {
+      // Remove rowIds from selectedRowIds
+      const index = selectedRowIds.findIndex((id) => id === rowId);
+      if (index < 0) return;
+      const rowIds = [...selectedRowIds];
+      rowIds.splice(index, 1);
+      setSelectedRowIds(rowIds);
+    }
+  };
+
+  // TODO: Memoise this
+  const toggleAllSelected = () => {
+    if (selectedRowIds.length === enabledRowIds.length) {
+      setSelectedRowIds([]);
+      return;
+    }
+    setSelectedRowIds(enabledRowIds);
+  };
+
+  // TODO: Memoise this
+  const selectionColumn: ColumnConfig = {
+    id: 'selection',
+    title: 'Selection',
+    width: 'auto',
+    align: 'center',
+    pinned: 'left',
+    renderHeader: (column, headerProps) => (
+      <SelectionHeader
+        {...headerProps}
+        selected={selectedRowIds.length === enabledRowIds.length}
+        indeterminate={selectedRowIds.length > 0 && selectedRowIds.length < enabledRowIds.length}
+        onChange={toggleAllSelected}
+        selectionMode={selectionMode}
+      />
+    ),
+    renderCell: (row, cellProps, actions, rowState) => (
+      <SelectionCell
+        {...cellProps}
+        rowId={row.id}
+        selected={rowState.selected}
+        onChange={actions.setSelected}
+        selectionMode={selectionMode}
+        disabled={rowState.disabled}
+      />
+    ),
+  };
+
+  return {
+    selectionEnabled,
+    selectedRowIds,
+    selectionColumn,
+    setSelected,
+  };
+}

package/src/components/DataTableExp/index.tsx

@@ -0,0 +1 @@
+export { DataTableExp } from './DataTable';

package/src/components/DataTableExp/renderers/index.tsx

@@ -0,0 +1,5 @@
+export * from './renderCell';
+export * from './renderFooter';
+export * from './renderHeader';
+export * from './renderLoadingCell';
+export * from './renderNestedCell';

package/src/components/DataTableExp/renderers/renderCell.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+
+import { TableRow, ColumnConfig, TableActions, RowState } from '../types';
+
+/**
+ * Default renderer for table cells
+ *
+ * @param row
+ * @param column
+ * @returns
+ */
+export function renderCell(
+  row: TableRow,
+  column: ColumnConfig,
+  actions: TableActions,
+  rowState: RowState,
+): ReactNode {
+  if (column.hidden) {
+    return null;
+  }
+
+  const cellProps = {
+    align: column.align,
+    key: `${row.id}-${column.id}`,
+    role: 'cell',
+    spacing: column.spacing,
+    span: column.span,
+  };
+
+  return column.renderCell(row, cellProps, actions, rowState);
+}

package/src/components/DataTableExp/renderers/renderFooter.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+
+import { ColumnConfig } from '../types';
+import { Cell } from '../components/Cell';
+
+type RenderFooterParameters = {
+  column: ColumnConfig;
+};
+
+/**
+ * Default renderer for table footer cells
+ *
+ * @param column Column configuration object
+ * @returns Footer cell instance
+ */
+export function renderFooter({ column }: RenderFooterParameters): ReactNode {
+  if (column.hidden) {
+    return null;
+  }
+
+  const footerProps = {
+    key: column.id,
+    role: 'cell',
+    align: column.align,
+    spacing: column.spacing,
+  };
+
+  if (!column.renderFooter) {
+    return <Cell {...footerProps} />;
+  }
+
+  return column.renderFooter(column, footerProps);
+}

package/src/components/DataTableExp/renderers/renderHeader.tsx

@@ -0,0 +1,83 @@
+import React, { ReactNode } from 'react';
+import { Tooltip } from '../../Tooltip';
+
+import { Header } from '../components/Header';
+import { HeaderContent, ClickableHeaderContent, SortIndicator } from '../components/ColumnHeader';
+
+import { getNextSortState, GetSortIcon } from '../utils';
+import { ColumnConfig, SortState, SortChangeHandler, RendererHeaderProps } from '../types';
+import { sizes } from '../../../theme/modules/sizes';
+
+type RenderHeaderParameters = {
+  column: ColumnConfig;
+  sortState?: SortState;
+  onChangeSort?: SortChangeHandler;
+};
+
+/**
+ * Default renderer for table header cells
+ *
+ * @param column Column configuration object
+ * @returns Header cell instance
+ */
+export function renderHeader({
+  column,
+  sortState,
+  onChangeSort,
+}: RenderHeaderParameters): ReactNode {
+  if (column.sortable && !sortState) {
+    throw new Error(
+      `Column '${column.id}' is configured to be sortable but the 'sortState' prop is missing.`,
+    );
+  }
+
+  if (column.hidden) {
+    return null;
+  }
+
+  const headerProps: RendererHeaderProps = {
+    key: column.id.toString(),
+    id: `datatable-header-${column.id}`,
+    role: 'columnheader',
+    align: column.align,
+    spacing: column.spacing,
+    className: column.sortable ? 'sortable' : undefined,
+  };
+
+  // If defined, use custom renderer
+  if (column.renderHeader) {
+    return column.renderHeader(column, headerProps);
+  }
+
+  const handleClickSort = () => {
+    if (!sortState) {
+      console.log('DataGrid::renderHeader::handleClickSort - sortState is not defined');
+      return;
+    }
+    const nextSortState = getNextSortState({ sortState, columnId: column.id });
+    if (!onChangeSort) {
+      console.log('DataGrid::renderHeader::handleClickSort - onChangeSort is not defined');
+      return;
+    }
+    onChangeSort(nextSortState);
+  };
+
+  const ColumnHeaderContent = column.sortable ? ClickableHeaderContent : HeaderContent;
+  const columnHeaderProps = column.sortable ? { onClick: handleClickSort } : {};
+
+  return (
+    <Header {...headerProps}>
+      <Tooltip text={column.tooltip}>
+        <ColumnHeaderContent {...columnHeaderProps}>
+          {column.icon && column.icon}
+          {column.title && <span>{column.title}</span>}
+          {column.sortable && (
+            <SortIndicator>
+              <GetSortIcon sortState={sortState} columnId={column.id} size={sizes[5]} />
+            </SortIndicator>
+          )}
+        </ColumnHeaderContent>
+      </Tooltip>
+    </Header>
+  );
+}

package/src/components/DataTableExp/renderers/renderLoadingCell.tsx

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import { TableRow, ColumnConfig } from '../types';
+import { Cell } from '../components/Cell';
+import { LoadingCellContent } from '../components/LoadingCellContent';
+
+/**
+ * Default renderer for loading cells
+ * @param row
+ * @param column
+ * @returns
+ */
+export function renderLoadingCell(row: TableRow, column: ColumnConfig): ReactNode {
+  if (column.hidden === true) {
+    return null;
+  }
+
+  const cellProps = {
+    align: column.align,
+    key: `${row.id}-${column.id}`,
+    role: 'cell',
+    spacing: column.spacing,
+  };
+
+  return (
+    <Cell {...cellProps}>
+      <LoadingCellContent />
+    </Cell>
+  );
+}

package/src/components/DataTableExp/renderers/renderNestedCell.tsx

@@ -0,0 +1,33 @@
+import React, { ReactNode } from 'react';
+import { NestedTableRow, ColumnConfig, RowState } from '../types';
+import { Cell } from '../components/Cell';
+
+/**
+ * Default renderer for table cells in nested rows
+ *
+ * @param nestedRow
+ * @param column
+ * @returns
+ */
+export function renderNestedCell(
+  nestedRow: NestedTableRow,
+  column: ColumnConfig,
+  rowState: RowState,
+): ReactNode {
+  if (column.hidden) {
+    return null;
+  }
+
+  const cellProps = {
+    align: column.align,
+    key: `${nestedRow.id}-${column.id}`,
+    role: 'cell',
+    spacing: column.spacing,
+  };
+
+  if (!column.renderNestedCell) {
+    return <Cell {...cellProps} />;
+  }
+
+  return column.renderNestedCell(nestedRow, cellProps, rowState);
+}

package/src/components/DataTableExp/types.ts

@@ -0,0 +1,168 @@
+import { ReactNode } from 'react';
+import { Size } from '../Stack/types';
+
+export type BorderType = 'all' | 'vertical' | 'none';
+
+export type ScrollPosition = 'none' | 'start' | 'middle' | 'end';
+
+export type RowState = {
+  selected: boolean;
+  expanded: boolean;
+  disabled: boolean;
+};
+
+/* Columns */
+
+export type ColumnId = string | number;
+export type ColumnAlignment = 'left' | 'center' | 'right';
+export type ColumnOverflow = 'none' | 'wrap' | 'truncate';
+export type ColumnPinned = 'left' | 'right' | 'none';
+export type ColumnSpacing = Size;
+export type ColumnWidth = number | string;
+export type ColumnWidthFixed = ColumnWidth;
+
+export type ColumnWidthBounded = {
+  min?: ColumnWidth;
+  max?: ColumnWidth;
+};
+
+export type ColumnConfig = {
+  id: ColumnId;
+  // Options
+  align?: ColumnAlignment;
+  hidden?: boolean;
+  icon?: Omit<ReactNode, string>; // Size[5]
+  pinned?: ColumnPinned;
+  sortable?: boolean;
+  spacing?: ColumnSpacing;
+  span?: number;
+  title?: string;
+  tooltip?: string;
+  width?: ColumnWidthFixed | ColumnWidthBounded;
+  // Renderers
+  renderCell: CellRenderer;
+  renderFooter?: FooterRenderer;
+  renderHeader?: HeaderRenderer;
+  renderNestedCell?: NestedCellRenderer;
+};
+
+export type ColumnConfigs = Array<ColumnConfig>;
+
+/* Sorting */
+
+export enum SortDirection {
+  ascending = 'ascending',
+  descending = 'descending',
+}
+
+export type SortDirectionType = keyof typeof SortDirection;
+
+export type SortState = {
+  columnId: ColumnId;
+  direction: SortDirection;
+};
+
+export type SortChangeHandler = (sortState: SortState) => void;
+
+/* Data */
+
+export type RowId = number | string;
+
+export interface NestedTableRow {
+  id: RowId;
+  data: any;
+}
+
+export type NestedTableRows = Array<NestedTableRow>;
+
+export interface TableRow {
+  id: RowId;
+  data: any;
+  nestedRows?: NestedTableRows;
+  accentColor?: string;
+  e2eClassName?: string;
+}
+export type TableRows = Array<TableRow>;
+
+/* Header Props */
+
+export interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {
+  id: string;
+  align?: ColumnAlignment;
+  spacing?: ColumnSpacing;
+  span?: number;
+}
+
+export interface RendererHeaderProps extends HeaderProps {
+  key: string;
+}
+export interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {
+  selected: boolean;
+  indeterminate: boolean;
+  onChange: (selected: boolean, value: RowId | undefined) => void;
+  selectionMode: SelectionMode;
+}
+
+/* Renderers */
+
+export type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;
+export type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;
+
+export type CellRenderer = (
+  row: TableRow,
+  cellProps: object,
+  actions: TableActions,
+  rowState: RowState,
+) => ReactNode;
+
+type ParentRowState = RowState;
+export type NestedCellRenderer = (
+  nestedRow: NestedTableRow,
+  cellProps: object,
+  parentRowState: ParentRowState,
+) => ReactNode;
+
+/* Actions */
+
+export type SetSelectedAction = (selected: boolean, rowId: RowId | undefined) => void;
+export type SetExpandedAction = (expanded: boolean, rowId: RowId | undefined) => void;
+
+export type TableActions = {
+  setSelected: SetSelectedAction;
+  setExpanded: SetExpandedAction;
+};
+
+/* Props */
+
+export type BorderMode = 'full' | 'vertical' | 'none';
+
+export type CustomState = {
+  icon: ReactNode;
+  heading: string;
+  subheading?: string;
+};
+
+export type SelectionMode = 'single' | 'multiple';
+
+export type SelectionState = [RowId[], (rowIds: RowId[]) => void];
+
+export type StripingMode = 'row' | 'nested';
+
+export interface DataTableProps {
+  ActionBarSlot?: ReactNode;
+  borderMode?: BorderMode;
+  columns: ColumnConfigs;
+  disabledRowIds?: Array<RowId>;
+  enableStickyHeader?: boolean;
+  emptyState?: CustomState;
+  expandedRowIds?: Array<RowId>;
+  loading?: boolean;
+  loadingRowCount?: number;
+  onChangeSort?: SortChangeHandler;
+  rows: TableRows;
+  selectionMode?: SelectionMode;
+  selectionState?: SelectionState;
+  setExpanded?: SetExpandedAction;
+  sortState?: SortState;
+  stripingMode?: StripingMode;
+}

package/src/components/DataTableExp/utils/GetSortIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { theme } from '../../../theme';
+
+import { ColumnId, SortDirection, SortState } from '../types';
+import { DoubleArrowIcon } from '../../../tempIcons/DoubleArrowIconIcon';
+import { ArrowUpIcon } from '../../../tempIcons/ArrowUpIcon';
+import { ArrowDownIcon } from '../../../tempIcons/ArrowDownIcon';
+
+type GetSortIconPropsParameters = {
+  sortState?: SortState;
+  columnId: ColumnId;
+  size: string;
+};
+
+export const GetSortIcon = ({ sortState, columnId, size }: GetSortIconPropsParameters) => {
+  const dimentions = { height: size, width: size };
+  if (!sortState || sortState.columnId !== columnId) return <DoubleArrowIcon {...dimentions} />;
+
+  if (sortState.direction === SortDirection.ascending) {
+    return <ArrowUpIcon color={theme.colors.neutral.ink.dark} {...dimentions} />;
+  }
+
+  return <ArrowDownIcon color={theme.colors.neutral.ink.dark} {...dimentions} />;
+};