@talelk/newui-organisms 0.0.0-stage → 2.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,126 @@
+import { Button, cn, Icon, type IconProp } from '@talelk/newui-atoms'
+import { Menu } from '@talelk/newui-molecules'
+import { For, type JSX, Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+export interface PageToolbarAction {
+  label: string
+  /** A `lucide-*` string or a component (P11). No icon is implied. */
+  icon?: IconProp
+  onClick?: () => void
+  loading?: boolean
+  disabled?: boolean
+}
+
+export interface PageToolbarProps {
+  title: JSX.Element
+  /** Semantic level of the title. @default 1 */
+  headingLevel?: 1 | 2 | 3 | 4
+  /** Options for the ellipsis menu beside the title. Omitted → no menu. */
+  menu?: PageToolbarAction[]
+  /** Secondary actions, before the primary. */
+  secondary?: 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">
+        <Dynamic
+          component={`h${props.headingLevel ?? 1}`}
+          class={cn(
+            'truncate text-ink-gray-9',
+            (props.headingLevel ?? 1) === 1 ? 'text-heading' : 'text-section',
+          )}
+        >
+          {props.title}
+        </Dynamic>
+        <Show when={props.menu}>
+          {(menu) => (
+            <Menu.Root
+              onSelect={(value) =>
+                menu()
+                  .find((entry) => entry.label === value)
+                  ?.onClick?.()
+              }
+            >
+              <Menu.Trigger
+                aria-label="Page actions"
+                class="grid size-7 shrink-0 place-items-center rounded-3 text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-9 focus-visible:focus-ring"
+              >
+                <Icon icon="lucide-ellipsis" class="size-4" />
+              </Menu.Trigger>
+              <Menu.Content>
+                <For each={menu()}>
+                  {(entry) => (
+                    <Menu.Item value={entry.label}>
+                      <Show when={entry.icon}>
+                        {(icon) => (
+                          <Icon
+                            icon={icon()}
+                            class="size-4 shrink-0 text-ink-gray-6"
+                          />
+                        )}
+                      </Show>
+                      <span>{entry.label}</span>
+                    </Menu.Item>
+                  )}
+                </For>
+              </Menu.Content>
+            </Menu.Root>
+          )}
+        </Show>
+      </div>
+
+      <div class="flex shrink-0 items-center gap-control-gap">
+        {props.children}
+        <Show when={props.secondary}>
+          <For each={props.secondary}>
+            {(action) => (
+              <Button
+                variant="outline"
+                iconLeft={action.icon}
+                loading={action.loading}
+                disabled={action.disabled}
+                onClick={action.onClick}
+              >
+                {action.label}
+              </Button>
+            )}
+          </For>
+        </Show>
+        <Show when={props.action}>
+          {(action) => (
+            <Button
+              variant="solid"
+              theme="blue"
+              iconLeft={action().icon}
+              loading={action().loading}
+              disabled={action().disabled}
+              onClick={action().onClick}
+            >
+              {action().label}
+            </Button>
+          )}
+        </Show>
+      </div>
+    </header>
+  )
+}

package/src/organisms/PageToolbar/index.ts

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

