@duro-app/ui 0.22.0 → 0.24.0

package/src/components/Table/useDataTable.ts

@@ -0,0 +1,113 @@
+import {useState} from 'react'
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  type ColumnDef,
+  type SortingState,
+  type ColumnFiltersState,
+  type PaginationState,
+  type RowSelectionState,
+  type TableOptions,
+  type Table,
+} from '@tanstack/react-table'
+
+export interface UseDataTableOptions<TData> {
+  /** Initial pagination state */
+  pagination?: {pageSize?: number; pageIndex?: number}
+  /** Enable sorting on columns that don't explicitly disable it */
+  enableSorting?: boolean
+  /** Enable column filtering */
+  enableFiltering?: boolean
+  /** Enable row selection (checkbox) */
+  enableRowSelection?: boolean | ((row: any) => boolean)
+  /** Callback when row selection changes */
+  onRowSelectionChange?: (selection: RowSelectionState) => void
+}
+
+/**
+ * Thin wrapper around TanStack's useReactTable.
+ * Pre-configures row models for pagination, sorting, and filtering.
+ * Returns the full TanStack table instance.
+ *
+ * @example
+ * ```tsx
+ * const table = useDataTable(users, columns, {
+ *   pagination: { pageSize: 20 },
+ *   enableSorting: true,
+ *   enableFiltering: true,
+ * })
+ * ```
+ */
+export function useDataTable<TData>(
+  data: TData[],
+  columns: ColumnDef<TData, any>[],
+  options: UseDataTableOptions<TData> = {},
+): Table<TData> {
+  const {
+    pagination: paginationInit,
+    enableSorting = false,
+    enableFiltering = false,
+    enableRowSelection = false,
+    onRowSelectionChange: onSelectionChangeProp,
+  } = options
+
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: paginationInit?.pageIndex ?? 0,
+    pageSize: paginationInit?.pageSize ?? 10,
+  })
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const handleRowSelectionChange = (updater: any) => {
+    setRowSelection(updater)
+    if (onSelectionChangeProp) {
+      const next = typeof updater === 'function' ? updater(rowSelection) : updater
+      onSelectionChangeProp(next)
+    }
+  }
+
+  const tableOptions: TableOptions<TData> = {
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+
+    // Sorting
+    ...(enableSorting && {
+      getSortedRowModel: getSortedRowModel(),
+      onSortingChange: setSorting,
+      state: {sorting},
+    }),
+
+    // Filtering
+    ...(enableFiltering && {
+      getFilteredRowModel: getFilteredRowModel(),
+      onColumnFiltersChange: setColumnFilters,
+    }),
+
+    // Pagination
+    ...(paginationInit && {
+      getPaginationRowModel: getPaginationRowModel(),
+      onPaginationChange: setPagination,
+    }),
+
+    // Row selection
+    ...(enableRowSelection && {
+      enableRowSelection: typeof enableRowSelection === 'function' ? enableRowSelection : true,
+      onRowSelectionChange: handleRowSelectionChange,
+    }),
+
+    // Merge all state
+    state: {
+      ...(enableSorting && {sorting}),
+      ...(enableFiltering && {columnFilters}),
+      ...(paginationInit && {pagination}),
+      ...(enableRowSelection && {rowSelection}),
+    },
+  }
+
+  return useReactTable(tableOptions)
+}

package/src/components/ThemeProvider/ThemeProvider.meta.ts

@@ -7,9 +7,7 @@ export const meta: ComponentMeta = {
     'App root — required for all Duro components to render correctly',
     'Theme switching (dark/light mode toggle)',
   ],
-  whenNotToUse: [
-    'Never omit — all Duro components require ThemeProvider',
-  ],
+  whenNotToUse: ['Never omit — all Duro components require ThemeProvider'],
   example: `<ThemeProvider theme="dark">
   <App />
 </ThemeProvider>`,

package/src/docs/helpers.tsx

@@ -64,7 +64,7 @@ export function TypeScaleTable({rows, label}: TypeScaleTableProps) {
   return (
     <html.div>
       {label && <html.h3 style={styles.label}>{label}</html.h3>}
-      <Table.Root columns={4} variant="striped" size="sm">
+      <Table.Root variant="striped" size="sm">
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Step</Table.HeaderCell>
@@ -106,7 +106,7 @@ export function TokenTable({tokens, label}: TokenTableProps) {
   return (
     <html.div>
       {label && <html.h3 style={styles.label}>{label}</html.h3>}
-      <Table.Root columns={3} variant="striped" size="sm">
+      <Table.Root variant="striped" size="sm">
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Token</Table.HeaderCell>

package/src/index.ts

@@ -8,9 +8,11 @@ export {Alert, type AlertVariant} from './components/Alert/Alert'
 export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
 export {Button, type ButtonVariant, type ButtonSize} from './components/Button/Button'
+export {ButtonGroup} from './components/ButtonGroup/ButtonGroup'
 export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
+export {CheckboxGroup} from './components/CheckboxGroup/CheckboxGroup'
 export {Dialog, type DialogSize} from './components/Dialog/Dialog'
 export {DetailPanel, type DetailPanelSize} from './components/DetailPanel/DetailPanel'
 export {Drawer, type DrawerAnchor, type DrawerSize} from './components/Drawer/Drawer'
@@ -29,6 +31,7 @@ export {
 } from './components/LinkButton/LinkButton'
 export {Menu} from './components/Menu/Menu'
 export {Panel} from './components/Panel/Panel'
+export {RadioGroup} from './components/RadioGroup/RadioGroup'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export {Select} from './components/Select/Select'
 export {SideNav} from './components/SideNav/SideNav'
@@ -39,6 +42,8 @@ export {
   type StatusIconVariant,
 } from './components/StatusIcon/StatusIcon'
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
+// TanStack Table: consumers install @tanstack/react-table directly and use
+// Table.Pagination, Table.SortIndicator, Table.ColumnFilter for styled integration
 export {Tabs} from './components/Tabs/Tabs'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 export {ThemeProvider, type ThemeName} from './components/ThemeProvider/ThemeProvider'

package/src/strict.css

@@ -1,2 +1,7 @@
 @layer reset;
 @react-strict-dom;
+
+/* Table: reveal sort indicator on header cell hover */
+[role="columnheader"]:hover [data-sort-indicator] {
+  opacity: 1 !important;
+}