feat: upgrade storybook 6.5 -> 9 + vite by pawelgrimm · Pull Request #1038 · Doist/reactist

pawelgrimm · 2026-05-15T20:44:16Z

Short description

Migrates Reactist's Storybook setup from 6.5.x on webpack 4 to Storybook 9.1.20 on the Vite builder.

Switches Storybook scripts to storybook dev and storybook build, with deploy output written to ignored dist/.
Replaces the old .storybook/*.js webpack setup with typed Storybook config using @storybook/react-vite.
Migrates the MDX story files to CSF3 .stories.jsx files plus .mdx docs companions, including restoring the KeyCapturer playground story.
Updates Storybook 9 docs/test imports, MDX docs blocks, and generated story file extensions so Vite parses JSX correctly.
Removes the webpack 4 Storybook/tooling chain and obsolete dependencies, including deprecated Babel proposal plugins/polyfill, Storybook 6-only packages, enzyme/cheerio test leftovers, and @geometricpanda/storybook-addon-badges.
Bumps Storybook-related tooling: storybook/@storybook/* to 9.1.20, Vite to 6.4.2, @vitejs/plugin-react to 5.2.0, Chromatic to 16.10.1, and autoprefixer to 10.5.0.
Adds a types/jest-dom.d.ts shim so the existing Jest DOM v6 matcher types are visible to tsc.
- Will be removed when migrating to storybook v10 + storybook's test runner
Updates the component Plop generator to emit Storybook 9-compatible .stories.tsx files only.
Widens ESLint story-file overrides for Storybook 9 imports and generated story files.
The previous badge addon was removed because it does not have a Storybook 9-compatible version. Existing badge parameters/config no longer render badges until we replace the addon.
- This will be rectified in a follow-up
The Storybook Vite config intentionally does not inject the React Compiler plugin. The Rollup library build still uses the compiler; this PR keeps Storybook on Storybook's own React/Vite integration.

PR Checklist

Updated docs (storybooks, readme)
Reviewed and approved Chromatic visual regression tests in CI

…alled) Runs 8 and 9 upgrade codemods, installs storybook@9, @storybook/react-vite, @vitejs/plugin-react, vite. Removes consolidated 6.x packages (@storybook/jest, testing-library, addon-knobs, addon-postcss, addons). Adjusts .eslintrc to widen story-file overrides and disable import/no-unresolved for storybook subpath exports. Codemod-generated .stories.js files are committed in follow-up commits as they're migrated to .stories.tsx per-component. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- main.ts uses @storybook/react-vite framework - preview.ts uses CSF3 Preview type with named export - manager.ts imports from storybook/manager-api - Delete .storybook/main.js, preview.js, manager.js, webpack.config.js - Rename stories/reactist explainers + KeyCapturer .stories.mdx -> bare .mdx - Set typescript.reactDocgen = false to work around storybook 9.1.20 bug with bundled find-up@7 (ESM) and CJS preset code React Compiler integration via @vitejs/plugin-react is deferred to follow-up; storybook builds run without compiler. The library build (rollup) still runs the compiler. Verify storybook build succeeds (182 indexed entries). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

…mp React 18 + testing-library - Remove webpack 4 chain: webpack, babel-loader, css-loader, style-loader, less-loader, mini-css-extract-plugin, optimize-css-assets-webpack-plugin, raw-loader, svg-url-loader, react-svg-loader, react-docgen-typescript-loader, fork-ts-checker-webpack-plugin, ts-loader - Remove deprecated babel proposal plugins: @babel/polyfill, plugin-proposal-* (class-properties, export-default-from, export-namespace-from, nullish-coalescing-operator, object-rest-spread, optional-chaining, transform-spread), babel-core bridge. Remove '@babel/proposal-object-rest-spread' from babel.config.js plugins (covered by preset-env defaults). - Remove enzyme cluster: enzyme, @wojtekmaj/enzyme-adapter-react-17, @types/enzyme, @types/cheerio, react-test-renderer - Remove accidental 'path' npm package - Bump react, react-dom 17 -> 18.3; react-is 17 -> 18 - Bump @testing-library/react 12 -> 14, user-event 13 -> 14 - Bump chromatic 6 -> 16 - Drop @geometricpanda/storybook-addon-badges (no SB 9-compatible version exists; badge parameters on stories are now ignored). Follow-up: find or replace. - Keep autoprefixer, cssnano (used by postcss.config.js / rollup library build) - Keep marked, @types/marked (used by src/prose/prose-example.ts) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

@ts-expect-error

Stories migrated from .stories.mdx to .stories.js (codemod output) plus .mdx companion docs. Specific fixes: - Notice, password-field: replace hyphenated SVG attrs (fill-rule -> fillRule). - Text-link: add rel="noreferrer" to target="_blank". - Text-area: remove duplicate `rows` argTypes key. - Checkbox-field: extract `IndeterminateExample` render into a named component function so react-hooks/rules-of-hooks accepts the useState. - Modal-stories-components: migrate @storybook/jest + testing-library imports to consolidated `storybook/test`. .eslintrc adjustments: - Widen story-file override to **/*.stories.*, **/*-stories-*.{ts,tsx}, enable browser env, disable no-unused-vars / no-floating-promises / import/no-unresolved for these (story code is dev tooling, not production). - Add storybook-static/** to ignorePatterns. - Narrow override for src/checkbox-field/use-fork-ref.ts, src/tabs/tabs.tsx, src/tooltip/tooltip.tsx (existing .react-compiler.rec.json opt-outs) to silence the new react-hooks@7 React-Compiler-style errors. Pre-existing accepted tech debt, not migration-introduced. Test fixups: - key-capturer.test.tsx: removed unused async from variable-titled `it`. - time.test.tsx, menu.test.tsx: @ts-expect-error annotations on userEvent v14 DirectOptions that dropped clientX/clientY/button. Runtime behavior for these specific tests needs migration to userEvent.pointer (follow-up). - toast.test.tsx: re-mark `it('calls the onDismiss callback', async)` as async (regressed during the await sweep). State after this commit: lint clean, type-check clean, 505 / 564 tests passing (58 remaining failures are real test logic — Ariakit timing, React 18 act() warnings, userEvent.pointer migrations — not blocking the framework migration). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

The codemod's mdx-to-csf transform skipped this file, and my manual .stories.mdx -> .mdx rename dropped the Playground <Story> block. Reconstruct it as KeyCapturer.stories.tsx, point KeyCapturer.mdx at it via <Canvas of=...>. Story count: 182 -> 183 (matches baseline once normalized). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- Rename 15 codemod-generated .stories.js -> .stories.jsx (esbuild default .js loader doesn't parse JSX) - Remove dead `import { BADGE } from '@geometricpanda/storybook-addon-badges'` from checkbox-field.{stories.jsx,mdx} (addon was dropped earlier) - Remove dead `import { withKnobs } from '@storybook/addon-knobs'` from Avatar.stories.tsx; same for `text()` knob in KeyboardShortcut.stories.tsx (replaced with a plain literal split) - Remove unused `import { PartialProps }` from checkbox-field.stories.jsx (PartialProps is type-only — can't import from .jsx) - Rewrite `import { Meta } from '@storybook/addon-docs'` to '@storybook/addon-docs/blocks' in the 4 stories/reactist/*.mdx explainers (SB 9 moved doc blocks to /blocks subpath) - Bump autoprefixer 9 -> 10 (9.x's PostCSS-7 API crashes under SB 9's PostCSS 8) `npm run storybook` and `npm run build:storybook` both succeed. storybook build indexes 183 stories. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

PartialProps is a TS type-only export; .mdx can't import it as a runtime value without 'import type' (and MDX doesn't have that syntax). Was unused in the doc anyway. Removing unblocks the docs page. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

- modal-docs.mdx: rewrite <Controls /> (no `of=`) to <ArgTypes of={Cmp} />. SB 9 requires <Controls /> to be tied to a primary story via <Meta of>, but this file is unattached docs intended to show prop tables for Modal, ModalHeader, ModalBody, ModalFooter, ModalActions, ModalCloseButton — <ArgTypes of={Cmp} /> is the right block for that. - stories/components/KeyCapturer.mdx: wrap `${Key}` in backticks so MDX 3 doesn't try to evaluate it as a JSX expression (was: ReferenceError: Key is not defined). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

doistbot

This PR successfully tackles a significant upgrade by migrating Reactist's Storybook setup to version 9 with Vite, overhauling our MDX components and configuration in the process. Moving to a modern, Vite-powered architecture greatly improves our documentation environment's build performance and aligns the project with current ecosystem standards. There are a few adjustments needed to finalize the migration, including using a dedicated Storybook output directory instead of the library's dist/ folder, restoring essential addons and docgen configurations to ensure the UI controls and prop tables render correctly, and cleaning up some ESLint test file overrides, outdated block imports, and dead code left over from the MDX transition.

_{Share Feedback • Review Logs}

doistbot · 2026-05-19T18:09:18Z

+
+<Meta of={ButtonStories} />
+
+export function Icon() {


[P3] This function (along with LoadingButton, FullWidthTemplate, PlaygroundTemplate, and DarkModeTemplate) appears to be dead code left over from the MDX migration. They are defined both here and in button.stories.jsx, but they are no longer rendered in this MDX file since the stories are now imported via <Story of={...} />. Consider removing them from this and other MDX files to clean up.

Implemented in f6d0fa1: removed the duplicate helper/template definitions from the MDX docs now that those stories are rendered from the adjacent CSF files.

## [31.1.0](v31.0.0...v31.1.0) (2026-05-19) ### Features * upgrade storybook 6.5 -> 9 + vite ([#1038](#1038)) ([c125cdd](c125cdd))

doist-release-bot · 2026-05-19T19:41:43Z

🎉 This PR is included in version 31.1.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

pawelgrimm and others added 9 commits May 19, 2026 11:58

test: include jest-dom matcher types

ac4fb93

pawelgrimm force-pushed the pawel/feat/upgrade-storybook branch from 10b24d4 to ac4fb93 Compare May 19, 2026 17:00

pawelgrimm added 2 commits May 19, 2026 12:36

chore(storybook): deploy pages from dist

d786829

fix(storybook): render modal stories in preview root

f0e9729

pawelgrimm marked this pull request as ready for review May 19, 2026 18:00

pawelgrimm requested review from a team and gnapse and removed request for a team May 19, 2026 18:00

pawelgrimm self-assigned this May 19, 2026

pawelgrimm added the 👀 Show PR Used for PRs that need a review, but can be merged when CI is green. label May 19, 2026

doistbot reviewed May 19, 2026

View reviewed changes

pawelgrimm added 8 commits May 19, 2026 13:43

chore(storybook): configure pages output and docgen

35da1d3

docs(storybook): clean up MDX story docs

f6d0fa1

chore(storybook): tighten story lint and type imports

3eab898

fix(storybook): load base styles in preview

941a711

fix(styles): expose actionable theme tokens

d7d2880

fix(storybook): provide initial story args

59335df

fix(storybook): restore text link nested spacing

1013616

fix(styles): define missing custom properties

5620674

pawelgrimm merged commit c125cdd into main May 19, 2026
10 checks passed

pawelgrimm deleted the pawel/feat/upgrade-storybook branch May 19, 2026 19:39

doist-release-bot Bot pushed a commit that referenced this pull request May 19, 2026

chore(release): 31.1.0 [skip ci]

f2ebe94

## [31.1.0](v31.0.0...v31.1.0) (2026-05-19) ### Features * upgrade storybook 6.5 -> 9 + vite ([#1038](#1038)) ([c125cdd](c125cdd))

doist-release-bot Bot added the Released PRs that have been merged and released label May 19, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: upgrade storybook 6.5 -> 9 + vite#1038

feat: upgrade storybook 6.5 -> 9 + vite#1038
pawelgrimm merged 19 commits into
mainfrom
pawel/feat/upgrade-storybook

pawelgrimm commented May 15, 2026 •

edited

Loading

Uh oh!

doistbot left a comment

Uh oh!

Uh oh!

doistbot May 19, 2026

Uh oh!

pawelgrimm May 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

doist-release-bot Bot commented May 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

Short description

PR Checklist

Uh oh!

doistbot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

doistbot May 19, 2026

Choose a reason for hiding this comment

Uh oh!

pawelgrimm May 19, 2026

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!

doist-release-bot Bot commented May 19, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

pawelgrimm commented May 15, 2026 •

edited

Loading