@douglasneuroinformatics/libui 4.9.1 → 5.0.0

package/src/components/DataTable/__tests__/DataTable.spec.tsx

@@ -0,0 +1,60 @@
+import { faker } from '@faker-js/faker';
+import type { ColumnDef } from '@tanstack/table-core';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { range } from 'lodash-es';
+import { describe, expect, it } from 'vitest';
+
+import { DataTable } from '../DataTable';
+
+type PaymentStatus = 'failed' | 'pending' | 'processing' | 'success';
+
+type Payment = {
+  amount: number;
+  email: string;
+  id: string;
+  status: PaymentStatus;
+};
+
+const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: 'status',
+    enableSorting: false,
+    filterFn: (row, id, filter: PaymentStatus[]) => {
+      return filter.includes(row.getValue(id));
+    },
+    header: 'Status'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email'
+  },
+  {
+    accessorKey: 'amount',
+    header: 'Amount'
+  }
+];
+
+const statuses: readonly PaymentStatus[] = Object.freeze(['failed', 'pending', 'processing', 'success']);
+
+const data: Payment[] = range(20).map((i) => ({
+  amount: faker.number.int({ max: 100, min: 0 }),
+  email: faker.internet.email(),
+  id: String(i + 1),
+  status: faker.helpers.arrayElement(statuses)
+}));
+
+describe('DataTable', () => {
+  it('should render with 10 visible rows', () => {
+    render(<DataTable columns={columns} data={data} />);
+    expect(screen.getByTestId('data-table')).toBeInTheDocument();
+    expect(screen.getAllByTestId('data-table-row').length).toBe(10);
+  });
+  it('should search', async () => {
+    render(<DataTable columns={columns} data={data} />);
+    const searchBar = screen.getByTestId('data-table-search-bar').querySelector('input')!;
+    fireEvent.change(searchBar, { target: { value: data[0]!.email } });
+    await waitFor(() => expect(screen.getAllByTestId('data-table-row').length).toBe(1));
+    fireEvent.change(searchBar, { target: { value: '' } });
+    await waitFor(() => expect(screen.getAllByTestId('data-table-row').length).toBe(10));
+  });
+});

package/src/components/DataTable/constants.ts

@@ -0,0 +1,7 @@
+export const ACTIONS_COLUMN_ID = '__actions' as const;
+
+export const MEMOIZED_HANDLE_ID = Symbol();
+
+export const ROW_ACTIONS_METADATA_KEY = Symbol();
+
+export const TABLE_NAME_METADATA_KEY = Symbol();

package/src/components/DataTable/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import type { DataTableStoreApi } from './store';
+
+export const DataTableContext = createContext<{ store: DataTableStoreApi }>(null!);

package/src/components/DataTable/hooks.ts

@@ -0,0 +1,60 @@
+import { useContext, useEffect, useRef } from 'react';
+
+import { useStore } from 'zustand';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
+
+import { MEMOIZED_HANDLE_ID } from './constants';
+import { DataTableContext } from './context';
+
+import type { DataTableStore } from './types';
+
+export function useContainerRef() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const setContainerWidth = useDataTableStore((state) => state.setContainerWidth);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+    let delay = 0;
+
+    const observer = new ResizeObserver(([entry]) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        delay = 100;
+        if (entry?.contentBoxSize[0]?.inlineSize) {
+          const containerWidth = entry.contentBoxSize[0].inlineSize;
+          setContainerWidth(containerWidth);
+        }
+      }, delay);
+    });
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => {
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return containerRef;
+}
+
+export function useDataTableStore<T>(selector: (state: DataTableStore) => T) {
+  const context = useContext(DataTableContext);
+  return useStore(context.store, selector);
+}
+
+export function useDataTableHandle<TKey extends keyof DataTableStore['$handles']>(key: TKey, forceRender = false) {
+  const context = useContext(DataTableContext);
+  const { handle } = useStoreWithEqualityFn(
+    context.store,
+    // the function is already updated by the time of equality check, so we cache it here
+    (store) => ({
+      globalKey: store._key,
+      handle: store.$handles[key],
+      handleKey: store.$handles[key][MEMOIZED_HANDLE_ID]
+    }),
+    forceRender ? (a, b) => a.globalKey === b.globalKey : (a, b) => a.handleKey === b.handleKey
+  );
+  return handle();
+}

