@estiva-app/ui 0.23.0 → 0.24.1

package/src/heights.test.tsx

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+/**
+ * A part with a set height keeps it in a scrolling column (UIG-15; UIG-14 cards
+ * T1, M4, M6). A scrolling flex column squashes any child that may shrink:
+ * measured in Chrome, a 32px SectionHeader went to 24px, a Skeleton row to 18px,
+ * a Button to 18px. jsdom draws nothing, so this pins the class that prevents it;
+ * the measurement is in the record.
+ *
+ * Rows that span their column refuse to shrink (`shrink-0`). Controls, which
+ * mostly sit in rows, keep a minimum height instead: `shrink-0` would also stop
+ * a row from narrowing them.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Button } from './Button'
+import { PersonTrigger } from './PersonTrigger'
+import { RailItem } from './RailItem'
+import { Reaction } from './Reaction'
+import { SectionHeader } from './SectionHeader'
+import { Select } from './Select'
+import { SkeletonRow } from './Skeleton'
+import { TextInput } from './TextInput'
+
+afterEach(cleanup)
+
+const classes = (el: Element | null) => (el?.getAttribute('class') ?? '').split(' ')
+
+describe('a part with a set height keeps it in a scrolling column', () => {
+  it('SectionHeader: shrink-0', () => {
+    const { container } = render(<SectionHeader title="Group" />)
+    expect(classes(container.querySelector('[class*="h-[32px]"]'))).toContain('shrink-0')
+  })
+
+  it('SkeletonRow: shrink-0', () => {
+    const { container } = render(<SkeletonRow />)
+    expect(classes(container.firstElementChild)).toContain('shrink-0')
+  })
+
+  it('RailItem: a set 48px, and shrink-0', () => {
+    render(<RailItem href="#" label="Item" icon={<span />} />)
+    const tile = classes(screen.getByRole('link'))
+    expect(tile).toContain('h-12')
+    expect(tile).toContain('shrink-0')
+  })
+
+  it('Button: a minimum height at each size', () => {
+    render(
+      <>
+        <Button>Default</Button>
+        <Button size="small">Small</Button>
+      </>,
+    )
+    expect(classes(screen.getByRole('button', { name: 'Default' }))).toContain('min-h-8')
+    expect(classes(screen.getByRole('button', { name: 'Small' }))).toContain('min-h-6')
+  })
+
+  it('Select and TextInput, small: a minimum height', () => {
+    render(
+      <>
+        <Select size="small" value="a" onChange={() => {}} options={[{ value: 'a', label: 'A' }]} ariaLabel="Pick" />
+        <TextInput size="small" aria-label="Type" />
+      </>,
+    )
+    expect(classes(screen.getByRole('combobox', { name: 'Pick' }))).toContain('min-h-6')
+    expect(classes(screen.getByRole('textbox', { name: 'Type' }))).toContain('min-h-6')
+  })
+
+  it('PersonTrigger and Reaction: a minimum height', () => {
+    render(
+      <>
+        <PersonTrigger name="Ana Duarte" />
+        <Reaction emoji="👍" count={2} aria-label="Thumbs up" />
+      </>,
+    )
+    expect(classes(screen.getByRole('button', { name: /Ana Duarte/ }))).toContain('min-h-8')
+    expect(classes(screen.getByRole('button', { name: 'Thumbs up' }))).toContain('min-h-6')
+  })
+})

package/src/index.ts

@@ -68,7 +68,7 @@ export { NavItem, type NavItemProps } from './NavItem'
 export { Popover, type PopoverProps } from './Popover'
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea'
 export { ReactionPicker, type ReactionOption, type ReactionPickerProps } from './ReactionPicker'
-export { Toolbar, ToolbarButton, ToolbarInput, ToolbarSeparator, type ToolbarProps, type ToolbarButtonProps, type ToolbarInputProps } from './Toolbar'
+export { Toolbar, ToolbarButton, ToolbarInput, ToolbarLink, ToolbarSeparator, type ToolbarProps, type ToolbarButtonProps, type ToolbarInputProps, type ToolbarLinkProps } from './Toolbar'
 export { PreviewCard, type PreviewCardProps } from './PreviewCard'
 export { Person, type PersonProps } from './Person'
 export { Rail, type RailProps } from './Rail'
@@ -81,6 +81,7 @@ export { Reaction, type ReactionProps } from './Reaction'
 export { SearchInput, type SearchInputProps } from './SearchInput'
 export { SectionHeader, type SectionAction, type SectionHeaderProps } from './SectionHeader'
 export { ContainerHeader, type ContainerHeaderProps } from './ContainerHeader'
+export { ListColumn, type ListColumnProps } from './ListColumn'
 export { CollapsibleSection, type CollapsibleSectionProps } from './CollapsibleSection'
 export { SectionLabel } from './SectionLabel'
 export { Tabs, type TabDef, type TabsProps } from './Tabs'

package/src/pages.test.ts

@@ -0,0 +1,142 @@
+/**
+ * The contract every component page keeps (UIG-14, with UIG-15 and UIG-16 folded in).
+ *
+ * A page opens with a line saying what the part is, then has `When`, `When not`,
+ * `How` (with code) and `What it owns`, in that order, before `Keys` and `Props`.
+ *
+ * `What it owns` reads the checker's own list back. A row ticked ✓ in its third
+ * column is a behaviour from `OWNED_BEHAVIOURS` that one of the page's parts owns,
+ * worded as `ROW` below; every behaviour the page's parts own has one; and a row
+ * worded as a behaviour the parts do not own fails. So the page and the checker
+ * cannot say different things. A part that owns nothing says so in one line.
+ *
+ * A `When not` line names only parts that exist: a bold name is a value export of
+ * `index.ts`, or a page.
+ */
+import { readdirSync, readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+import { OWNED_BEHAVIOURS } from './eslint/no-rebuilt-behaviour'
+
+/** How a page words each behaviour. `base-ui` is how a part is built, not what it does for a caller. */
+const ROW: Record<string, RegExp> = {
+  portal: /^Floats on top of the page\b/,
+  'press-outside': /^Closes on a press outside\b/,
+  'page-keys': /^Takes its keys by itself\b/,
+  focus: /^Holds focus inside while open\b/,
+  'scroll-lock': /^Stops the page behind it scrolling\b/,
+  follow: /^Stays attached to its anchor\b/,
+  walking: /^Moves through its items with the arrow keys\b/,
+  role: /^Says what it is to assistive technology\b/,
+  'tab-stop': /^Is reachable with Tab\b/,
+  scroll: /^Scrolls with our scrollbar\b/,
+}
+const NOT_A_ROW = ['base-ui']
+
+/** A page whose part another ticket is changing, while it is; empty when none is. */
+const WAITING: string[] = []
+
+const NOTHING = 'Nothing. It only draws. Clicks and keys are yours.'
+
+const dir = new URL('.', import.meta.url)
+const read = (file: string) => readFileSync(new URL(file, dir), 'utf8').replace(/\r\n/g, '\n')
+const pages = readdirSync(dir)
+  .filter((f) => f.endsWith('.mdx'))
+  .map((f) => f.slice(0, -4))
+
+const index = read('index.ts')
+/** Value exports of index.ts, by the module they come from. */
+const byModule = new Map<string, string[]>()
+for (const m of index.matchAll(/export\s*\{([^}]*)\}\s*from\s*'\.\/([\w/]+)'/g)) {
+  const names = m[1]
+    .split(',')
+    .map((s) => s.trim())
+    .filter((s) => s && !s.startsWith('type '))
+    .map((s) => s.split(/\s+as\s+/).pop()!)
+  byModule.set(m[2], [...(byModule.get(m[2]) ?? []), ...names])
+}
+const exported = new Set([...byModule.values()].flat())
+
+/** The parts a page documents: its own name, and its module's exports that have no page of their own. */
+const partsOf = (page: string) => [page, ...(byModule.get(page) ?? []).filter((n) => n !== page && !pages.includes(n))]
+
+const section = (t: string, name: string) => {
+  const head = `\n## ${name}\n`
+  const at = t.indexOf(head)
+  if (at < 0) return null
+  const rest = t.slice(at + head.length)
+  const end = rest.search(/^## /m)
+  return end < 0 ? rest : rest.slice(0, end)
+}
+
+const owns = (t: string) =>
+  (section(t, 'What it owns') ?? '')
+    .split('\n')
+    .filter((l) => l.startsWith('| ') && !l.startsWith('| It does |'))
+    .map((l) => l.split('|').map((c) => c.trim()))
+    .map(([, does, never, ticked]) => ({ does, never, ticked: ticked === '✓' }))
+
+describe('the page contract', () => {
+  it('words every behaviour the checker knows', () => {
+    const ids = OWNED_BEHAVIOURS.map((b) => b.id).filter((id) => !NOT_A_ROW.includes(id))
+    expect(Object.keys(ROW).sort()).toEqual(ids.sort())
+  })
+
+  it('finds the pages', () => {
+    expect(pages.length).toBeGreaterThanOrEqual(54)
+  })
+
+  for (const page of pages) {
+    describe(page, () => {
+      const t = read(`${page}.mdx`)
+      const headings = [...t.matchAll(/^## (.+)$/gm)].map((m) => m[1])
+
+      it('opens with a line saying what it is', () => {
+        const opening = t.split(/^# .*$/m)[1]?.split(/\n\s*\n/).map((s) => s.trim()).find((s) => s && !s.startsWith('<'))
+        expect(opening, 'no opening line under the title').toBeTruthy()
+      })
+
+      it('has each section once', () => {
+        expect(headings.filter((h, i) => headings.indexOf(h) !== i)).toEqual([])
+      })
+
+      it('has its sections in order', () => {
+        const want = WAITING.includes(page) ? ['When', 'When not', 'How'] : ['When', 'When not', 'How', 'What it owns']
+        const at = want.map((h) => headings.indexOf(h))
+        expect(at.filter((i) => i < 0).length, `missing: ${want.filter((_, i) => at[i] < 0).join(', ')}`).toBe(0)
+        expect([...at].sort((a, b) => a - b)).toEqual(at)
+        for (const after of ['Keys', 'Props']) {
+          const i = headings.indexOf(after)
+          if (i >= 0) expect(at[at.length - 1], `${want[want.length - 1]} comes before ${after}`).toBeLessThan(i)
+        }
+      })
+
+      it('shows code under How', () => {
+        expect(section(t, 'How')).toMatch(/```tsx?\n/)
+      })
+
+      it('names only parts that exist under When not', () => {
+        const names = [...(section(t, 'When not') ?? '').matchAll(/\*\*`?([A-Z][A-Za-z0-9]*)`?\*\*/g)].map((m) => m[1])
+        expect(names.filter((n) => !exported.has(n) && !pages.includes(n))).toEqual([])
+      })
+
+      if (WAITING.includes(page)) return
+
+      it('says what it owns, as the checker does', () => {
+        const parts = partsOf(page)
+        const owned = OWNED_BEHAVIOURS.filter((b) => !NOT_A_ROW.includes(b.id) && b.owners.some((o) => parts.includes(o))).map((b) => b.id)
+        const rows = owns(t)
+        const body = (section(t, 'What it owns') ?? '').trim()
+        if (!rows.length) {
+          expect(owned, `${page} owns ${owned.join(', ')}; the page says nothing`).toEqual([])
+          expect(body).toBe(NOTHING)
+          return
+        }
+        const said = rows.flatMap((r) => Object.entries(ROW).filter(([, re]) => re.test(r.does)).map(([id]) => ({ id, ticked: r.ticked, does: r.does })))
+        expect(said.filter((s) => !s.ticked).map((s) => s.does), 'a checker behaviour, not ticked').toEqual([])
+        expect(rows.filter((r) => r.ticked && !Object.values(ROW).some((re) => re.test(r.does))).map((r) => r.does), 'ticked, but not worded as a checker behaviour').toEqual([])
+        expect(said.map((s) => s.id).sort()).toEqual([...owned].sort())
+        expect(rows.every((r) => r.does && r.never), 'every row says what it does and what you never write').toBe(true)
+      })
+    })
+  }
+})

package/src/registry/registry.test.ts

@@ -45,17 +45,17 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 82 names over 54 files: 75 components, 6 helpers and 1 hook (ContainerHeader joined in UIG-13)', () => {
+  it('counts 84 names over 55 files: 77 components, 6 helpers and 1 hook (ListColumn and ToolbarLink joined in UIG-14)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 75, helper: 6, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(54)
+    expect(kinds).toEqual({ component: 77, helper: 6, hook: 1 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(55)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(54)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(28)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(55)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(29)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {
@@ -278,7 +278,7 @@ describe('the ids point at something', () => {
 describe('a second parser agrees', async () => {
   const docgen = await import('react-docgen').catch(() => null)
 
-  it.skipIf(!docgen)('finds the same props on all 75 components', async () => {
+  it.skipIf(!docgen)('finds the same props on all 77 components', async () => {
     if (!docgen) return
     const resolver = new docgen.builtinResolvers.FindExportedDefinitionsResolver({ limit: 0 })
     const byName = new Map(registry.entries.map((one) => [one.name, one]))
@@ -321,12 +321,14 @@ describe('a second parser agrees', async () => {
 const INHERITED_WITH_A_DEFAULT = new Set(['Button.type', 'IconButton.type', 'TextInput.type', 'SearchInput.placeholder'])
 
 /**
- * The twelve where **this registry is right and `react-docgen` is not**.
+ * The eighteen where **this registry is right and `react-docgen` is not**.
  *
  * `IdentityPanelProps extends Omit<IdentityMenuProps, 'compact'>` and
  * `PersonTriggerProps extends Omit<PersonProps, 'className'>`: docgen does not
  * follow a heritage clause wrapped in `Omit`, so it reports neither `me` nor
- * `signedIn`, which `IdentityPanel` *requires*. Checked against the source —
+ * `signedIn`, which `IdentityPanel` *requires*. `ToolbarLinkProps extends
+ * Omit<IconButtonProps, …>` (UIG-14, F3) is the same: docgen reports none of
+ * the IconButton props it keeps. Checked against the source —
  * `IdentityMenuProps` declares both, and `IdentityPanel` spreads `...rest`
  * straight into `IdentityRows`, which destructures them.
  *
@@ -346,6 +348,12 @@ const DOCGEN_STOPS_AT_OMIT = new Set([
   'PersonTrigger.picture',
   'PersonTrigger.fallback',
   'PersonTrigger.size',
+  'ToolbarLink.variant',
+  'ToolbarLink.glow',
+  'ToolbarLink.tooltip',
+  'ToolbarLink.tooltipShortcut',
+  'ToolbarLink.tooltipPlacement',
+  'ToolbarLink.children',
 ])
 
 describe('ui:find', () => {

package/tailwind-preset.js

@@ -67,9 +67,30 @@ export default {
   // see tokens.css). Both exist so a treatment can be given to the two apps
   // without changing the plain light/dark themes the docs render in.
   plugins: [
-    plugin(({ addVariant }) => {
+    plugin(({ addVariant, addComponents }) => {
       addVariant('signal', '.signal &')
       addVariant('ship', "[data-theme='ship'] &")
+      // The Signal canvas: the control-room dot grid on the app's dark ground,
+      // in the Signal theme only. AppShell's floating frame carries
+      // `signal-canvas`. Peek's, verbatim (UIG-14, Katerina, 19 September: the
+      // canvas is the theme's, so it moved with the frame). A component here,
+      // not base.css, so it reaches every app on the preset and the class lint
+      // knows the name. `isolation` and `z-index: -1` keep the grid above
+      // the ground and below every child: never over the card, a dialog, a menu.
+      addComponents({
+        '.signal .signal-canvas': { isolation: 'isolate' },
+        '.signal .signal-canvas::before': {
+          content: "''",
+          position: 'absolute',
+          inset: '0',
+          zIndex: '-1',
+          pointerEvents: 'none',
+          backgroundImage: 'radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px)',
+          backgroundSize: '26px 26px',
+          maskImage: 'radial-gradient(1100px 700px at 50% 45%, transparent 25%, #000 100%)',
+          WebkitMaskImage: 'radial-gradient(1100px 700px at 50% 45%, transparent 25%, #000 100%)',
+        },
+      })
     }),
   ],
   theme: {