chore: implement storybook by jakehwll · Pull Request #932 · coder/vscode-coder

jakehwll · 2026-05-04T15:03:49Z

This PR was modified by Coder Agents on behalf of Jake Howell.

Adds Storybook support for developing and previewing webview components in isolation outside of VS Code. Includes stories for all tasks package components with a dark/light theme switcher that mirrors VS Code CSS custom properties.

Add .storybook/ config with Vite integration, workspace alias resolution, codicon injection, and acquireVsCodeApi mock
Add dark-v2 and light-v2 themes (sourced from vscode-elements/webview-playground) with a toolbar switcher in globalTypes
Add 17 component stories under packages/tasks/src/components/ covering all major UI states
Add test/webview/decorators.tsx with a shared withQueryClient decorator for stories using React Query
Add storybook and build-storybook scripts to root package.json
Add Storybook dependencies to workspace catalog

jakehwll · 2026-05-05T03:57:49Z

/coder-agents-review

jakehwll · 2026-05-05T04:24:54Z

/coder-agents-review

coder-agents-review

Full panel review (14 reviewers). The Storybook infrastructure is well-structured: proper theme attribution, clean workspace alias resolution, and good component coverage breadth. The DEREM-9 fix introduced CI-blocking lint errors and several play functions need attention.

1 P1, 1 P2, 6 P3, 3 Nit. All R1 findings verified fixed.

The panel found coverage gaps worth noting but not blocking: no WithPresets story for CreateTaskSection, no paused-task story for TaskDetailView, and WorkspaceLogs has no play function (static display component). These can be addressed incrementally.

Pariston on the TaskSelection assertion: "It's asserting the symptom of failure as the definition of success. The loading container appears because IPC never responds, not because the task was selected."

🤖 This review was automatically generated with Coder Agents.

jakehwll · 2026-05-05T05:31:57Z

/coder-agents-review

…TasksPanel DEREM-11: TaskList.stories.tsx now passes unique IDs to task() to avoid duplicate React keys. DEREM-17: Replaced the comment on the TaskSelection play function to explicitly document that the loading spinner is the expected terminal state in Storybook (the IPC layer is mocked, so the detail fetch never resolves).

jakehwll · 2026-05-05T07:26:42Z

/coder-agents-review

coder-agents-review

Re-review round (5 reviewers). All R3 findings are resolved except DEREM-14, which was contested by the author and evaluated by the panel.

The panel unanimously (5/5) rejected the defense on DEREM-14. Both premises of the author's argument are factually incorrect: (1) ActionMenu makes no API calls; isOpen is pure useState, no mock needed. (2) The play function contains no loader assertion, contradicting the claim of "checking for the loader." The story is named Opened but never verifies the open state. The fix is one line.

1 P3 re-raised (DEREM-14, panel decision), 1 P3 new (DEREM-23).

Mafuuu: "Both premises of the defense are verifiably false against the current code. The finding remains open."

🤖 This review was automatically generated with Coder Agents.

DEREM-14: Assert .action-menu-dropdown is present after clicking the icon in the Opened story. Without this, removing setIsOpen from onClick would not fail the story. DEREM-23: Add play functions to PromptInput Default and Disabled stories that exercise the Ctrl+Enter keyboard submit path. Default asserts onSubmit is called once; Disabled asserts it is never called.

EhabY · 2026-05-05T09:51:44Z

 		"build": "concurrently -g -n webviews,extension,compile-tests:integration \"pnpm build:webviews\" \"node esbuild.mjs\" \"pnpm compile-tests:integration\"",
 		"build:production": "cross-env NODE_ENV=production pnpm build",
 		"build:webviews": "pnpm -r --filter \"./packages/*\" --parallel build",
+		"build-storybook": "storybook build --config-dir .storybook",


Why not build:storybook for consistency?

EhabY · 2026-05-05T10:10:15Z

+		"@storybook/addon-a11y": "catalog:",
+		"@storybook/addon-essentials": "catalog:",
+		"@storybook/react": "catalog:",
+		"@storybook/react-vite": "catalog:",
+		"@storybook/test": "catalog:",


If these and storybook deps are not used anywhere then I would rather inline this. I'd keep the catalog for unifying versions between packages

EhabY · 2026-05-05T10:15:18Z

