stories: standardize story render/interaction-twin patterns

Squashed from the branch's 9 incremental commits (shared render
functions -> story spread -> tags consolidation) into one commit to
simplify rebasing onto main.

- Inline render implementations directly on each story's `render`
  property; hook-requiring stories declare a named function inside
  `render` instead of a top-level helper.
- Remove unnecessary `ComponentProps` imports; story types are
  inferred from args.
- Single-interaction stories spread directly from their display story
  (`...Default`) and declare their own tags.
- Multi-interaction stories share a non-exported, untagged base and
  each exported twin declares its own tags.
- Consolidate accessibility parameter objects inline where only one
  story needs them.

Author: codingwolf-at

packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx

@@ -90,6 +90,16 @@ export const Default: Story = {
       </AlertDialogContent>
     </AlertDialog>
   ),
+};
+
+/**
+ * Interaction test: it opens, an outside click does NOT dismiss it (always modal), and Cancel
+ * closes it. Tagged out of the sidebar/docs/manifest while still running under the default `test`
+ * tag — so a browsing user never sees the dialog flash open and then close.
+ */
+export const ModalDismissal: Story = {
+  ...Default,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas, step }) => {
     await step("open the alert dialog", async () => {
       await userEvent.click(canvas.getByRole("button", { name: "Delete project" }));

packages/propel/src/components/autocomplete-field/autocomplete-field.stories.tsx

@@ -49,6 +49,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
 
 export const RendersInput: Story = {
+  ...Default,
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     await expect(canvas.getByRole("combobox", { name: "Container image" })).toBeInTheDocument();
@@ -58,6 +59,16 @@ export const RendersInput: Story = {
 /** Setting `error` marks the field invalid, which recolors the input group border to danger. */
 export const Invalid: Story = {
   args: { error: "Enter a container image." },
+};
+
+/**
+ * Interaction test: the invalid field marks the input `aria-invalid`/`data-invalid` and recolors
+ * the group border. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const InvalidInteraction: Story = {
+  ...Invalid,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     const input = canvas.getByRole("combobox", { name: "Container image" });
     await expect(input).toHaveAttribute("aria-invalid", "true");

packages/propel/src/components/autocomplete/autocomplete.stories.tsx

@@ -92,6 +92,11 @@ export const Default: Story = {
       </Autocomplete>
     </Field>
   ),
+};
+
+export const DefaultInteraction: Story = {
+  ...Default,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas, userEvent }) => {
     await userEvent.type(canvas.getByRole("combobox", { name: "Container image" }), "node");
     await expect(within(document.body).getByText("node:22-slim")).toBeInTheDocument();

packages/propel/src/components/avatar-group/avatar-group.stories.tsx

@@ -40,6 +40,15 @@ export const ThreeMembers: Story = {
       <Avatar alt="Linus" fallback="LT" />
     </AvatarGroup>
   ),
+};
+
+/**
+ * Interaction test: all three avatars render and the group's `magnitude` flows to each. Tagged out
+ * of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const ThreeMembersInteraction: Story = {
+  ...ThreeMembers,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     // Each avatar exposes role="img"; querying by role proves all three rendered.
     const avatars = canvas.getAllByRole("img");

packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -78,6 +78,15 @@ export const Default: Story = {
       </BreadcrumbList>
     </Breadcrumb>
   ),
+};
+
+/**
+ * Interaction test: the trail exposes its landmark name and the last crumb is the current page.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const DefaultInteraction: Story = {
+  ...Default,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     // The trail exposes its accessible landmark name, and the last crumb is the
     // current page.
@@ -136,36 +145,8 @@ export const WithCollapsedCrumbs: Story = {
  * behavior canary, not a designer example — but still runs under the default `test` tag.
  */
 export const CollapsedCrumbsInteraction: Story = {
+  ...WithCollapsedCrumbs,
   tags: ["!dev", "!autodocs", "!manifest"],
-  render: () => (
-    <Breadcrumb aria-label="Breadcrumb">
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="#" onClick={(event) => event.preventDefault()}>
-            Plane
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <Menu>
-            <BaseMenu.Trigger aria-label="Show more breadcrumbs" render={<BreadcrumbTrigger />}>
-              <BreadcrumbTriggerIcon>
-                <Ellipsis />
-              </BreadcrumbTriggerIcon>
-            </BaseMenu.Trigger>
-            <MenuContent width="auto">
-              <MenuItem render={inertAnchor()}>Projects</MenuItem>
-              <MenuItem render={inertAnchor()}>Design</MenuItem>
-            </MenuContent>
-          </Menu>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
   play: async ({ canvas }) => {
     // The current crumb is marked for assistive tech.
     await expect(canvas.getByText("Breadcrumb")).toHaveAttribute("aria-current", "page");

packages/propel/src/components/checkbox-field/checkbox-field.stories.tsx

@@ -45,6 +45,16 @@ export const Invalid: Story = {
       />
     </div>
   ),
+};
+
+/**
+ * Interaction test: the invalid field propagates `data-invalid` and renders a different border
+ * color than the resting field. Tagged out of the sidebar/docs/manifest while still running under
+ * the default `test` tag.
+ */
+export const InvalidInteraction: Story = {
+  ...Invalid,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     const [resting, invalid] = canvas.getAllByRole("checkbox");
     // The error-free field leaves the box in its resting (non-invalid) state.
@@ -60,6 +70,7 @@ export const Invalid: Story = {
 };
 
 export const RendersCheckbox: Story = {
+  ...Default,
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     await expect(canvas.getByRole("checkbox", { name: "Email updates" })).toBeInTheDocument();

packages/propel/src/components/checkbox-group-field/checkbox-group-field.stories.tsx

@@ -36,6 +36,15 @@ export const Default: Story = { args: { hint: "At least one channel is recommend
  */
 export const Invalid: Story = {
   args: { error: "Choose at least one channel." },
+};
+
+/**
+ * Interaction test: every option's box propagates `data-invalid` and the danger border class.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const InvalidInteraction: Story = {
+  ...Invalid,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     for (const box of canvas.getAllByRole("checkbox")) {
       await expect(box).toHaveAttribute("data-invalid");
@@ -45,6 +54,7 @@ export const Invalid: Story = {
 };
 
 export const RendersGroup: Story = {
+  ...Default,
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     await expect(canvas.getByRole("checkbox", { name: "Email" })).toBeInTheDocument();

packages/propel/src/components/checkbox-group/checkbox-group.stories.tsx

@@ -27,6 +27,15 @@ export const Default: Story = {
       <Checkbox value="ssh" label="SSH" />
     </CheckboxGroup>
   ),
+};
+
+/**
+ * Interaction test: the default-selected row reports `aria-checked="true"`. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const DefaultInteraction: Story = {
+  ...Default,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     await expect(canvas.getByRole("checkbox", { name: "HTTPS" })).toHaveAttribute(
       "aria-checked",

packages/propel/src/components/checkbox/checkbox.stories.tsx

@@ -39,7 +39,20 @@ type Story = StoryObj<typeof meta>;
  * Interactive, label-less checkbox — just the box. Toggle it from the controls or by clicking. With
  * no visible `label`, the accessible name comes from `aria-label`.
  */
-export const Default: Story = {
+export const Default: Story = {};
+
+/**
+ * Interaction test: clicking the box toggles `aria-checked` on and off. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag — so a browsing user never
+ * sees the tick flip on its own.
+ */
+const Interaction: Story = {
+  ...Default,
+};
+
+export const DefaultInteraction: Story = {
+  ...Interaction,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas, userEvent }) => {
     const checkbox = canvas.getByRole("checkbox");
     await expect(checkbox).toHaveAttribute("aria-checked", "false");
@@ -62,6 +75,15 @@ export const States: Story = {
       <Checkbox label="Disabled checked" disabled defaultChecked />
     </div>
   ),
+};
+
+/**
+ * Interaction test: the unchecked box mounts no tick while the checked box renders its check icon.
+ * Tagged out of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const StatesInteraction: Story = {
+  ...States,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     const [unchecked, checked] = canvas.getAllByRole("checkbox");
     // No tick is rendered while unchecked (the indicator is not mounted).
@@ -105,6 +127,15 @@ export const WithIcon: Story = {
 export const Indeterminate: Story = {
   parameters: { controls: { disable: true } },
   render: () => <Checkbox label="Select all" indeterminate />,
+};
+
+/**
+ * Interaction test: the mixed state reports `aria-checked="mixed"`. Tagged out of the
+ * sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const IndeterminateInteraction: Story = {
+  ...Indeterminate,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     await expect(canvas.getByRole("checkbox")).toHaveAttribute("aria-checked", "mixed");
   },
@@ -129,6 +160,16 @@ export const Invalid: Story = {
       </Field>
     </div>
   ),
+};
+
+/**
+ * Interaction test: the invalid `Field` propagates `data-invalid` and the danger border, while the
+ * checked box keeps the accent fill. Tagged out of the sidebar/docs/manifest while still running
+ * under the default `test` tag.
+ */
+export const InvalidInteraction: Story = {
+  ...Invalid,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     const [resting, unchecked, checked] = canvas.getAllByRole("checkbox");
     // The resting box has no field-invalid state.
@@ -153,6 +194,7 @@ export const Invalid: Story = {
  * the default `test` tag.
  */
 export const KeyboardToggle: Story = {
+  ...Interaction,
   tags: ["!dev", "!autodocs", "!manifest"],
   args: { label: "Subscribe", defaultChecked: false },
   play: async ({ canvas, userEvent }) => {
@@ -188,6 +230,7 @@ export const KeyboardToggle: Story = {
  * manifest, but still runs under the default `test` tag.
  */
 export const BoxDoesNotShiftOnToggle: Story = {
+  ...Interaction,
   tags: ["!dev", "!autodocs", "!manifest"],
   parameters: { controls: { disable: true } },
   // A controlled wrapper so a single, stable box element can be driven through
@@ -243,6 +286,7 @@ export const BoxDoesNotShiftOnToggle: Story = {
  * still runs under the default `test` tag.
  */
 export const DisabledDoesNotToggle: Story = {
+  ...Interaction,
   tags: ["!dev", "!autodocs", "!manifest"],
   args: { label: "Disabled", disabled: true },
   play: async ({ canvas, userEvent }) => {

packages/propel/src/components/combobox-field/combobox-field.stories.tsx

@@ -39,6 +39,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
 
 export const RendersInput: Story = {
+  ...Default,
   tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     await expect(canvas.getByRole("combobox", { name: "Region" })).toBeInTheDocument();
@@ -48,6 +49,16 @@ export const RendersInput: Story = {
 /** Setting `error` marks the field invalid, which recolors the input group border to danger. */
 export const Invalid: Story = {
   args: { error: "Choose a deployment region." },
+};
+
+/**
+ * Interaction test: the invalid field marks the input `aria-invalid`/`data-invalid` and recolors
+ * the group border. Tagged out of the sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const InvalidInteraction: Story = {
+  ...Invalid,
+  tags: ["!dev", "!autodocs", "!manifest"],
   play: async ({ canvas }) => {
     const input = canvas.getByRole("combobox", { name: "Region" });
     await expect(input).toHaveAttribute("aria-invalid", "true");