@charcuterie/ui 1.1.0 → 2.0.0

package/src/Dialog/Dialog.stories.tsx

@@ -0,0 +1,347 @@
+import { useVisibility } from "@charcuterie/logic"
+import type { Meta, StoryObj } from "@storybook/react"
+import type { ReactNode } from "react"
+
+import { toStoryChoice } from "../argTypes.storyHelpers.ts"
+import { Button } from "../Button/Button.tsx"
+import { StoryRow } from "../board.storyHelpers.tsx"
+import { OverlayStackProvider } from "../Overlay/OverlayStack.tsx"
+import type { DialogSize } from "./Dialog.tsx"
+import { Dialog } from "./Dialog.tsx"
+
+const meta = {
+  title: "Components/Dialog",
+  component: Dialog,
+  parameters: { layout: "padded" },
+  argTypes: {
+    size: toStoryChoice([
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "full",
+    ] as const),
+  },
+  args: {
+    // `render` supplies the real content; this satisfies the required
+    // `children` for the Controls panel's arg type.
+    children: null,
+    headingLevel: 2,
+    isDismissable: true,
+    size: "md",
+  },
+} satisfies Meta<typeof Dialog>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * Every board here is triggers-plus-one-open-dialog rather than a
+ * grid, and that is the component rather than the stories being
+ * awkward: a dialog covers the viewport, so two side by side is not
+ * the real arrangement. What the boards show instead is a page, a
+ * scrim, and one dialog over both.
+ *
+ * `footer` is a function of `hide` because a dialog's own buttons
+ * are the normal way out of it, and they need the same `hide` the
+ * close button gets. One `useVisibility` per demo, no second source
+ * of truth.
+ */
+const DialogDemo = ({
+  buttonLabel,
+  children,
+  footer,
+  heading,
+  isDismissable = true,
+  size,
+}: {
+  buttonLabel: string
+  children?: ReactNode
+  footer?: (hide: () => void) => ReactNode
+  heading: string
+  isDismissable?: boolean
+  size?: DialogSize
+}): ReactNode => {
+  const { hide, isVisible, show } = useVisibility()
+
+  return (
+    <>
+      <Button appearance="soft" onClick={show} size="sm">
+        {buttonLabel}
+      </Button>
+
+      <Dialog
+        footer={footer?.(hide)}
+        heading={heading}
+        isDismissable={isDismissable}
+        isVisible={isVisible}
+        onClose={hide}
+        size={size}
+      >
+        {children ?? (
+          <p className="text-content-secondary text-sm">
+            MakeMKV reported a read error on title 4. The
+            rip can continue with the remaining eight
+            titles, or stop here and keep what has
+            completed.
+          </p>
+        )}
+      </Dialog>
+    </>
+  )
+}
+
+export const Default: Story = {
+  args: {
+    heading: "Bay 3",
+    isVisible: false,
+    onClose: () => {},
+  },
+  render: () => (
+    <DialogDemo
+      buttonLabel="Show the read error"
+      heading="Read error on title 4"
+    />
+  ),
+}
+
+const SIZES: DialogSize[] = ["sm", "md", "lg", "xl", "full"]
+
+export const AllVariants: Story = {
+  args: {
+    heading: "Bay 3",
+    isVisible: false,
+    onClose: () => {},
+  },
+  render: () => (
+    <StoryRow>
+      {SIZES.map((size) => (
+        <DialogDemo
+          buttonLabel={`Open ${size}`}
+          heading={`Read error — ${size}`}
+          key={size}
+          size={size}
+        />
+      ))}
+    </StoryRow>
+  ),
+}
+
+export const AllStates: Story = {
+  args: {
+    heading: "Bay 3",
+    isVisible: false,
+    onClose: () => {},
+  },
+  render: () => (
+    <StoryRow>
+      <DialogDemo
+        buttonLabel="With a footer"
+        footer={(hide) => (
+          <>
+            <Button
+              appearance="soft"
+              intent="neutral"
+              onClick={hide}
+              size="sm"
+            >
+              Keep going
+            </Button>
+
+            <Button intent="danger" size="sm">
+              Stop the rip
+            </Button>
+          </>
+        )}
+        heading="Stop the rip?"
+      />
+
+      <DialogDemo
+        buttonLabel="Not dismissable"
+        footer={(hide) => (
+          <>
+            <Button
+              appearance="soft"
+              intent="neutral"
+              onClick={hide}
+              size="sm"
+            >
+              Keep the titles
+            </Button>
+
+            <Button intent="danger" size="sm">
+              Erase and re-rip
+            </Button>
+          </>
+        )}
+        heading="This erases eight completed titles"
+        isDismissable={false}
+      />
+
+      <DialogDemo
+        buttonLabel="Long body"
+        heading="MakeMKV log"
+      >
+        <div className="flex flex-col gap-2">
+          {Array.from(
+            { length: 24 },
+            (_, index) =>
+              `14:0${index % 10}:22  title ${
+                index + 1
+              }  AACS handshake complete, reading…`,
+          ).map((line) => (
+            <p
+              className="font-mono text-content-secondary text-xs"
+              key={line}
+            >
+              {line}
+            </p>
+          ))}
+        </div>
+      </DialogDemo>
+    </StoryRow>
+  ),
+}
+
+/**
+ * Stacking — one dialog opened from inside another. An
+ * `OverlayStackProvider` at the app root is the one piece of setup a
+ * lone dialog does not need: it renders a **single** shared scrim
+ * behind both, keeps the second on top, marks the first `inert`, and
+ * closes them top-first on Escape or an outside press. Open the first,
+ * then open the second from its footer.
+ */
+const StackedDemo = (): ReactNode => {
+  const first = useVisibility()
+
+  const second = useVisibility()
+
+  return (
+    <OverlayStackProvider>
+      <Button
+        appearance="soft"
+        onClick={first.show}
+        size="sm"
+      >
+        Open the first dialog
+      </Button>
+
+      <Dialog
+        footer={
+          <Button onClick={second.show} size="sm">
+            Open a second over it
+          </Button>
+        }
+        heading="First dialog"
+        isVisible={first.isVisible}
+        onClose={first.hide}
+      >
+        <p className="text-content-secondary text-sm">
+          This one stays open and goes `inert` while the
+          second is over it.
+        </p>
+      </Dialog>
+
+      <Dialog
+        footer={
+          <Button
+            appearance="soft"
+            intent="neutral"
+            onClick={second.hide}
+            size="sm"
+          >
+            Close this one
+          </Button>
+        }
+        heading="Second dialog"
+        isVisible={second.isVisible}
+        onClose={second.hide}
+      >
+        <p className="text-content-secondary text-sm">
+          One scrim behind both. Escape or a backdrop press
+          closes this one first.
+        </p>
+      </Dialog>
+    </OverlayStackProvider>
+  )
+}
+
+export const Stacked: Story = {
+  args: {
+    heading: "First dialog",
+    isVisible: false,
+    onClose: () => {},
+  },
+  render: () => <StackedDemo />,
+}
+
+/**
+ * A dialog is the one surface in this library that is **not** a
+ * container-query citizen, so it gets no `ContainerBoard`. Its size
+ * is measured against the viewport by definition — it is the thing
+ * covering the viewport — and boarding it at three container widths
+ * would be measuring something that has no bearing on it.
+ *
+ * What does vary is the clamp: every size caps at `85dvh`, and
+ * `full` takes the lot. `dvh` rather than `vh` because on a phone
+ * the two differ by the address bar, and a dialog whose footer is
+ * underneath it is a dialog with no buttons.
+ */
+export const Responsive: Story = {
+  args: {
+    heading: "Bay 3",
+    isVisible: false,
+    onClose: () => {},
+  },
+  render: () => (
+    <DialogDemo
+      buttonLabel="Open full-bleed"
+      heading="MakeMKV log — full"
+      size="full"
+    >
+      <p className="text-content-secondary text-sm">
+        `full` is the kiosk and phone case: the dialog is
+        the screen, so there is nothing behind it worth
+        showing.
+      </p>
+    </DialogDemo>
+  ),
+}
+
+/**
+ * The keyboard contract, driven. `OverlayPanel`'s
+ * `FloatingFocusManager` supplies the focus trap and the focus
+ * restore, and `useDismiss` routes Escape through `onClose` — which,
+ * unlike the old native `<dialog>`, a synthetic `userEvent.keyboard`
+ * can now press for real.
+ */
+export const Interactive: Story = {
+  args: {
+    heading: "Bay 3",
+    isVisible: false,
+    onClose: () => {},
+  },
+  render: () => (
+    <DialogDemo
+      buttonLabel="Stop the rip"
+      footer={(hide) => (
+        <>
+          <Button
+            appearance="soft"
+            intent="neutral"
+            onClick={hide}
+            size="sm"
+          >
+            Keep going
+          </Button>
+
+          <Button intent="danger" size="sm">
+            Stop it now
+          </Button>
+        </>
+      )}
+      heading="Stop the rip?"
+    />
+  ),
+}

