@douglasneuroinformatics/libui 4.9.1 → 5.0.0

package/dist/hooks.d.ts

@@ -1,9 +1,11 @@
-import { C as ChartConfig, U as UseStorageOptions } from './types-9zYgx7C8.js';
-export { D as DEFAULT_THEME, a as SYS_DARK_MEDIA_QUERY, S as StorageName, b as THEME_ATTRIBUTE, c as THEME_KEY, T as Theme, u as useStorage, d as useTheme } from './types-9zYgx7C8.js';
+import { C as ChartConfig, U as UseStorageOptions } from './types-CQ7qbFhC.js';
+export { a as DEFAULT_THEME, b as SYS_DARK_MEDIA_QUERY, S as StorageName, c as THEME_ATTRIBUTE, d as THEME_KEY, T as Theme, u as useStorage, e as useTheme } from './types-CQ7qbFhC.js';
 import { Promisable } from 'type-fest';
 import { RefObject, useEffect, Dispatch, SetStateAction } from 'react';
 import * as zustand from 'zustand';
 import { T as TranslatorType, a as TranslationKey, b as TranslationNamespace, c as TranslationKeyForNamespace } from './types-CwW4nA_v.js';
+import '@tanstack/table-core';
+import 'lucide-react';
 
 declare function useChart(): {
     config: ChartConfig;

package/dist/{types-9zYgx7C8.d.ts → types-CQ7qbFhC.d.ts}

@@ -1,4 +1,7 @@
+import { RowData, Table, ColumnDef, ColumnFiltersState, ColumnPinningState, SortingState, TableMeta } from '@tanstack/table-core';
+import { Promisable } from 'type-fest';
 import { Dispatch, SetStateAction } from 'react';
+import { LucideIcon } from 'lucide-react';
 
 type StorageName = 'localStorage' | 'sessionStorage';
 type StorageEventMap = {
@@ -72,4 +75,57 @@ type ChartConfig = {
     });
 };
 
-export { type ChartConfig as C, DEFAULT_THEME as D, type StorageName as S, type Theme as T, type UseStorageOptions as U, SYS_DARK_MEDIA_QUERY as a, THEME_ATTRIBUTE as b, THEME_KEY as c, useTheme as d, useStorage as u };
+declare const ROW_ACTIONS_METADATA_KEY: unique symbol;
+declare const TABLE_NAME_METADATA_KEY: unique symbol;
+
+type DataTableEmptyStateProps = {
+    className?: string;
+    description?: string;
+    icon?: LucideIcon;
+    title: string;
+};
+
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData, TValue> {
+        [key: string]: unknown;
+    }
+    type GlobalFilter = string | undefined;
+    interface TableMeta<TData extends RowData> {
+        [key: string]: unknown;
+        [ROW_ACTIONS_METADATA_KEY]?: DataTableRowAction<TData>[];
+        [TABLE_NAME_METADATA_KEY]?: string;
+    }
+    interface TableState {
+        globalFilter: GlobalFilter;
+    }
+}
+type DataTableInitialState = {
+    columnFilters?: ColumnFiltersState;
+    columnPinning?: ColumnPinningState;
+    sorting?: SortingState;
+};
+type DataTableProps<T extends RowData> = DataTableContentProps<T> & DataTableStoreParams<T>;
+type DataTableContentProps<T extends RowData> = {
+    emptyStateProps?: Partial<DataTableEmptyStateProps>;
+    onSearchChange?: SearchChangeHandler<NoInfer<T>>;
+    togglesComponent?: React.FC<{
+        table: Table<T>;
+    }>;
+};
+type DataTableRowAction<T extends RowData> = {
+    destructive?: boolean;
+    disabled?: ((row: T) => boolean) | boolean;
+    label: string;
+    onSelect: (row: T, table: Table<T>) => Promisable<void>;
+};
+type DataTableStoreParams<T extends RowData> = {
+    columns: ColumnDef<NoInfer<T>>[];
+    data: T[];
+    initialState?: DataTableInitialState;
+    meta?: TableMeta<NoInfer<T>>;
+    rowActions?: DataTableRowAction<NoInfer<T>>[];
+    tableName?: string;
+};
+type SearchChangeHandler<T = any> = (value: string, table: Table<T>) => void;
+
+export { type ChartConfig as C, type DataTableProps as D, type StorageName as S, type Theme as T, type UseStorageOptions as U, DEFAULT_THEME as a, SYS_DARK_MEDIA_QUERY as b, THEME_ATTRIBUTE as c, THEME_KEY as d, useTheme as e, useStorage as u };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "4.9.1",
+  "version": "5.0.0",
   "packageManager": "pnpm@10.7.1",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -31,11 +31,11 @@
       "types": "./dist/i18n.d.ts",
       "import": "./dist/i18n.js"
     },
