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)}
-
-
-
+
{/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)}
-
- {/each}
-
-
+
+ {#each [{ label: "Bordered", bordered: true, insetShadow: true }, { label: "Borderless", bordered: false, insetShadow: true }] as look (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}
-
-
+