From 3bcaf82836a0d8c94a8dda0f105870303c8dd409 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Thu, 29 Feb 2024 10:32:34 -0700
Subject: [PATCH] Add react-vite framework doc

---
 code/frameworks/react-vite/README.md          |   4 +-
 docs/get-started/react-vite.md                | 132 ++++++++++++++++++
 .../react/react-vite-add-framework.js.mdx     |   8 ++
 .../react/react-vite-add-framework.ts.mdx     |  12 ++
 .../react/react-vite-install.npm.js.mdx       |   3 +
 .../react/react-vite-install.pnpm.js.mdx      |   3 +
 .../react/react-vite-install.yarn.js.mdx      |   3 +
 docs/toc.js                                   |   5 +
 8 files changed, 169 insertions(+), 1 deletion(-)
 create mode 100644 docs/get-started/react-vite.md
 create mode 100644 docs/snippets/react/react-vite-add-framework.js.mdx
 create mode 100644 docs/snippets/react/react-vite-add-framework.ts.mdx
 create mode 100644 docs/snippets/react/react-vite-install.npm.js.mdx
 create mode 100644 docs/snippets/react/react-vite-install.pnpm.js.mdx
 create mode 100644 docs/snippets/react/react-vite-install.yarn.js.mdx

diff --git a/code/frameworks/react-vite/README.md b/code/frameworks/react-vite/README.md
index e8a35450aec9..272f8f50d55f 100644
--- a/code/frameworks/react-vite/README.md
+++ b/code/frameworks/react-vite/README.md
@@ -1 +1,3 @@
-# Storybook for React
+# Storybook for React & Vite
+
+See [documentation](https://storybook.js.org/docs/8.0/get-started/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more.
\ No newline at end of file
diff --git a/docs/get-started/react-vite.md b/docs/get-started/react-vite.md
new file mode 100644
index 000000000000..ddf5e132a448
--- /dev/null
+++ b/docs/get-started/react-vite.md
@@ -0,0 +1,132 @@
+---
+title: Storybook for React & Vite
+---
+
+export const SUPPORTED_RENDERER = 'react';
+
+Storybook for React & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Vite](https://vitejs.dev/). It includes:
+
+- 🏎️ Pre-bundled for performance
+- 🪄 Zero config
+- 💫 and more!
+
+<If notRenderer={SUPPORTED_RENDERER}>
+
+<Callout variant="info">
+
+Storybook for React & Vite is only supported in [React](?renderer=react) projects.
+
+</Callout>
+
+<!-- End non-supported renderers -->
+
+</If>
+
+<If renderer={SUPPORTED_RENDERER}>
+
+## Requirements
+
+- React ≥ 16.8
+- Vite ≥ 3.0 (4.X recommended)
+- Storybook ≥ 7.0
+
+## Getting started
+
+### In a project without Storybook
+
+Follow the prompts after running this command in your React project's root directory:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'common/init-command.npx.js.mdx',
+   'common/init-command.yarn.js.mdx',
+   'common/init-command.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+[More on getting started with Storybook.](./install.md)
+
+### In a project with Storybook
+
+This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-upgrade.npm.js.mdx',
+    'common/storybook-upgrade.pnpm.js.mdx',
+    'common/storybook-upgrade.yarn.js.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+#### Automatic migration
+
+When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/react-vite`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
+
+#### Manual migration
+
+First, install the framework:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/react-vite-install.npm.js.mdx',
+    'react/react-vite-install.pnpm.js.mdx',
+    'react/react-vite-install.yarn.js.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Then, update your `.storybook/main.js|ts` to change the framework property:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/react-vite-add-framework.js.mdx',
+    'react/react-vite-add-framework.ts.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## API
+
+### Options
+
+You can pass an options object for additional configuration if needed:
+
+```ts
+// .storybook/main.ts
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
+
+#### `builder`
+
+Type: `Record<string, any>`
+
+Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md).
+
+<!-- End supported renderers -->
+
+</If>
diff --git a/docs/snippets/react/react-vite-add-framework.js.mdx b/docs/snippets/react/react-vite-add-framework.js.mdx
new file mode 100644
index 000000000000..7a268b5768f0
--- /dev/null
+++ b/docs/snippets/react/react-vite-add-framework.js.mdx
@@ -0,0 +1,8 @@
+```js
+// .storybook/main.js
+export default {
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/react-vite', // 👈 Add this
+};
+```
diff --git a/docs/snippets/react/react-vite-add-framework.ts.mdx b/docs/snippets/react/react-vite-add-framework.ts.mdx
new file mode 100644
index 000000000000..c407f12cc0a7
--- /dev/null
+++ b/docs/snippets/react/react-vite-add-framework.ts.mdx
@@ -0,0 +1,12 @@
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  // ...
+  // framework: '@storybook/react-webpack5', 👈 Remove this
+  framework: '@storybook/react-vite', // 👈 Add this
+};
+
+export default config;
+```
diff --git a/docs/snippets/react/react-vite-install.npm.js.mdx b/docs/snippets/react/react-vite-install.npm.js.mdx
new file mode 100644
index 000000000000..6a9b052c19bb
--- /dev/null
+++ b/docs/snippets/react/react-vite-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev @storybook/react-vite
+```
diff --git a/docs/snippets/react/react-vite-install.pnpm.js.mdx b/docs/snippets/react/react-vite-install.pnpm.js.mdx
new file mode 100644
index 000000000000..10b128bb0b31
--- /dev/null
+++ b/docs/snippets/react/react-vite-install.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm install --save-dev @storybook/react-vite
+```
diff --git a/docs/snippets/react/react-vite-install.yarn.js.mdx b/docs/snippets/react/react-vite-install.yarn.js.mdx
new file mode 100644
index 000000000000..a566adef61ba
--- /dev/null
+++ b/docs/snippets/react/react-vite-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/react-vite
+```
diff --git a/docs/toc.js b/docs/toc.js
index b7ee152fb8c6..6f2cd46508d0 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -28,6 +28,11 @@ module.exports = {
               title: 'Next.js',
               type: 'link',
             },
+            {
+              pathSegment: 'react-vite',
+              title: 'React & Vite',
+              type: 'link',
+            },
           ],
         },
         {