feat: enabled vite for bundling Storybook

[nickytonline]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Description

Migrates Storybook to using vite for bundling. Some notables:

• Enabling vite for Storybook required version 3 or higher of vite
• There were peer dependency issues, so I enabled legacy-peer-deps in the .npmrc (pretty standard)
• vite requires Storybook stories and the Storybook preview page to have jsx instead of js as an extension.

Take it for a test drive:

1. Grab this PR via e.g. the GitHub CLI, gh co 1473
2. Run npm ci to install new dependencies
3. Run npm run storybook. Storybook loads just like before at http://localhost:6006

Storybook & Webpack

Storybook & Vite

The key metric to look at is the preview time. Webpack still bundles the Storybook manager. So above, and it fluctuates, but with webpack only, the preview time is roughly 8 seconds, and with vite, the preview time is roughly two seconds.

Also, from my work colleague as well, and thanks for reminding me about this @kaelig:

Note that faster "preview time" can be a little misleading in larger projects, because it can take as long or longer to actually display the story in the browser.

The biggest benefit of vite: much quicker refresh times!”.

Related Tickets & Documents

Resolves #1429

Mobile & Desktop Screenshots/Recordings

N/A

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[github-actions]

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Issue Reference

In order to be considered for merging, the pull request description must refer to a specific issue number. This is described in our Contributing Guide.
This check is looking for a phrase similar to: "Fixes #XYZ" or "Resolves #XYZ" where XYZ is the issue number that this PR is meant to address.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

• npm-shrinkwrap.json
• package.json

[github-actions]

Congrats on making your first Pull Request and thanks for taking the time to improve Open Sauced! ❤️! 🎉🍕
Say hello by joining the conversation in our Discord

[0-vortex]

LGTM! 👍

Sorry for the delayed response!

[github-actions]

🎉 This PR is included in version 0.55.0 🎉

The release is available on:

• GitHub release
• ghcr.io container (@latest dist-tag)

Your semantic-release bot 📦🚀