carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://carbon-for-ibm-products.netlify.app/
Apache License 2.0
83 stars 117 forks source link

build(storybook): update from webpack to vite to build storybook #4987

Closed matthewgallo closed 2 weeks ago

matthewgallo commented 3 weeks ago

Closes #4986 Closes #4946

This PR moves our storybook builds from webpack to vite. This includes significant performance improvements for both startup times and build times.

Moving to vite required renaming all story files to use .jsx and appending ?inline to the imported style file for each story that has one (this is the only way to include a default import of a style file in vite, see here for more details).

We were able to remove several babel and webpack packages from packages/core/package.json with this change. Another part that is included in this PR is removing the storybook-carbon-addon-theme. It's been replaced with a similar approach to Carbon, theme can be changed from top toolbar.

What did you change?

Storybook config files Renamed all story files from .stories.js to .stories.jsx

How did you test and verify your work?

Verified that running storybook locally works and storybook can also be built as expected (yarn storybook:build).

Storybook startup after move to vite ~1 sec Screenshot 2024-04-26 at 10 50 11 AM

netlify[bot] commented 3 weeks ago

Deploy Preview for carbon-for-ibm-products ready!

Name Link
Latest commit 29080a418ed0c4bb28a4c85f0af41b638a6900f0
Latest deploy log https://app.netlify.com/sites/carbon-for-ibm-products/deploys/6638d6572dae6300082e9d5f
Deploy Preview https://deploy-preview-4987--carbon-for-ibm-products.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.