@duro-app/ui 0.24.0 → 0.26.0

package/src/components/Table/Table.stories.tsx

@@ -9,7 +9,21 @@ import {Button} from '../Button/Button'
 import {ActionBar} from '../ActionBar/ActionBar'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 
-import {flexRender, createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, type SortingState, type ColumnFiltersState} from '@tanstack/react-table'
+import {
+  flexRender,
+  createColumnHelper,
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  type SortingState,
+  type ColumnFiltersState,
+  type PaginationState,
+} from '@tanstack/react-table'
+import {useDataTable} from './useDataTable'
+import {Combobox} from '../Combobox/Combobox'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
 
 const meta: Meta = {
   title: 'Components/Table',
@@ -429,30 +443,31 @@ export const AllVariants: Story = {
   },
 }
 
-
 // --- Sorting: demonstrates click-to-sort with hover indicators ---
 
-function SortingDemo() {
-  const data = [
-    {name: 'Traefik', role: 'Reverse Proxy', port: 443, uptime: '14d 3h'},
-    {name: 'Pi-hole', role: 'DNS Filter', port: 80, uptime: '14d 3h'},
-    {name: 'Grafana', role: 'Monitoring', port: 3000, uptime: '7d 12h'},
-    {name: 'Portainer', role: 'Container Mgmt', port: 9000, uptime: '2d 5h'},
-    {name: 'Nginx', role: 'Web Server', port: 8080, uptime: '30d 1h'},
-  ]
+type Service = {name: string; role: string; port: number; uptime: string}
 
-  const cols = [
-    createColumnHelper<typeof data[0]>().accessor('name', {header: 'Name', enableSorting: true}),
-    createColumnHelper<typeof data[0]>().accessor('role', {header: 'Role', enableSorting: true}),
-    createColumnHelper<typeof data[0]>().accessor('port', {header: 'Port', enableSorting: true}),
-    createColumnHelper<typeof data[0]>().accessor('uptime', {header: 'Uptime', enableSorting: true}),
-  ]
+const sortingData: Service[] = [
+  {name: 'Traefik', role: 'Reverse Proxy', port: 443, uptime: '14d 3h'},
+  {name: 'Pi-hole', role: 'DNS Filter', port: 80, uptime: '14d 3h'},
+  {name: 'Grafana', role: 'Monitoring', port: 3000, uptime: '7d 12h'},
+  {name: 'Portainer', role: 'Container Mgmt', port: 9000, uptime: '2d 5h'},
+  {name: 'Nginx', role: 'Web Server', port: 8080, uptime: '30d 1h'},
+]
 
+const sortingCols = [
+  createColumnHelper<Service>().accessor('name', {header: 'Name', enableSorting: true}),
+  createColumnHelper<Service>().accessor('role', {header: 'Role', enableSorting: true}),
+  createColumnHelper<Service>().accessor('port', {header: 'Port', enableSorting: true}),
+  createColumnHelper<Service>().accessor('uptime', {header: 'Uptime', enableSorting: true}),
+]
+
+function SortingDemo() {
   const [sorting, setSorting] = useState<SortingState>([])
 
   const table = useReactTable({
-    data,
-    columns: cols,
+    data: sortingData,
+    columns: sortingCols,
     state: {sorting},
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
@@ -501,22 +516,103 @@ export const Sorting: Story = {
   },
 }
 
+// --- Shared data helpers for interactive demos ---
+
+interface User {
+  name: string
+  role: string
+  status: string
+  email: string
+}
+
+const firstNames = [
+  'Alice',
+  'Bob',
+  'Carol',
+  'Dave',
+  'Eve',
+  'Frank',
+  'Grace',
+  'Hank',
+  'Iris',
+  'Jack',
+  'Karen',
+  'Leo',
+  'Mona',
+  'Nick',
+  'Olivia',
+  'Paul',
+  'Quinn',
+  'Rita',
+  'Sam',
+  'Tina',
+  'Uma',
+  'Vince',
+  'Wendy',
+  'Xander',
+  'Yara',
+  'Zach',
+]
+const lastNames = [
+  'Adams',
+  'Brown',
+  'Clark',
+  'Davis',
+  'Evans',
+  'Foster',
+  'Garcia',
+  'Hill',
+  'Ito',
+  'Jones',
+  'Kim',
+  'Lee',
+  'Moore',
+  'Nash',
+  'Owen',
+  'Patel',
+  'Quinn',
+  'Reed',
+  'Smith',
+  'Tran',
+  'Ueda',
+  'Voss',
+  'Wang',
+  'Xu',
+  'Yang',
+  'Zhang',
+]
+const roles = ['Admin', 'Editor', 'Viewer', 'Moderator', 'Analyst']
+const statuses = ['Active', 'Inactive', 'Pending', 'Suspended']
+
+function generateUsers(count: number): User[] {
+  return Array.from({length: count}, (_, i) => {
+    const first = firstNames[i % firstNames.length]
+    const last = lastNames[(i * 7) % lastNames.length]
+    return {
+      name: `${first} ${last}`,
+      role: roles[i % roles.length],
+      status: statuses[i % statuses.length],
+      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
+    }
+  })
+}
+
 // --- Pagination: demonstrates page navigation ---
 
-function PaginationDemo() {
-  const data = generateUsers(35)
+const paginationData = generateUsers(35)
 
-  const cols = [
-    createColumnHelper<User>().accessor('name', {header: 'Name'}),
-    createColumnHelper<User>().accessor('role', {header: 'Role'}),
-    createColumnHelper<User>().accessor('email', {header: 'Email'}),
-  ]
+const paginationCols = [
+  createColumnHelper<User>().accessor('name', {header: 'Name'}),
+  createColumnHelper<User>().accessor('role', {header: 'Role'}),
+  createColumnHelper<User>().accessor('email', {header: 'Email'}),
+]
 
+function PaginationDemo() {
   const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10})
 
   const table = useReactTable({
-    data,
-    columns: cols,
+    data: paginationData,
+    columns: paginationCols,
     state: {pagination},
     onPaginationChange: setPagination,
     getCoreRowModel: getCoreRowModel(),
@@ -564,21 +660,21 @@ export const WithPagination: Story = {
 
 // --- Filtering: demonstrates column filter inputs ---
 
-function FilteringDemo() {
-  const data = generateUsers(20)
+const filteringData = generateUsers(20)
 
-  const cols = [
-    createColumnHelper<User>().accessor('name', {header: 'Name', enableColumnFilter: true}),
-    createColumnHelper<User>().accessor('role', {header: 'Role', enableColumnFilter: false}),
-    createColumnHelper<User>().accessor('status', {header: 'Status', enableColumnFilter: false}),
-    createColumnHelper<User>().accessor('email', {header: 'Email', enableColumnFilter: true}),
-  ]
+const filteringCols = [
+  createColumnHelper<User>().accessor('name', {header: 'Name', enableColumnFilter: true}),
+  createColumnHelper<User>().accessor('role', {header: 'Role', enableColumnFilter: false}),
+  createColumnHelper<User>().accessor('status', {header: 'Status', enableColumnFilter: false}),
+  createColumnHelper<User>().accessor('email', {header: 'Email', enableColumnFilter: true}),
+]
 
+function FilteringDemo() {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 
   const table = useReactTable({
-    data,
-    columns: cols,
+    data: filteringData,
+    columns: filteringCols,
     state: {columnFilters},
     onColumnFiltersChange: setColumnFilters,
     getCoreRowModel: getCoreRowModel(),
@@ -628,44 +724,8 @@ export const WithFiltering: Story = {
   },
 }
 
-
 // --- FullFeatured: useDataTable with pagination, sorting, and filtering ---
 
-interface User {
-  name: string
-  role: string
-  status: string
-  email: string
-}
-
-const firstNames = [
-  'Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Hank',
-  'Iris', 'Jack', 'Karen', 'Leo', 'Mona', 'Nick', 'Olivia', 'Paul',
-  'Quinn', 'Rita', 'Sam', 'Tina', 'Uma', 'Vince', 'Wendy', 'Xander',
-  'Yara', 'Zach',
-]
-const lastNames = [
-  'Adams', 'Brown', 'Clark', 'Davis', 'Evans', 'Foster', 'Garcia',
-  'Hill', 'Ito', 'Jones', 'Kim', 'Lee', 'Moore', 'Nash', 'Owen',
-  'Patel', 'Quinn', 'Reed', 'Smith', 'Tran', 'Ueda', 'Voss', 'Wang',
-  'Xu', 'Yang', 'Zhang',
-]
-const roles = ['Admin', 'Editor', 'Viewer', 'Moderator', 'Analyst']
-const statuses = ['Active', 'Inactive', 'Pending', 'Suspended']
-
-function generateUsers(count: number): User[] {
-  return Array.from({length: count}, (_, i) => {
-    const first = firstNames[i % firstNames.length]
-    const last = lastNames[(i * 7) % lastNames.length]
-    return {
-      name: `${first} ${last}`,
-      role: roles[i % roles.length],
-      status: statuses[i % statuses.length],
-      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
-    }
-  })
-}
-
 const fakeUsers = generateUsers(50)
 
 const columnHelper = createColumnHelper<User>()
@@ -674,35 +734,45 @@ const fullFeaturedColumns = [
   columnHelper.accessor('name', {
     header: 'Name',
     enableSorting: true,
-    enableColumnFilter: true,
+    enableColumnFilter: false,
   }),
   columnHelper.accessor('role', {
     header: 'Role',
     enableSorting: true,
-    enableColumnFilter: false,
+    enableColumnFilter: true,
   }),
   columnHelper.accessor('status', {
     header: 'Status',
     enableSorting: true,
-    enableColumnFilter: false,
+    enableColumnFilter: true,
   }),
   columnHelper.accessor('email', {
     header: 'Email',
     enableSorting: true,
-    enableColumnFilter: true,
+    enableColumnFilter: false,
   }),
 ]
 
 const fullFeaturedStyles = css.create({
   wrapper: {display: 'flex', flexDirection: 'column', gap: 0},
+  filterBar: {
+    display: 'flex',
+    gap: spacing.md,
+    paddingBottom: spacing.md,
+  },
   headerContent: {
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
     cursor: 'pointer',
     userSelect: 'none',
   },
 })
 
+const uniqueRoles = [...new Set(fakeUsers.map((u) => u.role))].sort()
+const uniqueStatuses = [...new Set(fakeUsers.map((u) => u.status))].sort()
+
 function FullFeaturedDemo() {
   const table = useDataTable(fakeUsers, fullFeaturedColumns, {
     pagination: {pageSize: 10},
@@ -712,6 +782,48 @@ function FullFeaturedDemo() {
 
   return (
     <html.div style={fullFeaturedStyles.wrapper}>
+      <html.div style={fullFeaturedStyles.filterBar}>
+        <Combobox.Root
+          value={(table.getColumn('role')?.getFilterValue() as string) ?? ''}
+          onValueChange={(v) => table.getColumn('role')?.setFilterValue(v || undefined)}
+          onInputChange={(v) => table.getColumn('role')?.setFilterValue(v || undefined)}
+        >
+          <Combobox.Input placeholder="Filter role...">
+            <Combobox.Trigger />
+          </Combobox.Input>
+          <Combobox.Popup>
+            <Combobox.Item value="">
+              <Combobox.ItemText>All Roles</Combobox.ItemText>
+            </Combobox.Item>
+            {uniqueRoles.map((role) => (
+              <Combobox.Item key={role} value={role}>
+                <Combobox.ItemText>{role}</Combobox.ItemText>
+              </Combobox.Item>
+            ))}
+            <Combobox.Empty>No roles found</Combobox.Empty>
+          </Combobox.Popup>
+        </Combobox.Root>
+        <Combobox.Root
+          value={(table.getColumn('status')?.getFilterValue() as string) ?? ''}
+          onValueChange={(v) => table.getColumn('status')?.setFilterValue(v || undefined)}
+          onInputChange={(v) => table.getColumn('status')?.setFilterValue(v || undefined)}
+        >
+          <Combobox.Input placeholder="Filter status...">
+            <Combobox.Trigger />
+          </Combobox.Input>
+          <Combobox.Popup>
+            <Combobox.Item value="">
+              <Combobox.ItemText>All Statuses</Combobox.ItemText>
+            </Combobox.Item>
+            {uniqueStatuses.map((status) => (
+              <Combobox.Item key={status} value={status}>
+                <Combobox.ItemText>{status}</Combobox.ItemText>
+              </Combobox.Item>
+            ))}
+            <Combobox.Empty>No statuses found</Combobox.Empty>
+          </Combobox.Popup>
+        </Combobox.Root>
+      </html.div>
       <Table.Root>
         <Table.Header>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -725,12 +837,6 @@ function FullFeaturedDemo() {
                     {flexRender(header.column.columnDef.header, header.getContext())}
                     <Table.SortIndicator column={header.column} />
                   </html.div>
-                  {(header.column.id === 'name' || header.column.id === 'email') && (
-                    <Table.ColumnFilter
-                      column={header.column}
-                      placeholder={`Filter ${header.column.id}...`}
-                    />
-                  )}
                 </Table.HeaderCell>
               ))}
             </Table.Row>

package/src/components/Table/Table.tsx

@@ -1,4 +1,12 @@
-import {type ReactNode, type MutableRefObject, createContext, useContext, useRef, Children, isValidElement} from 'react'
+import {
+  type ReactNode,
+  type MutableRefObject,
+  createContext,
+  useContext,
+  useRef,
+  Children,
+  isValidElement,
+} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {Pagination} from './Pagination'
@@ -81,10 +89,7 @@ function Root({children, variant = 'default', size = 'md'}: RootProps) {
     <TableContext.Provider value={{variant, size, inferredTemplateRef}}>
       <html.div
         role="table"
-        style={[
-          styles.root,
-          template ? styles.gridColumns(template) : undefined,
-        ]}
+        style={[styles.root, template ? styles.gridColumns(template) : undefined]}
       >
         {children}
       </html.div>

package/src/components/Table/useDataTable.ts

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useCallback, useState} from 'react'
 import {
   useReactTable,
   getCoreRowModel,
@@ -10,7 +10,6 @@ import {
   type ColumnFiltersState,
   type PaginationState,
   type RowSelectionState,
-  type TableOptions,
   type Table,
 } from '@tanstack/react-table'
 
@@ -47,67 +46,54 @@ export function useDataTable<TData>(
   options: UseDataTableOptions<TData> = {},
 ): Table<TData> {
   const {
-    pagination: paginationInit,
     enableSorting = false,
     enableFiltering = false,
     enableRowSelection = false,
     onRowSelectionChange: onSelectionChangeProp,
   } = options
 
+  const enablePagination = options.pagination != null
+
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
   const [pagination, setPagination] = useState<PaginationState>({
-    pageIndex: paginationInit?.pageIndex ?? 0,
-    pageSize: paginationInit?.pageSize ?? 10,
+    pageIndex: options.pagination?.pageIndex ?? 0,
+    pageSize: options.pagination?.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 handleRowSelectionChange = useCallback(
+    (updater: any) => {
+      setRowSelection((prev: RowSelectionState) => {
+        const next = typeof updater === 'function' ? updater(prev) : updater
+        onSelectionChangeProp?.(next)
+        return next
+      })
+    },
+    [onSelectionChangeProp],
+  )
 
-  const tableOptions: TableOptions<TData> = {
+  // Follow TanStack's recommended pattern: always pass all row models
+  // unconditionally and let the library handle unused ones. Conditional
+  // spreads create unstable option shapes that can trigger infinite loops.
+  return useReactTable({
     data,
     columns,
+    state: {sorting, columnFilters, pagination, rowSelection},
     getCoreRowModel: getCoreRowModel(),
-
-    // Sorting
-    ...(enableSorting && {
-      getSortedRowModel: getSortedRowModel(),
-      onSortingChange: setSorting,
-      state: {sorting},
-    }),
-
-    // Filtering
-    ...(enableFiltering && {
-      getFilteredRowModel: getFilteredRowModel(),
-      onColumnFiltersChange: setColumnFilters,
-    }),
-
-    // Pagination
-    ...(paginationInit && {
-      getPaginationRowModel: getPaginationRowModel(),
-      onPaginationChange: setPagination,
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onPaginationChange: setPagination,
+    enableSorting,
+    enableRowSelection:
+      typeof enableRowSelection === 'function' ? enableRowSelection : !!enableRowSelection,
+    onRowSelectionChange: handleRowSelectionChange,
+    // When pagination is disabled, set a very large page size to show all rows
+    ...(!enablePagination && {
+      autoResetPageIndex: false,
     }),
-
-    // 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/Tag/Tag.meta.ts

@@ -0,0 +1,22 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Interactive tag/chip with optional remove button. Works standalone or inside TagGroup for collection management. Visually similar to Badge but supports interaction.',
+  whenToUse: [
+    'Removable items in a list (emails, categories)',
+    'Inside TagGroup for editable tag collections',
+    'Interactive labels that can be dismissed',
+  ],
+  whenNotToUse: [
+    'Static status indicators — use Badge',
+    'Toggleable selection — use Toggle or ToggleGroup',
+  ],
+  relatedTo: [
+    {component: 'Badge', relationship: 'Static display variant'},
+    {component: 'TagGroup', relationship: 'Wrap in TagGroup.Root for collection management'},
+  ],
+  example: `<Tag removable onRemove={() => console.log('removed')}>
+  user@example.com
+</Tag>`,
+}

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,92 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {Tag} from './Tag'
+
+const meta: Meta<typeof Tag> = {
+  title: 'Components/Tag',
+  component: Tag,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'success', 'warning', 'error', 'info'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md'],
+    },
+    removable: {control: 'boolean'},
+    disabled: {control: 'boolean'},
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Tag>
+
+export const Default: Story = {
+  args: {children: 'Tag'},
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('Tag')).toBeInTheDocument()
+  },
+}
+
+export const Removable: Story = {
+  args: {children: 'user@example.com', removable: true, onRemove: fn()},
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('user@example.com')).toBeInTheDocument()
+    await expect(canvas.getByRole('button', {name: /remove/i})).toBeInTheDocument()
+  },
+}
+
+export const Disabled: Story = {
+  args: {children: 'Disabled', removable: true, disabled: true},
+}
+
+export const Small: Story = {
+  args: {children: 'Small', size: 'sm', removable: true, onRemove: fn()},
+}
+
+const layoutStyles = css.create({
+  row: {display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap'},
+  stack: {display: 'flex', flexDirection: 'column', gap: 16},
+})
+
+export const AllVariants: Story = {
+  render: () => (
+    <html.div style={layoutStyles.stack}>
+      <html.div style={layoutStyles.row}>
+        <Tag>Default</Tag>
+        <Tag variant="success">Success</Tag>
+        <Tag variant="warning">Warning</Tag>
+        <Tag variant="error">Error</Tag>
+        <Tag variant="info">Info</Tag>
+      </html.div>
+      <html.div style={layoutStyles.row}>
+        <Tag removable onRemove={() => {}}>
+          Default
+        </Tag>
+        <Tag variant="success" removable onRemove={() => {}}>
+          Success
+        </Tag>
+        <Tag variant="warning" removable onRemove={() => {}}>
+          Warning
+        </Tag>
+        <Tag variant="error" removable onRemove={() => {}}>
+          Error
+        </Tag>
+        <Tag variant="info" removable onRemove={() => {}}>
+          Info
+        </Tag>
+      </html.div>
+      <html.div style={layoutStyles.row}>
+        <Tag size="sm">Small</Tag>
+        <Tag size="sm" removable onRemove={() => {}}>
+          Removable Small
+        </Tag>
+      </html.div>
+    </html.div>
+  ),
+  play: async ({canvas}) => {
+    await expect(canvas.getAllByText('Default').length).toBe(2)
+  },
+}