@talelk/newui-organisms 2.0.0 → 2.1.0

package/src/organisms/DataTable/DataTable.tsx

@@ -1,4 +1,5 @@
 import { Button, Checkbox, cn, TextInput } from '@talelk/newui-atoms'
+import { createControllableSignal } from '@talelk/newui-atoms/internal'
 import {
   Pagination,
   ScrollTable,
@@ -7,6 +8,7 @@ import {
 import {
   type ColumnDef,
   columnFilteringFeature,
+  columnPinningFeature,
   columnVisibilityFeature,
   createFilteredRowModel,
   createPaginatedRowModel,
@@ -25,6 +27,7 @@ import {
 import {
   createEffect,
   createMemo,
+  createSignal,
   For,
   type JSX,
   on,
@@ -44,6 +47,7 @@ import { SelectionBar } from '../SelectionBar'
 function createFeatures() {
   return tableFeatures({
     columnFilteringFeature,
+    columnPinningFeature,
     columnVisibilityFeature,
     globalFilteringFeature,
     rowPaginationFeature,
@@ -72,10 +76,22 @@ export type DataTableMobileRole =
   | 'status'
   | 'meta'
 
-/** The library reads `meta.align` and `meta.mobile`; both are optional. */
+/** The library reads `meta.align`, `meta.mobile` and `meta.editable`; all optional. */
 export interface DataTableColumnMeta {
   align?: 'end'
   mobile?: DataTableMobileRole
+  /**
+   * The cell edits in place when the table is `editable`. `editInput` picks
+   * the editor (default `text`).
+   */
+  editable?: boolean
+  editInput?: 'text' | 'number'
+}
+
+/** Which column is frozen to each edge of the horizontal scroll. */
+export interface DataTablePinned {
+  start?: string
+  end?: string
 }
 
 export interface DataTableProps<T extends { id: string }> {
@@ -110,10 +126,97 @@ export interface DataTableProps<T extends { id: string }> {
   emptyHint?: string
   /** Empty-state reset for externally filtered pages (beats Clear search). */
   onClearFilters?: () => void
+  /**
+   * Freeze one column to the start edge of the horizontal scroll — the
+   * identifier that must stay visible while the rest move. Controlled:
+   * changes go through `onPinnedColumnsChange`.
+   */
+  pinnedStart?: string
+  /** Freeze one column to the end edge — typically the row actions. */
+  pinnedEnd?: string
+  defaultPinnedStart?: string
+  defaultPinnedEnd?: string
+  onPinnedColumnsChange?: (pinned: DataTablePinned) => void
+  /**
+   * Turn on inline editing: columns whose `meta.editable` is set render a
+   * click-to-edit cell. Values are app-owned — edits arrive through
+   * `onCellChange`, and the table shows whatever the next `rows` carry.
+   */
+  editable?: boolean
+  onCellChange?: (id: string, columnId: string, value: string) => void
 }
 
 /**
- * A collection as a table: search, sort, page, hide columns, select rows.
+ * A click-to-edit cell. Enter or blur commits; Escape cancels. The value is
+ * the row's raw field, not the formatted render.
+ */
+function EditableCell(props: {
+  id: string
+  columnId: string
+  value: string
+  label: string
+  type: 'text' | 'number'
+  alignEnd: boolean
+  onCommit: (id: string, columnId: string, value: string) => void
+}): JSX.Element {
+  const [editing, setEditing] = createSignal(false)
+  // Seeded at open time (the trigger click), never read while closed.
+  const [draft, setDraft] = createSignal('')
+  const commit = (original: string) => {
+    setEditing(false)
+    const value = draft().trim()
+    if (value !== original) props.onCommit(props.id, props.columnId, value)
+  }
+  return (
+    <Show
+      when={editing()}
+      fallback={
+        <button
+          type="button"
+          data-slot="data-table-edit-trigger"
+          // The name leads with the visible text: a speech user saying what
+          // they see must still land on this control.
+          aria-label={`${props.value || '—'} — edit ${props.label} of ${props.id}`}
+          class={cn(
+            '-mx-1 w-full cursor-text rounded-3 px-1 py-0.5 text-start hover:bg-surface-gray-2 focus-visible:focus-ring',
+            props.alignEnd && 'text-end',
+          )}
+          onClick={() => {
+            setDraft(props.value)
+            setEditing(true)
+          }}
+        >
+          <Show
+            when={props.value !== ''}
+            fallback={<span class="text-ink-gray-5">—</span>}
+          >
+            {props.value}
+          </Show>
+        </button>
+      }
+    >
+      <TextInput
+        aria-label={`Edit ${props.label} of ${props.id}`}
+        // The editor opens on the user's click; focus belongs there.
+        ref={(el) => queueMicrotask(() => el.focus())}
+        type={props.type}
+        value={draft()}
+        size="xs"
+        onInput={(event) => setDraft(event.currentTarget.value)}
+        onBlur={() => commit(props.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') commit(props.value)
+          if (event.key === 'Escape') setEditing(false)
+        }}
+        class="min-w-0"
+      />
+    </Show>
+  )
+}
+
+/**
+ * A collection as a table: search, sort, page, hide columns, select rows,
+ * pin one column to each scroll edge, edit cells in place.
  *
  * 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
@@ -152,6 +255,38 @@ export function DataTable<T extends { id: string }>(
   const resolvedColumns = createMemo(() =>
     selectable() ? [selection, ...props.columns] : props.columns,
   )
+  const [pinned] = createControllableSignal<DataTablePinned>({
+    value: () => ({
+      start: props.pinnedStart,
+      end: props.pinnedEnd,
+    }),
+    defaultValue: {
+      start: props.defaultPinnedStart,
+      end: props.defaultPinnedEnd,
+    },
+    onChange: (next) => props.onPinnedColumnsChange?.(next),
+  })
+  const editable = () =>
+    props.editable === true && props.onCellChange !== undefined
+  const editMeta = (meta: unknown) => {
+    const columnMeta = meta as DataTableColumnMeta | undefined
+    return columnMeta?.editable === true
+      ? { input: columnMeta.editInput ?? 'text' }
+      : undefined
+  }
+  /** Which edge (if any) a column id is frozen to. */
+  const pinOf = (columnId: string): 'start' | 'end' | undefined => {
+    if (pinned().start === columnId) return 'start'
+    if (pinned().end === columnId) return 'end'
+    return undefined
+  }
+  /** Sticky cell chrome: opaque card surface over the scrolling columns. */
+  const pinClass = (edge: 'start' | 'end' | undefined) =>
+    edge === 'start'
+      ? 'sticky start-0 z-raised bg-surface-elevation-1 group-hover/row:bg-surface-gray-1 data-[selected]:bg-surface-blue-1 data-[selected]:group-hover/row:bg-surface-blue-2 border-e border-outline-gray-1'
+      : edge === 'end'
+        ? 'sticky end-0 z-raised bg-surface-elevation-1 group-hover/row:bg-surface-gray-1 data-[selected]:bg-surface-blue-1 data-[selected]:group-hover/row:bg-surface-blue-2 border-s border-outline-gray-1'
+        : ''
   const table = createTable<Features, T>({
     features: createFeatures(),
     get data() {
@@ -160,6 +295,15 @@ export function DataTable<T extends { id: string }>(
     get columns() {
       return resolvedColumns()
     },
+    get state() {
+      const pinnedValue = pinned()
+      return {
+        columnPinning: {
+          start: pinnedValue.start ? [pinnedValue.start] : [],
+          end: pinnedValue.end ? [pinnedValue.end] : [],
+        },
+      }
+    },
     getRowId: (row) => row.id,
     get enableRowSelection() {
       return (row: { original: T }) =>
@@ -455,11 +599,12 @@ export function DataTable<T extends { id: string }>(
                           {(header) => (
                             <th
                               scope="col"
-                              class={
+                              class={cn(
                                 alignEnd(header.column.columnDef.meta)
                                   ? `${cellPad()} text-end`
-                                  : `${cellPad()} text-start`
-                              }
+                                  : `${cellPad()} text-start`,
+                                pinClass(pinOf(header.column.id)),
+                              )}
                               aria-sort={
                                 header.column.getIsSorted() === 'asc'
                                   ? 'ascending'
@@ -513,24 +658,61 @@ export function DataTable<T extends { id: string }>(
                   <For each={table.getRowModel().rows}>
                     {(row) => (
                       <tr
-                        class="border-b border-outline-gray-1 hover:bg-surface-gray-1 data-[selected]:bg-surface-blue-1 data-[selected]:hover:bg-surface-blue-2"
+                        class="group/row border-b border-outline-gray-1 hover:bg-surface-gray-1 data-[selected]:bg-surface-blue-1 data-[selected]:hover:bg-surface-blue-2"
                         data-selected={row.getIsSelected() ? '' : undefined}
                       >
                         <For each={row.getVisibleCells()}>
-                          {(cell) => (
-                            <td
-                              class={
-                                alignEnd(cell.column.columnDef.meta)
-                                  ? `${cellPad()} text-end text-interface`
-                                  : `${cellPad()} text-interface`
-                              }
-                            >
-                              {flexRender(
-                                cell.column.columnDef.cell,
-                                cell.getContext(),
-                              )}
-                            </td>
-                          )}
+                          {(cell) => {
+                            const edge = pinOf(cell.column.id)
+                            const editingMeta = editable()
+                              ? editMeta(cell.column.columnDef.meta)
+                              : undefined
+                            const raw = (
+                              row.original as Record<string, unknown>
+                            )[cell.column.id]
+                            return (
+                              <td
+                                class={cn(
+                                  alignEnd(cell.column.columnDef.meta)
+                                    ? `${cellPad()} text-end text-interface`
+                                    : `${cellPad()} text-interface`,
+                                  pinClass(edge),
+                                )}
+                                data-selected={
+                                  row.getIsSelected() ? '' : undefined
+                                }
+                              >
+                                <Show
+                                  when={editingMeta}
+                                  fallback={flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                  )}
+                                >
+                                  <EditableCell
+                                    id={row.original.id}
+                                    columnId={cell.column.id}
+                                    value={raw == null ? '' : String(raw)}
+                                    label={columnLabel(
+                                      cell.column as unknown as {
+                                        id: string
+                                        columnDef: { header?: unknown }
+                                      },
+                                    )}
+                                    type={
+                                      editingMeta?.input === 'number'
+                                        ? 'number'
+                                        : 'text'
+                                    }
+                                    alignEnd={alignEnd(
+                                      cell.column.columnDef.meta,
+                                    )}
+                                    onCommit={props.onCellChange ?? (() => {})}
+                                  />
+                                </Show>
+                              </td>
+                            )
+                          }}
                         </For>
                       </tr>
                     )}

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

@@ -0,0 +1,53 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { DetailHeader } from './DetailHeader'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+describe('DetailHeader accessibility', () => {
+  it('has no axe violations for a record header', async () => {
+    const { container } = render(() => (
+      <DetailHeader
+        breadcrumbs={[
+          { label: 'Files', route: '/files' },
+          { label: 'Reports', route: '/files/reports' },
+          { label: 'Q3' },
+        ]}
+        title="Q3 report.pdf"
+        subtitle="1.2 MB · updated 2h ago"
+        status={{ label: 'Shared', theme: 'blue' }}
+        actions={[
+          { label: 'Share', onClick: () => {} },
+          { label: 'Download', onClick: () => {} },
+        ]}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations with a lower heading level', async () => {
+    const { container } = render(() => (
+      <DetailHeader
+        title="INV-1042"
+        headingLevel={2}
+        subtitle="Unpaid · due Oct 30"
+        actions={[{ label: 'Edit', onClick: () => {} }]}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

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

@@ -0,0 +1,50 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { DetailHeader } from './DetailHeader'
+
+describe('DetailHeader (browser, real CSS)', () => {
+  it('sets the title in the metric scale above the muted subtitle', () => {
+    const { container } = render(() => (
+      <DetailHeader title="Q3 report.pdf" subtitle="1.2 MB · updated 2h ago" />
+    ))
+    const title = container.querySelector('h1') as HTMLElement
+    const subtitle = container.querySelector('p') as HTMLElement
+    // `text-metric` is 1.75rem — the largest type on a record page.
+    expect(Number.parseFloat(getComputedStyle(title).fontSize)).toBeGreaterThan(
+      24,
+    )
+    expect(Number.parseFloat(getComputedStyle(subtitle).fontSize)).toBeLessThan(
+      Number.parseFloat(getComputedStyle(title).fontSize),
+    )
+  })
+
+  it('keeps the action buttons real, with the primary one painted', () => {
+    const { container } = render(() => (
+      <DetailHeader
+        title="Report"
+        actions={[{ label: 'Share' }, { label: 'Download' }]}
+      />
+    ))
+    const buttons = Array.from(container.querySelectorAll('button'))
+    const primary = buttons.at(-1) as HTMLElement
+    expect(primary.getBoundingClientRect().height).toBeGreaterThanOrEqual(24)
+    // `variant="solid"` must paint — a transparent primary is an invisible CTA.
+    expect(getComputedStyle(primary).backgroundColor).not.toBe(
+      'rgba(0, 0, 0, 0)',
+    )
+  })
+
+  it('draws the status pill as a rounded chip', () => {
+    const { container } = render(() => (
+      <DetailHeader
+        title="Report"
+        status={{ label: 'Shared', theme: 'blue' }}
+      />
+    ))
+    const badge = container.querySelector('[data-slot="badge"]') as HTMLElement
+    const style = getComputedStyle(badge)
+    expect(style.borderRadius).not.toBe('0px')
+    expect(style.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+    expect(badge.getBoundingClientRect().height).toBeGreaterThan(0)
+  })
+})

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

@@ -0,0 +1,58 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { FilterBar } from './FilterBar'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+describe('FilterBar accessibility', () => {
+  it('has no axe violations for a fully loaded bar', async () => {
+    const { container } = render(() => (
+      <FilterBar
+        query={{ placeholder: 'Search expenses', value: 'taxi' }}
+        selects={[
+          {
+            label: 'Owner',
+            value: 'me',
+            options: [
+              { label: 'Anyone', value: 'any' },
+              { label: 'Me', value: 'me' },
+            ],
+          },
+        ]}
+        tabs={{
+          label: 'View',
+          value: 'list',
+          options: [
+            { label: 'List', value: 'list' },
+            { label: 'Board', value: 'board' },
+          ],
+        }}
+        chips={[{ label: 'Status: Open', onRemove: () => {} }]}
+        resultCount={24}
+        onClearAll={() => {}}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations for a bare bar with only a search box', async () => {
+    const { container } = render(() => (
+      <FilterBar surface="bare" query={{ placeholder: 'Search tickets' }} />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

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

@@ -0,0 +1,46 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { FilterBar } from './FilterBar'
+
+describe('FilterBar (browser, real CSS)', () => {
+  it('puts the controls on one painted card surface, or none when bare', () => {
+    const card = render(() => <FilterBar query={{ placeholder: 'Search' }} />)
+    const bar = card.container.querySelector(
+      '[data-slot="filter-bar"]',
+    ) as HTMLElement
+    const style = getComputedStyle(bar)
+    expect(style.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+    expect(Number.parseFloat(style.borderTopWidth)).toBeGreaterThan(0)
+    expect(Number.parseFloat(style.borderRadius)).toBeGreaterThan(0)
+    expect(style.paddingTop).not.toBe('0px')
+    card.unmount()
+
+    const bare = render(() => (
+      <FilterBar surface="bare" query={{ placeholder: 'Search' }} />
+    ))
+    const bareBar = bare.container.querySelector(
+      '[data-slot="filter-bar"]',
+    ) as HTMLElement
+    // `bare` is composed into a Section, so it must not paint its own card.
+    expect(getComputedStyle(bareBar).backgroundColor).toBe('rgba(0, 0, 0, 0)')
+    expect(getComputedStyle(bareBar).paddingTop).toBe('0px')
+  })
+
+  it('paints the / hint on the search box', () => {
+    const { container } = render(() => (
+      <FilterBar query={{ placeholder: 'Search tickets' }} />
+    ))
+    const hint = container.querySelector('kbd') as HTMLElement
+    expect(hint.getBoundingClientRect().width).toBeGreaterThan(0)
+    expect(getComputedStyle(hint).backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+  })
+
+  it('states the result count in tabular figures', () => {
+    const { container } = render(() => <FilterBar resultCount={24} />)
+    const count = container.querySelector(
+      '[data-slot="filter-bar-meta"] span',
+    ) as HTMLElement
+    // `tabular-nums` keeps 24 and 8 aligned as filters change the number.
+    expect(getComputedStyle(count).fontVariantNumeric).toContain('tabular-nums')
+  })
+})

package/src/organisms/KanbanBoard/KanbanBoard.a11y.test.tsx

@@ -0,0 +1,75 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { KanbanBoard, type KanbanColumn } from './KanbanBoard'
+
+const AXE_OPTIONS = {
+  rules: {
+    'color-contrast': { enabled: false },
+    region: { enabled: false },
+  },
+}
+
+function summarize(results: AxeResults) {
+  return results.violations.map((violation) => ({
+    id: violation.id,
+    impact: violation.impact,
+    targets: violation.nodes.map((node) => node.target),
+  }))
+}
+
+interface Deal {
+  id: string
+  name: string
+}
+
+const deals: Deal[] = [
+  { id: 'D-1', name: 'Globex' },
+  { id: 'D-2', name: 'Stark' },
+  { id: 'D-3', name: 'Wayne' },
+]
+
+function stages(): KanbanColumn<Deal>[] {
+  return [
+    { id: 'open', name: 'Open', theme: 'gray', items: deals },
+    { id: 'won', name: 'Won', theme: 'green', items: [] },
+  ]
+}
+
+const card = (deal: Deal) => <span>{deal.name}</span>
+
+describe('KanbanBoard accessibility', () => {
+  it('has no axe violations for a board with cards and an empty column', async () => {
+    const { container } = render(() => (
+      <KanbanBoard
+        columns={stages()}
+        label="Deals"
+        itemLabel={(deal) => deal.name}
+      >
+        {card}
+      </KanbanBoard>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations with a column summary, action and empty copy', async () => {
+    const { container } = render(() => (
+      <KanbanBoard
+        label="Deals"
+        columns={[
+          {
+            id: 'open',
+            name: 'Open',
+            items: [],
+            summary: <span>$210,000</span>,
+            action: { label: 'Add deal', onClick: () => {} },
+          },
+        ]}
+        emptyColumn={() => <span>Nothing open.</span>}
+      >
+        {card}
+      </KanbanBoard>
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

package/src/organisms/KanbanBoard/KanbanBoard.browser.test.tsx

@@ -0,0 +1,84 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { KanbanBoard, type KanbanColumn } from './KanbanBoard'
+
+interface Deal {
+  id: string
+  name: string
+}
+
+const deals: Deal[] = [
+  { id: 'D-1', name: 'Globex' },
+  { id: 'D-2', name: 'Stark' },
+]
+
+function stages(): KanbanColumn<Deal>[] {
+  return [
+    { id: 'open', name: 'Open', theme: 'gray', items: deals },
+    { id: 'won', name: 'Won', theme: 'green', items: [] },
+  ]
+}
+
+const card = (deal: Deal) => <span>{deal.name}</span>
+
+describe('KanbanBoard (browser, real CSS)', () => {
+  it('reserves a real column width on a tinted, bordered surface', () => {
+    const { container } = render(() => (
+      <KanbanBoard columns={stages()} label="Deals">
+        {card}
+      </KanbanBoard>
+    ))
+    const column = container.querySelector(
+      '[data-kanban-column="open"]',
+    ) as HTMLElement
+    // `w-72` (288px) below `min-[1440px]` — the board is a panner, columns do
+    // not shrink to fit.
+    const width = column.getBoundingClientRect().width
+    expect(width).toBeGreaterThanOrEqual(256)
+    expect(width).toBeLessThanOrEqual(300)
+    const style = getComputedStyle(column)
+    expect(Number.parseFloat(style.borderTopWidth)).toBeGreaterThan(0)
+    expect(style.backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+  })
+
+  it('paints the status dot in the column theme', () => {
+    const { container } = render(() => (
+      <KanbanBoard columns={stages()} label="Deals">
+        {card}
+      </KanbanBoard>
+    ))
+    const dot = container.querySelector(
+      '[data-kanban-column="open"] span[aria-hidden="true"]',
+    ) as HTMLElement
+    const rect = dot.getBoundingClientRect()
+    expect(rect.width).toBeGreaterThan(0)
+    expect(getComputedStyle(dot).backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+  })
+
+  it('gives each card the grab cursor and a real box', () => {
+    const { container } = render(() => (
+      <KanbanBoard columns={stages()} label="Deals">
+        {card}
+      </KanbanBoard>
+    ))
+    const cardBox = container.querySelector(
+      '[data-kanban-id="D-1"] > [data-slot="card"]',
+    ) as HTMLElement
+    expect(cardBox.getBoundingClientRect().height).toBeGreaterThan(0)
+    expect(getComputedStyle(cardBox).cursor).toBe('grab')
+  })
+
+  it('draws the empty column as a dashed drop hint', () => {
+    const { container } = render(() => (
+      <KanbanBoard columns={stages()} label="Deals">
+        {card}
+      </KanbanBoard>
+    ))
+    const empty = container.querySelector(
+      '[data-kanban-column="won"] ul li',
+    ) as HTMLElement
+    const style = getComputedStyle(empty)
+    expect(style.borderTopStyle).toBe('dashed')
+    expect(Number.parseFloat(style.borderTopWidth)).toBeGreaterThan(0)
+  })
+})