@veeqo/ui 0.0.3 → 0.0.6

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

@@ -1,92 +0,0 @@
-/* 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/renderers/renderCell.ts

@@ -1,31 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,168 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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} />;
-};

package/src/components/DataTableExp/utils/alignmentToFlex.ts

@@ -1,14 +0,0 @@
-import { ColumnAlignment } from '../types';
-
-export function alignmentToFlex(align: ColumnAlignment) {
-  switch (align) {
-    case 'left':
-      return 'flex-start';
-    case 'center':
-      return 'center';
-    case 'right':
-      return 'flex-end';
-    default:
-      return 'flex-start';
-  }
-}