package/src/Dialog/Dialog.test.tsx

@@ -0,0 +1,312 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent, waitFor } from "storybook/test"
+import { test } from "vitest"
+
+import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
+import { mountStory } from "../mountStory.testHelpers.ts"
+import {
+  expectAgentDrivable,
+  expectHiddenFromAgents,
+} from "../testing/index.ts"
+import * as stories from "./Dialog.stories.tsx"
+
+const {
+  AllStates,
+  AllVariants,
+  Default,
+  Interactive,
+  Responsive,
+  Stacked,
+} = composeStories(stories)
+
+test("the dialog is reachable from a body-scoped query", async () => {
+  const { body, canvas } = await mountStory(Default)
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Show the read error",
+      role: "button",
+    }),
+  )
+
+  // Portalled now, so the panel is found through `body`; the trigger
+  // stays in the canvas.
+  const dialog = expectAgentDrivable(body, {
+    name: "Read error on title 4",
+    role: "dialog",
+  })
+
+  await expectNoAxeViolations(dialog)
+})
+
+test("size is a real width, not a class that happens to be there", async () => {
+  const { body, canvas } = await mountStory(AllVariants)
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Open lg",
+      role: "button",
+    }),
+  )
+
+  const dialog = expectAgentDrivable(body, {
+    name: "Read error — lg",
+    role: "dialog",
+  })
+
+  await expect(
+    dialog.getBoundingClientRect().width,
+  ).toBeGreaterThan(400)
+})
+
+test("a non-dismissable dialog ignores Escape rather than closing", async () => {
+  const { body, canvas } = await mountStory(AllStates)
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Not dismissable",
+      role: "button",
+    }),
+  )
+
+  const _dialog = expectAgentDrivable(body, {
+    name: "This erases eight completed titles",
+    role: "dialog",
+  })
+
+  // There is no Close button, and Escape is disabled at the dismiss
+  // layer (`isDismissable={false}` → `useDismiss` escapeKey off), so
+  // the browser cannot close a dialog the app still owns.
+  await expect(
+    body.queryByRole("button", { name: "Close" }),
+  ).toBeNull()
+
+  await userEvent.keyboard("{Escape}")
+
+  const keepButton = await body.findByRole("button", {
+    name: "Keep the titles",
+  })
+
+  await expect(body.getByRole("dialog")).toBeInTheDocument()
+
+  // The differential half. Without it, "still open" would also be
+  // satisfied by a dialog nothing can close at all.
+  await userEvent.click(keepButton)
+
+  await waitFor(() => {
+    expect(body.queryByRole("dialog")).toBeNull()
+  })
+})
+
+test("a long body scrolls inside the clamp", async () => {
+  const { body, canvas } = await mountStory(AllStates)
+
+  await userEvent.click(
+    canvas.getByRole("button", { name: "Long body" }),
+  )
+
+  const log = expectAgentDrivable(body, {
+    name: "MakeMKV log",
+    role: "dialog",
+  })
+
+  // The body scrolls, the header and footer do not, and the dialog
+  // stops at `85dvh` rather than running off the screen.
+  await expect(
+    log.getBoundingClientRect().height,
+  ).toBeLessThan(globalThis.innerHeight)
+
+  await expect(
+    body.getByText(/title 24/),
+  ).toBeInTheDocument()
+
+  await expectNoAxeViolations(log)
+})
+
+test("the scrim is the token, rendered as the shared backdrop", async () => {
+  const { body, canvas } = await mountStory(Responsive)
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Open full-bleed",
+      role: "button",
+    }),
+  )
+
+  const dialog = expectAgentDrivable(body, {
+    name: "MakeMKV log — full",
+    role: "dialog",
+  })
+
+  await expect(
+    dialog.getBoundingClientRect().height,
+  ).toBeGreaterThan(globalThis.innerHeight * 0.95)
+
+  // The shared backdrop node renders while a modal is open, and its
+  // background really resolves the variant token — not "not
+  // transparent", which M4 learned stayed green against a token build
+  // where `bg-scrim` generated no CSS at all.
+  const scrim = document.body.querySelector(".bg-scrim")
+
+  await expect(scrim).not.toBeNull()
+
+  const probe = document.createElement("div")
+
+  probe.style.backgroundColor = "var(--color-scrim)"
+
+  document.body.append(probe)
+
+  const expectedScrim =
+    globalThis.getComputedStyle(probe).backgroundColor
+
+  probe.remove()
+
+  await expect(expectedScrim).not.toBe("rgba(0, 0, 0, 0)")
+
+  await expect(
+    globalThis.getComputedStyle(scrim as Element)
+      .backgroundColor,
+  ).toBe(expectedScrim)
+})
+
+/**
+ * The keyboard contract, driven — and Escape is pressable for real
+ * now, unlike the old native `<dialog>`. `useDismiss` listens for a
+ * keydown rather than relying on a UA default action, so
+ * `userEvent.keyboard("{Escape}")` is a real close request.
+ */
+test("focus is trapped inside, and Escape restores it to the trigger", async () => {
+  const { body, canvas } = await mountStory(Interactive)
+
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Stop the rip",
+    role: "button",
+  })
+
+  await userEvent.click(trigger)
+
+  const dialog = expectAgentDrivable(body, {
+    name: "Stop the rip?",
+    role: "dialog",
+  })
+
+  await waitFor(() => {
+    expect(dialog.contains(document.activeElement)).toBe(
+      true,
+    )
+  })
+
+  await userEvent.keyboard("{Escape}")
+
+  await waitFor(() => {
+    expect(body.queryByRole("dialog")).toBeNull()
+  })
+
+  // Focus restored to what opened it — `FloatingFocusManager`'s
+  // `returnFocus`, the thing hand-rolled modals in the fleet lose.
+  await expect(document.activeElement).toBe(trigger)
+})
+
+/**
+ * Stacking: one scrim behind two dialogs, the lower one `inert`, and
+ * a top-first dismissal on both an outside press and Escape.
+ */
+test("stacked dialogs share one scrim and dismiss top-first", async () => {
+  const { body, canvas } = await mountStory(Stacked)
+
+  await userEvent.click(
+    expectAgentDrivable(canvas, {
+      name: "Open the first dialog",
+      role: "button",
+    }),
+  )
+
+  // Captured while it is still the only dialog: once the second opens,
+  // the first goes `inert` and a role query no longer sees it.
+  const first = expectAgentDrivable(body, {
+    name: "First dialog",
+    role: "dialog",
+  })
+
+  await userEvent.click(
+    expectAgentDrivable(body, {
+      name: "Open a second over it",
+      role: "button",
+    }),
+  )
+
+  const second = expectAgentDrivable(body, {
+    name: "Second dialog",
+    role: "dialog",
+  })
+
+  // One scrim for both — the whole point of the provider.
+  await expect(
+    document.body.querySelectorAll(".bg-scrim"),
+  ).toHaveLength(1)
+
+  // The lower dialog is hidden from assistive tech while the top is
+  // open, and focus is trapped in the top.
+  expectHiddenFromAgents(first)
+
+  await waitFor(() => {
+    expect(second.contains(document.activeElement)).toBe(
+      true,
+    )
+  })
+
+  // The top dialog's own controls are actually **hittable** — the
+  // scrim sits a layer below the panels, so it does not intercept a
+  // real click. `userEvent` fires on the element directly and would
+  // miss this; `elementFromPoint` is the check that a covering scrim
+  // fails.
+  const closeButton = expectAgentDrivable(body, {
+    name: "Close this one",
+    role: "button",
+  })
+
+  const buttonRect = closeButton.getBoundingClientRect()
+
+  const atPoint = document.elementFromPoint(
+    buttonRect.left + buttonRect.width / 2,
+    buttonRect.top + buttonRect.height / 2,
+  )
+
+  await expect(
+    atPoint !== null && closeButton.contains(atPoint),
+  ).toBe(true)
+
+  // An outside press closes the top only.
+  await userEvent.click(document.body)
+
+  await waitFor(() => {
+    expect(
+      body.queryByRole("dialog", {
+        name: "Second dialog",
+      }),
+    ).toBeNull()
+  })
+
+  // The first is live again — no longer inert, and the scrim stays.
+  await expect(
+    document.body.querySelectorAll(".bg-scrim"),
+  ).toHaveLength(1)
+
+  const firstAgain = expectAgentDrivable(body, {
+    name: "First dialog",
+    role: "dialog",
+  })
+
+  // Escape closes the last one, and the scrim goes with it.
+  await userEvent.keyboard("{Escape}")
+
+  await waitFor(() => {
+    expect(body.queryByRole("dialog")).toBeNull()
+  })
+
+  await expect(firstAgain).not.toBeInTheDocument()
+
+  await expect(
+    document.body.querySelector(".bg-scrim"),
+  ).toBeNull()
+})