@talelk/newui-organisms 0.0.0-stage → 1.0.0

package/src/organisms/FilterBar/FilterBar.tsx

@@ -0,0 +1,232 @@
+import { Button, Icon, TextInput } from '@talelk/newui-atoms'
+import { Select, type SelectOption, TabButtons } from '@talelk/newui-molecules'
+import { For, type JSX, onCleanup, onMount, Show } from 'solid-js'
+
+export interface FilterOption {
+  label: string
+  value: string
+}
+
+export interface FilterSelect {
+  /** Accessible name; also the placeholder when nothing is chosen. */
+  label: string
+  options: SelectOption[]
+  value?: string
+  onValueChange?: (value: string) => void
+  width?: string
+}
+
+export interface FilterChip {
+  /** The active filter as the reader states it, e.g. `Status: Open`. */
+  label: string
+  /** When set, the chip carries a remove button that calls this. */
+  onRemove?: () => void
+}
+
+export interface FilterBarProps {
+  /** Rendered as a search input. Omit for a bar with no query box. */
+  query?: {
+    value?: string
+    placeholder?: string
+    onInput?: (value: string) => void
+    width?: string
+  }
+  /** One or more selects, in order. */
+  selects?: FilterSelect[]
+  /** A segmented control on the trailing edge — the view switcher. */
+  tabs?: {
+    options: FilterOption[]
+    value?: string
+    onValueChange?: (value: string) => void
+  }
+  /** Active filters restated as removable pills under the bar. */
+  chips?: FilterChip[]
+  /**
+   * Renders a "Clear all" button while a filter is active (a chip, a filled
+   * select, or a non-empty query). The bar never clears anything itself —
+   * it reports the request and the caller resets its own state.
+   */
+  onClearAll?: () => void
+  /** Rows the current filters match, stated under the bar (`24 results`). */
+  resultCount?: number
+  /** Anything else on the trailing edge, after the tabs. */
+  children?: JSX.Element
+  class?: string
+}
+
+/** True when a keystroke is landing in something the user is already editing. */
+function isEditable(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  return (
+    target.isContentEditable ||
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement
+  )
+}
+
+/**
+ * The row of controls above a list: search, one or two selects, and the view
+ * switcher, on one quiet surface so the controls read as a single toolbar
+ * rather than loose fields above the data.
+ *
+ * Worth a block because the shape is a decision — search leads and is the widest
+ * target, selects are fixed-width so their labels do not jump as values change,
+ * and the view switcher is pushed to the far end because it changes how the data
+ * below is *drawn* rather than what is in it. A filled select takes the filled
+ * (`subtle`) surface, so what is filtering the list is visible without opening
+ * anything; the active set can also be restated as removable chips with a
+ * result count and a clear-all, which is the point where a row of controls
+ * becomes an answer to "why am I seeing these rows".
+ *
+ * The filter bar gives each Select an `aria-label` from its `label` and uses
+ * it as the placeholder, rather than rendering a form label above a toolbar.
+ * The search box carries a `/` hint and honours it: pressing `/` anywhere
+ * outside another editing surface focuses the box.
+ */
+export function FilterBar(props: FilterBarProps): JSX.Element {
+  let searchBox: HTMLSpanElement | undefined
+
+  onMount(() => {
+    if (!props.query) return
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== '/' || event.metaKey || event.ctrlKey || event.altKey)
+        return
+      if (isEditable(event.target)) return
+      const input = searchBox?.querySelector('input')
+      if (!input) return
+      event.preventDefault()
+      input.focus()
+    }
+    window.addEventListener('keydown', onKey)
+    onCleanup(() => window.removeEventListener('keydown', onKey))
+  })
+
+  const activeCount = () =>
+    (props.chips?.length ?? 0) +
+    (props.selects ?? []).filter((select) => Boolean(select.value)).length +
+    (props.query?.value ? 1 : 0)
+  const showClearAll = () => props.onClearAll !== undefined && activeCount() > 0
+  const showMetaRow = () =>
+    (props.chips?.length ?? 0) > 0 ||
+    props.resultCount !== undefined ||
+    showClearAll()
+
+  return (
+    <div
+      data-slot="filter-bar"
+      class={`flex max-w-full flex-col gap-control-gap rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-control-pad ${props.class ?? ''}`}
+    >
+      <div class="grid max-w-full grid-cols-1 items-center gap-control-gap sm:grid-cols-2 xl:flex xl:flex-wrap">
+        <Show when={props.query}>
+          {(query) => (
+            <span
+              ref={searchBox}
+              class="col-span-full min-w-0 max-w-full xl:flex-1"
+            >
+              <TextInput
+                size="sm"
+                type="search"
+                value={query().value}
+                placeholder={query().placeholder ?? 'Search…'}
+                aria-label={query().placeholder ?? 'Search'}
+                class={`w-full ${query().width ?? ''}`}
+                prefix={<Icon icon="lucide-search" class="size-4" />}
+                suffix={
+                  <kbd class="rounded-2 border border-outline-gray-2 bg-surface-gray-1 px-1 text-caption text-ink-gray-7">
+                    /
+                  </kbd>
+                }
+                onInput={(event) =>
+                  query().onInput?.(event.currentTarget.value)
+                }
+              />
+            </span>
+          )}
+        </Show>
+
+        <For each={props.selects ?? []}>
+          {(select) => (
+            <div
+              class={`min-w-0 max-w-full sm:w-full xl:w-40 ${select.width ?? ''}`}
+            >
+              <Select
+                size="sm"
+                variant={select.value ? 'subtle' : 'outline'}
+                options={select.options}
+                value={select.value || null}
+                placeholder={select.label}
+                aria-label={select.label}
+                onValueChange={(value) => select.onValueChange?.(value ?? '')}
+              />
+            </div>
+          )}
+        </For>
+
+        <div class="col-span-full flex min-w-0 max-w-full flex-wrap items-center gap-control-gap sm:justify-end xl:ms-auto">
+          <Show when={props.tabs}>
+            {(tabs) => (
+              <TabButtons
+                options={tabs().options}
+                value={tabs().value}
+                onValueChange={tabs().onValueChange}
+              />
+            )}
+          </Show>
+          {props.children}
+        </div>
+      </div>
+
+      <Show when={showMetaRow()}>
+        <div
+          data-slot="filter-bar-meta"
+          class="flex max-w-full flex-wrap items-center gap-1.5 px-control-pad"
+        >
+          <Show when={props.resultCount !== undefined}>
+            <span
+              aria-live="polite"
+              class="me-1 text-caption tabular-nums text-ink-gray-7"
+            >
+              {props.resultCount}{' '}
+              {props.resultCount === 1 ? 'result' : 'results'}
+            </span>
+          </Show>
+          <For each={props.chips ?? []}>
+            {(chip) => (
+              <span
+                data-slot="filter-chip"
+                class={`inline-flex items-center gap-1 rounded-full border border-outline-gray-2 bg-surface-base py-0.5 ps-2 text-caption text-ink-gray-8 ${chip.onRemove ? 'pe-1' : 'pe-2'}`}
+              >
+                {chip.label}
+                <Show when={chip.onRemove}>
+                  {(onRemove) => (
+                    <button
+                      type="button"
+                      aria-label={`Remove filter: ${chip.label}`}
+                      class="grid size-4 place-items-center rounded-full text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-9 focus-visible:focus-ring motion-reduce:transition-none"
+                      onClick={() => onRemove()()}
+                    >
+                      <Icon icon="lucide-x" class="size-3" />
+                    </button>
+                  )}
+                </Show>
+              </span>
+            )}
+          </For>
+          <Show when={showClearAll()}>
+            <span class="ms-auto">
+              <Button
+                variant="ghost"
+                theme="gray"
+                size="sm"
+                onClick={() => props.onClearAll?.()}
+              >
+                Clear all
+              </Button>
+            </span>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/organisms/FilterBar/index.ts

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

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

@@ -0,0 +1,255 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import {
+  KanbanBoard,
+  type KanbanColumn,
+  type KanbanMove,
+  placeKanbanItem,
+} from './KanbanBoard'
+
+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(
+  overrides: Partial<Record<string, Deal[]>> = {},
+): KanbanColumn<Deal>[] {
+  return [
+    {
+      id: 'open',
+      name: 'Open',
+      theme: 'gray',
+      items: overrides['open'] ?? deals,
+    },
+    {
+      id: 'won',
+      name: 'Won',
+      theme: 'green',
+      items: overrides['won'] ?? [],
+    },
+  ]
+}
+
+const card = (deal: Deal) => <span>{deal.name}</span>
+
+const idsIn = (columnId: string) =>
+  [
+    ...document.querySelectorAll(
+      `[data-kanban-column="${columnId}"] [data-kanban-id]`,
+    ),
+  ].map((node) => node.getAttribute('data-kanban-id'))
+
+/** Open a card's menu and choose a column. */
+async function moveViaMenu(name: string, column: string) {
+  await userEvent.click(
+    screen.getByRole('button', { name: `Actions for ${name}` }),
+  )
+  await userEvent.click(await screen.findByRole('menuitem', { name: column }))
+}
+
+describe('placeKanbanItem', () => {
+  const columns = stages()
+
+  it('moves an item to the end of another column by index', () => {
+    const next = placeKanbanItem(columns, 'D-1', { column: 'won', index: 0 })
+    expect(next[0]?.items.map((item) => item.id)).toEqual(['D-2', 'D-3'])
+    expect(next[1]?.items.map((item) => item.id)).toEqual(['D-1'])
+  })
+
+  it('counts the index over the column *without* the item being moved', () => {
+    // Dragging D-1 down one place: the index is measured after D-1 is taken out,
+    // so 1 lands it between D-2 and D-3 rather than back at the top.
+    const next = placeKanbanItem(columns, 'D-1', { column: 'open', index: 1 })
+    expect(next[0]?.items.map((item) => item.id)).toEqual(['D-2', 'D-1', 'D-3'])
+  })
+
+  it('clamps an index past the end of the column', () => {
+    const next = placeKanbanItem(columns, 'D-1', { column: 'won', index: 9 })
+    expect(next[1]?.items.map((item) => item.id)).toEqual(['D-1'])
+  })
+
+  it('returns what came in when the move changes nothing', () => {
+    expect(placeKanbanItem(columns, 'D-1', { column: 'open', index: 0 })).toBe(
+      columns,
+    )
+  })
+
+  it('keeps the columns it did not touch, by reference', () => {
+    const next = placeKanbanItem(columns, 'D-1', { column: 'won', index: 0 })
+    // The untouched column is the same object: keying rows on it would throw
+    // that column's DOM away, along with its scroll position.
+    expect(next[0]).not.toBe(columns[0])
+    expect(next[1]).not.toBe(columns[1])
+    expect(next[0]?.name).toBe('Open')
+  })
+
+  it('ignores an item the board does not have', () => {
+    expect(placeKanbanItem(columns, 'D-9', { column: 'won', index: 0 })).toBe(
+      columns,
+    )
+  })
+})
+
+describe('KanbanBoard', () => {
+  it('renders the columns, their counts and the cards', () => {
+    render(() => (
+      <KanbanBoard columns={stages()} label="Deals">
+        {card}
+      </KanbanBoard>
+    ))
+
+    expect(screen.getByRole('list', { name: 'Deals' })).toBeTruthy()
+    expect(screen.getByRole('heading', { name: 'Open', level: 2 })).toBeTruthy()
+    expect(screen.getByText('Globex')).toBeTruthy()
+    // The count is the column's, not the card's.
+    expect(screen.getByText('3')).toBeTruthy()
+  })
+
+  it('renders a column action, a summary and its empty state', async () => {
+    const onAdd = vi.fn()
+    render(() => (
+      <KanbanBoard
+        columns={[
+          {
+            id: 'open',
+            name: 'Open',
+            items: [],
+            summary: <span>$210,000</span>,
+            action: { label: 'Add deal', onClick: onAdd },
+          },
+        ]}
+        emptyColumn={() => <span>Nothing open.</span>}
+      >
+        {card}
+      </KanbanBoard>
+    ))
+
+    expect(screen.getByText('$210,000')).toBeTruthy()
+    expect(screen.getByText('Nothing open.')).toBeTruthy()
+    await userEvent.click(screen.getByRole('button', { name: 'Add deal' }))
+    expect(onAdd).toHaveBeenCalled()
+  })
+
+  it('moves a card with the menu, and reports a single move', async () => {
+    const moves: KanbanMove<Deal>[] = []
+    render(() => (
+      <KanbanBoard
+        defaultColumns={stages()}
+        onMove={(move) => moves.push(move)}
+        itemLabel={(deal) => deal.name}
+      >
+        {card}
+      </KanbanBoard>
+    ))
+
+    await moveViaMenu('Globex', 'Won')
+
+    expect(moves).toHaveLength(1)
+    expect(moves[0]?.itemId).toBe('D-1')
+    expect(moves[0]?.from).toEqual({ column: 'open', index: 0 })
+    expect(moves[0]?.to).toEqual({ column: 'won', index: 0 })
+    expect(moves[0]?.columns[1]?.items.map((item) => item.id)).toEqual(['D-1'])
+  })
+
+  it('only offers the columns the card is not already in', async () => {
+    render(() => (
+      <KanbanBoard defaultColumns={stages()} itemLabel={(deal) => deal.name}>
+        {card}
+      </KanbanBoard>
+    ))
+
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Actions for Globex' }),
+    )
+    const entries = await screen.findAllByRole('menuitem')
+    expect(entries.map((entry) => entry.textContent)).toEqual(['Won'])
+  })
+
+  it('owns the order when uncontrolled, and leaves it alone when controlled', async () => {
+    const uncontrolled = render(() => (
+      <KanbanBoard defaultColumns={stages()} itemLabel={(deal) => deal.name}>
+        {card}
+      </KanbanBoard>
+    ))
+    expect(idsIn('won')).toEqual([])
+    await moveViaMenu('Globex', 'Won')
+    expect(idsIn('won')).toEqual(['D-1'])
+    expect(idsIn('open')).toEqual(['D-2', 'D-3'])
+    uncontrolled.unmount()
+
+    const columns = stages()
+    render(() => (
+      <KanbanBoard columns={columns} itemLabel={(deal) => deal.name}>
+        {card}
+      </KanbanBoard>
+    ))
+    await moveViaMenu('Globex', 'Won')
+    // The board reported the move but did not take it: the owner decides.
+    expect(idsIn('won')).toEqual([])
+    expect(idsIn('open')).toEqual(['D-1', 'D-2', 'D-3'])
+  })
+
+  it('lets a card bring its own actions instead', async () => {
+    const onArchive = vi.fn()
+    render(() => (
+      <KanbanBoard
+        defaultColumns={stages()}
+        itemLabel={(deal) => deal.name}
+        renderActions={() => (
+          <button type="button" onClick={onArchive}>
+            Archive
+          </button>
+        )}
+      >
+        {card}
+      </KanbanBoard>
+    ))
+
+    await userEvent.click(
+      screen.getAllByRole('button', { name: 'Archive' })[0] as HTMLElement,
+    )
+    expect(onArchive).toHaveBeenCalled()
+    expect(screen.queryByRole('button', { name: /Actions for/ })).toBeNull()
+  })
+
+  it('snaps the columns only where the board is a phone-width panner', () => {
+    render(() => (
+      <KanbanBoard defaultColumns={stages()} itemLabel={(deal) => deal.name}>
+        {card}
+      </KanbanBoard>
+    ))
+
+    const row = screen.getByRole('list', { name: 'Board' })
+    const classes = row.className.split(/\s+/)
+    // Every snap utility is behind `max-lg:`. An unprefixed one would snap the
+    // board on a wide screen too, under the pointer, mid-drop.
+    expect(classes.filter((name) => name.includes('snap'))).toEqual([
+      'max-lg:snap-x',
+      'max-lg:snap-mandatory',
+    ])
+    const column = document.querySelector('[data-kanban-column="open"]')
+    expect(column?.className).toContain('max-lg:snap-start')
+  })
+
+  it('names the board and each card for a screen reader', () => {
+    render(() => (
+      <KanbanBoard defaultColumns={stages()} itemLabel={(deal) => deal.name}>
+        {card}
+      </KanbanBoard>
+    ))
+
+    expect(screen.getByRole('list', { name: 'Board' })).toBeTruthy()
+    expect(
+      screen.getByRole('button', { name: 'Actions for Globex' }),
+    ).toBeTruthy()
+    expect(screen.getByRole('heading', { name: 'Won' })).toBeTruthy()
+  })
+})