Docs: Vitest plugin adjustments

docs/_snippets/addon-vitest-set-project-annotations-simple.md

@@ -1,22 +1,29 @@
-```tsx filename=".storybook/vitest.setup.ts" renderer="react" language="ts"
+```ts filename=".storybook/vitest.setup.ts" renderer="react" language="ts"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
 import { setProjectAnnotations } from '@storybook/your-framework';
 import * as previewAnnotations from './preview';
 
 const annotations = setProjectAnnotations([previewAnnotations]);
 ```
 
-```tsx filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts"
+```ts filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import { setProjectAnnotations } from '@storybook/your-framework';
 import * as previewAnnotations from './preview';
 
 const annotations = setProjectAnnotations([previewAnnotations]);
 ```
 
-```tsx filename=".storybook/vitest.setup.ts" renderer="vue" language="ts"
+```ts filename=".storybook/vitest.setup.ts" renderer="vue" language="ts"
 import { setProjectAnnotations } from '@storybook/vue3-vite';
 import * as previewAnnotations from './preview';
 
 const annotations = setProjectAnnotations([previewAnnotations]);
 ```
+
+```ts filename=".storybook/vitest.setup.ts" renderer="web-components" language="ts"
+import { setProjectAnnotations } from '@storybook/web-components-vite';
+import * as previewAnnotations from './preview';
+
+const annotations = setProjectAnnotations([previewAnnotations]);
+```

docs/_snippets/tags-remove-in-story.md

@@ -50,21 +50,6 @@ export const ExperimentalFeatureStory = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
-import { Button } from './Button';
-
-export default {
-  component: Button,
-  // 👇 Applies to all stories in this file
-  tags: ['stable'],
-};
-
-export const ExperimentalFeatureStory = {
-  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
-  tags: ['!stable', 'experimental'],
-};
-```
-
 ```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -103,27 +88,6 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
-// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  // 👇 Applies to all stories in this file
-  tags: ['stable'],
-} satisfies Meta<typeof Button>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ExperimentalFeatureStory: Story = {
-  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
-  tags: ['!stable', 'experimental'],
-};
-```
-
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',

docs/_snippets/vite-includeStorybookNextjsPlugin.md

@@ -1,6 +1,6 @@
 ```ts filename="vitest.config.ts" renderer="react" language="ts"
-import { defineConfig } from "vite";
-import { storybookNextJsPlugin } from '@storybook/nextjs-vite/vite-plugin'
+import { defineConfig } from 'vite';
+import { storybookNextJsPlugin } from '@storybook/nextjs-vite/vite-plugin';
 
 export default defineConfig({
   // only necessary when not using @storybook/addon-vitest, otherwise the plugin is loaded automatically

docs/_snippets/vitest-plugin-vitest-config.md

@@ -1,6 +1,57 @@
-```ts filename="vitest.config.ts" renderer="react"
+```ts filename="vitest.config.ts" renderer="react" tabTitle="Vitest 4"
 import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      // Use `workspace` field in Vitest < 3.2
+      projects: [
+        defineProject({
+          extends: true,
+          plugins: [
+            storybookTest({
+              // The location of your Storybook config, main.js|ts
+              configDir: path.join(dirname, '.storybook'),
+              // This should match your package.json script to run Storybook
+              // The --ci flag will skip prompts and not open a browser
+              storybookScript: 'yarn storybook --ci',
+            }),
+          ],
+          test: {
+            name: 'storybook',
+            // Enable browser mode
+            browser: {
+              enabled: true,
+              // Make sure to install Playwright
+              provider: playwright({}),
+              headless: true,
+              instances: [{ browser: 'chromium' }],
+            },
+            setupFiles: ['./.storybook/vitest.setup.ts'],
+          },
+        }),
+      ],
+    },
+  }),
+);
+```
+
+```ts filename="vitest.config.ts" renderer="react" tabTitle="Vitest 3"
+import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
+
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -44,9 +95,60 @@ export default mergeConfig(
 );
 ```
 
