chore: Upgrade Storybook to vite #3622

NicholasBoll · 2025-12-03T23:20:03Z

Summary

Fixes: #3669

Convert Storybook from webpack to vite

Upgrade Storybook from v7 to v8
Upgrade Storybook from webpack to vite
Upgrade from Jest to vitest
Upgrade Cypress from webpack to vite
Upgrade prettier
Upgrade eslint

Release Category

Infrastructure

PR Summary: Tooling Infrastructure Upgrade

🔧 Build & Development Tooling

Storybook: v7 → v8 (Webpack → Vite)

@storybook/react-webpack5 7.6.21 → @storybook/react-vite 8.4.7
@storybook/addon-essentials 7.6.21 → 8.4.7
@storybook/addon-storysource 7.6.21 → 8.4.7
Added @storybook/builder-vite 8.4.7
Removed @storybook/blocks, @storybook/components, @storybook/source-loader
Impact: Faster Storybook builds and HMR with Vite

Test Runner: Jest → Vitest

Removed jest ^29.7.0, jest-environment-jsdom, jest-junit, ts-jest
Added vitest ^4.0.1
Added vite ^7.1.11
@testing-library/jest-dom ^5.16.4 → ^6.6.3
Renamed jest/ folder to test-utils/
Impact: Faster test execution with native ESM support

Cypress: Webpack → Vite

cypress ^14.5.4 → ^15.6.0
cypress-axe ^1.5.0 → ^1.7.0
cypress-real-events ^1.7.1 → ^1.15.0
Removed @cypress/webpack-preprocessor, cypress-plugin-tab, cypress-storybook
cy.tab() replaced with cy.realPress('Tab') throughout
Impact: Faster component test bundling

ESLint: v6 → v9 (Flat Config)

eslint ^6.8.0 → ^9.39.2
@typescript-eslint/parser ^5.60.0 → ^8.51.0
@typescript-eslint/eslint-plugin ^5.60.0 → ^8.51.0
eslint-plugin-react ^7.16.0 → ^7.37.5
eslint-plugin-react-hooks ^4.3.0 → ^7.0.1
eslint-plugin-prettier ^3.1.1 → ^5.5.4
eslint-config-prettier ^6.3.0 → ^10.1.8
Removed eslint-plugin-jest
Migrated from .eslintrc.js to eslint.config.js (flat config)
Impact: Better performance, modern config format

Prettier: v2 → v3

prettier ^2.2.0 → ^3.4.2
Added @trivago/prettier-plugin-sort-imports ^5.2.1
Config moved from .prettierrc.js to .prettierrc.mjs
Impact: Auto-sorted imports, ES module config

📦 Utility Migration to ES Modules

All utility scripts in /utils/ converted from CommonJS to ES modules:

require() → import
module.exports → export
JSON imports use createRequire pattern

⚠️ Breaking Changes for Contributors

Test command: yarn test now runs vitest instead of jest
Lint command: yarn lint uses ESLint 9 flat config (auto-detected)
Cypress tests: Use cy.realPress('Tab') instead of cy.tab()

…plugins

… chore/upgrade-storybook-to-vite # Conflicts: # .nvmrc # modules/docs/lib/MDXElements.tsx # modules/docs/lib/Value.tsx # modules/docs/mdx/14.0-UPGRADE-GUIDE.mdx # modules/styling-transform/package.json # package.json # yarn.lock

NicholasBoll · 2025-12-03T23:37:48Z

cypress/component/Modal.spec.tsx

+          cy.realPress('Tab');
+          cy.focused().should('contain', 'Acknowledge');
+          cy.realPress('Tab');
+          cy.focused().should('contain', 'Cancel');
+          cy.realPress('Tab');


cy.tab doesn't work with something. cy.realPress doesn't return the subject.

NicholasBoll · 2025-12-03T23:39:29Z

cypress/README.md

+      cy.realPress('Tab');
        .should('contain', 'Cancel')
