@talelk/newui-organisms 1.0.0 → 2.1.0

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

@@ -0,0 +1,52 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { DataState } from './DataState'
+
+function nextFrame() {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve(null)))
+}
+
+describe('DataState (browser, real CSS)', () => {
+  it('renders loading skeletons as real painted rows', async () => {
+    const { container } = render(() => (
+      <DataState status="loading" skeleton="rows" rows={3} />
+    ))
+    await nextFrame()
+    const rows = container.querySelectorAll(
+      '[data-slot="skeleton"]',
+    ) as unknown as HTMLElement[]
+    expect(rows.length).toBe(3)
+    const row = rows[0] as HTMLElement
+    // `h-9` per row — a dropped height utility collapses the placeholder.
+    expect(row.getBoundingClientRect().height).toBeGreaterThanOrEqual(32)
+    // The paint lives on the shimmering line inside the row wrapper.
+    const line = row.querySelector('[data-slot="skeleton-line"]') as HTMLElement
+    expect(line).toBeTruthy()
+    expect(getComputedStyle(line).backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+  })
+
+  it('paints the empty state icon tile', () => {
+    const { container } = render(() => (
+      <DataState status="empty" title="No expenses" />
+    ))
+    const tile = container.querySelector(
+      '[data-slot="empty-state-icon"]',
+    ) as HTMLElement
+    expect(tile.getBoundingClientRect().width).toBeGreaterThan(0)
+    expect(getComputedStyle(tile).backgroundColor).not.toBe('rgba(0, 0, 0, 0)')
+  })
+
+  it('keeps the retry button a real target', async () => {
+    const { container } = render(() => (
+      <DataState status="error" error="The request failed" onRetry={() => {}} />
+    ))
+    await nextFrame()
+    const button = Array.from(container.querySelectorAll('button')).find(
+      (node) => node.textContent === 'Try again',
+    ) as HTMLElement
+    expect(button.getBoundingClientRect().height).toBeGreaterThanOrEqual(24)
+    expect(getComputedStyle(button).backgroundColor).not.toBe(
+      'rgba(0, 0, 0, 0)',
+    )
+  })
+})

package/src/organisms/DataState/DataState.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { DataState } from './DataState'
+
+describe('DataState', () => {
+  it('renders ready children unchanged', () => {
+    render(() => (
+      <DataState status="ready">
+        <p>Rows</p>
+      </DataState>
+    ))
+    expect(screen.getByText('Rows')).toBeTruthy()
+  })
+
+  it('announces loading and renders the requested skeleton', () => {
+    const { container } = render(() => (
+      <DataState status="loading" skeleton="cards" />
+    ))
+    expect(screen.getByRole('status', { name: 'Loading' })).toBeTruthy()
+    expect(container.querySelectorAll('[data-slot="skeleton"]').length).toBe(4)
+  })
+
+  it('renders an empty state action', () => {
+    render(() => (
+      <DataState
+        status="empty"
+        title="No expenses"
+        action={<button type="button">Clear filters</button>}
+      />
+    ))
+    expect(screen.getByText('No expenses')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Clear filters' })).toBeTruthy()
+  })
+
+  it('offers retry on error', async () => {
+    const onRetry = vi.fn()
+    render(() => (
+      <DataState status="error" error="The request failed" onRetry={onRetry} />
+    ))
+    expect(screen.getByRole('alert')).toBeTruthy()
+    await userEvent.click(screen.getByRole('button', { name: 'Try again' }))
+    expect(onRetry).toHaveBeenCalled()
+  })
+})

package/src/organisms/DataState/DataState.tsx

@@ -0,0 +1,111 @@
+import { Button, type IconProp, Skeleton } from '@talelk/newui-atoms'
+import { EmptyState } from '@talelk/newui-molecules'
+import { For, type JSX, Show } from 'solid-js'
+
+export type DataStatus = 'ready' | 'loading' | 'empty' | 'error'
+export type DataSkeleton = 'rows' | 'cards' | 'chart'
+
+export interface DataStateProps {
+  status: DataStatus
+  /** Skeleton shape while loading. @default 'rows' */
+  skeleton?: DataSkeleton
+  /** Skeleton row count. @default 5 */
+  rows?: number
+  title?: JSX.Element
+  description?: JSX.Element
+  action?: JSX.Element
+  /** Icon shown in the empty state. @default 'lucide-inbox' */
+  icon?: IconProp
+  error?: JSX.Element
+  onRetry?: () => void
+  children?: JSX.Element
+}
+
+function Loading(props: { skeleton: DataSkeleton; rows: number }): JSX.Element {
+  return (
+    <div
+      data-slot="data-state-loading"
+      role="status"
+      aria-label="Loading"
+      class="p-card-pad"
+    >
+      <Show when={props.skeleton === 'rows'}>
+        <div class="flex flex-col gap-2">
+          <For each={Array.from({ length: props.rows })}>
+            {() => <Skeleton lines={1} class="h-9" />}
+          </For>
+        </div>
+      </Show>
+      <Show when={props.skeleton === 'cards'}>
+        <div class="grid grid-cols-1 gap-3 min-[360px]:grid-cols-2 xl:grid-cols-4">
+          <For each={Array.from({ length: 4 })}>
+            {() => <Skeleton lines={3} class="h-24" />}
+          </For>
+        </div>
+      </Show>
+      <Show when={props.skeleton === 'chart'}>
+        <Skeleton lines={4} class="h-64" />
+      </Show>
+    </div>
+  )
+}
+
+/**
+ * The one loading / empty / error contract for data organisms.
+ *
+ * It composes the existing `Skeleton` and `EmptyState` molecules, so every
+ * region uses the same tone and action placement. `ready` renders its children
+ * unchanged.
+ */
+export function DataState(props: DataStateProps): JSX.Element {
+  return (
+    <Show
+      when={props.status === 'ready'}
+      fallback={<StateFallback {...props} />}
+    >
+      {props.children}
+    </Show>
+  )
+}
+
+function StateFallback(props: DataStateProps): JSX.Element {
+  return (
+    <Show
+      when={props.status === 'loading'}
+      fallback={
+        <Show
+          when={props.status === 'error'}
+          fallback={
+            <div data-slot="data-state-empty">
+              <EmptyState
+                icon={props.icon ?? 'lucide-inbox'}
+                title={props.title ?? 'Nothing here yet'}
+                description={props.description}
+                action={props.action}
+              />
+            </div>
+          }
+        >
+          <div data-slot="data-state-error" role="alert">
+            <EmptyState
+              icon="lucide-triangle-alert"
+              title={props.title ?? 'Could not load this'}
+              description={props.error ?? props.description}
+              action={
+                props.onRetry ? (
+                  <Button variant="outline" onClick={props.onRetry}>
+                    Try again
+                  </Button>
+                ) : (
+                  props.action
+                )
+              }
+            />
+          </div>
+        </Show>
+      }
+    >
+      <Loading skeleton={props.skeleton ?? 'rows'} rows={props.rows ?? 5} />
+    </Show>
+  )
+}

package/src/organisms/DataState/index.ts

@@ -0,0 +1,6 @@
+export {
+  type DataSkeleton,
+  DataState,
+  type DataStateProps,
+  type DataStatus,
+} from './DataState'

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

@@ -0,0 +1,71 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { DataTable, type DataTableColumn } from './DataTable'
+
+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 Row {
+  id: string
+  name: string
+  amount: number
+}
+
+const ROWS: Row[] = [
+  { id: '1', name: 'Alpha', amount: 10 },
+  { id: '2', name: 'Beta', amount: 20 },
+  { id: '3', name: 'Gamma', amount: 30 },
+]
+
+const COLUMNS: DataTableColumn<Row>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  {
+    accessorKey: 'amount',
+    header: 'Amount',
+    cell: (context) => `$${context.getValue()}`,
+    meta: { align: 'end' },
+  },
+]
+
+describe('DataTable accessibility', () => {
+  it('has no axe violations for a selectable table', async () => {
+    const { container } = render(() => (
+      <DataTable
+        title="Expenses"
+        rows={ROWS}
+        columns={COLUMNS}
+        pageSize={10}
+        actionLabel="Approve"
+        onRowsAction={() => {}}
+        recordsLabel="expenses"
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+
+  it('has no axe violations for a read-only table', async () => {
+    const { container } = render(() => (
+      <DataTable
+        title="Expenses"
+        rows={ROWS}
+        columns={COLUMNS}
+        pageSize={10}
+        selectable={false}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

package/src/organisms/DataTable/DataTable.features.test.tsx

@@ -0,0 +1,191 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { createSignal } from 'solid-js'
+import { describe, expect, it, vi } from 'vitest'
+import { DataTable, type DataTableColumn } from './DataTable'
+
+interface Row {
+  id: string
+  name: string
+  amount: number
+}
+
+const ROWS: Row[] = [
+  { id: '1', name: 'Alpha', amount: 10 },
+  { id: '2', name: 'Beta', amount: 20 },
+]
+
+const COLUMNS: DataTableColumn<Row>[] = [
+  { accessorKey: 'name', header: 'Name' },
+  {
+    accessorKey: 'amount',
+    header: 'Amount',
+    meta: { align: 'end', editable: true, editInput: 'number' },
+  },
+]
+
+describe('DataTable pinning', () => {
+  it('freezes the named columns to each scroll edge', () => {
+    const { container } = render(() => (
+      <DataTable
+        title="Rows"
+        rows={ROWS}
+        columns={COLUMNS}
+        pageSize={10}
+        selectable={false}
+        pinnedStart="name"
+        pinnedEnd="amount"
+      />
+    ))
+    const head = container.querySelector('thead') as HTMLElement
+    const startTh = head.querySelector('th[scope="col"]') as HTMLElement
+    expect(startTh.className).toContain('sticky')
+    expect(startTh.className).toContain('start-0')
+    const endTh = head.querySelectorAll('th[scope="col"]')[1] as HTMLElement
+    expect(endTh.className).toContain('end-0')
+    // Body cells carry the same stickiness as their header.
+    const firstTd = container.querySelector('tbody td') as HTMLElement
+    expect(firstTd.className).toContain('sticky')
+  })
+
+  it('leaves unpinned tables in plain flow', () => {
+    const { container } = render(() => (
+      <DataTable
+        title="Rows"
+        rows={ROWS}
+        columns={COLUMNS}
+        pageSize={10}
+        selectable={false}
+      />
+    ))
+    const th = container.querySelector('th[scope="col"]') as HTMLElement
+    expect(th.className).not.toContain('sticky')
+  })
+
+  it('answers onPinnedColumnsChange only from the app (no in-table UI mutates pinning)', () => {
+    const onPinnedColumnsChange = vi.fn()
+    render(() => (
+      <DataTable
+        title="Rows"
+        rows={ROWS}
+        columns={COLUMNS}
+        pageSize={10}
+        selectable={false}
+        pinnedStart="name"
+        onPinnedColumnsChange={onPinnedColumnsChange}
+      />
+    ))
+    // Sorting (the only in-table toggle) does not move pinning.
+    const sortButton = screen.getByRole('button', { name: /Name/ })
+    userEvent.click(sortButton)
+    expect(onPinnedColumnsChange).not.toHaveBeenCalled()
+  })
+})
+
+describe('DataTable inline editing', () => {
+  it('renders a click-to-edit cell that reports the raw value', async () => {
+    const onCellChange = vi.fn()
+    const { container } = render(() => (
+      <DataTable
+        title="Rows"
+        rows={ROWS}
+        columns={COLUMNS}
+        pageSize={10}
+        selectable={false}
+        editable
+        onCellChange={onCellChange}
+      />
+    ))
+    const trigger = screen.getByRole('button', {
+      name: /— edit Amount of 1$/,
+    })
+    expect(trigger.textContent).toBe('10')
+    await userEvent.click(trigger)
+    const input = screen.getByRole('spinbutton', {
+      name: 'Edit Amount of 1',
+    }) as HTMLInputElement
+    expect(document.activeElement).toBe(input)
+    await userEvent.clear(input)
+    await userEvent.type(input, '15{Enter}')
+    expect(onCellChange).toHaveBeenCalledWith('1', 'amount', '15')
+    // The edit trigger is gone once editing closes.
+    expect(
+      container.querySelector('[data-slot="data-table-edit-trigger"]'),
+    ).toBeTruthy()
+  })
+
+  it('escapes an edit without reporting', async () => {
+    const onCellChange = vi.fn()
+    render(() => (
+      <DataTable
+        title="Rows"
+        rows={ROWS}
+        columns={COLUMNS}
+        pageSize={10}
+        selectable={false}
+        editable
+        onCellChange={onCellChange}
+      />
+    ))
+    await userEvent.click(
+      screen.getByRole('button', { name: /— edit Amount of 1$/ }),
+    )
+    await userEvent.keyboard('999{Escape}')
+    expect(onCellChange).not.toHaveBeenCalled()
+    // The cell shows the untouched value again.
+    expect(
+      screen.getByRole('button', { name: /— edit Amount of 1$/ }).textContent,
+    ).toBe('10')
+  })
+
+  it('renders the updated value when the app owns the mutation', async () => {
+    const [rows, setRows] = createSignal<Row[]>(ROWS)
+    const { container } = render(() => (
+      <DataTable
+        title="Rows"
+        rows={rows()}
+        columns={COLUMNS}
+        pageSize={10}
+        selectable={false}
+        editable
+        onCellChange={(id, columnId, value) =>
+          setRows((current) =>
+            current.map((row) =>
+              row.id === id ? { ...row, [columnId]: Number(value) } : row,
+            ),
+          )
+        }
+      />
+    ))
+    await userEvent.click(
+      screen.getByRole('button', { name: /— edit Amount of 2$/ }),
+    )
+    const input = screen.getByRole('spinbutton', {
+      name: 'Edit Amount of 2',
+    }) as HTMLInputElement
+    await userEvent.clear(input)
+    await userEvent.type(input, '25{Enter}')
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    // The editor closed onto the app-owned new value.
+    const body = container.querySelector('tbody') as HTMLElement
+    expect(body.textContent).toContain('25')
+    expect(
+      screen.queryByRole('spinbutton', { name: 'Edit Amount of 2' }),
+    ).toBeNull()
+  })
+
+  it('renders plain cells when not editable', () => {
+    render(() => (
+      <DataTable
+        title="Rows"
+        rows={ROWS}
+        columns={COLUMNS}
+        pageSize={10}
+        selectable={false}
+      />
+    ))
+    expect(
+      screen.queryByRole('button', { name: /— edit Amount of 1$/ }),
+    ).toBeNull()
+  })
+})

package/src/organisms/DataTable/DataTable.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@solidjs/testing-library'
+import { render, screen, waitFor, within } from '@solidjs/testing-library'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 import { DataTable, type DataTableColumn } from './DataTable'
@@ -25,6 +25,16 @@ const COLUMNS: DataTableColumn<Row>[] = [
   },
 ]
 
+const MOBILE_COLUMNS: DataTableColumn<Row>[] = [
+  { accessorKey: 'name', header: 'Name', meta: { mobile: 'title' } },
+  {
+    accessorKey: 'amount',
+    header: 'Amount',
+    cell: (context) => `$${context.getValue()}`,
+    meta: { align: 'end', mobile: 'amount' },
+  },
+]
+
 function table(props: Partial<Parameters<typeof DataTable<Row>>[0]> = {}) {
   return render(() => (
     <DataTable
@@ -82,6 +92,68 @@ describe('DataTable', () => {
     })
   })
 
+  it('renders mobile cards from column meta', () => {
+    table({ columns: MOBILE_COLUMNS })
+    const cards = document.querySelector('[data-slot="data-table-cards"]')
+    expect(cards).toBeTruthy()
+    expect(within(cards as HTMLElement).getByText('Alpha')).toBeTruthy()
+    expect(within(cards as HTMLElement).getByText('$30')).toBeTruthy()
+  })
+
+  it('skips ineligible rows in selection and select-all', async () => {
+    const onRowsAction = vi.fn()
+    table({
+      columns: MOBILE_COLUMNS,
+      rowSelectable: (row) => row.id !== '2',
+      onRowsAction,
+    })
+    const tableRegion = screen.getByRole('region', { name: 'Rows table' })
+    expect(
+      within(tableRegion)
+        .getAllByRole('checkbox', { name: 'Select 2' })
+        .every((box) => box.hasAttribute('disabled')),
+    ).toBe(true)
+    await userEvent.click(
+      within(tableRegion).getByRole('checkbox', {
+        name: 'Select all rows on this page',
+      }),
+    )
+    const bulk = await screen.findByRole('button', {
+      name: /Update selected \(2\)/,
+    })
+    await userEvent.click(bulk)
+    expect(onRowsAction).toHaveBeenCalledWith(['1', '3'])
+  })
+
+  it('keeps a stable titled toolbar when an external filter bar owns search', () => {
+    render(() => (
+      <DataTable title="Rows" rows={ROWS} columns={COLUMNS} hideSearch />
+    ))
+    const toolbar = document.querySelector('[data-slot="data-table-toolbar"]')
+    expect(toolbar?.textContent).toContain('Rows')
+    expect(
+      document.querySelector('[data-slot="data-table-columns"]'),
+    ).toBeTruthy()
+  })
+
+  it('renders the shared loading and error states', () => {
+    const loading = render(() => (
+      <DataTable title="Rows" rows={[]} columns={COLUMNS} loading />
+    ))
+    expect(screen.getByRole('status', { name: 'Loading' })).toBeTruthy()
+    loading.unmount()
+    render(() => (
+      <DataTable title="Rows" rows={[]} columns={COLUMNS} error="Failed" />
+    ))
+    expect(screen.getByRole('alert')).toBeTruthy()
+  })
+
+  it('shows the mobile selection bar once a row is selected', async () => {
+    table({ onRowsAction: () => {} })
+    await userEvent.click(screen.getByRole('checkbox', { name: 'Select 1' }))
+    expect(document.querySelector('[data-slot="selection-bar"]')).toBeTruthy()
+  })
+
   it('can be a read-only table with no selection column', () => {
     table({ selectable: false })
     expect(screen.queryByRole('checkbox', { name: /Select/ })).toBeNull()