-```ts filename="vitest.config.ts" renderer="vue"
-import { defineConfig, mergeConfig, defineProject } from 'vitest/config';
+```ts filename="vitest.config.ts" renderer="vue" tabTitle="Vitest 4"
+import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      // Use `workspace` field in Vitest < 3.2
+      projects: [
+        defineProject({
+          extends: true,
+          plugins: [
+            storybookTest({
+              // The location of your Storybook config, main.js|ts
+              configDir: path.join(dirname, '.storybook'),
+              // This should match your package.json script to run Storybook
+              // The --ci flag will skip prompts and not open a browser
+              storybookScript: 'yarn storybook --ci',
+            }),
+          ],
+          test: {
+            name: 'storybook',
+            // Enable browser mode
+            browser: {
+              enabled: true,
+              // Make sure to install Playwright
+              provider: playwright({}),
+              headless: true,
+              instances: [{ browser: 'chromium' }],
+            },
+            setupFiles: ['./.storybook/vitest.setup.ts'],
+          },
+        }),
+      ],
+    },
+  }),
+);
+```
+
+```ts filename="vitest.config.ts" renderer="vue" tabTitle="Vitest 3"
+import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
+
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -90,9 +192,157 @@ export default mergeConfig(
 );
 ```
 
-```ts filename="vitest.config.ts" renderer="svelte"
-import { defineConfig, mergeConfig, defineProject } from 'vitest/config';
+```ts filename="vitest.config.ts" renderer="svelte" tabTitle="Vitest 4"
+import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      // Use `workspace` field in Vitest < 3.2
+      projects: [
+        defineProject({
+          extends: true,
+          plugins: [
+            storybookTest({
+              // The location of your Storybook config, main.js|ts
+              configDir: path.join(dirname, '.storybook'),
+              // This should match your package.json script to run Storybook
+              // The --ci flag will skip prompts and not open a browser
+              storybookScript: 'yarn storybook --ci',
+            }),
+          ],
+          test: {
+            name: 'storybook',
+            // Enable browser mode
+            browser: {
+              enabled: true,
+              // Make sure to install Playwright
+              provider: playwright({}),
+              headless: true,
+              instances: [{ browser: 'chromium' }],
+            },
+            setupFiles: ['./.storybook/vitest.setup.ts'],
+          },
+        }),
+      ],
+    },
+  }),
+);
+```
+
+```ts filename="vitest.config.ts" renderer="svelte" tabTitle="Vitest 3"
+import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      // Use `workspace` field in Vitest < 3.2
+      projects: [
+        defineProject({
+          extends: true,
+          plugins: [
+            storybookTest({
+              // The location of your Storybook config, main.js|ts
+              configDir: path.join(dirname, '.storybook'),
+              // This should match your package.json script to run Storybook
+              // The --ci flag will skip prompts and not open a browser
+              storybookScript: 'yarn storybook --ci',
+            }),
+          ],
+          test: {
+            name: 'storybook',
+            // Enable browser mode
+            browser: {
+              enabled: true,
+              // Make sure to install Playwright
+              provider: 'playwright',
+              headless: true,
+              instances: [{ browser: 'chromium' }],
+            },
+            setupFiles: ['./.storybook/vitest.setup.ts'],
+          },
+        }),
+      ],
+    },
+  }),
+);
+```
+
+```ts filename="vitest.config.ts" renderer="web-components" tabTitle="Vitest 4"
+import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+import viteConfig from './vite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      // Use `workspace` field in Vitest < 3.2
+      projects: [
+        defineProject({
+          extends: true,
+          plugins: [
+            storybookTest({
+              // The location of your Storybook config, main.js|ts
+              configDir: path.join(dirname, '.storybook'),
+              // This should match your package.json script to run Storybook
+              // The --ci flag will skip prompts and not open a browser
+              storybookScript: 'yarn storybook --ci',
+            }),
+          ],
+          test: {
+            name: 'storybook',
+            // Enable browser mode
+            browser: {
+              enabled: true,
+              // Make sure to install Playwright
+              provider: playwright({}),
+              headless: true,
+              instances: [{ browser: 'chromium' }],
+            },
+            setupFiles: ['./.storybook/vitest.setup.ts'],
+          },
+        }),
+      ],
+    },
+  }),
+);
+```
+
+```ts filename="vitest.config.ts" renderer="web-components" tabTitle="Vitest 3"
+import { defineConfig, defineProject, mergeConfig } from 'vitest/config';
+
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';