From ffeab7ebc5d89df5f8d5ea074f4599682c9c776a Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 5 Mar 2024 13:42:00 -0700
Subject: [PATCH] Add `web-components-vite` framework doc

---
 code/frameworks/web-components-vite/README.md |   4 +-
 docs/get-started/web-components-vite.md       | 128 ++++++++++++++++++
 .../web-components-vite-add-framework.js.mdx  |   7 +
 .../web-components-vite-add-framework.ts.mdx  |  11 ++
 .../web-components-vite-install.npm.js.mdx    |   3 +
 .../web-components-vite-install.pnpm.js.mdx   |   3 +
 .../web-components-vite-install.yarn.js.mdx   |   3 +
 docs/toc.js                                   |   5 +
 8 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 docs/get-started/web-components-vite.md
 create mode 100644 docs/snippets/web-components/web-components-vite-add-framework.js.mdx
 create mode 100644 docs/snippets/web-components/web-components-vite-add-framework.ts.mdx
 create mode 100644 docs/snippets/web-components/web-components-vite-install.npm.js.mdx
 create mode 100644 docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
 create mode 100644 docs/snippets/web-components/web-components-vite-install.yarn.js.mdx

diff --git a/code/frameworks/web-components-vite/README.md b/code/frameworks/web-components-vite/README.md
index 9c68eca98041..af1a9ffaa853 100644
--- a/code/frameworks/web-components-vite/README.md
+++ b/code/frameworks/web-components-vite/README.md
@@ -1 +1,3 @@
-# Storybook for Web components
+# Storybook for Web components & Vite
+
+See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more.
diff --git a/docs/get-started/web-components-vite.md b/docs/get-started/web-components-vite.md
new file mode 100644
index 000000000000..4ec6de58e464
--- /dev/null
+++ b/docs/get-started/web-components-vite.md
@@ -0,0 +1,128 @@
+---
+title: Storybook for Web components & Vite
+---
+
+export const SUPPORTED_RENDERER = 'web-components';
+
+Storybook for Web components & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/).
+
+<If notRenderer={SUPPORTED_RENDERER}>
+
+<Callout variant="info">
+
+Storybook for Web components & Vite is only supported in [Web components](?renderer=web-components) projects.
+
+</Callout>
+
+<!-- End non-supported renderers -->
+
+</If>
+
+<If renderer={SUPPORTED_RENDERER}>
+
+## Requirements
+
+- Vite ≥ 3.0 (4+ recommended)
+- Storybook ≥ 7.0
+
+## Getting started
+
+### In a project without Storybook
+
+Follow the prompts after running this command in your Web components 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/web-components-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={[
+    'web-components/web-components-vite-install.npm.js.mdx',
+    'web-components/web-components-vite-install.pnpm.js.mdx',
+    'web-components/web-components-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={[
+    'web-components/web-components-vite-add-framework.js.mdx',
+    'web-components/web-components-vite-add-framework.ts.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## API
+
+### Options
+
+You can pass an options object for additional configuration if needed:
+
+```js
+// .storybook/main.js
+import * as path from 'path';
+
+export default {
+  // ...
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+The available options are:
+
+#### `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/web-components/web-components-vite-add-framework.js.mdx b/docs/snippets/web-components/web-components-vite-add-framework.js.mdx
new file mode 100644
index 000000000000..25c7d8e1b51b
--- /dev/null
+++ b/docs/snippets/web-components/web-components-vite-add-framework.js.mdx
@@ -0,0 +1,7 @@
+```js
+// .storybook/main.js
+export default {
+  // ...
+  framework: '@storybook/web-components-vite', // 👈 Add this
+};
+```
diff --git a/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx b/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx
new file mode 100644
index 000000000000..c4eee76aeb56
--- /dev/null
+++ b/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx
@@ -0,0 +1,11 @@
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  // ...
+  framework: '@storybook/web-components-vite', // 👈 Add this
+};
+
+export default config;
+```
diff --git a/docs/snippets/web-components/web-components-vite-install.npm.js.mdx b/docs/snippets/web-components/web-components-vite-install.npm.js.mdx
new file mode 100644
index 000000000000..4472f27ea2a2
--- /dev/null
+++ b/docs/snippets/web-components/web-components-vite-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev @storybook/web-components-vite
+```
diff --git a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
new file mode 100644
index 000000000000..c2fa67cea100
--- /dev/null
+++ b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm install --save-dev @storybook/web-components-vite
+```
diff --git a/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx b/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx
new file mode 100644
index 000000000000..895cf072d24a
--- /dev/null
+++ b/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/web-components-vite
+```
diff --git a/docs/toc.js b/docs/toc.js
index b7ee152fb8c6..60196017eccd 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -28,6 +28,11 @@ module.exports = {
               title: 'Next.js',
               type: 'link',
             },
+            {
+              pathSegment: 'web-components-vite',
+              title: 'Web components & Vite',
+              type: 'link',
+            },
           ],
         },
         {