@douglasneuroinformatics/libui 4.9.0 → 5.0.0

package/src/components/DataTable/DataTable.tsx

@@ -1,290 +1,33 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useRef } from 'react';
 
-import {
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable
-} from '@tanstack/react-table';
-import type { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';
-import { range } from 'lodash-es';
-import { ArrowUpDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from 'lucide-react';
-import type { Promisable } from 'type-fest';
+import type { RowData } from '@tanstack/table-core';
 
-import { useTranslation } from '@/hooks';
+import { DataTableContext } from './context';
+import { DataTableContent } from './DataTableContent';
+import { createDataTableStore } from './store';
 
-import { Button } from '../Button';
-import { SearchBar } from '../SearchBar';
-import { Table } from '../Table';
-import { DestructiveActionDialog } from './DestructiveActionDialog';
-import { RowActionsDropdown } from './RowActionsDropdown';
+import type { DataTableProps } from './types';
 
-import type { RowAction } from './RowActionsDropdown';
-
-type StaticDataTableColumn<TData extends { [key: string]: unknown }> = {
-  [K in Extract<keyof TData, string>]: {
-    format?: 'email' | ((val: TData[K]) => unknown);
-    key: K;
-    label: string;
-    sortable?: boolean;
-  };
-}[Extract<keyof TData, string>];
-
-type DynamicDataTableColumn<TData extends { [key: string]: unknown }> = {
-  compute: (row: TData) => unknown;
-  key?: never;
-  label: string;
-};
-
-type DataTableColumn<TData extends { [key: string]: unknown }> =
-  | DynamicDataTableColumn<TData>
-  | StaticDataTableColumn<TData>;
-
-type DataTableProps<TData extends { [key: string]: unknown }> = {
-  columns: DataTableColumn<TData>[];
-  data: TData[];
-  headerActions?: {
-    label: string;
-    onClick: () => void;
-  }[];
-  rowActions?: RowAction<TData>[];
-  search?: {
-    key: Extract<keyof TData, string>;
-    placeholder?: string;
-  };
-};
-
-function isStaticColumn<TData extends { [key: string]: unknown }>(
-  column: DataTableColumn<TData>
-): column is StaticDataTableColumn<TData> {
-  return typeof column.key === 'string';
-}
-
-export const DataTable = <TData extends { [key: string]: unknown }>({
-  columns,
-  data,
-  headerActions,
-  rowActions,
-  search
-}: DataTableProps<TData>) => {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [searchValue, setSearchValue] = useState('');
-  const [destructiveActionPending, setDestructiveActionPending] = useState<(() => Promisable<void>) | null>(null);
-  const { t } = useTranslation('libui');
-  const [pagination, setPagination] = useState({
-    pageIndex: 0,
-    pageSize: 10
-  });
-
-  const columnDefs = useMemo<ColumnDef<TData, unknown>[]>(() => {
-    const result: ColumnDef<TData, unknown>[] = columns.map((col) => {
-      let def: ColumnDef<TData, unknown>;
-      if (isStaticColumn(col)) {
-        def = {
-          accessorKey: col.key,
-          header: col.sortable
-            ? ({ column }) => (
-                <button
-                  className="flex items-center justify-between gap-2"
-                  onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-                >
-                  {col.label}
-                  <ArrowUpDownIcon className="h-4 w-4" />
-                </button>
-              )
-            : col.label
-        };
-        if (col.format) {
-          def.cell = ({ getValue }) => {
-            const value = getValue() as TData[Extract<keyof TData, string>];
-            if (typeof col.format === 'function') {
-              return col.format(value);
-            } else if (col.format === 'email') {
-              return (
-                <a className="hover:underline" href={`mailto:${value as string}`}>
-                  {value as string}
-                </a>
-              );
-            }
-            return value;
-          };
-        }
-      } else {
-        def = {
-          accessorFn: col.compute,
-          header: col.label
-        };
-      }
-      return def;
-    });
-
-    if (rowActions) {
-      result.push({
-        cell: ({ row }) => {
-          return (
-            <RowActionsDropdown
-              row={row}
-              rowActions={rowActions}
-              setDestructiveActionPending={setDestructiveActionPending}
-            />
-          );
-        },
-        id: '__actions'
-      });
-    }
-    return result;
-  }, [columns]);
-
-  const table = useReactTable({
-    columns: columnDefs,
-    data,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    onColumnFiltersChange: setColumnFilters,
-    onPaginationChange: setPagination,
-    onSortingChange: setSorting,
-    state: {
-      columnFilters,
-      pagination,
-      sorting
-    }
-  });
+export const DataTable = <T extends RowData>({
+  emptyStateProps,
+  onSearchChange,
+  togglesComponent,
+  ...props
+}: DataTableProps<T>) => {
+  const storeRef = useRef(createDataTableStore(props));
 
   useEffect(() => {
-    if (search) {
-      table.getColumn(search.key)?.setFilterValue(searchValue);
-    }
-  }, [table, searchValue]);
-
-  const headerGroups = table.getHeaderGroups();
-  const { rows } = table.getRowModel();
-
-  const pageCount = table.getPageCount();
-  const currentPage = pagination.pageIndex;
-
-  const start = Math.max(0, Math.min(currentPage - 1, pageCount - 3));
-  const end = Math.min(start + 3, pageCount);
-
-  const pageIndexOptions = range(start, end);
+    const { reset } = storeRef.current.getState();
+    reset(props);
+  }, [props]);
 
   return (
-    <div className="flex flex-col">
-      <DestructiveActionDialog
-        destructiveActionPending={destructiveActionPending}
-        setDestructiveActionPending={setDestructiveActionPending}
+    <DataTableContext.Provider value={{ store: storeRef.current }}>
+      <DataTableContent
+        emptyStateProps={emptyStateProps}
+        togglesComponent={togglesComponent}
+        onSearchChange={onSearchChange}
       />
-      {search && (
-        <div className="flex items-center gap-4 py-4">
-          <SearchBar
-            className="grow"
-            placeholder={search.placeholder}
-            value={searchValue}
-            onValueChange={setSearchValue}
-          />
-          {headerActions && (
-            <div className="flex gap-2">
-              {headerActions.map(({ label, onClick }, i) => (
-                <Button key={i} type="button" variant="outline" onClick={onClick}>
-                  {label}
-                </Button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-      <div className="rounded-md border">
-        <Table>
-          <Table.Header>
-            {headerGroups.map((headerGroup) => (
-              <Table.Row key={headerGroup.id}>
-                {headerGroup.headers.map((header) => {
-                  return (
-                    <Table.Head key={header.id}>
-                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                    </Table.Head>
-                  );
-                })}
-              </Table.Row>
-            ))}
-          </Table.Header>
-          <Table.Body>
-            {rows?.length ? (
-              rows.map((row) => (
-                <Table.Row data-state={row.getIsSelected() && 'selected'} key={row.id}>
-                  {row.getVisibleCells().map((cell) => (
-                    <Table.Cell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</Table.Cell>
-                  ))}
-                </Table.Row>
-              ))
-            ) : (
-              <Table.Row>
-                <Table.Cell className="h-24 text-center" colSpan={rowActions ? columns.length + 1 : columns.length}>
-                  {t({
-                    en: 'No Results',
-                    fr: 'Aucun résultat'
-                  })}
-                </Table.Cell>
-              </Table.Row>
-            )}
-          </Table.Body>
-        </Table>
-      </div>
-      <div className="flex w-min gap-0.5 py-4 [&>button]:h-9">
-        <Button
-          disabled={!table.getCanPreviousPage()}
-          size="icon"
-          type="button"
-          variant="ghost"
-          onClick={() => table.firstPage()}
-        >
-          <ChevronsLeftIcon className="h-4 w-4" />
-        </Button>
-        <Button
-          disabled={!table.getCanPreviousPage()}
-          size="icon"
-          type="button"
-          variant="ghost"
-          onClick={() => table.previousPage()}
-        >
-          <ChevronLeftIcon className="h-4 w-4" />
-        </Button>
-        {pageIndexOptions.map((index) => (
-          <Button
-            key={index}
-            size="icon"
-            type="button"
-            variant={index === pagination.pageIndex ? 'outline' : 'ghost'}
-            onClick={() => table.setPageIndex(index)}
-          >
-            {index + 1}
-          </Button>
-        ))}
-        <Button
-          disabled={!table.getCanNextPage()}
-          size="icon"
-          type="button"
-          variant="ghost"
-          onClick={() => table.nextPage()}
-        >
-          <ChevronRightIcon className="h-4 w-4" />
-        </Button>
-        <Button
-          disabled={!table.getCanNextPage()}
-          size="icon"
-          type="button"
-          variant="ghost"
-          onClick={() => table.lastPage()}
-        >
-          <ChevronsRightIcon className="h-4 w-4" />
-        </Button>
-      </div>
-    </div>
+    </DataTableContext.Provider>
   );
 };
-
-export type { DataTableColumn };

package/src/components/DataTable/DataTableBody.tsx

@@ -0,0 +1,69 @@
+import { useTranslation } from '@/hooks';
+
+import { DataTableEmptyState } from './DataTableEmptyState';
+import { useDataTableHandle } from './hooks';
+import { flexRender } from './utils';
+
+import type { DataTableEmptyStateProps } from './DataTableEmptyState';
+
+export const DataTableBody: React.FC<{ emptyStateProps?: Partial<DataTableEmptyStateProps> }> = ({
+  emptyStateProps
+}) => {
+  const rows = useDataTableHandle('rows');
+  const { t } = useTranslation();
+
+  return (
+    <div className="flex flex-col" data-testid="data-table-body">
+      {rows.length === 0 ? (
+        <div
+          className="sticky left-0 flex h-72 items-center justify-center px-6 py-3"
+          style={{
+            width: 'calc(var(--table-container-width) * 1px)'
+          }}
+        >
+          <DataTableEmptyState
+            title={t({
+              en: 'No Results',
+              fr: 'Aucun résultat'
+            })}
+            {...emptyStateProps}
+          />
+        </div>
+      ) : (
+        rows.map((row) => (
+          <div className="flex border-b last:border-b-0" data-testid="data-table-row" id={row.id} key={row.id}>
+            {row.getVisibleCells().map((cell) => {
+              const style: React.CSSProperties = {
+                width: `calc(var(--col-${cell.column.id}-size) * 1px)`
+              };
+              if (cell.column.getIsPinned() === 'left') {
+                style.left = `${cell.column.getStart('left')}px`;
+                style.position = 'sticky';
+                style.zIndex = 20;
+              } else if (cell.column.getIsPinned() === 'right') {
+                style.right = `${cell.column.getAfter('right')}px`;
+                style.position = 'sticky';
+                style.zIndex = 20;
+              }
+              // no border with actions on right
+              // TODO - consider resizing toggle in this case
+              if (cell.column.getIsLastColumn('center')) {
+                style.borderRight = 'none';
+              }
+              const content = flexRender(cell.column.columnDef.cell, cell.getContext());
+              return (
+                <div
+                  className="bg-background flex items-center border-r px-4 py-2 last:border-r-0"
+                  key={cell.id}
+                  style={style}
+                >
+                  {content && typeof content === 'object' ? content : <span className="block truncate">{content}</span>}
+                </div>
+              );
+            })}
+          </div>
+        ))
+      )}
+    </div>
+  );
+};

package/src/components/DataTable/DataTableContent.tsx

@@ -0,0 +1,36 @@
+import type { RowData } from '@tanstack/table-core';
+
+import { TABLE_NAME_METADATA_KEY } from './constants';
+import { DataTableBody } from './DataTableBody';
+import { DataTableControls } from './DataTableControls';
+import { DataTableHead } from './DataTableHead';
+import { DataTablePagination } from './DataTablePagination';
+import { useContainerRef, useDataTableHandle, useDataTableStore } from './hooks';
+
+import type { DataTableContentProps } from './types';
+
+export const DataTableContent = <T extends RowData>({
+  emptyStateProps,
+  onSearchChange,
+  togglesComponent
+}: DataTableContentProps<T>) => {
+  const containerRef = useContainerRef();
+  const meta = useDataTableHandle('tableMeta');
+  const style = useDataTableStore((state) => state.style);
+  return (
+    <div
+      className="bg-background flex w-full flex-col"
+      data-name={meta[TABLE_NAME_METADATA_KEY]}
+      data-testid="data-table"
+    >
+      <DataTableControls togglesComponent={togglesComponent} onSearchChange={onSearchChange} />
+      <div className="relative w-full overflow-auto rounded-md border" ref={containerRef}>
+        <div className="flex min-w-full flex-col text-sm tracking-tight" style={style}>
+          <DataTableHead />
+          <DataTableBody emptyStateProps={emptyStateProps} />
+        </div>
+      </div>
+      <DataTablePagination />
+    </div>
+  );
+};

package/src/components/DataTable/DataTableControls.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+import type { RowData, Table } from '@tanstack/table-core';
+
+import { useTranslation } from '@/hooks';
+
+import { SearchBar } from '../SearchBar';
+import { useDataTableHandle, useDataTableStore } from './hooks';
+
+import type { SearchChangeHandler } from './types';
+
+export const DataTableControls = <T extends RowData>({
+  onSearchChange,
+  togglesComponent: Toggles
+}: {
+  onSearchChange?: SearchChangeHandler<T>;
+  togglesComponent?: React.FC<{ table: Table<T> }>;
+}) => {
+  const table = useDataTableHandle('table');
+  const setGlobalFilter = useDataTableStore((store) => store.setGlobalFilter);
+  const [searchValue, setSearchValue] = useState('');
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (onSearchChange) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      onSearchChange(searchValue, table);
+    } else {
+      setGlobalFilter(searchValue || undefined);
+    }
+  }, [onSearchChange, searchValue]);
+
+  return (
+    <div className="flex flex-col items-center gap-4 pb-4 md:flex-row">
+      <SearchBar
+        className="w-full grow"
+        data-testid="data-table-search-bar"
+        placeholder={t({
+          en: 'Search...',
+          fr: 'Rechercher...'
+        })}
+        value={searchValue}
+        onValueChange={(value) => {
+          setSearchValue(value);
+        }}
+      />
+      {Toggles && (
+        <div className="flex w-full items-center gap-2 md:w-auto">
+          <Toggles table={table} />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/DataTable/DataTableEmptyState.tsx

@@ -0,0 +1,25 @@
+import type { LucideIcon } from 'lucide-react';
+
+import { cn } from '@/utils';
+
+export type DataTableEmptyStateProps = {
+  className?: string;
+  description?: string;
+  icon?: LucideIcon;
+  title: string;
+};
+
+export const DataTableEmptyState: React.FC<DataTableEmptyStateProps> = ({
+  className,
+  description,
+  icon: Icon,
+  title
+}) => {
+  return (
+    <div className={cn('flex flex-col items-center justify-center', className)} data-testid="data-table-empty-state">
+      {Icon && <Icon className="text-muted-foreground mb-2" style={{ height: '20px', width: '20px' }} />}
+      <h3 className="text-foreground text-sm font-semibold">{title}</h3>
+      {description && <p className="text-muted-foreground mt-1 text-xs">{description}</p>}
+    </div>
+  );
+};

package/src/components/DataTable/DataTableHead.tsx

@@ -0,0 +1,58 @@
+import { useDataTableHandle } from './hooks';
+import { flexRender } from './utils';
+
+export const DataTableHead = () => {
+  const headerGroups = useDataTableHandle('headerGroups');
+  const rowCount = useDataTableHandle('rowCount');
+
+  return (
+    <div className="flex flex-col" data-testid="data-table-head" style={{ display: rowCount ? 'flex' : 'none' }}>
+      {headerGroups.map((headerGroup) => (
+        <div className="flex" key={headerGroup.id}>
+          {headerGroup.headers.map((header) => {
+            const style: React.CSSProperties = {
+              // TODO - add more robust solution - should be able to block centering also - also set correct typing
+              justifyContent: header.column.columnDef.meta?.centered ? 'center' : 'start',
+              width: `calc(var(--header-${header?.id}-size) * 1px)`
+            };
+            if (header.column.getIsPinned() === 'left') {
+              style.left = `${header.column.getStart('left')}px`;
+              style.position = 'sticky';
+              style.zIndex = 20;
+            } else if (header.column.getIsPinned() === 'right') {
+              style.right = `${header.column.getAfter('right')}px`;
+              style.position = 'sticky';
+              style.zIndex = 20;
+            }
+            // no border with actions on right
+            // TODO - consider resizing toggle in this case
+            if (header.column.getIsLastColumn('center')) {
+              style.borderRight = 'none';
+            }
+            return (
+              <div
+                className="group/cell bg-background relative flex items-center border-r border-b px-4 py-2 last:border-r-0"
+                key={header.id}
+                style={style}
+              >
+                {!header.isPlaceholder && flexRender(header.column.columnDef.header, header.getContext())}
+                {header.column.getCanResize() && (
+                  <div className="absolute top-0 right-0 z-10 h-full w-[1px]">
+                    <button
+                      className="group-hover/cell:bg-border absolute -right-[1px] h-full w-full cursor-col-resize touch-none rounded-md bg-transparent select-none group-hover/cell:-right-[2px] group-hover/cell:w-[3px]"
+                      style={{ transform: header.column.getIsLastColumn() ? 'translateX(-2px)' : undefined }}
+                      type="button"
+                      onDoubleClick={header.column.resetSize}
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/DataTable/DataTablePagination.tsx

@@ -0,0 +1,62 @@
+import { range } from 'lodash-es';
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from 'lucide-react';
+
+import { Button } from '../Button';
+import { useDataTableHandle, useDataTableStore } from './hooks';
+
+export const DataTablePagination = () => {
+  const { pageCount, pageIndex } = useDataTableHandle('paginationInfo');
+  const setPageIndex = useDataTableStore((store) => store.setPageIndex);
+
+  const start = Math.max(0, Math.min(pageIndex - 1, pageCount - 3));
+  const end = Math.max(Math.min(start + 3, pageCount), 1);
+
+  const pageIndexOptions = range(start, end);
+  const lastPageIndex = pageCount - 1;
+
+  return (
+    <div className="mx-auto flex w-min gap-0.5 py-4 [&>button]:h-9">
+      <Button disabled={pageIndex === 0} size="icon" type="button" variant="ghost" onClick={() => setPageIndex(0)}>
+        <ChevronsLeftIcon className="h-4 w-4" />
+      </Button>
+      <Button
+        disabled={pageIndex === 0}
+        size="icon"
+        type="button"
+        variant="ghost"
+        onClick={() => setPageIndex(pageIndex - 1)}
+      >
+        <ChevronLeftIcon className="h-4 w-4" />
+      </Button>
+      {pageIndexOptions.map((index) => (
+        <Button
+          key={index}
+          size="icon"
+          type="button"
+          variant={index === pageIndex ? 'outline' : 'ghost'}
+          onClick={() => setPageIndex(index)}
+        >
+          {index + 1}
+        </Button>
+      ))}
+      <Button
+        disabled={pageIndex === lastPageIndex}
+        size="icon"
+        type="button"
+        variant="ghost"
+        onClick={() => setPageIndex(pageIndex + 1)}
+      >
+        <ChevronRightIcon className="h-4 w-4" />
+      </Button>
+      <Button
+        disabled={pageIndex === lastPageIndex}
+        size="icon"
+        type="button"
+        variant="ghost"
+        onClick={() => setPageIndex(lastPageIndex)}
+      >
+        <ChevronsRightIcon className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};

package/src/components/DataTable/DataTableRowActionCell.tsx

@@ -0,0 +1,67 @@
+import type { CellContext, RowData } from '@tanstack/table-core';
+import { MoreHorizontalIcon } from 'lucide-react';
+
+import { useDestructiveAction, useTranslation } from '@/hooks';
+import { cn } from '@/utils';
+
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
+import { ROW_ACTIONS_METADATA_KEY, TABLE_NAME_METADATA_KEY } from './constants';
+
+export const DataTableRowActionCell = <T extends RowData>({ row, table }: CellContext<T, unknown>) => {
+  const destructiveAction = useDestructiveAction();
+  const rowActions = table.options.meta?.[ROW_ACTIONS_METADATA_KEY];
+  const tableName = table.options.meta?.[TABLE_NAME_METADATA_KEY];
+
+  const { t } = useTranslation();
+
+  if (!rowActions) {
+    console.error('Expected rowActions to be defined in table metadata');
+    return null;
+  }
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button
+            className="-m-1.5"
+            data-table-name={table.options.meta?.name}
+            data-testid="row-actions-trigger"
+            size="icon"
+            variant="ghost"
+          >
+            <MoreHorizontalIcon className="h-4 w-4" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" data-table-name={tableName} data-testid="row-actions-dropdown">
+          <DropdownMenu.Label>
+            {t({
+              en: 'Actions',
+              fr: 'Actions'
+            })}
+          </DropdownMenu.Label>
+          {rowActions.map(({ destructive, disabled, label, onSelect }, i) => (
+            <DropdownMenu.Item
+              className={cn(
+                'cursor-pointer data-[disabled]:pointer-events-auto data-[disabled]:cursor-not-allowed',
+                destructive && 'text-destructive'
+              )}
+              disabled={typeof disabled === 'function' ? disabled(row.original) : disabled}
+              key={i}
+              onSelect={() => {
+                if (destructive) {
+                  destructiveAction(() => void onSelect(row.original, table));
+                } else {
+                  void onSelect(row.original, table);
+                }
+              }}
+            >
+              {label}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </div>
+  );
+};