@talelk/newui-organisms 0.0.0-stage → 1.0.0

package/src/organisms/DataTable/DataTable.tsx

@@ -0,0 +1,334 @@
+import { Button, Checkbox, TextInput } from '@talelk/newui-atoms'
+import {
+  Pagination,
+  ScrollTable,
+  ScrollTableHead,
+} from '@talelk/newui-molecules'
+import {
+  type ColumnDef,
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  createTable,
+  flexRender,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_datetime,
+  sortFn_text,
+  tableFeatures,
+} from '@tanstack/solid-table'
+import {
+  createEffect,
+  createMemo,
+  For,
+  type JSX,
+  on,
+  Show,
+  untrack,
+} from 'solid-js'
+
+/**
+ * Built on the first table, not when the module is evaluated.
+ *
+ * A page can import this entry for `ScrollTable` alone (the accounting ledger
+ * does); if the feature set were a module-level `const`, evaluating the module
+ * would build it — and rollup could not drop the table engine behind it.
+ */
+function createFeatures() {
+  return tableFeatures({
+    columnFilteringFeature,
+    columnVisibilityFeature,
+    globalFilteringFeature,
+    rowPaginationFeature,
+    rowSelectionFeature,
+    rowSortingFeature,
+    filteredRowModel: createFilteredRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    sortedRowModel: createSortedRowModel(),
+    sortFns: {
+      alphanumeric: sortFn_alphanumeric,
+      datetime: sortFn_datetime,
+      text: sortFn_text,
+    },
+  })
+}
+
+type Features = ReturnType<typeof createFeatures>
+
+export type DataTableColumn<T extends object> = ColumnDef<Features, T>
+
+export interface DataTableProps<T extends { id: string }> {
+  title: string
+  rows: T[]
+  columns: DataTableColumn<T>[]
+  actionLabel?: string
+  onRowsAction?: (ids: string[]) => void
+  /** Pages whose FilterBar owns search hide the table's own. */
+  hideSearch?: boolean
+  /** Selection checkboxes + bulk action. Default on; off for read tables. */
+  selectable?: boolean
+  pageSize?: number
+  /** Footer noun: "32 transactions". Defaults to "records". */
+  recordsLabel?: string
+  emptyTitle?: string
+  emptyHint?: string
+  /** Empty-state reset for externally filtered pages (beats Clear search). */
+  onClearFilters?: () => void
+}
+
+/**
+ * A collection as a table: search, sort, page, hide columns, select rows.
+ *
+ * TanStack Table is the engine; this is the kit's composition of it. The surface
+ * lives in `@talelk/newui-organisms`: it composes controls and owns the TanStack Table
+ * engine. The headless `@talelk/newui-data` package remains independent of rendering.
+ */
+export function DataTable<T extends { id: string }>(
+  props: DataTableProps<T>,
+): JSX.Element {
+  const selectable = () => props.selectable !== false
+  const selection: DataTableColumn<T> = {
+    id: 'select',
+    enableHiding: false,
+    enableSorting: false,
+    header: (context) => (
+      <Checkbox
+        aria-label="Select all rows on this page"
+        checked={context.table.getIsAllPageRowsSelected()}
+        indeterminate={context.table.getIsSomePageRowsSelected()}
+        onCheckedChange={(value) =>
+          context.table.toggleAllPageRowsSelected(value)
+        }
+      />
+    ),
+    cell: (context) => (
+      <Checkbox
+        aria-label={`Select ${context.row.original.id}`}
+        checked={context.row.getIsSelected()}
+        onCheckedChange={(value) => context.row.toggleSelected(value)}
+      />
+    ),
+  }
+  const resolvedColumns = createMemo(() =>
+    selectable() ? [selection, ...props.columns] : props.columns,
+  )
+  const table = createTable<Features, T>({
+    features: createFeatures(),
+    get data() {
+      return props.rows
+    },
+    get columns() {
+      return resolvedColumns()
+    },
+    getRowId: (row) => row.id,
+    initialState: {
+      // Initial only: later pageSize changes do not repaginate the table.
+      pagination: {
+        pageIndex: 0,
+        pageSize: untrack(() => props.pageSize) ?? 10,
+      },
+    },
+  })
+  // Externally filtered pages hand over a new row set per filter change;
+  // staying on page 3 of a 6-row result would show an empty page.
+  createEffect(
+    on(
+      () => props.rows,
+      () => table.setPageIndex(0),
+      { defer: true },
+    ),
+  )
+  const alignEnd = (meta: unknown): boolean =>
+    (meta as { align?: string } | undefined)?.align === 'end'
+  const selected = () =>
+    table.getFilteredSelectedRowModel().rows.map((row) => row.original.id)
+  return (
+    <section
+      class="min-w-0 rounded-card border border-outline-gray-1 bg-surface-elevation-1"
+      aria-label={props.title}
+      data-slot="data-table"
+    >
+      <div class="flex flex-wrap items-center justify-between gap-control-gap p-card-pad-compact">
+        <Show when={!props.hideSearch}>
+          <div class="w-full sm:w-72">
+            <TextInput
+              type="search"
+              aria-label={`Search ${props.title.toLowerCase()}`}
+              placeholder={`Search ${props.title.toLowerCase()}…`}
+              value={String(table.atoms.globalFilter.get() ?? '')}
+              onInput={(event) => {
+                table.setGlobalFilter(event.currentTarget.value)
+                table.setPageIndex(0)
+              }}
+            />
+          </div>
+        </Show>
+        <div class="ms-auto flex flex-wrap items-center gap-2">
+          <Show when={props.onRowsAction && selected().length}>
+            <Button
+              variant="outline"
+              onClick={() => {
+                props.onRowsAction?.(selected())
+                table.resetRowSelection()
+              }}
+            >
+              {props.actionLabel ?? 'Update selected'} ({selected().length})
+            </Button>
+          </Show>
+          <details class="relative">
+            <summary class="cursor-pointer rounded-3 border border-outline-gray-2 px-3 py-1.5 text-interface focus-visible:focus-ring">
+              Columns
+            </summary>
+            <div class="absolute end-0 z-floating mt-2 flex min-w-44 flex-col gap-2 rounded-6 border border-outline-gray-1 bg-surface-elevation-2 p-3 shadow-md">
+              <For
+                each={table
+                  .getAllLeafColumns()
+                  .filter((column) => column.getCanHide())}
+              >
+                {(column) => (
+                  <Checkbox
+                    label={column.id}
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) => column.toggleVisibility(value)}
+                  />
+                )}
+              </For>
+            </div>
+          </details>
+        </div>
+      </div>
+      <ScrollTable label={`${props.title} table`}>
+        <table class="w-full min-w-[720px] border-collapse text-start">
+          <ScrollTableHead>
+            <For each={table.getHeaderGroups()}>
+              {(group) => (
+                <tr>
+                  <For each={group.headers}>
+                    {(header) => (
+                      <th
+                        scope="col"
+                        class={
+                          alignEnd(header.column.columnDef.meta)
+                            ? 'px-4 py-3 text-end'
+                            : 'px-4 py-3 text-start'
+                        }
+                        aria-sort={
+                          header.column.getIsSorted() === 'asc'
+                            ? 'ascending'
+                            : header.column.getIsSorted() === 'desc'
+                              ? 'descending'
+                              : undefined
+                        }
+                      >
+                        <Show when={!header.isPlaceholder}>
+                          <Show
+                            when={header.column.getCanSort()}
+                            fallback={flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                          >
+                            <button
+                              type="button"
+                              class="inline-flex items-center gap-2 rounded-3 focus-visible:focus-ring"
+                              onClick={header.column.getToggleSortingHandler()}
+                            >
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+                              <span aria-hidden="true">
+                                <span
+                                  aria-hidden="true"
+                                  class="lucide-arrow-up-down inline-block size-4 align-middle"
+                                />
+                              </span>
+                            </button>
+                          </Show>
+                        </Show>
+                      </th>
+                    )}
+                  </For>
+                </tr>
+              )}
+            </For>
+          </ScrollTableHead>
+          <tbody>
+            <For each={table.getRowModel().rows}>
+              {(row) => (
+                <tr
+                  class="border-b border-outline-gray-1 hover:bg-surface-gray-1"
+                  data-selected={row.getIsSelected() ? '' : undefined}
+                >
+                  <For each={row.getVisibleCells()}>
+                    {(cell) => (
+                      <td
+                        class={
+                          alignEnd(cell.column.columnDef.meta)
+                            ? 'px-4 py-3 text-end text-interface'
+                            : 'px-4 py-3 text-interface'
+                        }
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </td>
+                    )}
+                  </For>
+                </tr>
+              )}
+            </For>
+          </tbody>
+        </table>
+      </ScrollTable>
+      <Show when={table.getFilteredRowModel().rows.length === 0}>
+        <div class="p-10 text-center">
+          <h3 class="font-semibold">
+            {props.emptyTitle ?? 'No matching records'}
+          </h3>
+          <p class="mt-1 text-ink-gray-7">
+            {props.emptyHint ?? 'Try a different search or clear your filters.'}
+          </p>
+          <Show
+            when={props.onClearFilters}
+            fallback={
+              <Button class="mt-3" onClick={() => table.resetGlobalFilter()}>
+                Clear search
+              </Button>
+            }
+          >
+            {(clear) => (
+              <Button class="mt-3" onClick={() => clear()()}>
+                Reset filters
+              </Button>
+            )}
+          </Show>
+        </div>
+      </Show>
+      <div class="flex flex-wrap items-center justify-between gap-control-gap p-card-pad-compact">
+        <span class="text-caption text-ink-gray-7" role="status">
+          <Show when={selectable()}>{selected().length} selected · </Show>
+          {table.getFilteredRowModel().rows.length}{' '}
+          {props.recordsLabel ?? 'records'}
+        </span>
+        <Pagination.Root
+          page={table.atoms.pagination.get().pageIndex + 1}
+          pageSize={table.atoms.pagination.get().pageSize}
+          count={table.getFilteredRowModel().rows.length}
+          onPageChange={(page) => table.setPageIndex(page - 1)}
+        >
+          <Pagination.Range />
+          <Pagination.PrevTrigger />
+          <Pagination.Pages />
+          <Pagination.NextTrigger />
+        </Pagination.Root>
+      </div>
+    </section>
+  )
+}

