Add Storybook (Vite) framework package

[arimendelow]

Overview

This PR is the first step to migrating our Storybook integration from relying on Webpack to relying on Vite. Specifically, this PR:

• Adds the Storybook framework package for RedwoodJS.
  • This follows the modern Storybook pattern for providing required configuration for getting Storybook to work with a given framework/metaframework.
  • For comparison, our current Webpack Storybook setup was written before framework packages were a thing, so its architected very differently. See the @redwoodjs/testing package for more information.
  • The eventual goal is for this package to move into the Storybook codebase and be "officially" supported.
  • This package was forked from the react-vite framework package.
• Adds the storybook-vite CLI package, which is based on the existing storybook CLI package. The CLI package does two important things before running the Storybook command:
  • Checks if the necessary project-side config files exist yet, and creates them if they don't.
  • Creates the Mock Service Worker, which is necessary for Cell mocking.

Importantly, the architecture of this (including duplicating files, etc.) is based on the eventual goal of removing the older Storybook integration files.

Proof

This screen recording shows that the following works:

• Router
• Nested cells (waterfall)
• Auth

Details

This framework package is based on the proof of concept of getting Storybook working on RedwoodJS with Vite, which is documented here.

Please see that and official Storybook framework package documentation to understand implementation details.

Outstanding

• The console outputs are a bit noisy, and it seems like it's just noise. Do we want to address/silence this?
• Testing?
• Cleanup?
• Finalize how we want to roll this out. For example:
  • Do we want to add a console message to the current CLI that it'll be removed in a future/next major?
  • How do we want to address the different CLI packages? Some options:
    • Temporarily keep the existing one as yarn redwood storybook, and make the new one yarn redwood storybook-vite.
    • Make the existing one yarn redwood storybook-webpack.
      • I'm concerned that folks will not be aware of this, causing friction.
• Based on the above, write migration guide.
• ???

Trying it out

First step is, of course, pulling down this branch.

I've been testing this with the generated test project. If you want to do that, from the framework repo, first run:

yarn run build:test-project ../for-testing-storybook-vite

Then, over in your project, run yarn rwfw project:tarsync so that the module resolutions point to the ones in this branch.

Then, I think because it hasn't yet been published anywhere, you'll need to manually add the new CLI package (yarn complains about not being able to find the packument when I try to get the CLI package to autoinstall):

yarn add -D @redwoodjs/cli-storybook-vite@7

Then, run:

yarn rw sbv

Your browser should then open to Storybook!

[Tobbe]

Left to do (in this, or separate PR)

• Add to CI by copying existing smoke test and make it run with sbv
• unit test that checks that the new framework files are added during setup
• Add message to yarn rw sb telling the user to switch to sbv
• Write some kind of migration guide for current webpack SB users
  • Do this as a forum post
• Update https://redwoodjs.com/docs/storybook to mention new sbv command
  • Separate page for the Webpack version of SB
  • Another page for the Vite version