package/src/components/DataTable/store.ts

@@ -0,0 +1,203 @@
+import {
+  createTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel
+} from '@tanstack/table-core';
+import type { GlobalFilter, TableState, Updater } from '@tanstack/table-core';
+import { createStore } from 'zustand';
+
+import { ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants';
+import {
+  applyUpdater,
+  calculateColumnSizing,
+  defineMemoizedHandle,
+  getColumnsWithActions,
+  getTanstackTableState
+} from './utils';
+
+import type { DataTableStore, DataTableStoreParams } from './types';
+
+export function createDataTableStore<T>(params: DataTableStoreParams<T>) {
+  return createStore<DataTableStore>((set, get) => {
+    const _state = getTanstackTableState(params);
+
+    const invalidateHandles = <TKey extends keyof DataTableStore['$handles']>(keys: TKey[] | void) => {
+      set((state) => {
+        (keys ?? (Object.keys(state.$handles) as TKey[])).forEach((key) => {
+          state.$handles[key].invalidate();
+        });
+        return { _key: Symbol() };
+      });
+    };
+
+    const setTableState = <TKey extends keyof TableState>(key: TKey, updaterOrValue: Updater<TableState[TKey]>) => {
+      const state = table.getState();
+      const value = applyUpdater(updaterOrValue, state[key]);
+      table.setOptions((prev) => ({ ...prev, state: { ...prev.state, [key]: value } }));
+    };
+
+    const updateColumnSizing = () => {
+      const { _containerWidth } = get();
+      if (!_containerWidth) {
+        return;
+      }
+      setTableState('columnSizing', calculateColumnSizing(table, _containerWidth));
+    };
+
+    const updateStyle = () => {
+      set((state) => {
+        const headers = table.getFlatHeaders();
+        const style: React.CSSProperties & { [key: string]: any } = {
+          width: table.getTotalSize()
+        };
+        if (state._containerWidth === null) {
+          style['--table-container-width'] = state._containerWidth;
+          style.visibility = 'hidden';
+        } else {
+          style['--table-container-width'] = state._containerWidth;
+          style.visibility = 'visible';
+        }
+        for (const header of headers) {
+          style[`--header-${header.id}-size`] = header.getSize();
+          style[`--col-${header.column.id}-size`] = header.column.getSize();
+        }
+        return { style };
+      });
+    };
+
+    const table = createTable<any>({
+      columnResizeMode: 'onChange',
+      columns: getColumnsWithActions(params),
+      data: params.data,
+      enableSortingRemoval: false,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      meta: {
+        ...params.meta,
+        [ROW_ACTIONS_METADATA_KEY]: params.rowActions,
+        [TABLE_NAME_METADATA_KEY]: params.tableName
+      },
+      onColumnFiltersChange: (updaterOrValue) => {
+        setTableState('columnFilters', updaterOrValue);
+        invalidateHandles();
+      },
+      onColumnPinningChange: (updaterOrValue) => {
+        setTableState('columnPinning', updaterOrValue);
+        invalidateHandles();
+      },
+      onColumnSizingChange: (updaterOrValue) => {
+        const { _containerWidth: containerWidth } = get();
+        const { columnSizing: prevColumnSizing } = table.getState();
+        if (!containerWidth) {
+          console.error('Cannot set column sizing: container width is null');
+          return;
+        }
+        const updatedColumnSizing = applyUpdater(updaterOrValue, prevColumnSizing);
+        const computedWidth = table.getVisibleLeafColumns().reduce((previous, current) => {
+          return previous + (updatedColumnSizing[current.id] ?? current.getSize());
+        }, 0);
+        if (Number.isNaN(computedWidth)) {
+          console.error('Failed to compute width for columns');
+          return;
+        }
+        if (containerWidth > computedWidth) {
+          return;
+        }
+        setTableState('columnSizing', updatedColumnSizing);
+        updateStyle();
+        invalidateHandles();
+      },
+      onColumnSizingInfoChange: (updaterOrValue) => {
+        setTableState('columnSizingInfo', updaterOrValue);
+        updateStyle();
+        invalidateHandles();
+      },
+      onColumnVisibilityChange: (updaterOrValue) => {
+        setTableState('columnVisibility', updaterOrValue);
+        updateColumnSizing();
+        updateStyle();
+        invalidateHandles();
+      },
+      onGlobalFilterChange: (updaterOrValue: Updater<GlobalFilter>) => {
+        setTableState('globalFilter', updaterOrValue);
+        invalidateHandles();
+      },
+      onPaginationChange: (updaterOrValue) => {
+        setTableState('pagination', updaterOrValue);
+        invalidateHandles();
+      },
+      onSortingChange: (updaterOrValue) => {
+        setTableState('sorting', updaterOrValue);
+        invalidateHandles();
+      },
+      onStateChange: (updaterOrValue) => {
+        const prevState = table.getState();
+        table.setOptions((prev) => ({
+          ...prev,
+          state: typeof updaterOrValue === 'function' ? updaterOrValue(prevState) : updaterOrValue
+        }));
+        invalidateHandles();
+      },
+      renderFallbackValue: null,
+      state: _state
+    });
+
+    return {
+      $handles: {
+        headerGroups: defineMemoizedHandle(() => table.getHeaderGroups()),
+        paginationInfo: defineMemoizedHandle(() => {
+          const { pagination } = table.getState();
+          return {
+            pageCount: table.getPageCount(),
+            pageIndex: pagination.pageIndex
+          };
+        }),
+        rowCount: defineMemoizedHandle(() => table.getRowCount()),
+        rows: defineMemoizedHandle(() => {
+          const { rows } = table.getRowModel();
+          return rows;
+        }),
+        table: defineMemoizedHandle(() => table),
+        tableMeta: defineMemoizedHandle(() => table.options.meta ?? {})
+      },
+      _containerWidth: null,
+      _key: Symbol(),
+      reset: (params) => {
+        table.setOptions((options) => ({
+          ...options,
+          columns: getColumnsWithActions(params),
+          data: params.data,
+          meta: {
+            ...params.meta,
+            [ROW_ACTIONS_METADATA_KEY]: params.rowActions,
+            [TABLE_NAME_METADATA_KEY]: params.tableName
+          },
+          state: getTanstackTableState(params)
+        }));
+        invalidateHandles();
+      },
+      setContainerWidth: (containerWidth) => {
+        set(() => {
+          return { _containerWidth: containerWidth };
+        });
+        updateColumnSizing();
+        updateStyle();
+      },
+      setGlobalFilter: (globalFilter) => {
+        table.setGlobalFilter(globalFilter);
+      },
+      setPageIndex: (index) => {
+        table.setPageIndex(index);
+      },
+      style: {
+        visibility: 'hidden'
+      }
+    };
+  });
+}
+
+export type DataTableStoreApi = ReturnType<typeof createDataTableStore>;

package/src/components/DataTable/types.ts

@@ -0,0 +1,99 @@
+import type {
+  ColumnDef,
+  ColumnFiltersState,
+  ColumnPinningState,
+  GlobalFilter,
+  HeaderGroup,
+  Row,
+  RowData,
+  SortingState,
+  Table,
+  TableMeta
+} from '@tanstack/table-core';
+import type { Promisable } from 'type-fest';
+
+import type { MEMOIZED_HANDLE_ID, ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants';
+import type { DataTableEmptyStateProps } from './DataTableEmptyState';
+
+declare module '@tanstack/table-core' {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-unused-vars
+  export interface ColumnMeta<TData, TValue> {
+    [key: string]: unknown;
+  }
+
+  export type GlobalFilter = string | undefined;
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  export interface TableMeta<TData extends RowData> {
+    [key: string]: unknown;
+    [ROW_ACTIONS_METADATA_KEY]?: DataTableRowAction<TData>[];
+    [TABLE_NAME_METADATA_KEY]?: string;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  export interface TableState {
+    globalFilter: GlobalFilter;
+  }
+}
+
+export type DataTableInitialState = {
+  columnFilters?: ColumnFiltersState;
+  columnPinning?: ColumnPinningState;
+  sorting?: SortingState;
+};
+
+export type DataTableProps<T extends RowData> = DataTableContentProps<T> & DataTableStoreParams<T>;
+
+export type DataTableContentProps<T extends RowData> = {
+  emptyStateProps?: Partial<DataTableEmptyStateProps>;
+  onSearchChange?: SearchChangeHandler<NoInfer<T>>;
+  togglesComponent?: React.FC<{ table: Table<T> }>;
+};
+
+export type DataTableHandles<T extends { [key: string]: unknown }> = {
+  [K in keyof T]: MemoizedHandle<() => T[K]>;
+};
+
+export type DataTableRowAction<T extends RowData> = {
+  destructive?: boolean;
+  disabled?: ((row: T) => boolean) | boolean;
+  label: string;
+  onSelect: (row: T, table: Table<T>) => Promisable<void>;
+};
+
+export type DataTableStore = {
+  $handles: DataTableHandles<{
+    headerGroups: HeaderGroup<any>[];
+    paginationInfo: {
+      pageCount: number;
+      pageIndex: number;
+    };
+    rowCount: number;
+    rows: Row<any>[];
+    table: Table<any>;
+    tableMeta: TableMeta<any>;
+  }>;
+  _containerWidth: null | number;
+  _key: symbol;
+  reset: (params: DataTableStoreParams<any>) => void;
+  setContainerWidth: (containerWidth: number) => void;
+  setGlobalFilter: (globalFilter: GlobalFilter) => void;
+  setPageIndex: (index: number) => void;
+  style: React.CSSProperties;
+};
+
+export type DataTableStoreParams<T extends RowData> = {
+  columns: ColumnDef<NoInfer<T>>[];
+  data: T[];
+  initialState?: DataTableInitialState;
+  meta?: TableMeta<NoInfer<T>>;
+  rowActions?: DataTableRowAction<NoInfer<T>>[];
+  tableName?: string;
+};
+
+export type MemoizedHandle<T extends (...args: any[]) => any> = T & {
+  invalidate(): void;
+  [MEMOIZED_HANDLE_ID]: symbol;
+};
+
+export type SearchChangeHandler<T = any> = (value: string, table: Table<T>) => void;

package/src/components/DataTable/utils.tsx

@@ -0,0 +1,138 @@
+import type { ColumnDef, ColumnSizingState, RowData, Table, TableState, Updater } from '@tanstack/table-core';
+import { sum } from 'lodash-es';
+
+import { ACTIONS_COLUMN_ID, MEMOIZED_HANDLE_ID } from './constants';
+import { DataTableRowActionCell } from './DataTableRowActionCell';
+
+import type { DataTableStoreParams, MemoizedHandle } from './types';
+
+function applyUpdater<T>(updater: Updater<T>, current: T): T {
+  return typeof updater === 'function' ? (updater as (prev: T) => T)(current) : updater;
+}
+
+function calculateColumnSizing(table: Table<any>, containerWidth: number) {
+  const updatedColumnSizing: ColumnSizingState = {};
+
+  const visibleCenterLeafColumns = table.getCenterLeafColumns().filter((column) => column.getIsVisible());
+  const visibleCenterLeafColumnIds = visibleCenterLeafColumns.map((column) => column.id);
+  const visibleNonCenteredLeafColumns = table.getVisibleLeafColumns().filter((column) => {
+    return !visibleCenterLeafColumnIds.includes(column.id);
+  });
+
+  visibleNonCenteredLeafColumns.forEach((column) => {
+    const defaultSize = column.columnDef.size;
+    if (!defaultSize) {
+      console.error(`Size must be specified for pinned column with ID '${column.id}', defaulting to 200px`);
+      updatedColumnSizing[column.id] = 200;
+    } else {
+      updatedColumnSizing[column.id] = defaultSize;
+    }
+  });
+
+  const nonCenteredColumnsSize = sum(Object.values(updatedColumnSizing));
+  const availableCenterSize = containerWidth - nonCenteredColumnsSize;
+  let maxCenterColumns: number;
+  if (containerWidth < 512) {
+    maxCenterColumns = 1;
+  } else if (containerWidth < 768) {
+    maxCenterColumns = 2;
+  } else if (containerWidth < 1024) {
+    maxCenterColumns = 3;
+  } else if (containerWidth < 1280) {
+    maxCenterColumns = 4;
+  } else {
+    maxCenterColumns = 5;
+  }
+
+  const centerColumnsToDisplay = Math.min(visibleCenterLeafColumns.length, maxCenterColumns);
+  if (centerColumnsToDisplay) {
+    visibleCenterLeafColumns.forEach((column) => {
+      updatedColumnSizing[column.id] = availableCenterSize / centerColumnsToDisplay;
+    });
+  } else {
+    visibleNonCenteredLeafColumns.forEach((column) => {
+      updatedColumnSizing[column.id] = containerWidth / visibleNonCenteredLeafColumns.length;
+    });
+  }
+
+  return updatedColumnSizing;
+}
+
+function defineMemoizedHandle<T extends (...args: any[]) => any>(target: T) {
+  const handle = target as MemoizedHandle<T>;
+  handle[MEMOIZED_HANDLE_ID] = Symbol();
+  handle.invalidate = function () {
+    this[MEMOIZED_HANDLE_ID] = Symbol();
+  };
+  return handle;
+}
+
+function flexRender<TProps extends object>(
+  Comp: React.ComponentType<TProps> | React.ReactNode,
+  props: TProps
+): React.JSX.Element | React.ReactNode {
+  return !Comp ? null : isReactComponent<TProps>(Comp) ? <Comp {...props} /> : Comp;
+}
+
+function getColumnsWithActions<T extends RowData>({ columns, rowActions }: DataTableStoreParams<T>): ColumnDef<T>[] {
+  if (!rowActions) {
+    return columns;
+  }
+  return [
+    ...columns,
+    {
+      cell: DataTableRowActionCell,
+      enableHiding: false,
+      enableResizing: false,
+      id: ACTIONS_COLUMN_ID,
+      size: 64
+    }
+  ];
+}
+
+function getTanstackTableState<T>({ initialState, rowActions }: DataTableStoreParams<T>): TableState {
+  const { columnFilters = [], columnPinning = {}, sorting = [] } = initialState ?? {};
+  const state: TableState = {
+    columnFilters,
+    columnOrder: [],
+    columnPinning,
+    columnSizing: {},
+    columnSizingInfo: {
+      columnSizingStart: [],
+      deltaOffset: null,
+      deltaPercentage: null,
+      isResizingColumn: false,
+      startOffset: null,
+      startSize: null
+    },
+    columnVisibility: {},
+    expanded: {},
+    globalFilter: undefined,
+    grouping: [],
+    pagination: {
+      pageIndex: 0,
+      pageSize: 10
+    },
+    rowPinning: {},
+    rowSelection: {},
+    sorting
+  };
+  if (rowActions) {
+    state.columnPinning.right ??= [];
+    state.columnPinning.right.push(ACTIONS_COLUMN_ID);
+  }
+  return state;
+}
+
+function isReactComponent<TProps>(component: unknown): component is React.ComponentType<TProps> {
+  return typeof component === 'function';
+}
+
+export {
+  applyUpdater,
+  calculateColumnSizing,
+  defineMemoizedHandle,
+  flexRender,
+  getColumnsWithActions,
+  getTanstackTableState
+};

package/src/hooks/useDestructiveAction/useDestructiveActionStore.test.ts

@@ -1,18 +1,13 @@
 import { act, renderHook } from '@testing-library/react';
-import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
-import * as zustand from 'zustand';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { useDestructiveActionStore } from './useDestructiveActionStore';
 
 import type { DestructiveAction, DestructiveActionOptions } from './useDestructiveActionStore';
 
 describe('useDestructiveActionStore', () => {
-  beforeAll(() => {
-    vi.spyOn(zustand, 'create');
-  });
-
   afterEach(() => {
-    vi.clearAllMocks();
+    useDestructiveActionStore.setState(useDestructiveActionStore.getInitialState());
   });
 
   it('should render and return an object', () => {

package/src/hooks/useNotificationsStore/useNotificationsStore.test.ts

@@ -1,16 +1,9 @@
 import { act, renderHook } from '@testing-library/react';
-import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
-import * as zustand from 'zustand';
+import { describe, expect, it } from 'vitest';
 
 import { useNotificationsStore } from './useNotificationsStore';
 
 describe('useNotificationsStore', () => {
-  beforeAll(() => {
-    vi.spyOn(zustand, 'create');
-  });
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
   it('should render and return an object', () => {
     const { result } = renderHook(() => useNotificationsStore());
     expect(result.current).toBeTypeOf('object');

package/src/testing/setup-tests.ts

@@ -1,12 +1,10 @@
 import { cleanup } from '@testing-library/react';
-import { afterEach, vi } from 'vitest';
+import { afterEach } from 'vitest';
 
 import { i18n } from '@/i18n';
 
 import '@testing-library/jest-dom/vitest';
 
-vi.mock('zustand');
-
 i18n.init({ translations: {} });
 
 // Since we're not using vitest globals, we need to explicitly call cleanup()