Docs: Add Preact-vite framework docs

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.
+`;

docs/_snippets/preact-vite-add-framework.md

@@ -0,0 +1,19 @@
+```js filename=".storybook/main.js" renderer="preact" language="js"
+export default {
+  // ...
+  // framework: '@storybook/preact-webpack5', 👈 Remove this
+  framework: '@storybook/preact-vite', // 👈 Add this
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="preact" 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;
+```

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;
+```

docs/_snippets/preact-vite-install.md

@@ -0,0 +1,11 @@
+```shell renderer="preact" language="js" packageManager="npm"
+npm install --save-dev @storybook/preact-vite
+```
+
+```shell renderer="preact" language="js" packageManager="pnpm"
+pnpm add --save-dev @storybook/preact-vite
+```
+
+```shell renderer="preact" language="js" packageManager="yarn"
+yarn add --dev @storybook/preact-vite
+```

docs/get-started/frameworks/preact-vite.mdx

@@ -0,0 +1,94 @@
+---
+title: Storybook for Preact & Vite
+sidebar:
+  order: 3
+  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 Preact 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 */}
+
+  ## 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>

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
 ---
 

docs/get-started/frameworks/react-vite.mdx

@@ -1,7 +1,7 @@
 ---
 title: Storybook for React & Vite
 sidebar:
-  order: 3
+  order: 4
   title: React & Vite
 ---
 

docs/get-started/frameworks/react-webpack5.mdx

@@ -1,7 +1,7 @@
 ---
 title: Storybook for React & Webpack
 sidebar:
-  order: 4
+  order: 5
   title: React & Webpack
 ---
 

docs/get-started/frameworks/svelte-vite.mdx

@@ -1,7 +1,7 @@
 ---
 title: Storybook for Svelte & Vite
 sidebar:
-  order: 7
+  order: 8
   title: Svelte & Vite
 ---
 

docs/get-started/frameworks/svelte-webpack5.mdx

@@ -1,7 +1,7 @@
 ---
 title: Storybook for Svelte & Webpack
 sidebar:
-  order: 8
+  order: 9
   title: Svelte & Webpack
 ---
 

docs/get-started/frameworks/sveltekit.mdx

@@ -1,7 +1,7 @@
 ---
 title: Storybook for SvelteKit
 sidebar:
-  order: 6
+  order: 7
   title: SvelteKit
 ---
 

docs/get-started/frameworks/vue3-vite.mdx

@@ -1,7 +1,7 @@
 ---
 title: Storybook for Vue & Vite
 sidebar:
-  order: 9
+  order: 10
   title: Vue & Vite
 ---
 

docs/get-started/frameworks/vue3-webpack5.mdx

@@ -1,7 +1,7 @@
 ---
 title: Storybook for Vue & Webpack
 sidebar:
-  order: 10
+  order: 11
   title: Vue & Webpack
 ---
 

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
 ---
 

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
 ---