package/src/organisms/DataTable/index.ts

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

package/src/organisms/DetailHeader/DetailHeader.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { DetailHeader } from './DetailHeader'
+
+describe('DetailHeader', () => {
+  it('renders the trail, the title, the status and the subtitle', () => {
+    render(() => (
+      <DetailHeader
+        breadcrumbs={[{ label: 'Files', route: '/files' }, { label: 'Report' }]}
+        title="Q3 report.pdf"
+        subtitle="1.2 MB · updated 2h ago"
+        status={{ label: 'Shared', theme: 'blue' }}
+      />
+    ))
+
+    expect(screen.getByRole('navigation', { name: 'Breadcrumb' })).toBeTruthy()
+    expect(
+      screen.getByRole('heading', { level: 1, name: 'Q3 report.pdf' }),
+    ).toBeTruthy()
+    expect(screen.getByText('Shared')).toBeTruthy()
+    expect(screen.getByText('1.2 MB · updated 2h ago')).toBeTruthy()
+  })
+
+  it('puts the primary action last and calls the right handler', async () => {
+    const onShare = vi.fn()
+    const onDownload = vi.fn()
+    render(() => (
+      <DetailHeader
+        title="Report"
+        actions={[
+          { label: 'Share', onClick: onShare },
+          { label: 'Download', onClick: onDownload },
+        ]}
+      />
+    ))
+
+    const buttons = screen.getAllByRole('button')
+    expect(buttons.at(-1)?.textContent).toBe('Download')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Share' }))
+    expect(onShare).toHaveBeenCalled()
+    expect(onDownload).not.toHaveBeenCalled()
+  })
+
+  it('renders one action as primary with no outline sibling', () => {
+    render(() => <DetailHeader title="Report" actions={[{ label: 'Edit' }]} />)
+    expect(screen.getAllByRole('button')).toHaveLength(1)
+  })
+
+  it('omits the trail when there is none', () => {
+    const { container } = render(() => <DetailHeader title="Report" />)
+    expect(container.querySelector('nav')).toBeNull()
+  })
+})

