From d88c49b9748cfc5005c3ea7199663f2475bf1c36 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Thu, 16 Jan 2025 11:27:57 +0800
Subject: [PATCH 1/2] Docs: Add Preact-vite framework docs

---
 docs/_snippets/preact-vite-add-framework.md   |  19 ++++
 .../preact-vite-framework-options.md          |  25 +++++
 docs/_snippets/preact-vite-install.md         |  11 ++
 docs/get-started/frameworks/preact-vite.mdx   | 102 ++++++++++++++++++
 4 files changed, 157 insertions(+)
 create mode 100644 docs/_snippets/preact-vite-add-framework.md
 create mode 100644 docs/_snippets/preact-vite-framework-options.md
 create mode 100644 docs/_snippets/preact-vite-install.md
 create mode 100644 docs/get-started/frameworks/preact-vite.mdx

diff --git a/docs/_snippets/preact-vite-add-framework.md b/docs/_snippets/preact-vite-add-framework.md
new file mode 100644
index 00000000000..897b51a6d78
--- /dev/null
+++ b/docs/_snippets/preact-vite-add-framework.md
@@ -0,0 +1,19 @@
+```js filename=".storybook/main.js" renderer="react" language="js"
+export default {
+  // ...
+  // framework: '@storybook/preact-webpack5', 👈 Remove this
+  framework: '@storybook/preact-vite', // 👈 Add this
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts"
+import { StorybookConfig } from '@storybook/preact-vite';
+
+const config: StorybookConfig = {
+  // ...
+  // framework: '@storybook/preact-webpack5', 👈 Remove this
+  framework: '@storybook/preact-vite', // 👈 Add this
+};
+
+export default config;
+```
diff --git a/docs/_snippets/preact-vite-framework-options.md b/docs/_snippets/preact-vite-framework-options.md
new file mode 100644
index 00000000000..87e6f6d802c
--- /dev/null
+++ b/docs/_snippets/preact-vite-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="preact" language="js"
+export default {
+  framework: {
+    name: '@storybook/preact-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="preact" language="ts"
+import type { StorybookConfig } from '@storybook/preact-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/preact-vite',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/preact-vite-install.md b/docs/_snippets/preact-vite-install.md
new file mode 100644
index 00000000000..78adadde933
--- /dev/null
+++ b/docs/_snippets/preact-vite-install.md
@@ -0,0 +1,11 @@
+```shell renderer="react" language="js" packageManager="npm"
+npm install --save-dev @storybook/preact-vite
+```
+
+```shell renderer="react" language="js" packageManager="pnpm"
+pnpm add --save-dev @storybook/preact-vite
+```
+
+```shell renderer="react" language="js" packageManager="yarn"
+yarn add --dev @storybook/preact-vite
+```
diff --git a/docs/get-started/frameworks/preact-vite.mdx b/docs/get-started/frameworks/preact-vite.mdx
new file mode 100644
index 00000000000..25d62ceac5f
--- /dev/null
+++ b/docs/get-started/frameworks/preact-vite.mdx
@@ -0,0 +1,102 @@
+---
+title: Storybook for Preact & Vite
+sidebar:
+  order: 13
+  title: Preact & Vite
+---
+
+Storybook for Preact & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Preact](https://preactjs.com/) applications built with [Vite](https://vitejs.dev/). It includes:
+
+* 🏎️ Pre-bundled for performance
+* 🪄 Zero config
+* 💫 and more!
+
+<If notRenderer="Preact">
+  <Callout variant="info">
+    Storybook for Preact & Vite is only supported in [Preact](?renderer=preact) projects.
+  </Callout>
+
+  {/* End non-supported renderers */}
+</If>
+
+<If renderer="preact">
+  ## Requirements
+
+  * Preact 8.x || 10.x
+  * Vite ≥ 4.0
+  * Storybook ≥ 8.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 path="init-command.md" />
+
+  {/* prettier-ignore-end */}
+
+  [More on getting started with Storybook.](../install.mdx)
+
+  ### 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 path="storybook-upgrade.md" />
+
+  {/* prettier-ignore-end */}
+
+  #### Automatic migration
+
+  When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/preact-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 path="preact-vite-install.md" />
+
+  {/* prettier-ignore-end */}
+
+  Then, update your `.storybook/main.js|ts` to change the framework property:
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="preact-vite-add-framework.md" />
+
+  {/* prettier-ignore-end */}
+
+  ## Run the Setup Wizard
+
+  If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../../essentials/controls.mdx).
+
+  ![Storybook onboarding](../../_assets/get-started/example-onboarding-wizard.png)
+
+  If you skipped the wizard, you can always run it again by adding the `?path=/onboarding` query parameter to the URL of your Storybook instance, provided that the example stories are still available.
+
+  ## API
+
+  ### Options
+
+  You can pass an options object for additional configuration if needed:
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="preact-vite-framework-options.md" />
+
+  {/* prettier-ignore-end */}
+
+  #### `builder`
+
+  Type: `Record<string, any>`
+
+  Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
+  
+  {/* End supported renderers */}
+</If>

From 0217bf9837a06ded4b8c6bcc0099f921eb12ba37 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Fri, 31 Jan 2025 17:39:23 +0000
Subject: [PATCH 2/2] Minor adjustments

---
 code/frameworks/preact-vite/README.md         | 49 ++-----------------
 docs/_snippets/preact-vite-add-framework.md   |  4 +-
 docs/_snippets/preact-vite-install.md         |  6 +--
 docs/get-started/frameworks/preact-vite.mdx   | 14 ++----
 .../frameworks/react-native-web-vite.mdx      |  2 +-
 docs/get-started/frameworks/react-vite.mdx    |  2 +-
 .../get-started/frameworks/react-webpack5.mdx |  2 +-
 docs/get-started/frameworks/svelte-vite.mdx   |  2 +-
 .../frameworks/svelte-webpack5.mdx            |  2 +-
 docs/get-started/frameworks/sveltekit.mdx     |  2 +-
 docs/get-started/frameworks/vue3-vite.mdx     |  2 +-
 docs/get-started/frameworks/vue3-webpack5.mdx |  2 +-
 .../frameworks/web-components-vite.mdx        |  2 +-
 .../frameworks/web-components-webpack5.mdx    |  2 +-
 14 files changed, 21 insertions(+), 72 deletions(-)

diff --git a/code/frameworks/preact-vite/README.md b/code/frameworks/preact-vite/README.md
index 16451b320e0..ce6ad2a786e 100644
--- a/code/frameworks/preact-vite/README.md
+++ b/code/frameworks/preact-vite/README.md
@@ -1,47 +1,4 @@
-# Storybook for Preact <!-- omit in toc -->
+# Storybook for Preact & Vite
 
-## Requirements
-
-- [Preact](https://preactjs.com/) >= 10.x
-- [Storybook](https://storybook.js.org/) >= 7.x
-
-## Getting Started
-
-### In a project without Storybook
-
-Follow the prompts after running this command in your Preact project's root directory:
-
-```bash
-npx storybook@latest init
-```
-
-[More on getting started with Storybook](https://storybook.js.org/docs/get-started/install?renderer=preact)
-
-### 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:
-
-```bash
-npx storybook@latest upgrade
-```
-
-#### Manual migration
-
-Install the framework:
-
-```bash
-yarn add --dev @storybook/preact-vite
-```
-
-Update your `main.js` to change the framework property:
-
-```js
-// .storybook/main.js
-export default {
-  // ...
-  framework: {
-    name: '@storybook/preact-vite', // <- Change this
-    options: {},
-  },
-};
-```
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/preact-vite?renderer=preact) for installation instructions, usage examples, APIs, and more.
+`;
diff --git a/docs/_snippets/preact-vite-add-framework.md b/docs/_snippets/preact-vite-add-framework.md
index 897b51a6d78..e6412b3b298 100644
--- a/docs/_snippets/preact-vite-add-framework.md
+++ b/docs/_snippets/preact-vite-add-framework.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="react" language="js"
+```js filename=".storybook/main.js" renderer="preact" language="js"
 export default {
   // ...
   // framework: '@storybook/preact-webpack5', 👈 Remove this
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="react" language="ts"
+```ts filename=".storybook/main.ts" renderer="preact" language="ts"
 import { StorybookConfig } from '@storybook/preact-vite';
 
 const config: StorybookConfig = {
diff --git a/docs/_snippets/preact-vite-install.md b/docs/_snippets/preact-vite-install.md
index 78adadde933..48bdfdefa99 100644
--- a/docs/_snippets/preact-vite-install.md
+++ b/docs/_snippets/preact-vite-install.md
@@ -1,11 +1,11 @@
-```shell renderer="react" language="js" packageManager="npm"
+```shell renderer="preact" language="js" packageManager="npm"
 npm install --save-dev @storybook/preact-vite
 ```
 
-```shell renderer="react" language="js" packageManager="pnpm"
+```shell renderer="preact" language="js" packageManager="pnpm"
 pnpm add --save-dev @storybook/preact-vite
 ```
 
-```shell renderer="react" language="js" packageManager="yarn"
+```shell renderer="preact" language="js" packageManager="yarn"
 yarn add --dev @storybook/preact-vite
 ```
diff --git a/docs/get-started/frameworks/preact-vite.mdx b/docs/get-started/frameworks/preact-vite.mdx
index 25d62ceac5f..0d356a0ae84 100644
--- a/docs/get-started/frameworks/preact-vite.mdx
+++ b/docs/get-started/frameworks/preact-vite.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for Preact & Vite
 sidebar:
-  order: 13
+  order: 3
   title: Preact & Vite
 ---
 
@@ -11,7 +11,7 @@ Storybook for Preact & Vite is a [framework](../../contribute/framework.mdx) tha
 * 🪄 Zero config
 * 💫 and more!
 
-<If notRenderer="Preact">
+<If notRenderer="preact">
   <Callout variant="info">
     Storybook for Preact & Vite is only supported in [Preact](?renderer=preact) projects.
   </Callout>
@@ -30,7 +30,7 @@ Storybook for Preact & Vite is a [framework](../../contribute/framework.mdx) tha
 
   ### In a project without Storybook
 
-  Follow the prompts after running this command in your React project's root directory:
+  Follow the prompts after running this command in your Preact project's root directory:
 
   {/* prettier-ignore-start */}
 
@@ -72,14 +72,6 @@ Storybook for Preact & Vite is a [framework](../../contribute/framework.mdx) tha
 
   {/* prettier-ignore-end */}
 
-  ## Run the Setup Wizard
-
-  If all goes well, you should see a setup wizard that will help you get started with Storybook introducing you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../../essentials/controls.mdx).
-
-  ![Storybook onboarding](../../_assets/get-started/example-onboarding-wizard.png)
-
-  If you skipped the wizard, you can always run it again by adding the `?path=/onboarding` query parameter to the URL of your Storybook instance, provided that the example stories are still available.
-
   ## API
 
   ### Options
diff --git a/docs/get-started/frameworks/react-native-web-vite.mdx b/docs/get-started/frameworks/react-native-web-vite.mdx
index 19324dda5c4..5469d589d37 100644
--- a/docs/get-started/frameworks/react-native-web-vite.mdx
+++ b/docs/get-started/frameworks/react-native-web-vite.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for React Native Web
 sidebar:
-  order: 5
+  order: 6
   title: React Native Web
 ---
 
diff --git a/docs/get-started/frameworks/react-vite.mdx b/docs/get-started/frameworks/react-vite.mdx
index d2de31b5b32..2fe56efdccb 100644
--- a/docs/get-started/frameworks/react-vite.mdx
+++ b/docs/get-started/frameworks/react-vite.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for React & Vite
 sidebar:
-  order: 3
+  order: 4
   title: React & Vite
 ---
 
diff --git a/docs/get-started/frameworks/react-webpack5.mdx b/docs/get-started/frameworks/react-webpack5.mdx
index 7aef5014ee8..124d09766b4 100644
--- a/docs/get-started/frameworks/react-webpack5.mdx
+++ b/docs/get-started/frameworks/react-webpack5.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for React & Webpack
 sidebar:
-  order: 4
+  order: 5
   title: React & Webpack
 ---
 
diff --git a/docs/get-started/frameworks/svelte-vite.mdx b/docs/get-started/frameworks/svelte-vite.mdx
index 984688bbfc2..4d0ea1ebd00 100644
--- a/docs/get-started/frameworks/svelte-vite.mdx
+++ b/docs/get-started/frameworks/svelte-vite.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for Svelte & Vite
 sidebar:
-  order: 7
+  order: 8
   title: Svelte & Vite
 ---
 
diff --git a/docs/get-started/frameworks/svelte-webpack5.mdx b/docs/get-started/frameworks/svelte-webpack5.mdx
index 142eeac1ccd..6e3e15ad1c7 100644
--- a/docs/get-started/frameworks/svelte-webpack5.mdx
+++ b/docs/get-started/frameworks/svelte-webpack5.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for Svelte & Webpack
 sidebar:
-  order: 8
+  order: 9
   title: Svelte & Webpack
 ---
 
diff --git a/docs/get-started/frameworks/sveltekit.mdx b/docs/get-started/frameworks/sveltekit.mdx
index 55210871bb0..5421e00733d 100644
--- a/docs/get-started/frameworks/sveltekit.mdx
+++ b/docs/get-started/frameworks/sveltekit.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for SvelteKit
 sidebar:
-  order: 6
+  order: 7
   title: SvelteKit
 ---
 
diff --git a/docs/get-started/frameworks/vue3-vite.mdx b/docs/get-started/frameworks/vue3-vite.mdx
index 18a557057cb..9b5d28ae805 100644
--- a/docs/get-started/frameworks/vue3-vite.mdx
+++ b/docs/get-started/frameworks/vue3-vite.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for Vue & Vite
 sidebar:
-  order: 9
+  order: 10
   title: Vue & Vite
 ---
 
diff --git a/docs/get-started/frameworks/vue3-webpack5.mdx b/docs/get-started/frameworks/vue3-webpack5.mdx
index 52dfc675795..60771cd4190 100644
--- a/docs/get-started/frameworks/vue3-webpack5.mdx
+++ b/docs/get-started/frameworks/vue3-webpack5.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for Vue & Webpack
 sidebar:
-  order: 10
+  order: 11
   title: Vue & Webpack
 ---
 
diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index a902b103c8b..22bd68bf078 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for Web components & Vite
 sidebar:
-  order: 11
+  order: 12
   title: Web components & Vite
 ---
 
diff --git a/docs/get-started/frameworks/web-components-webpack5.mdx b/docs/get-started/frameworks/web-components-webpack5.mdx
index 0777cadf806..820ebeb2f29 100644
--- a/docs/get-started/frameworks/web-components-webpack5.mdx
+++ b/docs/get-started/frameworks/web-components-webpack5.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for Web components & Webpack
 sidebar:
-  order: 12
+  order: 13
   title: Web components & Webpack
 ---