@douglasneuroinformatics/libui 4.2.0 → 4.3.0

package/dist/hooks.d.ts

@@ -3,7 +3,7 @@ export { D as DEFAULT_THEME, a as SYS_DARK_MEDIA_QUERY, S as StorageName, b as T
 import { Promisable } from 'type-fest';
 import { RefObject, useEffect, Dispatch, SetStateAction } from 'react';
 import * as zustand from 'zustand';
-import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-DHTtLrqP.js';
+import { T as TranslationNamespace, L as Language, a as TranslateFunction } from './types-DDyMlEuL.js';
 
 declare function useChart(): {
     config: ChartConfig;
@@ -64,7 +64,7 @@ type NotificationsStore = {
 declare const useNotificationsStore: zustand.UseBoundStore<zustand.StoreApi<NotificationsStore>>;
 
 type Handler = (event: MouseEvent) => void;
-declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: 'mousedown' | 'mouseup'): void;
+declare function useOnClickOutside<T extends HTMLElement | null = HTMLElement>(ref: RefObject<T>, handler: Handler, mouseEvent?: 'mousedown' | 'mouseup'): void;
 
 /** Custom hook that uses local storage to persist state across page reloads */
 declare function useLocalStorage<T>(key: string, initialValue: (() => T) | T, options?: UseStorageOptions<T>): [T, Dispatch<SetStateAction<T>>];

package/dist/hooks.js

@@ -19,8 +19,8 @@ import {
   useTheme,
   useTranslation,
   useWindowSize
-} from "./chunk-ZIAKQCCQ.js";
-import "./chunk-ARKHRGTL.js";
+} from "./chunk-LSGD4EQY.js";
+import "./chunk-VFVO337W.js";
 import "./chunk-HCQE34RL.js";
 export {
   DEFAULT_THEME,

package/dist/i18n.d.ts

@@ -1,7 +1,7 @@
 import * as zustand from 'zustand';
 import { SetOptional } from 'type-fest';
-import { L as Language, b as Translations, a as TranslateFunction } from './types-DHTtLrqP.js';
-export { E as ExtractTranslationKey, c as LanguageOptions, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-DHTtLrqP.js';
+import { L as Language, b as Translations, a as TranslateFunction } from './types-DDyMlEuL.js';
+export { E as ExtractTranslationKey, c as LanguageOptions, d as TranslationKey, T as TranslationNamespace, U as UserConfig } from './types-DDyMlEuL.js';
 
 type InitOptions = {
     defaultLanguage?: Language;

package/dist/i18n.js

@@ -2,7 +2,7 @@
 import {
   i18n,
   translationStore
-} from "./chunk-ARKHRGTL.js";
+} from "./chunk-VFVO337W.js";
 export {
   i18n,
   translationStore

package/dist/tailwind/globals.css

@@ -181,6 +181,11 @@
 
     --radius: 0.5rem;
   }
+
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
 }
 
 @layer base {

package/dist/{types-DHTtLrqP.d.ts → types-DDyMlEuL.d.ts}

@@ -143,6 +143,10 @@ var pagination = {
 		en: "<< First",
 		fr: "<< Première"
 	},
+	first: {
+		en: "First",
+		fr: "Première"
+	},
 	info: {
 		en: "Showing {{first}} to {{last}} of {{total}} results",
 		fr: "Affichage de {{first}} à {{last}} sur {{total}} résultats"
@@ -151,6 +155,10 @@ var pagination = {
 		en: "Last >>",
 		fr: "Dernière >>"
 	},
+	last: {
+		en: "Last",
+		fr: "Dernière"
+	},
 	next: {
 		en: "Next",
 		fr: "Suivant"
@@ -166,6 +174,14 @@ var searchBar = {
 		fr: "Rechercher..."
 	}
 };
+var yes = {
+	en: "Yes",
+	fr: "Oui"
+};
+var no = {
+	en: "No",
+	fr: "Non"
+};
 var libuiTranslations = {
 	days: days,
 	form: form,
@@ -173,7 +189,9 @@ var libuiTranslations = {
 	notifications: notifications,
 	oneTimePasswordInput: oneTimePasswordInput,
 	pagination: pagination,
-	searchBar: searchBar
+	searchBar: searchBar,
+	yes: yes,
+	no: no
 };
 
 declare namespace UserConfig {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "packageManager": "pnpm@10.7.1",
   "description": "Generic UI components for DNP projects, built using React and Tailwind CSS",
   "author": "Joshua Unrau",
@@ -92,6 +92,7 @@
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

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

@@ -0,0 +1,76 @@
+import { range, toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { faker } from '@faker-js/faker';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DataTable } from './DataTable';
+
+import type { DataTableColumn } from './DataTable';
+
+type User = {
+  birthday: Date;
+  email: string;
+  firstName: string;
+  lastName: string;
+};
+
+type Story = StoryObj<typeof DataTable<User>>;
+
+const columns: DataTableColumn<User>[] = [
+  {
+    format: (value) => {
+      return toBasicISOString(value);
+    },
+    key: 'birthday',
+    label: 'Birthday'
+  },
+  {
+    format: 'email',
+    key: 'email',
+    label: 'Email',
+    sortable: true
+  }
+];
+
+const data: User[] = range(60)
+  .unwrap()
+  .map(() => ({
+    birthday: faker.date.birthdate(),
+    email: faker.internet.email(),
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName()
+  }));
+
+export default { component: DataTable } as Meta<typeof DataTable<User>>;
+
+export const Default: Story = {
+  args: {
+    columns,
+    data,
+    headerAction: {
+      label: 'Do Something',
+      onClick: () => {
+        alert('Something!');
+      }
+    },
+    rowActions: [
+      {
+        destructive: true,
+        label: 'Delete',
+        onSelect: (row) => {
+          alert(`Delete User: ${row.firstName} ${row.lastName}`);
+        }
+      }
+    ],
+    search: {
+      key: 'email',
+      placeholder: 'Filter emails...'
+    }
+  }
+};
+
+export const Empty: Story = {
+  args: {
+    columns,
+    data: []
+  }
+};

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,289 @@
+import { Fragment, useEffect, useMemo, useState } 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 { useTranslation } from '@/hooks';
+
+import { Button } from '../Button';
+import { SearchBar } from '../SearchBar';
+import { Table } from '../Table';
+import { DestructiveActionDialog } from './DestructiveActionDialog';
+import { RowActionsDropdown } from './RowActionsDropdown';
+
+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[];
+  headerAction?: {
+    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,
+  headerAction,
+  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
+    }
+  });
+
+  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);
+
+  return (
+    <Fragment>
+      <DestructiveActionDialog
+        destructiveActionPending={destructiveActionPending}
+        setDestructiveActionPending={setDestructiveActionPending}
+      />
+      {search && (
+        <div className="flex items-center gap-4 py-4">
+          <SearchBar
+            className="grow"
+            placeholder={search.placeholder}
+            value={searchValue}
+            onValueChange={setSearchValue}
+          />
+          {headerAction && (
+            <Button type="button" variant="outline" onClick={headerAction.onClick}>
+              {headerAction.label}
+            </Button>
+          )}
+        </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="mx-auto flex w-min pt-6 pb-4">
+        <Button
+          className="flex gap-1"
+          disabled={!table.getCanPreviousPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.firstPage()}
+        >
+          <ChevronsLeftIcon className="-ml-1 h-4 w-4" />
+          <span>{t('pagination.first')}</span>
+        </Button>
+        <Button
+          className="mr-1 flex gap-1"
+          disabled={!table.getCanPreviousPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.previousPage()}
+        >
+          <ChevronLeftIcon className="-ml-1 h-4 w-4" />
+          <span>{t('pagination.previous')}</span>
+        </Button>
+        {pageIndexOptions.map((index) => (
+          <Button
+            key={index}
+            type="button"
+            variant={index === pagination.pageIndex ? 'outline' : 'ghost'}
+            onClick={() => table.setPageIndex(index)}
+          >
+            {index + 1}
+          </Button>
+        ))}
+        <Button
+          className="ml-1 flex gap-1"
+          disabled={!table.getCanNextPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.nextPage()}
+        >
+          <span>{t('pagination.next')}</span>
+          <ChevronRightIcon className="-mr-1 h-4 w-4" />
+        </Button>
+        <Button
+          className="flex gap-1"
+          disabled={!table.getCanNextPage()}
+          type="button"
+          variant="ghost"
+          onClick={() => table.lastPage()}
+        >
+          <span>{t('pagination.last')}</span>
+          <ChevronsRightIcon className="-mr-1 h-4 w-4" />
+        </Button>
+      </div>
+    </Fragment>
+  );
+};
+
+export type { DataTableColumn };

package/src/components/DataTable/DestructiveActionDialog.tsx

@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-misused-promises */
+/* eslint-disable jsx-a11y/no-autofocus */
+
+import type React from 'react';
+
+import type { Promisable } from 'type-fest';
+
+import { useTranslation } from '@/hooks';
+
+import { Button } from '../Button';
+import { Dialog } from '../Dialog';
+
+export type DestructiveActionPending = (() => Promisable<void>) | null;
+
+export const DestructiveActionDialog: React.FC<{
+  destructiveActionPending: DestructiveActionPending;
+  setDestructiveActionPending: React.Dispatch<React.SetStateAction<DestructiveActionPending>>;
+}> = ({ destructiveActionPending, setDestructiveActionPending }) => {
+  const { t } = useTranslation();
+  return (
+    <Dialog
+      open={destructiveActionPending !== null}
+      onOpenChange={(open) => {
+        if (!open) {
+          setDestructiveActionPending(null);
+        }
+      }}
+    >
+      <Dialog.Content>
+        <Dialog.Header>
+          <Dialog.Title>
+            {t({
+              en: 'Confirm Action',
+              fr: "Confirmer l'action"
+            })}
+          </Dialog.Title>
+          <Dialog.Description>
+            {t({
+              en: 'This action cannot be reversed. Please confirm that you would like to continue.',
+              fr: 'Cette action ne peut être inversée. Veuillez confirmer que vous souhaitez poursuivre.'
+            })}
+          </Dialog.Description>
+        </Dialog.Header>
+        <Dialog.Footer>
+          <Button
+            className="min-w-16"
+            size="sm"
+            type="button"
+            variant="outline"
+            onClick={async () => {
+              await destructiveActionPending?.();
+              setDestructiveActionPending(null);
+            }}
+          >
+            {t('libui.yes')}
+          </Button>
+          <Button
+            autoFocus={true}
+            className="min-w-16"
+            size="sm"
+            type="button"
+            variant="primary"
+            onClick={() => setDestructiveActionPending(null)}
+          >
+            {t('libui.no')}
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+};

package/src/components/DataTable/RowActionsDropdown.tsx

@@ -0,0 +1,64 @@
+import type React from 'react';
+
+import type { Row } from '@tanstack/react-table';
+import { MoreHorizontalIcon } from 'lucide-react';
+import type { Promisable } from 'type-fest';
+
+import { useTranslation } from '@/hooks';
+
+import { Button } from '../Button';
+import { DropdownMenu } from '../DropdownMenu';
+
+import type { DestructiveActionPending } from './DestructiveActionDialog';
+
+export type RowAction<TData extends { [key: string]: unknown }> = {
+  destructive?: boolean;
+  label: string;
+  onSelect: (row: TData) => Promisable<void>;
+};
+
+export const RowActionsDropdown = <TData extends { [key: string]: unknown }>({
+  row,
+  rowActions,
+  setDestructiveActionPending
+}: {
+  row: Row<TData>;
+  rowActions: RowAction<TData>[];
+  setDestructiveActionPending: React.Dispatch<React.SetStateAction<DestructiveActionPending>>;
+}) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex w-full justify-end">
+      <DropdownMenu>
+        <DropdownMenu.Trigger asChild>
+          <Button className="-m-1.5" size="icon" variant="ghost">
+            <MoreHorizontalIcon className="h-4 w-4" />
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+          <DropdownMenu.Label>
+            {t({
+              en: 'Actions',
+              fr: 'Actions'
+            })}
+          </DropdownMenu.Label>
+          {rowActions.map(({ destructive, label, onSelect }, i) => (
+            <DropdownMenu.Item
+              className={destructive ? 'text-destructive' : undefined}
+              key={i}
+              onSelect={() => {
+                if (destructive) {
+                  setDestructiveActionPending(() => () => void onSelect(row.original));
+                } else {
+                  void onSelect(row.original);
+                }
+              }}
+            >
+              {label}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </div>
+  );
+};

package/src/components/DataTable/index.ts

@@ -0,0 +1 @@
+export * from './DataTable';

package/src/components/Form/ErrorMessage.tsx

@@ -6,7 +6,7 @@ import { cn } from '@/utils';
 
 export const ErrorMessage: React.FC<{ className?: string; error?: null | string[] }> = ({ className, error }) => {
   return error ? (
-    <div className="space-y-1.5">
+    <div className="flex flex-col gap-1.5">
       {error.map((message) => (
         <div className={cn('text-destructive flex w-full items-center text-sm font-medium', className)} key={message}>
           <CircleAlertIcon className="mr-1" style={{ strokeWidth: '2px' }} />

package/src/components/Form/Form.stories.tsx

@@ -302,6 +302,9 @@ const ungroupedContent = {
 } as const;
 
 export default {
+  args: {
+    onBeforeSubmit: null
+  },
   component: Form,
   decorators: [
     (Story) => (