package/src/organisms/DetailHeader/DetailHeader.tsx

@@ -0,0 +1,87 @@
+import { Badge, Button, type ButtonTheme } from '@talelk/newui-atoms'
+import { type BreadcrumbItem, Breadcrumbs } from '@talelk/newui-molecules'
+import { For, type JSX, Show } from 'solid-js'
+
+export interface DetailAction {
+  label: string
+  onClick?: () => void
+}
+
+export interface DetailHeaderProps {
+  /** The trail above the title. Omitted → no breadcrumbs. */
+  breadcrumbs?: BreadcrumbItem[]
+  title: JSX.Element
+  /** Muted line under the title — a record id, an owner, a timestamp. */
+  subtitle?: JSX.Element
+  /** Status pill beside the title. */
+  status?: { label: string; theme?: ButtonTheme }
+  /**
+   * Trailing actions in order. Everything but the last renders as an outline
+   * button; the last is the primary one.
+   */
+  actions?: DetailAction[]
+  /** Anything else on the trailing edge, before the actions. */
+  children?: JSX.Element
+  class?: string
+}
+
+/**
+ * The top of a record page: where it sits, what it is, what state it is in, and
+ * what you can do to it.
+ *
+ * The order is the point. A reader arrives from a list and needs three questions
+ * answered in that order — the trail first, so they know this is the record they
+ * clicked; then the name; then the status, because a status only means something
+ * once you know what it belongs to. Actions sit on the trailing edge with the
+ * primary one last, so the least-common (often destructive) action is never the
+ * one nearest the title.
+ */
+export function DetailHeader(props: DetailHeaderProps): JSX.Element {
+  const secondary = () => (props.actions ?? []).slice(0, -1)
+  const primary = () => (props.actions ?? []).at(-1)
+
+  return (
+    <header class={`flex flex-col gap-field-gap ${props.class ?? ''}`}>
+      <Show when={props.breadcrumbs}>
+        {(crumbs) => <Breadcrumbs items={crumbs()} />}
+      </Show>
+
+      <div class="flex flex-wrap items-start justify-between gap-card-gap">
+        <div class="flex min-w-0 flex-col gap-1">
+          <div class="flex min-w-0 items-center gap-control-gap">
+            <h1 class="truncate text-metric text-ink-gray-9">{props.title}</h1>
+            <Show when={props.status}>
+              {(status) => (
+                <Badge
+                  theme={status().theme ?? 'gray'}
+                  label={status().label}
+                />
+              )}
+            </Show>
+          </div>
+          <Show when={props.subtitle}>
+            <p class="truncate text-base text-ink-gray-7">{props.subtitle}</p>
+          </Show>
+        </div>
+
+        <div class="flex shrink-0 flex-wrap items-center gap-control-gap">
+          {props.children}
+          <For each={secondary()}>
+            {(action) => (
+              <Button variant="outline" onClick={action.onClick}>
+                {action.label}
+              </Button>
+            )}
+          </For>
+          <Show when={primary()}>
+            {(action) => (
+              <Button variant="solid" onClick={action().onClick}>
+                {action().label}
+              </Button>
+            )}
+          </Show>
+        </div>
+      </div>
+    </header>
+  )
+}

