Docs: Update Storybook docs to differentiate between the Webpack and …

…Vite versions (#10895)

docs/docs/storybook/about.md

@@ -0,0 +1,24 @@
+---
+description: A component-driven development workflow
+---
+
+# Storybook
+
+Storybook enables a kind of frontend-first, component-driven development workflow that we've always wanted.
+By developing your UI components in isolation, you get to focus exclusively on your UI's needs,
+saving you from getting too caught up in the details of your API too early.
+
+Storybook also makes debugging a lot easier.
+You don't have to start the dev server, login as a user, tab through dropdowns, and click buttons just for that one bug to show up.
+Or render a whole page and make six GraphQL calls just to change the color of a modal.
+You can set it all up as a story, tweak it there as you see fit, and even test it for good measure.
+
+RedwoodJS offers two Storybook integrations. The original, which will be removed in an upcoming major, uses Webpack as its bundler.
+It also stores the config files primarily in the `@redwoodjs/testing` package, and allows you to extend this by creating config files in your project.
+The latest integration leverages Storybook's [Framework Packages](https://storybook.js.org/docs/configure/integration/frameworks) and Vite to create a more seamless experience.
+
+For more information on why we created a new Storybook setup, see [the forum post](https://community.redwoodjs.com/t/storybook-in-redwood-is-moving-to-vite/7212).
+
+If you're just getting started with Storybook in RedwoodJS, and you're using Vite, get started with [our Storybook Vite docs](./vite.md)!
+
+If you're using Webpack, or just looking for the older docs, see our [Storybook Webpack docs](./webpack.md).

docs/docs/storybook/vite.md

@@ -0,0 +1,41 @@
+---
+description: Older version of Storybook integration; uses Vite
+---
+
+# Storybook Vite
+
+These docs are for the latest Storybook integration, which uses Vite and stores its config files completely in your project.
+
+If you're just getting started with Storybook in RedwoodJS, or you're looking to upgrade to the latest version, you're in the right place!
+
+## Getting Started with Storybook Vite
+
+You can start Storybook with `yarn rw storybook-vite`:
+
+```
+yarn rw storybook-vite
+```
+
+If this is your first time running Storybook, the Redwood CLI will install it.
+From then on, you can run it straightaway.
+Once Storybook is installed, it'll spin up on port `7910`.
+
+Additionally, if it's your first time running `storybook-vite`, the Redwood CLI will create the following config files for you:
+- `web/.storybook/main.ts`
+  - This is the primary [Storybook configuration file](https://storybook.js.org/docs/configure). Note that it references the brand new framework package, [`storybook-framework-redwoodjs-vite`](https://www.npmjs.com/package/storybook-framework-redwoodjs-vite).
+- `web/.storybook/preview-body.html`
+  - This is required to change the `id` of the root div to `redwood-app`, which is what the entry file used by Vite requires.
+- `web/src/auto-imports.d.ts`
+  - Created by [`unplugin-auto-import`](https://github.com/unplugin/unplugin-auto-import), which is used by the Framework Package [here](https://github.com/redwoodjs/redwood/blob/main/packages/storybook/src/plugins/auto-imports.ts).
+
+Once Storybook is all set up, it'll spin up on port `7910`.
+
+## Migrating from Storybook Webpack to Storybook Vite
+
+If you don't have any of your own [Storybook configuration](https://redwoodjs.com/docs/storybook#configuring-storybook), you should be good to go - no changes needed. The Out of Box experience should be the same, and please [let us know](https://github.com/redwoodjs/redwood/issues/new?assignees=&labels=bug%2Fneeds-info&projects=&template=bug-report.yml&title=%5BBug%3F%5D%3A+) if you run into any issues.
+
+If you do have custom Storybook configuration, then you'll need to manually migrate it over to the new files. For example, if you've got any global decorators, you can now just follow the official Storybook docs on that: https://storybook.js.org/docs/writing-stories/decorators#global-decorators
+
+## Configuring Storybook Vite
+
+To configure Storybook Vite, please follow [the official Storybook docs](https://storybook.js.org/docs/configure).

docs/docs/storybook.md → docs/docs/storybook/webpack.md

@@ -1,19 +1,16 @@
 ---
-description: A component-driven development workflow
+description: Older version of Storybook integration; uses Webpack
 ---
 
-# Storybook
+# Storybook Webpack
 
-Storybook enables a kind of frontend-first, component-driven development workflow that we've always wanted.
-By developing your UI components in isolation, you get to focus exclusively on your UI's needs,
-saving you from getting too caught up in the details of your API too early.
+These docs are for the original Storybook integration, which uses Webpack and stores its config files in the framework.
 
-Storybook also makes debugging a lot easier.
-You don't have to start the dev server, login as a user, tab through dropdowns, and click buttons just for that one bug to show up.
-Or render a whole page and make six GraphQL calls just to change the color of a modal.
-You can set it all up as a story, tweak it there as you see fit, and even test it for good measure.
+> If you're still using this, please consider upgrading to the our latest Storybook integration, which uses Vite. This comes with two primary advantages:
+> - Storybook is now much faster: [Storybook Performance: Vite vs Webpack 4](https://storybook.js.org/blog/storybook-performance-from-webpack-to-vite/)
+> - You get full ownership over your Storybook config!
 
-## Getting Started with Storybook
+## Getting Started with Storybook Webpack
 
 You can start Storybook with `yarn rw storybook`:
 
@@ -25,7 +22,7 @@ If this is your first time running Storybook, the Redwood CLI will install it.
 From then on, you can run it straightaway.
 Once Storybook is installed, it'll spin up on port `7910`.
 
-## Configuring Storybook
+## Configuring Storybook Webpack
 
 You only have to configure Storybook if you want to extend Redwood's default configuration, which handles things like how to find stories, configuring Webpack, starting Mock Service Worker, etc.
 

docs/sidebars.js

@@ -196,7 +196,20 @@ module.exports = {
         'seo-head',
         'serverless-functions',
         'services',
-        'storybook',
+        {
+          type: 'category',
+          label: 'Storybook',
+          link: {
+            type: 'generated-index',
+            title: 'Storybook',
+            slug: 'storybook/index',
+          },
+          items: [
+            { type: 'doc', label: 'About Storybook', id: 'storybook/about' },
+            { type: 'doc', label: 'Webpack', id: 'storybook/webpack' },
+            { type: 'doc', label: 'Vite', id: 'storybook/vite' },
+          ],
+        },
         'studio',
         'testing',
         'toast-notifications',