@talelk/newui-organisms 0.0.0-stage → 2.0.0

package/src/organisms/DetailHeader/DetailHeader.tsx

@@ -0,0 +1,95 @@
+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'
+import { Dynamic } from 'solid-js/web'
+
+export interface DetailAction {
+  label: string
+  onClick?: () => void
+}
+
+export interface DetailHeaderProps {
+  /** The trail above the title. Omitted → no breadcrumbs. */
+  breadcrumbs?: BreadcrumbItem[]
+  title: JSX.Element
+  /** Semantic level of the title. @default 1 */
+  headingLevel?: 1 | 2 | 3 | 4
+  /** 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">
+            <Dynamic
+              component={`h${props.headingLevel ?? 1}`}
+              class="min-w-0 text-metric text-ink-gray-9 [overflow-wrap:anywhere]"
+            >
+              {props.title}
+            </Dynamic>
+            <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,152 @@
+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={{
+          label: 'View',
+          value: 'list',
+          onValueChange,
+          options: [
+            { label: 'List', value: 'list' },
+            { label: 'Board', value: 'board' },
+          ],
+        }}
+      />
+    ))
+
+    await userEvent.click(screen.getByRole('radio', { name: 'Board' }))
+    expect(onValueChange).toHaveBeenCalledWith('board')
+  })
+})

package/src/organisms/FilterBar/FilterBar.tsx

@@ -0,0 +1,251 @@
+import { Button, cn, 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?: {
+    /** Accessible name for the radiogroup. */
+    label: string
+    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
+  /** `bare` removes the card surface for a toolbar composed into a Section. */
+  surface?: 'card' | 'bare'
+  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 hasLeading = () =>
+    Boolean(props.query) || (props.selects?.length ?? 0) > 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"
+      data-surface={props.surface ?? 'card'}
+      class={cn(
+        'flex max-w-full flex-col gap-control-gap',
+        (props.surface ?? 'card') === 'card'
+          ? 'rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-control-pad'
+          : 'p-0',
+        props.class,
+      )}
+    >
+      <div class="grid max-w-full grid-cols-1 items-center gap-control-gap min-[360px]: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={cn(
+            'col-span-full flex min-w-0 max-w-full flex-wrap items-center gap-control-gap',
+            hasLeading() ? 'sm:justify-end xl:ms-auto' : 'sm:justify-start',
+          )}
+        >
+          <Show when={props.tabs}>
+            {(tabs) => (
+              <TabButtons
+                label={tabs().label}
+                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-6 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'