@talelk/newui-organisms 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,35 @@
+import { render } from '@solidjs/testing-library'
+import axe, { type AxeResults } from 'axe-core'
+import { describe, expect, it } from 'vitest'
+import { PageToolbar } from './PageToolbar'
+
+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('PageToolbar accessibility', () => {
+  it('has no axe violations with a menu and a primary action', async () => {
+    const { container } = render(() => (
+      <PageToolbar
+        title="Q4 invoices"
+        menu={[
+          { label: 'Rename', onClick: () => {} },
+          { label: 'Archive', onClick: () => {} },
+        ]}
+        action={{ label: 'New invoice', onClick: () => {} }}
+      />
+    ))
+    expect(summarize(await axe.run(container, AXE_OPTIONS))).toEqual([])
+  })
+})

package/src/organisms/PageToolbar/PageToolbar.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { PageToolbar } from './PageToolbar'
+
+describe('PageToolbar', () => {
+  it('renders the title and the primary action', () => {
+    render(() => <PageToolbar title="Tickets" action={{ label: 'Add new' }} />)
+    expect(screen.getByText('Tickets')).toBeTruthy()
+    expect(screen.getByRole('button', { name: /Add new/ })).toBeTruthy()
+  })
+
+  it('calls the primary action', async () => {
+    const onClick = vi.fn()
+    render(() => (
+      <PageToolbar title="Tickets" action={{ label: 'Add new', onClick }} />
+    ))
+    await userEvent.click(screen.getByRole('button', { name: /Add new/ }))
+    expect(onClick).toHaveBeenCalled()
+  })
+
+  it('renders no title menu unless one is given', () => {
+    const { container } = render(() => <PageToolbar title="Tickets" />)
+    expect(container.querySelector('[data-slot="menu-trigger"]')).toBeNull()
+  })
+
+  it('opens the title menu and runs the chosen entry', async () => {
+    const onArchive = vi.fn()
+    render(() => (
+      <PageToolbar
+        title="Tickets"
+        menu={[{ label: 'Archive', onClick: onArchive }]}
+      />
+    ))
+
+    await userEvent.click(screen.getByRole('button', { name: 'Page actions' }))
+    await userEvent.click(
+      await screen.findByRole('menuitem', { name: /Archive/ }),
+    )
+    expect(onArchive).toHaveBeenCalled()
+  })
+})

package/src/organisms/PageToolbar/PageToolbar.tsx

@@ -0,0 +1,77 @@
+import { Button, type IconProp } from '@talelk/newui-atoms'
+import { Dropdown } from '@talelk/newui-molecules'
+import { type JSX, Show } from 'solid-js'
+
+export interface PageToolbarAction {
+  label: string
+  /** A `lucide-*` string or a component (P11). */
+  icon?: IconProp
+  onClick?: () => void
+}
+
+export interface PageToolbarProps {
+  title: JSX.Element
+  /** Options for the ellipsis menu beside the title. Omitted → no menu. */
+  menu?: PageToolbarAction[]
+  /** The primary action — the one thing this screen is for. */
+  action?: PageToolbarAction
+  /** Anything else on the trailing edge, after the primary action. */
+  children?: JSX.Element
+  class?: string
+}
+
+/**
+ * The page header: a title, an optional title menu, and the actions.
+ *
+ * Small, but it is the three details inside it that were being re-decided on
+ * every screen: the title menu is an ellipsis *button* (a chevron next to a
+ * title reads as a dropdown for the title, which is exactly what it is — but
+ * the ellipsis is the convention), the primary action carries a leading `+` only
+ * when it creates something, and the header is `PageHeader` rather than a bare
+ * sticky div so it flips to the pinned mobile variant with the shell.
+ */
+export function PageToolbar(props: PageToolbarProps): JSX.Element {
+  return (
+    <header
+      class={`flex min-h-12 shrink-0 items-center justify-between gap-control-gap border-b border-outline-gray-1 bg-surface-base px-page-gutter-compact sm:px-page-gutter ${props.class ?? ''}`}
+    >
+      <div class="flex min-w-0 items-center gap-1">
+        <span class="truncate text-heading text-ink-gray-9">{props.title}</span>
+        <Show when={props.menu}>
+          {(menu) => (
+            <Dropdown
+              options={menu().map((entry) => ({
+                label: entry.label,
+                value: entry.label,
+                ...(typeof entry.icon === 'string' ? { icon: entry.icon } : {}),
+              }))}
+              onSelect={(value) =>
+                menu()
+                  .find((entry) => entry.label === value)
+                  ?.onClick?.()
+              }
+            >
+              <span class="sr-only">Page actions</span>
+            </Dropdown>
+          )}
+        </Show>
+      </div>
+
+      <div class="flex shrink-0 items-center gap-control-gap">
+        {props.children}
+        <Show when={props.action}>
+          {(action) => (
+            <Button
+              variant="solid"
+              theme="blue"
+              iconLeft={action().icon ?? 'lucide-plus'}
+              onClick={action().onClick}
+            >
+              {action().label}
+            </Button>
+          )}
+        </Show>
+      </div>
+    </header>
+  )
+}