+    "./package.json": "./package.json",
     "./providers": {
       "types": "./dist/providers.d.ts",
       "import": "./dist/providers.js"
     },
-    "./package.json": "./package.json",
     "./tailwind/globals.css": "./dist/tailwind/globals.css",
     "./utils": {
       "types": "./dist/utils.d.ts",
@@ -97,6 +97,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tanstack/react-table": "^8.21.3",
+    "@tanstack/table-core": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,76 +1,246 @@
-import { range, toBasicISOString, unwrap } from '@douglasneuroinformatics/libjs';
+import { useState } from 'react';
+
 import { faker } from '@faker-js/faker';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { ColumnDef } from '@tanstack/table-core';
+import { range } from 'lodash-es';
+import { ChevronDownIcon } from 'lucide-react';
 
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
 import { DataTable } from './DataTable';
+import { useDataTableHandle } from './hooks';
 
-import type { DataTableColumn } from './DataTable';
+type PaymentStatus = 'failed' | 'pending' | 'processing' | 'success';
 
-type User = {
-  birthday: Date;
+type Payment = {
+  amount: number;
   email: string;
-  firstName: string;
-  lastName: string;
+  id: string;
+  status: PaymentStatus;
 };
 
-type Story = StoryObj<typeof DataTable<User>>;
+type Story = StoryObj<typeof DataTable<Payment>>;
 
-const columns: DataTableColumn<User>[] = [
+const columns: ColumnDef<Payment>[] = [
   {
-    format: (value) => {
-      return toBasicISOString(value);
+    accessorKey: 'status',
+    enableSorting: false,
+    filterFn: (row, id, filter: PaymentStatus[]) => {
+      return filter.includes(row.getValue(id));
     },
-    key: 'birthday',
-    label: 'Birthday'
+    header: 'Status'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email'
   },
   {
-    format: 'email',
-    key: 'email',
-    label: 'Email',
-    sortable: true
+    accessorKey: 'amount',
+    header: 'Amount'
   }
 ];
 
-const data: User[] = unwrap(range(60)).map(() => ({
-  birthday: faker.date.birthdate(),
-  email: faker.internet.email(),
-  firstName: faker.person.firstName(),
-  lastName: faker.person.lastName()
-}));
+const statuses: readonly PaymentStatus[] = Object.freeze(['failed', 'pending', 'processing', 'success']);
+
+const createData = (n: number): Payment[] => {
+  return range(n).map((i) => ({
+    amount: faker.number.int({ max: 100, min: 0 }),
+    email: faker.internet.email(),
+    id: String(i + 1),
+    status: faker.helpers.arrayElement(statuses)
+  }));
+};
+
+const Toggles = () => {
+  const table = useDataTableHandle('table', true);
+  const columns = table.getAllColumns();
+  const statusColumn = columns.find((column) => column.id === 'status')!;
+
+  const filterValue = statusColumn.getFilterValue() as PaymentStatus[];
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button className="flex items-center gap-2" variant="outline">
+            Columns
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+          {columns
+            .filter((column) => column.getCanHide())
+            .map((column) => {
+              return (
+                <DropdownMenu.CheckboxItem
+                  checked={column.getIsVisible()}
+                  className="capitalize"
+                  key={column.id}
+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                >
+                  {column.id}
+                </DropdownMenu.CheckboxItem>
+              );
+            })}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button className="flex items-center gap-2" variant="outline">
+            Filters
+            <ChevronDownIcon />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content widthFull align="start">
+          {statuses.map((option) => (
+            <DropdownMenu.CheckboxItem
+              checked={filterValue.includes(option)}
+              className="capitalize"
+              key={option}
+              onCheckedChange={(checked) => {
+                statusColumn.setFilterValue((prevValue: PaymentStatus[]) => {
+                  if (checked) {
+                    return [...prevValue, option];
+                  }
+                  return prevValue.filter((item) => item !== option);
+                });
+              }}
+            >
+              {option}
+            </DropdownMenu.CheckboxItem>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </>
+  );
+};
 
-export default { component: DataTable } as Meta<typeof DataTable<User>>;
+export default {
+  component: DataTable
+} as Meta<typeof DataTable>;
 
 export const Default: Story = {
+  decorators: [
+    (Story) => {
+      const [tableData, setTableData] = useState(createData(10));
+      return (
+        <div>
+          <Story
+            args={{
+              columns,
+              data: tableData
+            }}
+          />
+          <div className="fixed bottom-0 py-2">
+            <button
+              className="rounded-md border px-2 py-1.5 text-sm"
+              type="button"
+              onClick={() => setTableData(createData(10))}
+            >
+              New Data
+            </button>
+          </div>
+        </div>
+      );
+    }
+  ]
+};
+
+export const WithActions: Story = {
   args: {
-    columns,
-    data,
-    headerActions: [
+    columns: [
+      ...columns,
       {
-        label: 'Do Something',
-        onClick: () => {
-          alert('Something!');
-        }
+        accessorKey: 'notes',
+        header: 'Notes'
       }
     ],
+    data: createData(100).map((payment) => ({ ...payment, notes: faker.lorem.paragraph() })),
+    onSearchChange: () => {
+      return;
+    },
     rowActions: [
+      {
+        label: 'Modify',
+        onSelect: () => {
+          alert('Modify');
+        }
+      },
       {
         destructive: true,
         label: 'Delete',
-        onSelect: (row) => {
-          alert(`Delete User: ${row.firstName} ${row.lastName}`);
+        onSelect: () => {
+          alert('Delete');
         }
       }
     ],
-    search: {
-      key: 'email',
-      placeholder: 'Filter emails...'
-    }
+    tableName: 'action-table'
+  }
+};
+
+export const WithToggles: Story = {
+  args: {
+    columns,
+    data: createData(100),
+    initialState: {
+      columnFilters: [
+        {
+          id: 'status',
+          value: [...statuses]
+        }
+      ]
+    },
+    onSearchChange: () => {
+      return;
+    },
+    togglesComponent: Toggles
   }
 };
 
 export const Empty: Story = {
   args: {
     columns,
-    data: []
+    data: [],
+    onSearchChange: () => {
+      return;
+    }
+  }
+};
+
+export const Grouped: Story = {
+  args: {
+    columns: [
+      {
+        columns: [
+          {
+            accessorKey: 'id',
+            header: 'ID'
+          },
+          {
+            accessorKey: 'status',
+            header: 'Status'
+          }
+        ],
+        header: 'Internal'
+      },
+      {
+        columns: [
+          {
+            accessorKey: 'email',
+            header: 'Email'
+          },
+          {
+            accessorKey: 'amount',
+            header: 'Amount'
+          }
+        ],
+        header: 'Details'
+      }
+    ],
+    data: createData(100),
+    onSearchChange: () => {
+      return;
+    }
   }
 };