Problem
Storybook is pinned to v6.4.22 (2022-era), running on @storybook/builder-webpack4 under the hood. .storybook/main.js uses the old config shape (framework: "@storybook/react" as a bare string, addons as a plain string array) that v7+ replaced with an object form. A clean npm ci today pulls 1607 packages with 120 reported vulnerabilities (22 low / 42 moderate / 46 high / 10 critical), almost entirely from this old webpack4-era dependency tree.
Proposed change
Upgrade to Storybook 8:
- Run
npx storybook@latest upgrade to get the automated codemods where they apply.
- Migrate
.storybook/main.js → main.ts with the object-form framework: { name: "@storybook/react-webpack5", options: {} }.
- Update
.storybook/preview.js / preview-head.html for any v7/v8 preview API changes.
- Bump
@storybook/addon-essentials, @storybook/addon-links, @storybook/addon-interactions, @storybook/testing-library to their v8-compatible versions.
- Verify all 16 existing
*.stories.tsx files still render (CSF2/3 format is largely compatible, but confirm no MDX v1-only syntax is in use — none of the current stories are .stories.mdx, so this should be low-risk).
- Re-run
npm audit after, to confirm the vulnerability count actually drops (that's the secondary win here, not just the version bump).
Scope note
This is a toolchain migration (webpack4 → 5 builder, addon API changes, config format), not a routine bump — plan it as its own branch/PR, not a drive-by dependency update. The story-level migration surface is small (16 files), which is what keeps this from being a multi-week project, but budget real time for the builder/config swap itself.
Out of scope
- Bumping the
react/react-dom devDependencies off 17 — only touch if Storybook 8 actually requires it to run; don't fold in an unrelated React bump.
- CI wiring for a Storybook build check — tracked in the CI build/typecheck gate issue; this issue is just the upgrade itself.
Acceptance criteria
Problem
Storybook is pinned to v6.4.22 (2022-era), running on
@storybook/builder-webpack4under the hood..storybook/main.jsuses the old config shape (framework: "@storybook/react"as a bare string, addons as a plain string array) that v7+ replaced with an object form. A cleannpm citoday pulls 1607 packages with 120 reported vulnerabilities (22 low / 42 moderate / 46 high / 10 critical), almost entirely from this old webpack4-era dependency tree.Proposed change
Upgrade to Storybook 8:
npx storybook@latest upgradeto get the automated codemods where they apply..storybook/main.js→main.tswith the object-formframework: { name: "@storybook/react-webpack5", options: {} }..storybook/preview.js/preview-head.htmlfor any v7/v8 preview API changes.@storybook/addon-essentials,@storybook/addon-links,@storybook/addon-interactions,@storybook/testing-libraryto their v8-compatible versions.*.stories.tsxfiles still render (CSF2/3 format is largely compatible, but confirm no MDX v1-only syntax is in use — none of the current stories are.stories.mdx, so this should be low-risk).npm auditafter, to confirm the vulnerability count actually drops (that's the secondary win here, not just the version bump).Scope note
This is a toolchain migration (webpack4 → 5 builder, addon API changes, config format), not a routine bump — plan it as its own branch/PR, not a drive-by dependency update. The story-level migration surface is small (16 files), which is what keeps this from being a multi-week project, but budget real time for the builder/config swap itself.
Out of scope
react/react-domdevDependencies off 17 — only touch if Storybook 8 actually requires it to run; don't fold in an unrelated React bump.Acceptance criteria
npm run storybookruns on Storybook 8 with no console errors.npm run build-storybooksucceeds and produces a static build.npm auditvulnerability count is measurably lower than the current 120.