package/src/organisms/PageToolbar/index.ts

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

package/src/organisms/SettingsDialog/SettingsDialog.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 { SettingsDialog } from './SettingsDialog'
+
+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('SettingsDialog accessibility', () => {
+  it('has no axe violations when open', async () => {
+    render(() => (
+      <SettingsDialog.Root defaultOpen defaultValue="profile">
+        <SettingsDialog.Sidebar>
+          <SettingsDialog.NavGroup label="User settings">
+            <SettingsDialog.NavItem value="profile">
+              Profile
+            </SettingsDialog.NavItem>
+            <SettingsDialog.NavItem value="notifications">
+              Notifications
+            </SettingsDialog.NavItem>
+          </SettingsDialog.NavGroup>
+        </SettingsDialog.Sidebar>
+        <SettingsDialog.Content>
+          <SettingsDialog.Panel value="profile">
+            <SettingsDialog.Header title="Profile" description="Your details" />
+            <SettingsDialog.Body>
+              <SettingsDialog.Row
+                title="Display name"
+                description="Shown to others"
+                labelFor="display-name"
+              >
+                <input id="display-name" type="text" />
+              </SettingsDialog.Row>
+            </SettingsDialog.Body>
+          </SettingsDialog.Panel>
+          <SettingsDialog.Panel value="notifications">
+            <SettingsDialog.Header title="Notifications" />
+            <SettingsDialog.Body>Nothing here.</SettingsDialog.Body>
+          </SettingsDialog.Panel>
+        </SettingsDialog.Content>
+      </SettingsDialog.Root>
+    ))
+
+    expect(summarize(await axe.run(document.body, AXE_OPTIONS))).toEqual([])
+  })
+})

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

@@ -0,0 +1,43 @@
+import { render } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { SettingsDialog } from './SettingsDialog'
+
+describe('SettingsDialog (browser, real CSS)', () => {
+  it('paints the dialog, sidebar and nav rows', () => {
+    render(() => (
+      <SettingsDialog.Root defaultOpen>
+        <SettingsDialog.Sidebar>
+          <SettingsDialog.NavItem value="general">
+            General
+          </SettingsDialog.NavItem>
+        </SettingsDialog.Sidebar>
+        <SettingsDialog.Content>
+          <SettingsDialog.Panel value="general">
+            <SettingsDialog.Header title="General" />
+            <SettingsDialog.Body>Body</SettingsDialog.Body>
+          </SettingsDialog.Panel>
+        </SettingsDialog.Content>
+      </SettingsDialog.Root>
+    ))
+
+    const content = document.querySelector(
+      '[data-slot="dialog-content"]',
+    ) as HTMLElement
+    expect(content).not.toBeNull()
+    expect(getComputedStyle(content).backgroundColor).not.toBe(
+      'rgba(0, 0, 0, 0)',
+    )
+
+    const sidebar = document.querySelector(
+      '[data-slot="settings-sidebar"]',
+    ) as HTMLElement
+    expect(getComputedStyle(sidebar).backgroundColor).not.toBe(
+      'rgba(0, 0, 0, 0)',
+    )
+
+    const navItem = document.querySelector(
+      '[data-slot="settings-nav-item"]',
+    ) as HTMLElement
+    expect(navItem.getBoundingClientRect().height).toBeGreaterThanOrEqual(24)
+  })
+})