-        .tab()
+        .realPress('Tab');
        .should('contain', 'Delete Item')
-        .tab();
+        .realPress('Tab');


Suggested change

cy.realPress('Tab');

.should('contain', 'Cancel')

.tab()

.realPress('Tab');

.should('contain', 'Delete Item')

.tab();

.realPress('Tab');

cy.realPress('Tab');

cy.focused().should('contain', 'Cancel');

cy.realPress('Tab');

cy.focused().should('contain', 'Delete Item');

cy.realPress('Tab');

modules/docs/docgen/spec/enhancedComponentParser.spec.ts

modules/docs/lib/stackblitzFiles/types/custom-imports.d.ts

mannycarrera4 · 2025-12-03T23:49:09Z

future change: Change storybook files to not re exported the renamed story

mannycarrera4 · 2025-12-03T23:55:15Z

NB: Update cypress specification path for `

modules/react/tooltip/spec/Tooltip.spec.tsx

cypress · 2025-12-04T00:07:30Z

Workday/canvas-kit Run #9982

Run Properties: Passed #9982 • 6013ee62c6 ℹ️: Merge 9e5060ba81c4cbca338fe2f35b505b12103e8905 into 8b8292b4bf50a29c055a3ee4ced5...

Project	`Workday/canvas-kit`
Branch Review	`chore/upgrade-storybook-to-vite`
Run status	`Passed #9982`
Run duration	`02m 22s`
Commit	`6013ee62c6 ℹ️: Merge 9e5060ba81c4cbca338fe2f35b505b12103e8905 into 8b8292b4bf50a29c055a3ee4ced5...`
Committer	`Nicholas Boll`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`19`
Skipped	`0`
Passing	`929`
View all changes introduced in this branch ↗︎

UI Coverage `19.6%`
Untested elements	`1540`
Tested elements	`373`

Accessibility `99.28%`
Failed rules	`6 critical` `5 serious` `0 moderate` `2 minor`
Failed elements	`95`

Co-authored-by: Nicholas Boll <nicholas.boll@gmail.com>

.yarnrc

Copilot

Pull request overview

This PR upgrades Canvas Kit's build infrastructure from Webpack to Vite, Storybook from v7 to v8, and the testing framework from Jest to Vitest. This is a significant modernization effort that impacts configuration files, test files, and the development workflow.

Key Changes:

Upgraded Storybook from v7.6.20 to v8.4.7 with Vite builder
Migrated test framework from Jest to Vitest (v4.0.1)
Upgraded Cypress from v14.5.4 to v15.6.0 with Vite integration
Upgraded Prettier from v2.2.0 to v3.4.2 with import sorting plugin
Converted configuration files from CommonJS to ES modules
Updated all test files to use Vitest APIs instead of Jest

Reviewed changes

Copilot reviewed 242 out of 247 changed files in this pull request and generated 17 comments.

Show a summary per file

File	Description
package.json	Updated dependencies to Storybook v8, Vite v7, Vitest v4, and Prettier v3; added "type": "module"
vite.config.ts	New Vite configuration with alias setup for Canvas Kit packages
vitest.config.ts	New Vitest configuration with jsdom environment and test patterns
vitest.setup.ts	New Vitest setup file replacing jest/setupTests.ts
.storybook/main.ts	Migrated from Webpack to Vite builder with custom plugins for documentation
cypress.config.ts	Updated Cypress to use Vite dev server instead of Webpack
babel.config.js	Simplified to ES module format, removed test-specific configuration
Multiple test files	Converted from Jest (`jest.fn()`) to Vitest (`vi.fn()`) APIs
Multiple MDX files	Added missing `Meta` imports from `@storybook/blocks`
Utility files	Converted from CommonJS (`require`) to ES modules (`import`)

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

modules/react/tooltip/lib/useTooltip.tsx

utils/check-dependencies-exist.js

