feat: harden test and registry evidence

2026-07-26 17:15:26 +09:00
parent 3f634eb655
commit 98d4fd4960
68 changed files with 6167 additions and 250 deletions
@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { useState } from "react";
+
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  Dialog,
+  Menu,
+  ProgressBar,
+  Skeleton,
+  Tabs,
+  TextArea,
+  TextField,
+} from "./index.js";
+
+const meta = {
+  title: "Platform/Design System",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primitives: Story = {
+  render: () => (
+    <div className="ui-stack">
+      <Card title="Actions and status">
+        <div className="ui-cluster">
+          <Button>Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="danger">Danger</Button>
+          <Button pending pendingLabel="Processing">
+            Save
+          </Button>
+        </div>
+        <div className="ui-cluster">
+          <Badge variant="neutral">Neutral</Badge>
+          <Badge variant="success">Success</Badge>
+          <Badge variant="warning">Warning</Badge>
+          <Badge variant="danger">Danger</Badge>
+        </div>
+      </Card>
+      <TextField
+        description="A stable accessible description"
+        label="Name"
+        placeholder="Example"
+      />
+      <TextField error="Enter a name" label="Invalid name" value="" readOnly />
+      <TextArea
+        defaultValue="Long-form content"
+        label="Notes"
+        maxLength={100}
+      />
+      <Alert title="Platform status" variant="info">
+        The component workshop uses the same tokens and providers as the app.
+      </Alert>
+      <ProgressBar label="Build readiness" value={72} />
+      <Skeleton label="Loading example" />
+    </div>
+  ),
+};
+
+function OverlayExample() {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="ui-stack">
+      <Button onClick={() => setOpen(true)}>Open dialog</Button>
+      <Dialog
+        actions={<Button onClick={() => setOpen(false)}>Confirm</Button>}
+        onClose={() => setOpen(false)}
+        open={open}
+        title="Confirm platform action"
+      >
+        Keyboard dismissal must restore focus to the trigger.
+      </Dialog>
+      <Menu
+        items={[
+          { id: "first", label: "First action", onSelect() {} },
+          { id: "second", label: "Second action", onSelect() {} },
+        ]}
+        triggerLabel="Open menu"
+      />
+      <Tabs
+        defaultValue="one"
+        label="Example sections"
+        tabs={[
+          { id: "one", label: "One", panel: "First panel" },
+          { id: "two", label: "Two", panel: "Second panel" },
+        ]}
+      />
+    </div>
+  );
+}
+
+export const OverlayInteraction: Story = {
+  render: () => <OverlayExample />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole("button", { name: "Open dialog" });
+    await userEvent.click(trigger);
+    const dialog = within(document.body).getByRole("dialog", {
+      name: "Confirm platform action",
+    });
+    await expect(dialog).toBeVisible();
+    await userEvent.keyboard("{Escape}");
+    await expect(dialog).not.toBeVisible();
+    await expect(trigger).toHaveFocus();
+  },
+};
+
+export const LongPseudoLikeContent: Story = {
+  render: () => (
+    <Card title="[!! Ćømƥøñëñţ ţøķëñ åñđ ļøñğ ţëжţ vëŕïƒïćåţïøñ !!]">
+      <p>
+        [!! Ţhïš šţøŕÿ vëŕïƒïëš ţhåţ å ƥŕïmïţïvë ŕëmåïñš ŕëåđåɓļë
+        ïñ å ćømƥåćţ ćøñţåïñëŕ. !!]
+      </p>
+      <Button>[!! Ćøñţïñüë !!]</Button>
+    </Card>
+  ),
+};