From f2a0f271429fc0b8977cd9e23773be4291abcf0d Mon Sep 17 00:00:00 2001 From: eti Date: Thu, 20 Aug 2026 15:40:51 +0200 Subject: [PATCH] web/storybook: move storybook auth to a single global decorator Signed-off-by: eti --- web/.storybook/MockAuth.svelte | 93 ++++++++++ web/.storybook/StoryAuthProvider.svelte | 22 --- web/.storybook/preview.ts | 7 + web/eslint.config.js | 2 +- .../comment/CommentBox.stories.svelte | 10 +- .../comment/CommentCard.stories.svelte | 19 +- .../comment/CommentEditor.stories.svelte | 41 +---- .../comment/CommentList.stories.svelte | 10 +- .../lib/components/comment/sampleComments.ts | 2 +- .../profile/FollowCard.stories.svelte | 7 +- .../profile/ProfilePopover.stories.svelte | 92 ++++------ .../profile/VouchButton.stories.svelte | 170 ++++++++---------- .../profile/tabs/RepoListTab.stories.svelte | 20 +-- .../components/repo/EmptyRepo.stories.svelte | 21 +-- .../components/repo/RepoCard.stories.svelte | 7 +- .../components/repo/RepoHeader.stories.svelte | 47 ++--- .../repo/RepoIndexView.stories.svelte | 11 +- .../repo/issues/IssueForm.stories.svelte | 20 +-- .../pipelines/PipelineList.stories.svelte | 22 +-- .../repo/pulls/PullCompose.stories.svelte | 16 +- .../repo/tickets/Ticket.stories.svelte | 45 ++--- .../strings/StringForm.stories.svelte | 15 +- .../testing/MockAuthProvider.svelte | 80 --------- .../timeline/Timeline.stories.svelte | 7 +- .../TimelineFollowEvent.stories.svelte | 7 +- .../timeline/TimelineRepoEvent.stories.svelte | 13 +- .../timeline/TimelineStarEvent.stories.svelte | 7 +- .../timeline/TimelineView.stories.svelte | 14 +- 28 files changed, 330 insertions(+), 497 deletions(-) create mode 100644 web/.storybook/MockAuth.svelte delete mode 100644 web/.storybook/StoryAuthProvider.svelte delete mode 100644 web/src/lib/components/testing/MockAuthProvider.svelte diff --git a/web/.storybook/MockAuth.svelte b/web/.storybook/MockAuth.svelte new file mode 100644 index 000000000..9cdaac2d9 --- /dev/null +++ b/web/.storybook/MockAuth.svelte @@ -0,0 +1,93 @@ + + + + +{@render children()} diff --git a/web/.storybook/StoryAuthProvider.svelte b/web/.storybook/StoryAuthProvider.svelte deleted file mode 100644 index a7e81b246..000000000 --- a/web/.storybook/StoryAuthProvider.svelte +++ /dev/null @@ -1,22 +0,0 @@ - - -{@render children()} diff --git a/web/.storybook/preview.ts b/web/.storybook/preview.ts index 8e3c26b1f..d150f398c 100644 --- a/web/.storybook/preview.ts +++ b/web/.storybook/preview.ts @@ -1,10 +1,17 @@ import type { Preview } from "@storybook/sveltekit"; +import MockAuth, { type MockAuthParam } from "./MockAuth.svelte"; // Load the app's global styles (Tailwind + theme tokens) so components // render with real styling inside Storybook. import "../src/app.css"; const preview: Preview = { + decorators: [ + (_story, context) => ({ + Component: MockAuth, + props: { auth: context.parameters.auth as MockAuthParam } + }) + ], parameters: { controls: { matchers: { diff --git a/web/eslint.config.js b/web/eslint.config.js index daa4561a4..905166cd8 100644 --- a/web/eslint.config.js +++ b/web/eslint.config.js @@ -34,7 +34,7 @@ export default defineConfig( files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"], languageOptions: { parserOptions: { - projectService: { allowDefaultProject: [".storybook/StoryAuthProvider.svelte"] }, + projectService: { allowDefaultProject: [".storybook/MockAuth.svelte"] }, extraFileExtensions: [".svelte"], parser: ts.parser } diff --git a/web/src/lib/components/comment/CommentBox.stories.svelte b/web/src/lib/components/comment/CommentBox.stories.svelte index 43e07c4e7..234254982 100644 --- a/web/src/lib/components/comment/CommentBox.stories.svelte +++ b/web/src/lib/components/comment/CommentBox.stories.svelte @@ -2,7 +2,6 @@ import { defineMeta } from "@storybook/addon-svelte-csf"; import { expect, userEvent, waitFor, within } from "storybook/test"; import CommentBox from "./CommentBox.svelte"; - import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte"; const { Story } = defineMeta({ title: "Comment/CommentBox", @@ -23,6 +22,7 @@ { const canvas = within(canvasElement); await userEvent.type( @@ -33,10 +33,4 @@ expect(canvas.getByRole("alert")).toHaveTextContent(/network request failed/i) ); }} -> - {#snippet template(args)} - - - - {/snippet} - +/> diff --git a/web/src/lib/components/comment/CommentCard.stories.svelte b/web/src/lib/components/comment/CommentCard.stories.svelte index e735bfdd7..d94a0bb6f 100644 --- a/web/src/lib/components/comment/CommentCard.stories.svelte +++ b/web/src/lib/components/comment/CommentCard.stories.svelte @@ -2,7 +2,6 @@ import { defineMeta } from "@storybook/addon-svelte-csf"; import { expect, userEvent, waitFor, within } from "storybook/test"; import CommentCard from "./CommentCard.svelte"; - import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte"; import { sampleComments, sampleMarkup, @@ -35,6 +34,7 @@ { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: "Leave a reply..." })); @@ -44,18 +44,13 @@ // the editor should be focused so the user can type immediately await waitFor(() => expect(textarea).toHaveFocus()); }} -> - {#snippet template(args)} - - - - {/snippet} - +/> { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: "Edit comment" })); @@ -64,10 +59,4 @@ await expect(canvas.getByRole("button", { name: "Save" })).toBeInTheDocument(); await expect(canvas.getByRole("button", { name: "Cancel" })).toBeInTheDocument(); }} -> - {#snippet template(args)} - - - - {/snippet} - +/> diff --git a/web/src/lib/components/comment/CommentEditor.stories.svelte b/web/src/lib/components/comment/CommentEditor.stories.svelte index bb3d8fa2d..1cb518742 100644 --- a/web/src/lib/components/comment/CommentEditor.stories.svelte +++ b/web/src/lib/components/comment/CommentEditor.stories.svelte @@ -4,9 +4,6 @@ import MessageSquarePlus from "$icon/message-square-plus"; import Pencil from "$icon/pencil"; import CommentEditor from "./CommentEditor.svelte"; - import MockAuthProvider, { - mockAccounts - } from "$lib/components/testing/MockAuthProvider.svelte"; import { sampleComments, sampleMarkup, @@ -27,8 +24,6 @@ oncancel: () => undefined }; - const storyAccounts = mockAccounts.slice(0, 2); - const { Story } = defineMeta({ title: "Comment/CommentEditor", component: CommentEditor, @@ -57,6 +52,7 @@ { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: "Save" })); @@ -64,16 +60,11 @@ expect(canvas.getByRole("alert")).toHaveTextContent(/network request failed/i) ); }} -> - {#snippet template(args)} - - - - {/snippet} - +/> { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: /comment as alice/i })); @@ -82,32 +73,22 @@ expect(canvas.getByRole("button", { name: /comment as bob/i })).toBeVisible() ); }} -> - {#snippet template(args)} - - - - {/snippet} - +/> { const canvas = within(canvasElement); expect(canvas.queryByRole("button", { name: /comment as/i })).toBeNull(); await waitFor(() => expect(canvas.getByRole("button", { name: "Save" })).toBeVisible()); }} -> - {#snippet template(args)} - - - - {/snippet} - +/> { const canvas = within(canvasElement); await userEvent.click(canvas.getByRole("button", { name: /comment as alice/i })); @@ -124,10 +105,4 @@ await waitFor(() => expect(canvas.getByRole("menuitem", { name: /carol/i })).toBeVisible()); expect(canvas.queryByRole("menuitem", { name: /bob/i })).toBeNull(); }} -> - {#snippet template(args)} - - - - {/snippet} - +/> diff --git a/web/src/lib/components/comment/CommentList.stories.svelte b/web/src/lib/components/comment/CommentList.stories.svelte index 0b9e9961a..28b47c89e 100644 --- a/web/src/lib/components/comment/CommentList.stories.svelte +++ b/web/src/lib/components/comment/CommentList.stories.svelte @@ -2,7 +2,6 @@ import { defineMeta } from "@storybook/addon-svelte-csf"; import { expect, userEvent, waitFor, within } from "storybook/test"; import CommentList from "./CommentList.svelte"; - import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte"; import { longThread, multiReplyThread, @@ -34,6 +33,7 @@ { const canvas = within(canvasElement); // only alice's (middle) reply exposes an edit control @@ -43,10 +43,4 @@ await expect(canvas.getByRole("button", { name: "Save" })).toBeInTheDocument(); await expect(canvas.getByRole("button", { name: "Cancel" })).toBeInTheDocument(); }} -> - {#snippet template(args)} - - - - {/snippet} - +/> diff --git a/web/src/lib/components/comment/sampleComments.ts b/web/src/lib/components/comment/sampleComments.ts index a810a83aa..c1a07be38 100644 --- a/web/src/lib/components/comment/sampleComments.ts +++ b/web/src/lib/components/comment/sampleComments.ts @@ -107,7 +107,7 @@ And just personally, it's a URL eyesore for me.`, "This has tripped me up quite a few times on the SSH URLs with extraneous @s, so thank you for making this change!", "