utils/update-css-package-version.js

utils/check-dependencies-exist.js

Copilot · 2025-12-15T17:52:32Z

modules/preview-react/radio/spec/RadioInput.spec.tsx

@@ -1,9 +1,10 @@
+import {fireEvent, render} from '@testing-library/react';


Unused import fireEvent.

modules/react/avatar/spec/Avatar.spec.tsx

modules/react/tooltip/spec/useTooltip.spec.tsx

NicholasBoll added 4 commits October 23, 2025 20:22

chore: Convert from webpack to vite, convert webpack plugins to vite …

c1919db

…plugins

Get Cypress tests working

eeb55a2

Get all verifications passing

3e53c05

NicholasBoll commented Dec 3, 2025

View reviewed changes

modules/docs/docgen/spec/enhancedComponentParser.spec.ts Outdated Show resolved Hide resolved

NicholasBoll commented Dec 3, 2025

View reviewed changes

modules/docs/lib/stackblitzFiles/types/custom-imports.d.ts Outdated Show resolved Hide resolved

Fix some things

de0cdf7

NicholasBoll commented Dec 4, 2025

View reviewed changes

modules/react/tooltip/spec/Tooltip.spec.tsx Outdated Show resolved Hide resolved

NicholasBoll added 3 commits December 3, 2025 16:40

Fix some things

1e32c76

Fix some things

faf85ea

Update yarn.lock

a908e6a

mannycarrera4 mentioned this pull request Dec 8, 2025

Chore/upgrade to vite stash #3348

Closed

8 tasks

mannycarrera4 and others added 2 commits December 8, 2025 14:18

Update modules/docs/docgen/spec/enhancedComponentParser.spec.ts

ca2f0f0

Co-authored-by: Nicholas Boll <nicholas.boll@gmail.com>

Update modules/react/tooltip/spec/Tooltip.spec.tsx

9d963c6

Co-authored-by: Nicholas Boll <nicholas.boll@gmail.com>

RayRedGoose requested a review from Copilot December 15, 2025 16:48

RayRedGoose reviewed Dec 15, 2025

View reviewed changes

.yarnrc Outdated Show resolved Hide resolved

Copilot started reviewing on behalf of RayRedGoose December 15, 2025 17:17 View session

Copilot AI reviewed Dec 15, 2025

View reviewed changes

manuel.carrera added 6 commits December 29, 2025 14:16

fix: Update yarn format issues

126e571

fix: Update to use type for type props

78a7617

docs: Remove bad merge conflict

83fae09

fix: More clean up

ff501fd

fix: Use latest eslint func

ed4667f

fix: Remove only on test

9e5060b

mannycarrera4 added the ready for review Code is ready for review label Dec 30, 2025

mannycarrera4 added this to Canvas Kit Dec 30, 2025

mannycarrera4 moved this to 👀 In review in Canvas Kit Dec 30, 2025

mannycarrera4 added the 15.x label Dec 30, 2025

fix: Update merge conflicts

af9bc4c

mannycarrera4 added this to the 15.0.0 milestone Jan 5, 2026

		@@ -1,9 +1,10 @@
		import {fireEvent, render} from '@testing-library/react';

chore: Upgrade Storybook to vite #3622

Are you sure you want to change the base?

chore: Upgrade Storybook to vite #3622

Conversation

NicholasBoll commented Dec 3, 2025 • edited by mannycarrera4 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Release Category

Uh oh!

NicholasBoll Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

NicholasBoll Dec 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mannycarrera4 commented Dec 3, 2025

Uh oh!

mannycarrera4 commented Dec 3, 2025

Uh oh!

Uh oh!

cypress bot commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Workday/canvas-kit Run #9982

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

NicholasBoll commented Dec 3, 2025 •

edited by mannycarrera4

Loading

NicholasBoll Dec 3, 2025 •

edited

Loading

cypress bot commented Dec 4, 2025 •

edited

Loading