package/src/organisms/DetailHeader/index.ts

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

package/src/organisms/FilterBar/FilterBar.test.tsx

@@ -0,0 +1,151 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { FilterBar } from './FilterBar'
+
+describe('FilterBar', () => {
+  it('renders a labelled search box', () => {
+    render(() => <FilterBar query={{ placeholder: 'Search files' }} />)
+    expect(screen.getByLabelText('Search files')).toBeTruthy()
+  })
+
+  it('reports typing', async () => {
+    const onInput = vi.fn()
+    render(() => <FilterBar query={{ placeholder: 'Search', onInput }} />)
+    await userEvent.type(screen.getByLabelText('Search'), 'inv')
+    expect(onInput).toHaveBeenLastCalledWith('inv')
+  })
+
+  it('gives every select an accessible name from its label', () => {
+    render(() => (
+      <FilterBar
+        selects={[
+          {
+            label: 'Owner',
+            options: [{ label: 'Anyone', value: 'any' }],
+          },
+        ]}
+      />
+    ))
+    expect(screen.getByLabelText('Owner')).toBeTruthy()
+  })
+
+  it('reports a select change', async () => {
+    const onValueChange = vi.fn()
+    render(() => (
+      <FilterBar
+        selects={[
+          {
+            label: 'Owner',
+            value: 'any',
+            onValueChange,
+            options: [
+              { label: 'Anyone', value: 'any' },
+              { label: 'Me', value: 'me' },
+            ],
+          },
+        ]}
+      />
+    ))
+
+    await userEvent.click(screen.getByLabelText('Owner'))
+    await userEvent.click(await screen.findByRole('option', { name: 'Me' }))
+    expect(onValueChange).toHaveBeenCalledWith('me')
+  })
+
+  it('renders no view switcher unless one is given', () => {
+    const { container } = render(() => <FilterBar />)
+    expect(container.querySelector('[data-slot="tab-trigger"]')).toBeNull()
+  })
+
+  it('puts the controls on one surface', () => {
+    const { container } = render(() => (
+      <FilterBar query={{ placeholder: 'Search' }} />
+    ))
+    const bar = container.querySelector('[data-slot="filter-bar"]')
+    expect(bar?.className).toContain('bg-surface-elevation-1')
+    expect(bar?.className).toContain('border-outline-gray-1')
+  })
+
+  it('focuses the search box on / and ignores / while editing elsewhere', async () => {
+    render(() => (
+      <>
+        <input aria-label="Other field" />
+        <FilterBar query={{ placeholder: 'Search tickets' }} />
+      </>
+    ))
+    const search = screen.getByLabelText('Search tickets')
+    await userEvent.keyboard('/')
+    expect(document.activeElement).toBe(search)
+
+    const other = screen.getByLabelText('Other field')
+    other.focus()
+    await userEvent.keyboard('/')
+    expect(document.activeElement).toBe(other)
+  })
+
+  it('states the result count, singular and plural', () => {
+    const one = render(() => <FilterBar resultCount={1} />)
+    expect(screen.getByText('1 result')).toBeTruthy()
+    one.unmount()
+    render(() => <FilterBar resultCount={24} />)
+    expect(screen.getByText('24 results')).toBeTruthy()
+  })
+
+  it('renders chips and removes one by its labelled button', async () => {
+    const onRemove = vi.fn()
+    render(() => <FilterBar chips={[{ label: 'Status: Open', onRemove }]} />)
+    expect(screen.getByText(/Status: Open/)).toBeTruthy()
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Remove filter: Status: Open' }),
+    )
+    expect(onRemove).toHaveBeenCalled()
+  })
+
+  it('renders a chip without onRemove as a plain pill', () => {
+    render(() => <FilterBar chips={[{ label: 'Region: Europe' }]} />)
+    expect(screen.getByText('Region: Europe')).toBeTruthy()
+    expect(screen.queryByRole('button', { name: /Remove filter/ })).toBeNull()
+  })
+
+  it('shows Clear all only while a filter is active, and reports it', async () => {
+    const onClearAll = vi.fn()
+    const idle = render(() => <FilterBar onClearAll={onClearAll} />)
+    expect(screen.queryByRole('button', { name: 'Clear all' })).toBeNull()
+    idle.unmount()
+
+    render(() => (
+      <FilterBar
+        onClearAll={onClearAll}
+        selects={[
+          {
+            label: 'Owner',
+            value: 'me',
+            options: [{ label: 'Me', value: 'me' }],
+          },
+        ]}
+      />
+    ))
+    await userEvent.click(screen.getByRole('button', { name: 'Clear all' }))
+    expect(onClearAll).toHaveBeenCalled()
+  })
+
+  it('renders and reports the view switcher', async () => {
+    const onValueChange = vi.fn()
+    render(() => (
+      <FilterBar
+        tabs={{
+          value: 'list',
+          onValueChange,
+          options: [
+            { label: 'List', value: 'list' },
+            { label: 'Board', value: 'board' },
+          ],
+        }}
+      />
+    ))
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Board' }))
+    expect(onValueChange).toHaveBeenCalledWith('board')
+  })
+})