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

…ime code

… loading Move per-package CSS injection from a runtime decorator inside src/ to a storybook.preview.ts entry point at the package root. Stories no longer need to import or apply the decorator manually.

…orybook # Conflicts: # pnpm-lock.yaml # pnpm-workspace.yaml

jakehwll · 2026-05-08T03:58:45Z

tasks-actionmenu--opened, the loading item is not aligned with the others:

Not going to fix just yet, will wait for this branch to merge to tightly scope and follow up 🙂

tasks-errorbanner--default, should we align the view logs to the right?

Not going to fix just yet, will wait for this branch to merge to tightly scope and follow up 🙂

tasks-statepanel--error, the retry here is not a button while it is a button in the error state. Was this intentional or a storybook styling issue 🤔?

Hmm, fair enough. I've imported both those components to the story 🙂

The status indicators are not applying the right styles it seems, like this is just a pure square:

Looks like the display: inline was zorping these. I've added a wrapper decorator for it now!

tasks-tasklist--default could mix and match other states and descriptions IMO for better coverage

Good idea!

This is the "Task Selection" test but I do not see it selecting a task (or inside a selected task):

Oops, I think I nuked this by accident.

EhabY

There are a few follow ups in the chromatic one but this one is good!

Wire eslint-plugin-storybook into the eslint config using the flat/recommended preset. Disable storybook/no-renderer-packages since @storybook/react-vite at v8 doesn't re-export Meta/StoryObj.

- Use declare global Window augmentation for acquireVsCodeApi mock instead of manual type casts - Remove getDefaultFontStack() — themes already provide --vscode-font-family via CSS custom properties - Add .storybook typecheck as 4th concurrent run in typecheck script

@storybook

- Update all @storybook packages from ^8.6.18 to ^10.3.6 - Consolidate @storybook/test into storybook/test (v10 subpath) - Remove @storybook/addon-essentials (built into core in v10) - Remove direct @storybook/react dep (use @storybook/react-vite) - Add @storybook/addon-docs as explicit addon - Restore catalog: references in package.json (automigration hardcoded) - Update storybook-utils to import Decorator from @storybook/react-vite - Remove stale storybook/no-renderer-packages eslint disable

- Remove dead args: {} from NotSupportedState story - Lift shared task data to module scope in TasksPanel stories - Lift shared log entries to meta.args in AgentChatHistory stories

ActionMenu Opened relied on vscode-icon custom element registration which fails in Chromatic's headless browser. TaskSelection depended on IPC-driven navigation that cannot resolve in isolation. Both stories remain as visual-only snapshots.

The upstream vscode-elements theme data does not include --vscode-font-family because VS Code injects it at runtime. Without it, global.css falls back to the browser default serif font, causing every Chromatic snapshot to diff.

EhabY

All good again, looks great!

…orybook

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

EhabY reviewed May 6, 2026

View reviewed changes

jakehwll added 3 commits May 7, 2026 06:18

chore: restrict @repo/mocks and @repo/storybook-utils imports in runt…

5eb5368

…ime code

chore: move storybook dependencies back to catalog

7070606

fix: set font stack as CSS variable instead of inline fontFamily

b0ec3f2

jakehwll force-pushed the jakehwll/implement-storybook branch from b650dcc to b0ec3f2 Compare May 8, 2026 02:13

jakehwll added 3 commits May 8, 2026 02:17

refactor: replace withTasksStyles decorator with import.meta.glob CSS…

7023245

… loading Move per-package CSS injection from a runtime decorator inside src/ to a storybook.preview.ts entry point at the package root. Stories no longer need to import or apply the decorator manually.

chore: add sync-vscode-themes script to fetch upstream theme files

9ca1df6

Merge remote-tracking branch 'origin/main' into jakehwll/implement-st…

8232451

…orybook # Conflicts: # pnpm-lock.yaml # pnpm-workspace.yaml

jakehwll requested a review from EhabY May 8, 2026 03:58

jakehwll added 4 commits May 8, 2026 14:49

fix: upgrade stories to match more inline with their used variants

15b5352

feat: resolving rendering of <StatusIndicator /> story

b426e00

feat: extend <TaskList /> story state

0dfc4ce

feat: return possibly flakey test

f6f2f7d

EhabY approved these changes May 8, 2026

View reviewed changes

Comment thread scripts/sync-vscode-themes.mjs

jakehwll added 10 commits May 11, 2026 14:11

fix: parallelise sync-vscode-themes.mjs

7519653

fix: include storybook.preview.ts in tsconfig.json

0f87859

fix: resolve lint

d984dfa

fix: async lint fix

3d96d18

fix: reorganise imports

b2a01e3

chore: add eslint-plugin-storybook with flat/recommended rules

d709c81

Wire eslint-plugin-storybook into the eslint config using the flat/recommended preset. Disable storybook/no-renderer-packages since @storybook/react-vite at v8 doesn't re-export Meta/StoryObj.

address remaining review feedback

d04f325

- Remove dead args: {} from NotSupportedState story - Lift shared task data to module scope in TasksPanel stories - Lift shared log entries to meta.args in AgentChatHistory stories

jakehwll force-pushed the jakehwll/implement-storybook branch from f98c65a to 62bb158 Compare May 11, 2026 09:04

set --vscode-font-family in storybook theme decorator

32dd1bf

The upstream vscode-elements theme data does not include --vscode-font-family because VS Code injects it at runtime. Without it, global.css falls back to the browser default serif font, causing every Chromatic snapshot to diff.

jakehwll force-pushed the jakehwll/implement-storybook branch from f76e3b5 to 32dd1bf Compare May 11, 2026 09:10

EhabY approved these changes May 11, 2026

View reviewed changes

Comment thread eslint.config.mjs Outdated

Comment thread .gitignore Outdated

Merge remote-tracking branch 'origin/main' into jakehwll/implement-st…

1fdb668

…orybook

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: implement storybook#932

chore: implement storybook#932
jakehwll wants to merge 99 commits into
mainfrom
jakehwll/implement-storybook

jakehwll commented May 4, 2026 •

edited

Loading

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 8, 2026

Uh oh!

EhabY left a comment

Uh oh!

Uh oh!

EhabY left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

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 8, 2026

Uh oh!

EhabY left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

EhabY left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jakehwll commented May 4, 2026 •

edited

Loading