package/src/organisms/SettingsDialog/SettingsDialog.ssr.test.tsx

@@ -0,0 +1,27 @@
+import { renderToString } from 'solid-js/web'
+import { describe, expect, it } from 'vitest'
+import { SettingsDialog } from './SettingsDialog'
+
+describe('SSR smoke', () => {
+  it('SettingsDialog renders its closed state without a dialog', () => {
+    const html = renderToString(() => (
+      <SettingsDialog.Root>
+        <SettingsDialog.Sidebar>
+          <SettingsDialog.NavGroup label="User settings">
+            <SettingsDialog.NavItem value="profile">
+              Profile
+            </SettingsDialog.NavItem>
+          </SettingsDialog.NavGroup>
+        </SettingsDialog.Sidebar>
+        <SettingsDialog.Content>
+          <SettingsDialog.Panel value="profile">
+            Profile body
+          </SettingsDialog.Panel>
+        </SettingsDialog.Content>
+      </SettingsDialog.Root>
+    ))
+
+    expect(html).not.toContain('role="dialog"')
+    expect(html).not.toContain('data-slot="settings-sidebar"')
+  })
+})

package/src/organisms/SettingsDialog/SettingsDialog.test.tsx

@@ -0,0 +1,202 @@
+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 { SettingsDialog } from './SettingsDialog'
+
+interface ExampleProps {
+  open?: boolean
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  onOpenChange?: (open: boolean) => void
+}
+
+function Example(props: ExampleProps) {
+  return (
+    <SettingsDialog.Root
+      open={props.open}
+      defaultOpen={props.open === undefined ? true : undefined}
+      onOpenChange={props.onOpenChange}
+      value={props.value}
+      defaultValue={props.defaultValue}
+      onValueChange={props.onValueChange}
+    >
+      <SettingsDialog.Sidebar>
+        <SettingsDialog.NavGroup label="User settings">
+          <SettingsDialog.NavItem value="profile">
+            Profile
+          </SettingsDialog.NavItem>
+          <SettingsDialog.NavItem value="notifications">
+            Notifications
+          </SettingsDialog.NavItem>
+        </SettingsDialog.NavGroup>
+      </SettingsDialog.Sidebar>
+      <SettingsDialog.Content>
+        <SettingsDialog.Panel value="profile">
+          <SettingsDialog.Header title="Profile" />
+          <SettingsDialog.Body>Profile body</SettingsDialog.Body>
+        </SettingsDialog.Panel>
+        <SettingsDialog.Panel value="notifications">
+          <SettingsDialog.Header title="Notifications" />
+          <SettingsDialog.Body>Notifications body</SettingsDialog.Body>
+        </SettingsDialog.Panel>
+      </SettingsDialog.Content>
+    </SettingsDialog.Root>
+  )
+}
+
+describe('SettingsDialog', () => {
+  it('opens on request and closes on Escape', async () => {
+    function Harness() {
+      const [open, setOpen] = createSignal(false)
+      return (
+        <div>
+          <button type="button" onClick={() => setOpen(true)}>
+            open settings
+          </button>
+          <SettingsDialog.Root open={open()} onOpenChange={setOpen}>
+            <SettingsDialog.Sidebar>
+              <SettingsDialog.NavItem value="profile">
+                Profile
+              </SettingsDialog.NavItem>
+            </SettingsDialog.Sidebar>
+            <SettingsDialog.Content>
+              <SettingsDialog.Panel value="profile">
+                Profile body
+              </SettingsDialog.Panel>
+            </SettingsDialog.Content>
+          </SettingsDialog.Root>
+        </div>
+      )
+    }
+
+    render(() => <Harness />)
+    expect(screen.queryByRole('dialog')).toBeNull()
+
+    await userEvent.click(screen.getByRole('button', { name: 'open settings' }))
+    expect(screen.getByRole('dialog')).toBeTruthy()
+
+    await userEvent.keyboard('{Escape}')
+    expect(screen.queryByRole('dialog')).toBeNull()
+  })
+
+  it('reports a close through onOpenChange', async () => {
+    const onOpenChange = vi.fn()
+    render(() => <Example open onOpenChange={onOpenChange} />)
+
+    await userEvent.keyboard('{Escape}')
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('marks the selected nav item active', () => {
+    render(() => <Example defaultValue="profile" />)
+
+    const profile = screen.getByRole('tab', { name: 'Profile' })
+    const notifications = screen.getByRole('tab', { name: 'Notifications' })
+
+    expect(profile.getAttribute('aria-selected')).toBe('true')
+    expect(profile.getAttribute('data-state')).toBe('active')
+    expect(notifications.getAttribute('aria-selected')).toBe('false')
+    expect(notifications.getAttribute('data-state')).toBe('inactive')
+  })
+
+  it('switches panels when a nav item is clicked', async () => {
+    const onValueChange = vi.fn()
+    render(() => (
+      <Example defaultValue="profile" onValueChange={onValueChange} />
+    ))
+
+    expect(screen.getByRole('tabpanel').textContent).toContain('Profile body')
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Notifications' }))
+
+    expect(onValueChange).toHaveBeenCalledWith('notifications')
+    expect(screen.getByRole('tabpanel').textContent).toContain(
+      'Notifications body',
+    )
+  })
+
+  it('keeps every panel in the DOM, hiding the inactive ones', () => {
+    render(() => <Example defaultValue="profile" />)
+
+    const panels = document.querySelectorAll('[data-slot="settings-panel"]')
+    expect(panels).toHaveLength(2)
+    expect(panels[0]?.getAttribute('data-state')).toBe('active')
+    expect(panels[1]?.getAttribute('data-state')).toBe('inactive')
+  })
+
+  it('honours an explicit active prop over the dialog value', () => {
+    render(() => (
+      <SettingsDialog.Root defaultOpen defaultValue="beta">
+        <SettingsDialog.Sidebar>
+          <SettingsDialog.NavItem value="alpha" active>
+            Alpha
+          </SettingsDialog.NavItem>
+          <SettingsDialog.NavItem value="beta">Beta</SettingsDialog.NavItem>
+        </SettingsDialog.Sidebar>
+      </SettingsDialog.Root>
+    ))
+
+    expect(
+      screen.getByRole('tab', { name: 'Alpha' }).getAttribute('data-state'),
+    ).toBe('active')
+  })
+
+  it('renders the header title, description and actions', () => {
+    render(() => (
+      <SettingsDialog.Root defaultOpen defaultValue="profile">
+        <SettingsDialog.Content>
+          <SettingsDialog.Panel value="profile">
+            <SettingsDialog.Header
+              title="Profile"
+              description="Your details"
+              actions={<button type="button">Save</button>}
+            />
+            <SettingsDialog.Body>Body</SettingsDialog.Body>
+          </SettingsDialog.Panel>
+        </SettingsDialog.Content>
+      </SettingsDialog.Root>
+    ))
+
+    expect(screen.getByText('Profile')).toBeTruthy()
+    expect(screen.getByText('Your details')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Save' })).toBeTruthy()
+  })
+
+  it('associates a row title with the control through labelFor', () => {
+    render(() => (
+      <SettingsDialog.Root defaultOpen defaultValue="profile">
+        <SettingsDialog.Content>
+          <SettingsDialog.Panel value="profile">
+            <SettingsDialog.Row title="Display name" labelFor="display-name">
+              <input id="display-name" type="text" />
+            </SettingsDialog.Row>
+          </SettingsDialog.Panel>
+        </SettingsDialog.Content>
+      </SettingsDialog.Root>
+    ))
+
+    const label = screen.getByText('Display name')
+    expect(label.tagName).toBe('LABEL')
+    expect(label.getAttribute('for')).toBe('display-name')
+  })
+
+  it('detects the control id for the row title when labelFor is omitted', () => {
+    render(() => (
+      <SettingsDialog.Root defaultOpen defaultValue="profile">
+        <SettingsDialog.Content>
+          <SettingsDialog.Panel value="profile">
+            <SettingsDialog.Row title="Display name">
+              <input id="auto-name" type="text" />
+            </SettingsDialog.Row>
+          </SettingsDialog.Panel>
+        </SettingsDialog.Content>
+      </SettingsDialog.Root>
+    ))
+
+    const label = screen.getByText('Display name')
+    expect(label.tagName).toBe('LABEL')
+    expect(label.getAttribute('for')).toBe('auto-name')
+  })
+})