@@ -0,0 +1,16 @@
+{


The .storybook directory should be added to .vscodeignore, otherwise we'd package it

# Storybook .storybook/** storybook-static/** **/*.stories.*

Also we seem to be missing the the .gitignore for the build artifacts

EhabY · 2026-05-05T10:16:28Z

@@ -0,0 +1,16 @@
+{
+	"extends": "../tsconfig.json",


I think tsconfig.packages.json is a better fit than the extension tsconfig, or just extend @tsconfig/node22/tsconfig.json and inline what we need

EhabY · 2026-05-05T10:17:51Z

+		"../test/webview/**/*",
+		"../test/mocks/**/*"


Aren't those already checked by the test/tsconfig.ts? I'd rather keep this tsconfig to only the files here

EhabY · 2026-05-05T10:36:06Z

+			const hasTasks = useMemo(
+				() => context.tags.includes("tasks"),
+				[context.tags.join(",")],
+			);


Honestly I'd just inline this without the memo, we should have the react compiler for the tasks package anyway

EhabY · 2026-05-05T10:37:08Z

+			useEffect(() => {
+				if (hasTasks) {
+					// Dynamically import tasks CSS
+					void import("../packages/tasks/src/index.css");


Loading tasks/src/index.css from a global preview decorator means every new package needs its CSS wired in here.

Better to ship a per-package decorator (like withTasksStyles) from the same package as the components and have those stories opt in via decorators: [withTasksStyles]. Keeps preview.ts package-agnostic.

EhabY · 2026-05-05T10:39:09Z

+// Sourced from `vscode-elements/webview-playground`.
+// https://github.com/vscode-elements/webview-playground/blob/f9a6f90413d0cc535839fb92445b7a5eebc540d7/dist/themes/dark-v2.js


To avoid manual refreshes, add a scripts/sync-vscode-themes.mjs that fetches both files from the pinned upstream sha (already in the header comments) and rewrites them in place

I'm not sure if this would work but can we have the script filter vars referenced in our source plus those used by @vscode-elements/elements, which would cut these files by ~85% (though it's only a big change on this branch only)

EhabY · 2026-05-05T10:40:15Z

+ * Use this for components that use React Query hooks (useQuery, useMutation, etc.)
+ */
+export const withQueryClient: Decorator = (Story) => {
+	const clientRef = useRef<QueryClient | null>(null);


How about const [client] = useState(() => new QueryClient(...)) since that is the convention for lazily initializing

EhabY · 2026-05-05T10:57:19Z

+// that rely on it can function without errors.
+if (
+	typeof window !== "undefined" &&
+	!(window as { acquireVsCodeApi?: () => VsCodeApi }).acquireVsCodeApi


The local VsCodeApi duplicates WebviewApi from @types/vscode-webview, we can put it in the same @repo/storybook-utils dev-only package proposed above, which has @types/vscode-webview as a dev dep. preview.ts then becomes import { installMockVsCodeApi } from "@repo/storybook-utils".

EhabY · 2026-05-05T10:58:08Z

Love the change and the story books ❤️

Pls do run the linters and make sure the pipeline passes!

jakehwll added 30 commits May 4, 2026 13:35

feat: implement storybook config

df33940

feat: implement basic stories + theme

d47927c

fix: use fontFamily over font-family

77adc50

fix: resolve codicons

5a1abb8

feat: add Opened variant of <ActionMenu /> story

dc8dc2e

feat: add queryclient helper

1d1fc50

fix: resolve rendering

e1d726c

fix: resolve max-width size

0798669

feat: missing args in <PromptInput />

34dd889

fix: resolve background color

23ae3a2

fix: resolve theme and imports

ea85877

fix: prepend void

b2779b9

fix: resolve story type

7d3b120

fix: add future expansion

7ac9626

fix: document getDefaultFontStack

90768d4

fix: remove unnecessary themes

a0324cb

fix: resolve acquireVsCodeApi

ada1dcb

chore: reusable entities

162bc3a

Merge branch 'main' into jakehwll/implement-storybook

5587a8d

fix: resolve rendering of TasksPanel

9dd27f4

feat: move testHelpers to mock

76a6f3e

fix: move to existing mock helpers

12d7c2b

feat: implement theme switcher

eed89ac

fix: debroaden tsconfig.json

fba820c

fix: improve imports

9def7ca

fix: remove unnecessary satisfies

08d95ac

fix: prefer use of fn()

8861bb5

fix: use fn() not () => fn()

468b87c

fix: move to using fn() (again)

d28e7ae

fix: use import type

5261c61

jakehwll added 2 commits May 5, 2026 13:52

chore: comment feedback

6a825dc

chore: resolve pnpm lock

64b5fc6

This comment was marked as outdated.

Sign in to view

jakehwll added 2 commits May 5, 2026 14:22

feat: <TasksPanel /> stories

5227a74

fix: resolve stories

d08350c

coder-agents-review Bot suggested changes May 5, 2026

View reviewed changes

jakehwll added 9 commits May 5, 2026 15:21

chore: lint fix

a47f0f0

fix: taskspanel ids

af22f0d

fix: resolve test

4672a84

fix: useRef for queryClient

ca614fa

fix: createElement story to preserve side-effects

181a491

fix: remove unused comment

82385b8

fix: dynamically imported tasks css

ea16883

fix: describe sidebar width

6d225a5

fix: rename story

93a3e85

jakehwll requested a review from EhabY May 5, 2026 05:32

jakehwll marked this pull request as ready for review May 5, 2026 05:32

This comment was marked as outdated.

Sign in to view

jakehwll changed the title ~~feat: implement storybook~~ chore: implement storybook May 5, 2026

jakehwll mentioned this pull request May 5, 2026

chore: implement chromatic #933

Draft

coder-agents-review Bot suggested changes May 5, 2026

View reviewed changes

Comment thread packages/tasks/src/components/PromptInput.stories.tsx

EhabY assigned jakehwll May 5, 2026

EhabY reviewed May 5, 2026

View reviewed changes

		// Sourced from `vscode-elements/webview-playground`.
		// https://github.com/vscode-elements/webview-playground/blob/f9a6f90413d0cc535839fb92445b7a5eebc540d7/dist/themes/dark-v2.js

Conversation

jakehwll commented May 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jakehwll commented May 5, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

jakehwll commented May 5, 2026

Uh oh!

coder-agents-review Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jakehwll commented May 5, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

jakehwll commented May 5, 2026

Uh oh!

coder-agents-review Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EhabY commented May 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jakehwll commented May 4, 2026 •

edited

Loading