package/src/organisms/Section/Section.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { Section } from './Section'
+
+describe('Section', () => {
+  it('renders a default H2 and the four region slots', () => {
+    render(() => (
+      <Section
+        title="Pending expenses"
+        description="Waiting for approval"
+        actions={<button type="button">Export</button>}
+        toolbar={<div>Filters</div>}
+        footer={<span>18 records</span>}
+      >
+        <div>Body</div>
+      </Section>
+    ))
+    expect(screen.getByRole('heading', { level: 2 }).textContent).toBe(
+      'Pending expenses',
+    )
+    expect(screen.getByText('Waiting for approval')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Export' })).toBeTruthy()
+    expect(screen.getByText('Filters')).toBeTruthy()
+    expect(screen.getByText('Body')).toBeTruthy()
+    expect(screen.getByText('18 records')).toBeTruthy()
+  })
+
+  it('honours the heading level and compact density', () => {
+    const { container } = render(() => (
+      <Section title="Ledger" headingLevel={3} density="compact">
+        <div />
+      </Section>
+    ))
+    expect(screen.getByRole('heading', { level: 3 }).textContent).toBe('Ledger')
+    expect(
+      container
+        .querySelector('[data-slot="section"]')
+        ?.getAttribute('data-density'),
+    ).toBe('compact')
+  })
+})

package/src/organisms/Section/Section.tsx

@@ -0,0 +1,108 @@
+import { cn } from '@talelk/newui-atoms'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+export type SectionHeadingLevel = 1 | 2 | 3 | 4
+
+export interface SectionProps {
+  title?: JSX.Element
+  description?: JSX.Element
+  /** Page or section actions, rendered opposite the title. */
+  actions?: JSX.Element
+  /** Controls that change the data, between the header and the body. */
+  toolbar?: JSX.Element
+  /** Pagination, totals or selection feedback, under a rule. */
+  footer?: JSX.Element
+  /** @default 2 */
+  headingLevel?: SectionHeadingLevel
+  /** Explicit id for the rendered heading. Defaults to `<id>-title`. */
+  headingId?: string
+  /** Accessible name when the section has no visible title. */
+  label?: string
+  /** Id of the element that names the region; beats `label`/the heading id. */
+  labelledBy?: string
+  /** Surface treatment. @default 'plain' */
+  surface?: 'plain' | 'card' | 'inset'
+  /** @default 'comfortable' */
+  density?: 'comfortable' | 'compact'
+  id?: string
+  class?: string
+  children: JSX.Element
+}
+
+const HEADING: Record<SectionHeadingLevel, string> = {
+  1: 'text-heading',
+  2: 'text-section',
+  3: 'text-base-medium',
+  4: 'text-interface font-medium',
+}
+
+/**
+ * One page-region anatomy: header, optional toolbar, body, optional footer.
+ *
+ * Data organisms should not each invent their own title row or footer rule.
+ * `Section` owns the region; the organism owns the data surface inside it.
+ */
+export function Section(props: SectionProps): JSX.Element {
+  const surface = () => props.surface ?? 'plain'
+  const density = () => props.density ?? 'comfortable'
+  const hasHeader = () =>
+    Boolean(props.title || props.description || props.actions)
+  const headingId = () =>
+    props.headingId ?? (props.id ? `${props.id}-title` : undefined)
+  const labelledBy = () =>
+    props.labelledBy ?? (props.title ? headingId() : undefined)
+  return (
+    <section
+      id={props.id}
+      aria-label={props.label}
+      aria-labelledby={labelledBy()}
+      data-slot="section"
+      data-surface={surface()}
+      data-density={density()}
+      class={cn(
+        'flex min-w-0 flex-col',
+        density() === 'compact' ? 'gap-2' : 'gap-3',
+        surface() === 'card' &&
+          'rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-card-pad',
+        surface() === 'inset' && 'rounded-card bg-surface-gray-1 p-card-pad',
+        props.class,
+      )}
+    >
+      <Show when={hasHeader()}>
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div class="flex min-w-0 flex-col gap-1">
+            <Show when={props.title}>
+              <Dynamic
+                component={`h${props.headingLevel ?? 2}`}
+                id={headingId()}
+                class={cn(
+                  'min-w-0 text-ink-gray-9',
+                  HEADING[props.headingLevel ?? 2],
+                )}
+              >
+                {props.title}
+              </Dynamic>
+            </Show>
+            <Show when={props.description}>
+              <p class="max-w-[56ch] text-caption text-ink-gray-7">
+                {props.description}
+              </p>
+            </Show>
+          </div>
+          <Show when={props.actions}>
+            <div class="flex shrink-0 flex-wrap items-center gap-2">
+              {props.actions}
+            </div>
+          </Show>
+        </div>
+      </Show>
+      <Show when={props.toolbar}>{props.toolbar}</Show>
+      <div class="min-w-0">{props.children}</div>
+      <Show when={props.footer}>
+        <div class="border-t border-outline-gray-1 pt-3">{props.footer}</div>
+      </Show>
+    </section>
+  )
+}

package/src/organisms/Section/index.ts

@@ -0,0 +1 @@
+export { Section, type SectionHeadingLevel, type SectionProps } from './Section'

package/src/organisms/SelectionBar/SelectionBar.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { SelectionBar } from './SelectionBar'
+
+describe('SelectionBar', () => {
+  it('renders nothing without a selection', () => {
+    const { container } = render(() => <SelectionBar count={0} />)
+    expect(container.querySelector('[data-slot="selection-bar"]')).toBeNull()
+  })
+
+  it('shows the count, action and clear control', async () => {
+    const onAction = vi.fn()
+    const onClear = vi.fn()
+    render(() => (
+      <SelectionBar
+        count={3}
+        summary="$14,650"
+        primary={{ label: 'Approve expenses', onClick: onAction }}
+        onClear={onClear}
+      />
+    ))
+    expect(
+      screen.getByRole('region', { name: 'Selection actions' }),
+    ).toBeTruthy()
+    expect(screen.getByText('3 selected')).toBeTruthy()
+    expect(screen.getByText('$14,650')).toBeTruthy()
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Approve expenses' }),
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Clear' }))
+    expect(onAction).toHaveBeenCalled()
+    expect(onClear).toHaveBeenCalled()
+  })
+})

package/src/organisms/SelectionBar/SelectionBar.tsx

@@ -0,0 +1,84 @@
+import { Button, cn, type IconProp } from '@talelk/newui-atoms'
+import { type JSX, Show } from 'solid-js'
+
+export interface SelectionPrimaryAction {
+  label: string
+  onClick: () => void
+  icon?: IconProp
+  disabled?: boolean
+}
+
+export interface SelectionBarProps {
+  count: number
+  /** Context beside the count, e.g. a total or a scope. */
+  summary?: JSX.Element
+  primary?: SelectionPrimaryAction
+  secondary?: JSX.Element
+  onClear?: () => void
+  /** `sticky` fixes the bar to the bottom below `sm`. @default 'inline' */
+  placement?: 'inline' | 'sticky'
+  class?: string
+}
+
+/**
+ * The one bulk-action surface for a data region.
+ *
+ * Inline on desktop, fixed above the bottom edge on a phone, so selecting a
+ * row far down a card list never requires scrolling back to a toolbar.
+ */
+export function SelectionBar(props: SelectionBarProps): JSX.Element {
+  return (
+    <Show when={props.count > 0}>
+      <section
+        aria-label="Selection actions"
+        data-slot="selection-bar"
+        data-placement={props.placement ?? 'inline'}
+        class={cn(
+          'flex flex-wrap items-center justify-between gap-2 rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-2 shadow-sm',
+          props.placement === 'sticky' &&
+            'max-sm:fixed max-sm:inset-x-4 max-sm:bottom-4 max-sm:z-top max-sm:shadow-lg',
+          props.class,
+        )}
+      >
+        <div class="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span class="text-interface font-medium text-ink-gray-9">
+            {props.count} selected
+          </span>
+          <Show when={props.summary}>
+            <span class="text-caption tabular-nums text-ink-gray-7">
+              {props.summary}
+            </span>
+          </Show>
+        </div>
+        <div class="flex flex-wrap items-center gap-2">
+          {props.secondary}
+          <Show when={props.onClear}>
+            <Button
+              variant="ghost"
+              size="sm"
+              class="max-sm:h-10"
+              onClick={props.onClear}
+            >
+              Clear
+            </Button>
+          </Show>
+          <Show when={props.primary}>
+            {(primary) => (
+              <Button
+                variant="solid"
+                theme="blue"
+                size="sm"
+                class="max-sm:h-10"
+                iconLeft={primary().icon}
+                disabled={primary().disabled}
+                onClick={primary().onClick}
+              >
+                {primary().label}
+              </Button>
+            )}
+          </Show>
+        </div>
+      </section>
+    </Show>
+  )
+}

package/src/organisms/SelectionBar/index.ts

@@ -0,0 +1,5 @@
+export {
+  SelectionBar,
+  type SelectionBarProps,
+  type SelectionPrimaryAction,
+} from './SelectionBar'

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"')
+  })
+})