This has tripped me up quite a few times on the SSH URLs with extraneous @s, so thank you for making this change!

" ), - // authored by the story's logged-in user (MockAuthProvider = did:plc:alice), for edit cases + // authored by the story's logged-in user (MockAuth = did:plc:alice), for edit cases mine: c( "mine", "did:plc:alice", diff --git a/web/src/lib/components/profile/FollowCard.stories.svelte b/web/src/lib/components/profile/FollowCard.stories.svelte index 367718859..142352baf 100644 --- a/web/src/lib/components/profile/FollowCard.stories.svelte +++ b/web/src/lib/components/profile/FollowCard.stories.svelte @@ -1,6 +1,5 @@ - + {#snippet template(args)} - -
- - - -
-
+
+ + + +
{/snippet}
- + {#snippet template(args)} - -
- - {HANDLE} - -
-
+
+ + {HANDLE} + +
{/snippet}
- + {#snippet template()} - -
- - - -
-
+
+ + + +
{/snippet}
- + {#snippet template(args)} - -
- - - -
-
+
+ + + +
{/snippet}
- + {#snippet template(args)} - -
- - - -
-
+
+ + + +
{/snippet}
- + {#snippet template()} - -
- - - -
-
+
+ + + +
{/snippet}
diff --git a/web/src/lib/components/profile/VouchButton.stories.svelte b/web/src/lib/components/profile/VouchButton.stories.svelte index fc5316f30..00ab522a9 100644 --- a/web/src/lib/components/profile/VouchButton.stories.svelte +++ b/web/src/lib/components/profile/VouchButton.stories.svelte @@ -1,6 +1,5 @@ - + {#snippet template(args)} - -
- -
-
+
+ +
{/snippet}
- + {#snippet template(args)} - -
- -
-
+
+ +
{/snippet}
- + {#snippet template(args)} - -
- -
-
+
+ +
{/snippet}
- + {#snippet template(args)} - -
- {#each [{ label: "Bordered", bordered: true, insetShadow: true }, { label: "Borderless", bordered: false, insetShadow: true }] as look (look.label)} -
-

{look.label}

- - - -
- {/each} -
-
+
+ {#each [{ label: "Bordered", bordered: true, insetShadow: true }, { label: "Borderless", bordered: false, insetShadow: true }] as look (look.label)} +
+

{look.label}

+ + + +
+ {/each} +
{/snippet}
- + {#snippet template(args)} - -
- -
-
+
+ +
{/snippet}
- + {#snippet template(args)} - -
- -
-
+
+ +
{/snippet}
- + {#snippet template(args)} - -
- -
-
+
+ +
{/snippet}
- + {#snippet template(args)} - -
- -
-
+
+ +
{/snippet}
- + {#snippet template(args)} - -
- -

- Nothing renders above — you can't vouch for yourself. -

-
-
+
+ +

+ Nothing renders above — you can't vouch for yourself. +

+
{/snippet}
diff --git a/web/src/lib/components/profile/tabs/RepoListTab.stories.svelte b/web/src/lib/components/profile/tabs/RepoListTab.stories.svelte index 472611f93..fdafa7f29 100644 --- a/web/src/lib/components/profile/tabs/RepoListTab.stories.svelte +++ b/web/src/lib/components/profile/tabs/RepoListTab.stories.svelte @@ -1,7 +1,6 @@ - + {#snippet template(args)} - - - + {/snippet} {#snippet template(args)} - - - + {/snippet} diff --git a/web/src/lib/components/repo/EmptyRepo.stories.svelte b/web/src/lib/components/repo/EmptyRepo.stories.svelte index 275f4c551..8721213fe 100644 --- a/web/src/lib/components/repo/EmptyRepo.stories.svelte +++ b/web/src/lib/components/repo/EmptyRepo.stories.svelte @@ -1,6 +1,5 @@ - - - - + + - - - - + + - - - - + + diff --git a/web/src/lib/components/repo/RepoCard.stories.svelte b/web/src/lib/components/repo/RepoCard.stories.svelte index 9840f0783..5baece1c0 100644 --- a/web/src/lib/components/repo/RepoCard.stories.svelte +++ b/web/src/lib/components/repo/RepoCard.stories.svelte @@ -1,6 +1,5 @@ - - - + - - - + - - - + - - - + - - - - + + - - - - + + diff --git a/web/src/lib/components/repo/RepoIndexView.stories.svelte b/web/src/lib/components/repo/RepoIndexView.stories.svelte index ab68140b2..bdc649432 100644 --- a/web/src/lib/components/repo/RepoIndexView.stories.svelte +++ b/web/src/lib/components/repo/RepoIndexView.stories.svelte @@ -2,7 +2,6 @@ import { defineMeta } from "@storybook/addon-svelte-csf"; import type { loadRepoIndex } from "$lib/api/repoIndex"; import { pipelinesByCommitHash } from "./pipelines/mock"; - import StoryAuthProvider from "../../../../.storybook/StoryAuthProvider.svelte"; import RepoIndexView from "./RepoIndexView.svelte"; import type { RepoInfo } from "./types"; @@ -108,7 +107,9 @@ data, bobbinUrl: "https://bobbin.example.test", // every third commit is left without a run, so all three cases show - pipelineStatuses: Promise.resolve(pipelinesByCommitHash(commits.map((commit) => commit.hash))) + pipelineStatuses: Promise.resolve( + pipelinesByCommitHash(commits.map((commit) => commit.hash)) + ) } }); @@ -117,8 +118,6 @@ - - - - + + diff --git a/web/src/lib/components/repo/issues/IssueForm.stories.svelte b/web/src/lib/components/repo/issues/IssueForm.stories.svelte index 5d9cd8901..ea5d2cca6 100644 --- a/web/src/lib/components/repo/issues/IssueForm.stories.svelte +++ b/web/src/lib/components/repo/issues/IssueForm.stories.svelte @@ -2,15 +2,10 @@ import { defineMeta } from "@storybook/addon-svelte-csf"; import { expect, userEvent, waitFor, within } from "storybook/test"; import IssueForm from "./IssueForm.svelte"; - import MockAuthProvider, { - mockAccounts - } from "$lib/components/testing/MockAuthProvider.svelte"; // no-ops; submitting is inert here (needs an authed agent context) const noop = () => undefined; - const storyAccounts = mockAccounts.slice(0, 2); - const { Story } = defineMeta({ title: "Repo/Issues/IssueForm", component: IssueForm, @@ -43,6 +38,7 @@ { const canvas = within(canvasElement); @@ -57,13 +53,12 @@ }} > {#snippet template(args)} - - - + {/snippet} { const canvas = within(canvasElement); @@ -75,13 +70,12 @@ }} > {#snippet template(args)} - - - + {/snippet} {#snippet template(args)} - - - + {/snippet} diff --git a/web/src/lib/components/repo/pipelines/PipelineList.stories.svelte b/web/src/lib/components/repo/pipelines/PipelineList.stories.svelte index a9a7b0d54..09071da56 100644 --- a/web/src/lib/components/repo/pipelines/PipelineList.stories.svelte +++ b/web/src/lib/components/repo/pipelines/PipelineList.stories.svelte @@ -1,15 +1,17 @@ - - - + - - - - + + - - - + - - - + diff --git a/web/src/lib/components/repo/pulls/PullCompose.stories.svelte b/web/src/lib/components/repo/pulls/PullCompose.stories.svelte index 6234afc39..388aead23 100644 --- a/web/src/lib/components/repo/pulls/PullCompose.stories.svelte +++ b/web/src/lib/components/repo/pulls/PullCompose.stories.svelte @@ -2,13 +2,8 @@ import { defineMeta } from "@storybook/addon-svelte-csf"; import { expect, userEvent, within } from "storybook/test"; import PullCompose from "./PullCompose.svelte"; - import MockAuthProvider, { - mockAccounts - } from "$lib/components/testing/MockAuthProvider.svelte"; import type { ComposeData } from "$lib/api/pullCompose"; - const storyAccounts = mockAccounts.slice(0, 2); - const branch = (name: string, isDefault = false) => ({ reference: { name, hash: "d34db33fd34db33fd34db33fd34db33fd34db33f" }, is_default: isDefault, @@ -79,15 +74,14 @@ }); - + {#snippet template(args)} - - - + {/snippet} { const canvas = within(canvasElement); @@ -102,8 +96,6 @@ }} > {#snippet template(args)} - - - + {/snippet} diff --git a/web/src/lib/components/repo/tickets/Ticket.stories.svelte b/web/src/lib/components/repo/tickets/Ticket.stories.svelte index 0a8662152..1099aab7e 100644 --- a/web/src/lib/components/repo/tickets/Ticket.stories.svelte +++ b/web/src/lib/components/repo/tickets/Ticket.stories.svelte @@ -2,7 +2,6 @@ import { defineMeta } from "@storybook/addon-svelte-csf"; import Bell from "$icon/bell"; import Button from "$lib/components/ui/Button.svelte"; - import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte"; import Ticket from "./Ticket.svelte"; const body = `Instead of gating users by repo collaborators, we can use git repo DID as delegated account. @@ -43,39 +42,33 @@ Knot will mint service-auth to access spindle as gitrepo's authority. This way, - + {#snippet template(args)} - - - + {/snippet} - + {#snippet template(args)} - - { - patch = input; - }} - ondelete={async () => { - throw new Error("no-op"); - }} - > - {#snippet extraActions()} - - {/snippet} - - + { + patch = input; + }} + ondelete={async () => { + throw new Error("no-op"); + }} + > + {#snippet extraActions()} + + {/snippet} + {/snippet} - + {#snippet template(args)} - - undefined} ondelete={async () => undefined} /> - + undefined} ondelete={async () => undefined} /> {/snippet} diff --git a/web/src/lib/components/strings/StringForm.stories.svelte b/web/src/lib/components/strings/StringForm.stories.svelte index 35d9958e5..c9ef36459 100644 --- a/web/src/lib/components/strings/StringForm.stories.svelte +++ b/web/src/lib/components/strings/StringForm.stories.svelte @@ -1,15 +1,10 @@ - - - -{@render children()} diff --git a/web/src/lib/components/timeline/Timeline.stories.svelte b/web/src/lib/components/timeline/Timeline.stories.svelte index a71c2180d..ab4305615 100644 --- a/web/src/lib/components/timeline/Timeline.stories.svelte +++ b/web/src/lib/components/timeline/Timeline.stories.svelte @@ -1,6 +1,5 @@ - + {#snippet template(args)} - - - + {/snippet} diff --git a/web/src/lib/components/timeline/TimelineFollowEvent.stories.svelte b/web/src/lib/components/timeline/TimelineFollowEvent.stories.svelte index ffeed5557..52ea3163c 100644 --- a/web/src/lib/components/timeline/TimelineFollowEvent.stories.svelte +++ b/web/src/lib/components/timeline/TimelineFollowEvent.stories.svelte @@ -1,6 +1,5 @@ - + {#snippet template(args)} - - - + {/snippet} diff --git a/web/src/lib/components/timeline/TimelineRepoEvent.stories.svelte b/web/src/lib/components/timeline/TimelineRepoEvent.stories.svelte index 2f81839e1..bf6a1ffc1 100644 --- a/web/src/lib/components/timeline/TimelineRepoEvent.stories.svelte +++ b/web/src/lib/components/timeline/TimelineRepoEvent.stories.svelte @@ -1,6 +1,5 @@ - + {#snippet template(args)} - - - + {/snippet} - + {#snippet template(args)} - - - + {/snippet} diff --git a/web/src/lib/components/timeline/TimelineStarEvent.stories.svelte b/web/src/lib/components/timeline/TimelineStarEvent.stories.svelte index 8264c5286..248adc085 100644 --- a/web/src/lib/components/timeline/TimelineStarEvent.stories.svelte +++ b/web/src/lib/components/timeline/TimelineStarEvent.stories.svelte @@ -1,6 +1,5 @@ - + {#snippet template(args)} - - - + {/snippet} diff --git a/web/src/lib/components/timeline/TimelineView.stories.svelte b/web/src/lib/components/timeline/TimelineView.stories.svelte index 50c29791d..32b55253e 100644 --- a/web/src/lib/components/timeline/TimelineView.stories.svelte +++ b/web/src/lib/components/timeline/TimelineView.stories.svelte @@ -1,7 +1,5 @@ - -{#snippet template(args: ComponentProps)} - - - -{/snippet} - - + -- 2.51.2