From c621fdc80605aa386a561b3d90cfa19be9091d5e Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Sat, 15 Jun 2024 00:26:13 +0200
Subject: [PATCH 01/39] Svelte: Fix events not being logged in Actions when a
 story has decorators

---
 .../src/components/PreviewRender.svelte       | 20 ++++++----
 .../src/components/SlotDecorator.svelte       | 40 ++++++++++++++-----
 code/renderers/svelte/src/decorators.ts       |  3 +-
 code/renderers/svelte/src/render.ts           |  2 -
 4 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/code/renderers/svelte/src/components/PreviewRender.svelte b/code/renderers/svelte/src/components/PreviewRender.svelte
index af881443b651..446a8c0eed6d 100644
--- a/code/renderers/svelte/src/components/PreviewRender.svelte
+++ b/code/renderers/svelte/src/components/PreviewRender.svelte
@@ -1,8 +1,12 @@
+<script context="module">
+  export const ARG_TYPES_CONTEXT_KEY = 'storybook/argTypes';
+</script>
+
 <script>
+  import { setContext } from 'svelte';
   import SlotDecorator from './SlotDecorator.svelte';
   import { dedent } from 'ts-dedent';
 
-  export let svelteVersion;
   export let name;
   export let title;
   export let storyFn;
@@ -16,6 +20,8 @@
     props = {},
     /** @type {{[string]: () => {}}} Attach svelte event handlers */
     on,
+    /** @type {boolean} whether this level of the decorator chain is the last, ie. the actual story */
+    isOriginalStory,
   } = storyFn();
 
   let firstTime = true;
@@ -30,19 +36,17 @@
         Component,
         props,
         on,
+        isOriginalStory,
       };
     }
     return storyFn();
   }
 
   // reactive, re-render on storyFn change
-  $: ({ Component, props = {}, on } = getStoryFnValue(storyFn));
+  $: ({ Component, props = {}, on, isOriginalStory } = getStoryFnValue(storyFn));
 
-  const eventsFromArgTypes = Object.fromEntries(
-    Object.entries(storyContext.argTypes)
-      .filter(([k, v]) => v.action && props[k] != null)
-      .map(([k, v]) => [v.action, props[k]])
-  );
+  // set the argTypes context, read by the last SlotDecorator that renders the original story
+  setContext(ARG_TYPES_CONTEXT_KEY, storyContext.argTypes);
 
   if (!Component) {
     showError({
@@ -56,4 +60,4 @@
   }
 </script>
 
-<SlotDecorator {svelteVersion} {Component} {props} on={{ ...eventsFromArgTypes, ...on }} />
+<SlotDecorator {Component} {props} {on} {isOriginalStory} />
diff --git a/code/renderers/svelte/src/components/SlotDecorator.svelte b/code/renderers/svelte/src/components/SlotDecorator.svelte
index cf5849113a25..c69a75036d57 100644
--- a/code/renderers/svelte/src/components/SlotDecorator.svelte
+++ b/code/renderers/svelte/src/components/SlotDecorator.svelte
@@ -1,23 +1,43 @@
 <script>
-  import { onMount } from 'svelte';
+  import { onMount, getContext } from 'svelte';
+  import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
+  import { ARG_TYPES_CONTEXT_KEY } from './PreviewRender.svelte';
 
-  export let svelteVersion;
   export let decorator = undefined;
   export let Component;
   export let props = {};
   export let on = undefined;
-  
+  export let isOriginalStory = false;
+
   let instance;
   let decoratorInstance;
-  
-  if (on && svelteVersion < 5) {
+
+  const IS_SVELTE_V4 = Number(SVELTE_VERSION[0]) <= 4;
+
+  /*
+    Svelte Docgen will create argTypes for events with the name 'event_eventName'
+    The Actions addon will convert these to args because they are type: 'action'
+    We need to filter these args out so they are not passed to the component
+  */
+  let propsWithoutDocgenEvents;
+  $: propsWithoutDocgenEvents = isOriginalStory
+    ? Object.fromEntries(Object.entries(props).filter(([key]) => !key.startsWith('event_')))
+    : { ...props };
+
+  if (isOriginalStory && IS_SVELTE_V4) {
+    const argTypes = getContext(ARG_TYPES_CONTEXT_KEY) ?? {};
+    const eventsFromArgTypes = Object.fromEntries(
+      Object.entries(argTypes)
+        .filter(([key, value]) => value.action && props[key] != null)
+        .map(([key, value]) => [value.action, props[key]])
+    );
     // Attach Svelte event listeners in Svelte v4
     // In Svelte v5 this is not possible anymore as instances are no longer classes with $on() properties, so it will be a no-op
     onMount(() => {
-      Object.entries(on).forEach(([eventName, eventCallback]) => {
-        // instance can be undefined if a decorator doesn't have <slot/>
+      Object.entries({ ...eventsFromArgTypes, ...on }).forEach(([eventName, eventCallback]) => {
+        // instance can be undefined if a decorator doesn't have a <slot/>
         const inst = instance ?? decoratorInstance;
-        inst?.$on?.(eventName, eventCallback)
+        inst?.$on?.(eventName, eventCallback);
       });
     });
   }
@@ -25,8 +45,8 @@
 
 {#if decorator}
   <svelte:component this={decorator.Component} {...decorator.props} bind:this={decoratorInstance}>
-    <svelte:component this={Component} {...props} bind:this={instance} />
+    <svelte:component this={Component} {...propsWithoutDocgenEvents} bind:this={instance} />
   </svelte:component>
 {:else}
-  <svelte:component this={Component} {...props} bind:this={instance} />
+  <svelte:component this={Component} {...propsWithoutDocgenEvents} bind:this={instance} />
 {/if}
diff --git a/code/renderers/svelte/src/decorators.ts b/code/renderers/svelte/src/decorators.ts
index 657fa91ff28e..65638c07aef7 100644
--- a/code/renderers/svelte/src/decorators.ts
+++ b/code/renderers/svelte/src/decorators.ts
@@ -69,7 +69,8 @@ function prepareStory(
     };
   }
 
-  return preparedStory;
+  // no innerStory means this is the last story in the decorator chain, ie. the original story
+  return { ...preparedStory, isOriginalStory: true };
 }
 
 export function decorateStory(storyFn: any, decorators: any[]) {
diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts
index 0ea4a86e9800..2219e21b3760 100644
--- a/code/renderers/svelte/src/render.ts
+++ b/code/renderers/svelte/src/render.ts
@@ -77,7 +77,6 @@ function renderToCanvasV4(
     const mountedComponent = new PreviewRender({
       target: canvasElement,
       props: {
-        svelteVersion: 4,
         storyFn,
         storyContext,
         name,
@@ -149,7 +148,6 @@ function renderToCanvasV5(
       name,
       title,
       showError,
-      svelteVersion: 5,
     });
     const mountedComponent = svelte.mount(PreviewRender, {
       target: canvasElement,

From f2901ccb8eae4ae034d003cbf57573464d51836b Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Wed, 26 Jun 2024 21:51:20 +0200
Subject: [PATCH 02/39] pass argTypes directly to SlotDecorator

---
 .../svelte/src/components/PreviewRender.svelte  | 17 +++++------------
 .../svelte/src/components/SlotDecorator.svelte  | 14 ++++++--------
 code/renderers/svelte/src/decorators.ts         |  4 ++--
 3 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/code/renderers/svelte/src/components/PreviewRender.svelte b/code/renderers/svelte/src/components/PreviewRender.svelte
index 446a8c0eed6d..3a3ef4ad5801 100644
--- a/code/renderers/svelte/src/components/PreviewRender.svelte
+++ b/code/renderers/svelte/src/components/PreviewRender.svelte
@@ -1,9 +1,4 @@
-<script context="module">
-  export const ARG_TYPES_CONTEXT_KEY = 'storybook/argTypes';
-</script>
-
 <script>
-  import { setContext } from 'svelte';
   import SlotDecorator from './SlotDecorator.svelte';
   import { dedent } from 'ts-dedent';
 
@@ -20,8 +15,8 @@
     props = {},
     /** @type {{[string]: () => {}}} Attach svelte event handlers */
     on,
-    /** @type {boolean} whether this level of the decorator chain is the last, ie. the actual story */
-    isOriginalStory,
+    /** @type {any} whether this level of the decorator chain is the last, ie. the actual story */
+    argTypes,
   } = storyFn();
 
   let firstTime = true;
@@ -36,18 +31,16 @@
         Component,
         props,
         on,
-        isOriginalStory,
+        argTypes,
       };
     }
     return storyFn();
   }
 
   // reactive, re-render on storyFn change
-  $: ({ Component, props = {}, on, isOriginalStory } = getStoryFnValue(storyFn));
+  $: ({ Component, props = {}, on, argTypes } = getStoryFnValue(storyFn));
 
   // set the argTypes context, read by the last SlotDecorator that renders the original story
-  setContext(ARG_TYPES_CONTEXT_KEY, storyContext.argTypes);
-
   if (!Component) {
     showError({
       title: `Expecting a Svelte component from the story: "${name}" of "${title}".`,
@@ -60,4 +53,4 @@
   }
 </script>
 
-<SlotDecorator {Component} {props} {on} {isOriginalStory} />
+<SlotDecorator {Component} {props} {on} {argTypes} />
diff --git a/code/renderers/svelte/src/components/SlotDecorator.svelte b/code/renderers/svelte/src/components/SlotDecorator.svelte
index c69a75036d57..4b4329537f5d 100644
--- a/code/renderers/svelte/src/components/SlotDecorator.svelte
+++ b/code/renderers/svelte/src/components/SlotDecorator.svelte
@@ -1,13 +1,12 @@
 <script>
-  import { onMount, getContext } from 'svelte';
+  import { onMount } from 'svelte';
   import { VERSION as SVELTE_VERSION } from 'svelte/compiler';
-  import { ARG_TYPES_CONTEXT_KEY } from './PreviewRender.svelte';
 
   export let decorator = undefined;
   export let Component;
   export let props = {};
   export let on = undefined;
-  export let isOriginalStory = false;
+  export let argTypes = undefined;
 
   let instance;
   let decoratorInstance;
@@ -20,12 +19,11 @@
     We need to filter these args out so they are not passed to the component
   */
   let propsWithoutDocgenEvents;
-  $: propsWithoutDocgenEvents = isOriginalStory
-    ? Object.fromEntries(Object.entries(props).filter(([key]) => !key.startsWith('event_')))
-    : { ...props };
+  $: propsWithoutDocgenEvents = Object.fromEntries(
+    Object.entries(props).filter(([key]) => !key.startsWith('event_'))
+  );
 
-  if (isOriginalStory && IS_SVELTE_V4) {
-    const argTypes = getContext(ARG_TYPES_CONTEXT_KEY) ?? {};
+  if (argTypes && IS_SVELTE_V4) {
     const eventsFromArgTypes = Object.fromEntries(
       Object.entries(argTypes)
         .filter(([key, value]) => value.action && props[key] != null)
diff --git a/code/renderers/svelte/src/decorators.ts b/code/renderers/svelte/src/decorators.ts
index 65638c07aef7..2280d2a90316 100644
--- a/code/renderers/svelte/src/decorators.ts
+++ b/code/renderers/svelte/src/decorators.ts
@@ -69,8 +69,8 @@ function prepareStory(
     };
   }
 
-  // no innerStory means this is the last story in the decorator chain, ie. the original story
-  return { ...preparedStory, isOriginalStory: true };
+  // no innerStory means this is the last story in the decorator chain, so it should create events from argTypes
+  return { ...preparedStory, argTypes: context.argTypes };
 }
 
 export function decorateStory(storyFn: any, decorators: any[]) {

From 07881572584363e311938b610d42dc537d7e4770 Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Sun, 14 Jul 2024 12:18:12 +0200
Subject: [PATCH 03/39] feat: make PackageJson optional for starting a dev
 server

---
 code/core/src/core-server/build-dev.ts        | 36 +++++++++++++------
 .../utils/warnWhenUsingArgTypesRegex.ts       | 15 ++++----
 code/core/src/types/modules/core-common.ts    |  2 +-
 3 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/code/core/src/core-server/build-dev.ts b/code/core/src/core-server/build-dev.ts
index f1c8cd8468c1..eaa1ced60cbd 100644
--- a/code/core/src/core-server/build-dev.ts
+++ b/code/core/src/core-server/build-dev.ts
@@ -1,5 +1,6 @@
 import type { BuilderOptions, CLIOptions, LoadOptions, Options } from '@storybook/core/types';
 import {
+  getConfigInfo,
   getProjectRoot,
   loadAllPresets,
   loadMainConfig,
@@ -7,6 +8,7 @@ import {
   resolvePathInStorybookCache,
   serverResolve,
   validateFrameworkName,
+  versions,
 } from '@storybook/core/common';
 import prompts from 'prompts';
 import invariant from 'tiny-invariant';
@@ -29,18 +31,33 @@ import { warnWhenUsingArgTypesRegex } from './utils/warnWhenUsingArgTypesRegex';
 import { buildOrThrow } from './utils/build-or-throw';
 
 export async function buildDevStandalone(
-  options: CLIOptions & LoadOptions & BuilderOptions
+  options: CLIOptions &
+    LoadOptions &
+    BuilderOptions & {
+      storybookVersion?: string;
+      previewConfigPath?: string;
+    }
 ): Promise<{ port: number; address: string; networkAddress: string }> {
   const { packageJson, versionUpdates } = options;
-  invariant(
-    packageJson.version !== undefined,
-    `Expected package.json#version to be defined in the "${packageJson.name}" package}`
-  );
+  let { storybookVersion, previewConfigPath } = options;
+  const configDir = resolve(options.configDir);
+  if (packageJson) {
+    invariant(
+      packageJson.version !== undefined,
+      `Expected package.json#version to be defined in the "${packageJson.name}" package}`
+    );
+    storybookVersion = packageJson.version;
+    previewConfigPath = getConfigInfo(packageJson, configDir).previewConfig;
+  } else {
+    if (!storybookVersion) {
+      storybookVersion = versions.storybook;
+    }
+  }
   // updateInfo are cached, so this is typically pretty fast
   const [port, versionCheck] = await Promise.all([
     getServerPort(options.port, { exactPort: options.exactPort }),
     versionUpdates
-      ? updateCheck(packageJson.version)
+      ? updateCheck(storybookVersion)
       : Promise.resolve({ success: false, cached: false, data: {}, time: Date.now() }),
   ]);
 
@@ -57,7 +74,6 @@ export async function buildDevStandalone(
   }
 
   const rootDir = getProjectRoot();
-  const configDir = resolve(options.configDir);
   const cacheKey = oneWayHash(relative(rootDir, configDir));
 
   const cacheOutputDir = resolvePathInStorybookCache('public', cacheKey);
@@ -89,13 +105,13 @@ export async function buildDevStandalone(
   frameworkName = frameworkName || 'custom';
 
   try {
-    await warnOnIncompatibleAddons(packageJson.version);
+    await warnOnIncompatibleAddons(storybookVersion);
   } catch (e) {
     console.warn('Storybook failed to check addon compatibility', e);
   }
 
   try {
-    await warnWhenUsingArgTypesRegex(packageJson, configDir, config);
+    await warnWhenUsingArgTypesRegex(previewConfigPath, config);
   } catch (e) {}
 
   // Load first pass: We need to determine the builder
@@ -221,7 +237,7 @@ export async function buildDevStandalone(
     if (!options.quiet) {
       outputStartupInformation({
         updateInfo: versionCheck,
-        version: packageJson.version,
+        version: storybookVersion,
         name,
         address,
         networkAddress,
diff --git a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
index c4ab825e51a0..ecb4950ccea1 100644
--- a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
+++ b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
@@ -1,5 +1,4 @@
-import type { PackageJson, StorybookConfig } from '@storybook/core/types';
-import { getConfigInfo } from '@storybook/core/common';
+import type { StorybookConfig } from '@storybook/core/types';
 import { readFile } from 'fs-extra';
 import * as babel from '@babel/core';
 import type { BabelFile } from '@babel/core';
@@ -8,12 +7,10 @@ import { dedent } from 'ts-dedent';
 import chalk from 'chalk';
 
 export async function warnWhenUsingArgTypesRegex(
-  packageJson: PackageJson,
-  configDir: string,
+  previewConfigPath: string | undefined,
   config: StorybookConfig
 ) {
-  const { previewConfig } = getConfigInfo(packageJson, configDir);
-  const previewContent = previewConfig ? await readFile(previewConfig, 'utf8') : '';
+  const previewContent = previewConfigPath ? await readFile(previewConfigPath, 'utf8') : '';
 
   const hasVisualTestAddon =
     config?.addons?.some((it) =>
@@ -22,10 +19,10 @@ export async function warnWhenUsingArgTypesRegex(
         : it.name === '@chromatic-com/storybook'
     ) ?? false;
 
-  if (hasVisualTestAddon && previewConfig && previewContent.includes('argTypesRegex')) {
+  if (hasVisualTestAddon && previewConfigPath && previewContent.includes('argTypesRegex')) {
     // @ts-expect-error File is not yet exposed, see https://github.com/babel/babel/issues/11350#issuecomment-644118606
     const file: BabelFile = new babel.File(
-      { filename: previewConfig },
+      { filename: previewConfigPath },
       { code: previewContent, ast: babelParse(previewContent) }
     );
 
@@ -37,7 +34,7 @@ export async function warnWhenUsingArgTypesRegex(
               'actions.argTypesRegex'
             )} together with the visual test addon:
             
-            ${path.buildCodeFrameError(previewConfig).message}
+            ${path.buildCodeFrameError(previewConfigPath).message}
             
             We recommend removing the ${chalk.cyan(
               'argTypesRegex'
diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts
index d994449a2e72..0cf3ec59bc44 100644
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@@ -153,7 +153,7 @@ export type PackageJson = PackageJsonFromTypeFest & Record<string, any>;
 // TODO: This could be exported to the outside world and used in `options.ts` file of each `@storybook/APP`
 // like it's described in docs/api/new-frameworks.md
 export interface LoadOptions {
-  packageJson: PackageJson;
+  packageJson?: PackageJson;
   outputDir?: string;
   configDir?: string;
   cacheKey?: string;

From 52e56ba1f6a87460755e66964cb1f556d711f94f Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 2 Aug 2024 23:24:01 +0200
Subject: [PATCH 04/39] Update code/core/src/core-server/build-dev.ts

Co-authored-by: Olga Bulat <obulat@gmail.com>
---
 code/core/src/core-server/build-dev.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/core/src/core-server/build-dev.ts b/code/core/src/core-server/build-dev.ts
index eaa1ced60cbd..407afa370dc9 100644
--- a/code/core/src/core-server/build-dev.ts
+++ b/code/core/src/core-server/build-dev.ts
@@ -47,7 +47,7 @@ export async function buildDevStandalone(
       `Expected package.json#version to be defined in the "${packageJson.name}" package}`
     );
     storybookVersion = packageJson.version;
-    previewConfigPath = getConfigInfo(packageJson, configDir).previewConfig;
+    previewConfigPath = getConfigInfo(packageJson, configDir).previewConfig ?? undefined;
   } else {
     if (!storybookVersion) {
       storybookVersion = versions.storybook;

From f4f0364d3a0873e1ecf6edb23b48b41a2e16832b Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Tue, 13 Aug 2024 10:45:17 +0200
Subject: [PATCH 05/39] fix import

---
 code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
index 3043ed4d6292..207e762ede60 100644
--- a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
+++ b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
@@ -1,5 +1,4 @@
 import type { StorybookConfig } from '@storybook/core/types';
-import { readFile } from 'fs-extra';
 
 import { babelParse } from '@storybook/core/csf-tools';
 

From 9d9b04c163031618d266cacd6f5209d98858c32a Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 14 Aug 2024 13:42:57 +0200
Subject: [PATCH 06/39] fixes

---
 .../src/preview/iframe-webpack.config.ts      |   2 +-
 .../src/core-server/presets/common-preset.ts  |   2 +-
 .../src/routing/app-router-provider.tsx       |   1 +
 .../src/helpers/processCraConfig.ts           |   2 +-
 code/yarn.lock                                | 348 +-----------------
 5 files changed, 7 insertions(+), 348 deletions(-)

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index 461a36aec648..ea8b55d4973c 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -165,7 +165,7 @@ export default async (
         inject: false,
         template,
         templateParameters: {
-          version: packageJson.version,
+          version: packageJson?.version,
           globals: {
             CONFIG_TYPE: configType,
             LOGLEVEL: logLevel,
diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts
index c1b8ca68f88a..75a6d1246479 100644
--- a/code/core/src/core-server/presets/common-preset.ts
+++ b/code/core/src/core-server/presets/common-preset.ts
@@ -141,7 +141,7 @@ export const babel = async (_: unknown, options: Options) => {
 };
 
 export const title = (previous: string, options: Options) =>
-  previous || options.packageJson.name || false;
+  previous || options.packageJson?.name || false;
 
 export const logLevel = (previous: any, options: Options) => previous || options.loglevel || 'info';
 
diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx
index 5685ec8bbf85..9f37f5768e15 100644
--- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx
+++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx
@@ -101,6 +101,7 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
                   childNodes: new Map(),
                   tree,
                   url: pathname,
+                  loading: null,
                 }}
               >
                 {children}
diff --git a/code/presets/create-react-app/src/helpers/processCraConfig.ts b/code/presets/create-react-app/src/helpers/processCraConfig.ts
index dacf03d469ac..befed8f44805 100644
--- a/code/presets/create-react-app/src/helpers/processCraConfig.ts
+++ b/code/presets/create-react-app/src/helpers/processCraConfig.ts
@@ -37,7 +37,7 @@ export const processCraConfig = async (
    *
    * See: https://github.com/storybookjs/storybook/pull/9157
    */
-  const storybookVersion = semver.coerce(options.packageJson.version) || '';
+  const storybookVersion = semver.coerce(options.packageJson?.version) || '';
   const isStorybook530 = semver.gte(storybookVersion, '5.3.0');
   const babelOptions = await options.presets.apply('babel');
 
diff --git a/code/yarn.lock b/code/yarn.lock
index 2aa5193261ef..e0bdf07ca5ca 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -2459,15 +2459,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/runtime@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "@emnapi/runtime@npm:1.1.1"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/c11ee57abf0ec643e64ccdace4b4fcc0b0c7b1117a191f969e84ae3669841aa90d2c17fa35b73f5a66fc0c843c8caca7bf11187faaeaa526bcfb7dbfb9b85de9
-  languageName: node
-  linkType: hard
-
 "@emnapi/runtime@npm:^1.1.1":
   version: 1.2.0
   resolution: "@emnapi/runtime@npm:1.2.0"
@@ -3390,18 +3381,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-darwin-arm64@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-darwin-arm64@npm:0.33.3"
-  dependencies:
-    "@img/sharp-libvips-darwin-arm64": "npm:1.0.2"
-  dependenciesMeta:
-    "@img/sharp-libvips-darwin-arm64":
-      optional: true
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@img/sharp-darwin-arm64@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-darwin-arm64@npm:0.33.4"
@@ -3414,18 +3393,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-darwin-x64@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-darwin-x64@npm:0.33.3"
-  dependencies:
-    "@img/sharp-libvips-darwin-x64": "npm:1.0.2"
-  dependenciesMeta:
-    "@img/sharp-libvips-darwin-x64":
-      optional: true
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@img/sharp-darwin-x64@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-darwin-x64@npm:0.33.4"
@@ -3494,18 +3461,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-arm64@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-linux-arm64@npm:0.33.3"
-  dependencies:
-    "@img/sharp-libvips-linux-arm64": "npm:1.0.2"
-  dependenciesMeta:
-    "@img/sharp-libvips-linux-arm64":
-      optional: true
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linux-arm64@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-linux-arm64@npm:0.33.4"
@@ -3518,18 +3473,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-arm@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-linux-arm@npm:0.33.3"
-  dependencies:
-    "@img/sharp-libvips-linux-arm": "npm:1.0.2"
-  dependenciesMeta:
-    "@img/sharp-libvips-linux-arm":
-      optional: true
-  conditions: os=linux & cpu=arm & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linux-arm@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-linux-arm@npm:0.33.4"
@@ -3542,18 +3485,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-s390x@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-linux-s390x@npm:0.33.3"
-  dependencies:
-    "@img/sharp-libvips-linux-s390x": "npm:1.0.2"
-  dependenciesMeta:
-    "@img/sharp-libvips-linux-s390x":
-      optional: true
-  conditions: os=linux & cpu=s390x & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linux-s390x@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-linux-s390x@npm:0.33.4"
@@ -3566,18 +3497,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-x64@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-linux-x64@npm:0.33.3"
-  dependencies:
-    "@img/sharp-libvips-linux-x64": "npm:1.0.2"
-  dependenciesMeta:
-    "@img/sharp-libvips-linux-x64":
-      optional: true
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linux-x64@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-linux-x64@npm:0.33.4"
@@ -3590,18 +3509,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linuxmusl-arm64@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.3"
-  dependencies:
-    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2"
-  dependenciesMeta:
-    "@img/sharp-libvips-linuxmusl-arm64":
-      optional: true
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linuxmusl-arm64@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.4"
@@ -3614,18 +3521,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linuxmusl-x64@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-linuxmusl-x64@npm:0.33.3"
-  dependencies:
-    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2"
-  dependenciesMeta:
-    "@img/sharp-libvips-linuxmusl-x64":
-      optional: true
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@img/sharp-linuxmusl-x64@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-linuxmusl-x64@npm:0.33.4"
@@ -3638,15 +3533,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-wasm32@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-wasm32@npm:0.33.3"
-  dependencies:
-    "@emnapi/runtime": "npm:^1.1.0"
-  conditions: cpu=wasm32
-  languageName: node
-  linkType: hard
-
 "@img/sharp-wasm32@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-wasm32@npm:0.33.4"
@@ -3656,13 +3542,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-win32-ia32@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-win32-ia32@npm:0.33.3"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@img/sharp-win32-ia32@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-win32-ia32@npm:0.33.4"
@@ -3670,13 +3549,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-win32-x64@npm:0.33.3":
-  version: 0.33.3
-  resolution: "@img/sharp-win32-x64@npm:0.33.3"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@img/sharp-win32-x64@npm:0.33.4":
   version: 0.33.4
   resolution: "@img/sharp-win32-x64@npm:0.33.4"
@@ -3939,13 +3811,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/env@npm:14.1.0"
-  checksum: 10c0/f45ce1e3dad87cdbddc58b06bd411f44a6d21dfc2c344d02a5e1b07f56fbc9a39e192c0b0917df9f2e9e4e2156306a8c78f173ca4b53932c2793e67797462a23
-  languageName: node
-  linkType: hard
-
 "@next/env@npm:14.2.5, @next/env@npm:^14.2.5":
   version: 14.2.5
   resolution: "@next/env@npm:14.2.5"
@@ -3953,13 +3818,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-darwin-arm64@npm:14.1.0"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@next/swc-darwin-arm64@npm:14.2.5":
   version: 14.2.5
   resolution: "@next/swc-darwin-arm64@npm:14.2.5"
@@ -3967,13 +3825,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-darwin-x64@npm:14.1.0"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@next/swc-darwin-x64@npm:14.2.5":
   version: 14.2.5
   resolution: "@next/swc-darwin-x64@npm:14.2.5"
@@ -3981,13 +3832,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-linux-arm64-gnu@npm:14.1.0"
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-arm64-gnu@npm:14.2.5":
   version: 14.2.5
   resolution: "@next/swc-linux-arm64-gnu@npm:14.2.5"
@@ -3995,13 +3839,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-linux-arm64-musl@npm:14.1.0"
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-arm64-musl@npm:14.2.5":
   version: 14.2.5
   resolution: "@next/swc-linux-arm64-musl@npm:14.2.5"
@@ -4009,13 +3846,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-linux-x64-gnu@npm:14.1.0"
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-x64-gnu@npm:14.2.5":
   version: 14.2.5
   resolution: "@next/swc-linux-x64-gnu@npm:14.2.5"
@@ -4023,13 +3853,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-linux-x64-musl@npm:14.1.0"
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
 "@next/swc-linux-x64-musl@npm:14.2.5":
   version: 14.2.5
   resolution: "@next/swc-linux-x64-musl@npm:14.2.5"
@@ -4037,13 +3860,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-win32-arm64-msvc@npm:14.1.0"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
 "@next/swc-win32-arm64-msvc@npm:14.2.5":
   version: 14.2.5
   resolution: "@next/swc-win32-arm64-msvc@npm:14.2.5"
@@ -4051,13 +3867,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-win32-ia32-msvc@npm:14.1.0"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
 "@next/swc-win32-ia32-msvc@npm:14.2.5":
   version: 14.2.5
   resolution: "@next/swc-win32-ia32-msvc@npm:14.2.5"
@@ -4065,13 +3874,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:14.1.0":
-  version: 14.1.0
-  resolution: "@next/swc-win32-x64-msvc@npm:14.1.0"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
 "@next/swc-win32-x64-msvc@npm:14.2.5":
   version: 14.2.5
   resolution: "@next/swc-win32-x64-msvc@npm:14.2.5"
@@ -7233,15 +7035,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:0.5.2":
-  version: 0.5.2
-  resolution: "@swc/helpers@npm:0.5.2"
-  dependencies:
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/b6fa49bcf6c00571d0eb7837b163f8609960d4d77538160585e27ed167361e9776bd6e5eb9646ffac2fb4d43c58df9ca50dab9d96ab097e6591bc82a75fd1164
-  languageName: node
-  linkType: hard
-
 "@swc/helpers@npm:0.5.5":
   version: 0.5.5
   resolution: "@swc/helpers@npm:0.5.5"
@@ -17015,18 +16808,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"image-size@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "image-size@npm:1.0.2"
-  dependencies:
-    queue: "npm:6.0.2"
-  bin:
-    image-size: bin/image-size.js
-  checksum: 10c0/df518606c75d0ee12a6d7e822a64ef50d9eabbb303dcee8c9df06bad94e49b4d4680b9003968203f239ff39a9cc51d4ff1781cd331cc0a4b3b858d9fc9836c68
-  languageName: node
-  linkType: hard
-
-"image-size@npm:^1.1.1":
+"image-size@npm:^1.0.0, image-size@npm:^1.1.1":
   version: 1.1.1
   resolution: "image-size@npm:1.1.1"
   dependencies:
@@ -20902,62 +20684,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:^14.1.0":
-  version: 14.1.0
-  resolution: "next@npm:14.1.0"
-  dependencies:
-    "@next/env": "npm:14.1.0"
-    "@next/swc-darwin-arm64": "npm:14.1.0"
-    "@next/swc-darwin-x64": "npm:14.1.0"
-    "@next/swc-linux-arm64-gnu": "npm:14.1.0"
-    "@next/swc-linux-arm64-musl": "npm:14.1.0"
-    "@next/swc-linux-x64-gnu": "npm:14.1.0"
-    "@next/swc-linux-x64-musl": "npm:14.1.0"
-    "@next/swc-win32-arm64-msvc": "npm:14.1.0"
-    "@next/swc-win32-ia32-msvc": "npm:14.1.0"
-    "@next/swc-win32-x64-msvc": "npm:14.1.0"
-    "@swc/helpers": "npm:0.5.2"
-    busboy: "npm:1.6.0"
-    caniuse-lite: "npm:^1.0.30001579"
-    graceful-fs: "npm:^4.2.11"
-    postcss: "npm:8.4.31"
-    styled-jsx: "npm:5.1.1"
-  peerDependencies:
-    "@opentelemetry/api": ^1.1.0
-    react: ^18.2.0
-    react-dom: ^18.2.0
-    sass: ^1.3.0
-  dependenciesMeta:
-    "@next/swc-darwin-arm64":
-      optional: true
-    "@next/swc-darwin-x64":
-      optional: true
-    "@next/swc-linux-arm64-gnu":
-      optional: true
-    "@next/swc-linux-arm64-musl":
-      optional: true
-    "@next/swc-linux-x64-gnu":
-      optional: true
-    "@next/swc-linux-x64-musl":
-      optional: true
-    "@next/swc-win32-arm64-msvc":
-      optional: true
-    "@next/swc-win32-ia32-msvc":
-      optional: true
-    "@next/swc-win32-x64-msvc":
-      optional: true
-  peerDependenciesMeta:
-    "@opentelemetry/api":
-      optional: true
-    sass:
-      optional: true
-  bin:
-    next: dist/bin/next
-  checksum: 10c0/dbb1ef8d22eec29a9127d28ed46eb34f14e3f7f7b4e4b91dc96027feb4d9ead554a804275484d9a54026e6e55d632d3997561e598c1fb8e8956e77614f39765f
-  languageName: node
-  linkType: hard
-
-"next@npm:^14.2.5":
+"next@npm:^14.1.0, next@npm:^14.2.5":
   version: 14.2.5
   resolution: "next@npm:14.2.5"
   dependencies:
@@ -25190,76 +24917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sharp@npm:^0.33.3":
-  version: 0.33.3
-  resolution: "sharp@npm:0.33.3"
-  dependencies:
-    "@img/sharp-darwin-arm64": "npm:0.33.3"
-    "@img/sharp-darwin-x64": "npm:0.33.3"
-    "@img/sharp-libvips-darwin-arm64": "npm:1.0.2"
-    "@img/sharp-libvips-darwin-x64": "npm:1.0.2"
-    "@img/sharp-libvips-linux-arm": "npm:1.0.2"
-    "@img/sharp-libvips-linux-arm64": "npm:1.0.2"
-    "@img/sharp-libvips-linux-s390x": "npm:1.0.2"
-    "@img/sharp-libvips-linux-x64": "npm:1.0.2"
-    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2"
-    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2"
-    "@img/sharp-linux-arm": "npm:0.33.3"
-    "@img/sharp-linux-arm64": "npm:0.33.3"
-    "@img/sharp-linux-s390x": "npm:0.33.3"
-    "@img/sharp-linux-x64": "npm:0.33.3"
-    "@img/sharp-linuxmusl-arm64": "npm:0.33.3"
-    "@img/sharp-linuxmusl-x64": "npm:0.33.3"
-    "@img/sharp-wasm32": "npm:0.33.3"
-    "@img/sharp-win32-ia32": "npm:0.33.3"
-    "@img/sharp-win32-x64": "npm:0.33.3"
-    color: "npm:^4.2.3"
-    detect-libc: "npm:^2.0.3"
-    semver: "npm:^7.6.0"
-  dependenciesMeta:
-    "@img/sharp-darwin-arm64":
-      optional: true
-    "@img/sharp-darwin-x64":
-      optional: true
-    "@img/sharp-libvips-darwin-arm64":
-      optional: true
-    "@img/sharp-libvips-darwin-x64":
-      optional: true
-    "@img/sharp-libvips-linux-arm":
-      optional: true
-    "@img/sharp-libvips-linux-arm64":
-      optional: true
-    "@img/sharp-libvips-linux-s390x":
-      optional: true
-    "@img/sharp-libvips-linux-x64":
-      optional: true
-    "@img/sharp-libvips-linuxmusl-arm64":
-      optional: true
-    "@img/sharp-libvips-linuxmusl-x64":
-      optional: true
-    "@img/sharp-linux-arm":
-      optional: true
-    "@img/sharp-linux-arm64":
-      optional: true
-    "@img/sharp-linux-s390x":
-      optional: true
-    "@img/sharp-linux-x64":
-      optional: true
-    "@img/sharp-linuxmusl-arm64":
-      optional: true
-    "@img/sharp-linuxmusl-x64":
-      optional: true
-    "@img/sharp-wasm32":
-      optional: true
-    "@img/sharp-win32-ia32":
-      optional: true
-    "@img/sharp-win32-x64":
-      optional: true
-  checksum: 10c0/12f5203426595b4e64c807162a6d52358b591d25fbb414a51fe38861584759fba38485be951ed98d15be3dfe21f2def5336f78ca35bf8bbd22d88cc78ca03f2a
-  languageName: node
-  linkType: hard
-
-"sharp@npm:^0.33.4":
+"sharp@npm:^0.33.3, sharp@npm:^0.33.4":
   version: 0.33.4
   resolution: "sharp@npm:0.33.4"
   dependencies:

From 46a838f1cfae6932fd6b64d23058f5b3b1fb9ba2 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Aug 2024 15:50:06 +0200
Subject: [PATCH 07/39] Implement add command for vitest addon

---
 code/addons/vitest/package.json       |   2 +
 code/addons/vitest/src/postinstall.ts | 170 +++++++++++++++++++++++++-
 code/lib/cli-storybook/src/add.ts     |   3 +-
 code/yarn.lock                        |   2 +
 4 files changed, 174 insertions(+), 3 deletions(-)

diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json
index e318fc7f7f59..b504f0e08468 100644
--- a/code/addons/vitest/package.json
+++ b/code/addons/vitest/package.json
@@ -75,6 +75,8 @@
   },
   "devDependencies": {
     "@vitest/browser": "^2.0.0",
+    "tinyrainbow": "^1.2.0",
+    "ts-dedent": "^2.2.0",
     "vitest": "^2.0.0"
   },
   "peerDependencies": {
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 47bcad1f9349..a7a73eb3721e 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -1,3 +1,169 @@
-export default async function postinstall(context: any) {
-  console.log('[addon-vitest] postinstall with', context);
+import { existsSync } from 'node:fs';
+import * as fs from 'node:fs/promises';
+import { writeFile } from 'node:fs/promises';
+import { join, resolve } from 'node:path';
+
+import {
+  JsPackageManagerFactory,
+  extractProperFrameworkName,
+  loadAllPresets,
+  loadMainConfig,
+} from 'storybook/internal/common';
+import { logger } from 'storybook/internal/node-logger';
+
+import c from 'tinyrainbow';
+import dedent from 'ts-dedent';
+
+import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add';
+
+export default async function postInstall(options: PostinstallOptions) {
+  const packageManager = JsPackageManagerFactory.getPackageManager({
+    force: options.packageManager,
+  });
+
+  const info = await getFrameworkInfo(options);
+
+  if (info.builderPackageName !== '@storybook/builder-vite') {
+    logger.info('Only @storybook/builder-vite is supported');
+    return;
+  }
+
+  const configFile = resolve('vitest.config.ts');
+  if (existsSync(configFile)) {
+    logger.info('You already have a vitest.config.ts file. Check our docs:');
+    return;
+  }
+
+  const annotationsImport = [
+    '@storybook/nextjs',
+    '@storybook/experimental-nextjs-vite',
+    '@storybook/sveltekit',
+  ].includes(info.frameworkPackageName)
+    ? info.frameworkPackageName
+    : ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes(
+          info.rendererPackageName
+        )
+      ? info.rendererPackageName
+      : null;
+
+  if (!annotationsImport) {
+    logger.info('Your framework is not yet supported for the vitest addon.');
+    return;
+  }
+
+  const vitestInfo = getVitestPluginInfo(info.frameworkPackageName);
+
+  const packages = ['vitest@latest', '@vitest/browser@latest', 'playwright@latest'];
+  logger.info(c.bold('Installing packages...'));
+  logger.info(packages.join(', '));
+  await packageManager.addDependencies({ installAsDevDependencies: true }, packages);
+
+  await packageManager.executeCommand({
+    command: 'npx',
+    args: ['playwright', 'install', 'chromium', '--with-deps'],
+  });
+
+  await writeFile(
+    resolve(options.configDir, 'vitest.setup.ts'),
+    dedent`
+      import { beforeAll } from 'vitest'
+      import { setProjectAnnotations } from '${annotationsImport}'
+      import * as projectAnnotations from './preview'
+      
+      const project = setProjectAnnotations(projectAnnotations)
+      
+      beforeAll(project.beforeAll)
+    `
+  );
+  await writeFile(
+    configFile,
+    dedent`
+      import { defineConfig } from "vitest/config";
+      import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
+      ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
+      export default defineConfig({
+        plugins: [
+          storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
+        ],
+        test: {
+          include: ['**/*.{stories}.?(m)[jt]s?(x)'],
+          browser: {
+            enabled: true,
+            name: 'chromium',
+            provider: 'playwright',
+            headless: true,
+            screenshotFailures: false,
+          },
+          isolate: false,
+          setupFiles: ['./.storybook/vitest.setup.ts'],
+        },
+      })
+    `
+  );
+}
+
+const getVitestPluginInfo = (framework: string) => {
+  let frameworkPluginImport = '';
+  let frameworkPluginCall = '';
+
+  if (framework === '@storybook/nextjs') {
+    frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'";
+    frameworkPluginCall = 'vitePluginNext()';
+  }
+
+  if (framework === '@storybook/sveltekit') {
+    frameworkPluginImport = "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite'";
+    frameworkPluginCall = 'storybookSveltekitPlugin()';
+  }
+
+  return { frameworkPluginImport, frameworkPluginCall };
+};
+
+async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: PostinstallOptions) {
+  const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
+  const packageJson = await packageManager.retrievePackageJson();
+
+  const config = await loadMainConfig({ configDir, noCache: true });
+  const { framework } = config;
+
+  const frameworkName = typeof framework === 'string' ? framework : framework?.name;
+
+  if (!frameworkName) {
+    throw new Error('Could not detect your storybook framework.');
+  }
+
+  const frameworkPackageName = extractProperFrameworkName(frameworkName);
+
+  const presets = await loadAllPresets({
+    corePresets: [join(frameworkName, 'preset')],
+    overridePresets: [
+      require.resolve('@storybook/core/core-server/presets/common-override-preset'),
+    ],
+    configDir,
+    packageJson,
+    isCritical: true,
+  });
+
+  const core = await presets.apply('core', {});
+
+  const { builder, renderer } = core;
+
+  if (!builder || !renderer) {
+    throw new Error('Could not detect your storybook framework.');
+  }
+
+  const builderPackageJson = await fs.readFile(
+    `${typeof builder === 'string' ? builder : builder.name}/package.json`,
+    'utf8'
+  );
+  const builderPackageName = JSON.parse(builderPackageJson).name;
+
+  const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8');
+  const rendererPackageName = JSON.parse(rendererPackageJson).name;
+
+  return {
+    frameworkPackageName,
+    builderPackageName,
+    rendererPackageName,
+  };
 }
diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts
index 409c91c41fb6..df3ac84f140f 100644
--- a/code/lib/cli-storybook/src/add.ts
+++ b/code/lib/cli-storybook/src/add.ts
@@ -17,6 +17,7 @@ import { postinstallAddon } from './postinstallAddon';
 
 export interface PostinstallOptions {
   packageManager: PackageManagerName;
+  configDir: string;
 }
 
 /**
@@ -139,7 +140,7 @@ export async function add(
   await writeConfig(main);
 
   if (!skipPostinstall && isCoreAddon(addonName)) {
-    await postinstallAddon(addonName, { packageManager: packageManager.type });
+    await postinstallAddon(addonName, { packageManager: packageManager.type, configDir });
   }
 }
 function isValidVersion(version: string) {
diff --git a/code/yarn.lock b/code/yarn.lock
index 34cf0e23881e..16faae9c7535 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6133,6 +6133,8 @@ __metadata:
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
     "@vitest/browser": "npm:^2.0.0"
+    tinyrainbow: "npm:^1.2.0"
+    ts-dedent: "npm:^2.2.0"
     vitest: "npm:^2.0.0"
   peerDependencies:
     "@vitest/browser": ^2.0.0

From 3cee65eab7a60828c9845692288e495ba22a83cd Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Aug 2024 16:03:59 +0200
Subject: [PATCH 08/39] Better texts

---
 code/addons/vitest/src/postinstall.ts | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index a7a73eb3721e..a06d05ad3968 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -23,14 +23,19 @@ export default async function postInstall(options: PostinstallOptions) {
 
   const info = await getFrameworkInfo(options);
 
-  if (info.builderPackageName !== '@storybook/builder-vite') {
-    logger.info('Only @storybook/builder-vite is supported');
+  if (
+    info.frameworkPackageName !== '@storybook/nextjs' &&
+    info.builderPackageName !== '@storybook/builder-vite'
+  ) {
+    logger.info('The vitest addon can only be used with a vite framework or nextjs.');
     return;
   }
 
   const configFile = resolve('vitest.config.ts');
   if (existsSync(configFile)) {
-    logger.info('You already have a vitest.config.ts file. Check our docs:');
+    logger.info(
+      'Check our docs how to configure vitest to test stories: https://storybook.js.org/docs/configure/vitest'
+    );
     return;
   }
 
@@ -47,7 +52,7 @@ export default async function postInstall(options: PostinstallOptions) {
       : null;
 
   if (!annotationsImport) {
-    logger.info('Your framework is not yet supported for the vitest addon.');
+    logger.info('The vitest addon cannot yet be used with: ' + info.frameworkPackageName);
     return;
   }
 
@@ -58,6 +63,7 @@ export default async function postInstall(options: PostinstallOptions) {
   logger.info(packages.join(', '));
   await packageManager.addDependencies({ installAsDevDependencies: true }, packages);
 
+  logger.info(c.bold('Executing npx playwright install chromium --with-deps ...'));
   await packageManager.executeCommand({
     command: 'npx',
     args: ['playwright', 'install', 'chromium', '--with-deps'],
@@ -92,7 +98,6 @@ export default async function postInstall(options: PostinstallOptions) {
             name: 'chromium',
             provider: 'playwright',
             headless: true,
-            screenshotFailures: false,
           },
           isolate: false,
           setupFiles: ['./.storybook/vitest.setup.ts'],

From 1a4a5e73d2b5c601d0f617a624f7833a00f295b4 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Aug 2024 16:11:50 +0200
Subject: [PATCH 09/39] Improve glob

---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index a06d05ad3968..9032b34ad9fe 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -92,7 +92,7 @@ export default async function postInstall(options: PostinstallOptions) {
           storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
         ],
         test: {
-          include: ['**/*.{stories}.?(m)[jt]s?(x)'],
+          include: ['**/*.stories.?(m)[jt]s?(x)'],
           browser: {
             enabled: true,
             name: 'chromium',

From f4db6c0397d8aa1acc30a1c04a7e9f96d93ea450 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Mon, 19 Aug 2024 16:22:01 +0200
Subject: [PATCH 10/39] Add more log lines

---
 code/addons/vitest/src/postinstall.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 9032b34ad9fe..6441c1cf61e8 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -69,6 +69,7 @@ export default async function postInstall(options: PostinstallOptions) {
     args: ['playwright', 'install', 'chromium', '--with-deps'],
   });
 
+  logger.info(c.bold('Writing .storybook/vitest.setup.ts file...'));
   await writeFile(
     resolve(options.configDir, 'vitest.setup.ts'),
     dedent`
@@ -81,6 +82,8 @@ export default async function postInstall(options: PostinstallOptions) {
       beforeAll(project.beforeAll)
     `
   );
+
+  logger.info(c.bold('Writing vitest.config.ts file...'));
   await writeFile(
     configFile,
     dedent`

From c98d4c28f0e50bc9289414962e62c7add8fb8f1a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Aug 2024 15:50:30 +0200
Subject: [PATCH 11/39] Support adding workspace files if vitest.config.ts
 exists

---
 code/addons/vitest/package.json       |  1 +
 code/addons/vitest/src/postinstall.ts | 60 ++++++++++++++++++++++-----
 code/yarn.lock                        |  1 +
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json
index b504f0e08468..547987dac46e 100644
--- a/code/addons/vitest/package.json
+++ b/code/addons/vitest/package.json
@@ -75,6 +75,7 @@
   },
   "devDependencies": {
     "@vitest/browser": "^2.0.0",
+    "find-up": "^7.0.0",
     "tinyrainbow": "^1.2.0",
     "ts-dedent": "^2.2.0",
     "vitest": "^2.0.0"
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 6441c1cf61e8..d734e4d3d128 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -1,7 +1,8 @@
 import { existsSync } from 'node:fs';
 import * as fs from 'node:fs/promises';
 import { writeFile } from 'node:fs/promises';
-import { join, resolve } from 'node:path';
+import { dirname, join, resolve } from 'node:path';
+import * as path from 'node:path';
 
 import {
   JsPackageManagerFactory,
@@ -11,6 +12,7 @@ import {
 } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
+import { findUp } from 'find-up';
 import c from 'tinyrainbow';
 import dedent from 'ts-dedent';
 
@@ -31,14 +33,6 @@ export default async function postInstall(options: PostinstallOptions) {
     return;
   }
 
-  const configFile = resolve('vitest.config.ts');
-  if (existsSync(configFile)) {
-    logger.info(
-      'Check our docs how to configure vitest to test stories: https://storybook.js.org/docs/configure/vitest'
-    );
-    return;
-  }
-
   const annotationsImport = [
     '@storybook/nextjs',
     '@storybook/experimental-nextjs-vite',
@@ -83,9 +77,55 @@ export default async function postInstall(options: PostinstallOptions) {
     `
   );
 
+  const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs'];
+  const configFiles = extensions.map((ext) => 'vitest.config' + ext);
+
+  const rootConfig = await findUp(configFiles, {
+    cwd: process.cwd(),
+  });
+
+  if (rootConfig) {
+    const extname = rootConfig ? path.extname(rootConfig) : 'ts';
+    const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extname}`);
+    if (existsSync(browserWorkspaceFile)) {
+      logger.info(
+        'A workspace file already exists. Check our docs how to configure vitest to test stories: https://storybook.js.org/docs/configure/vitest'
+      );
+      return;
+    }
+    logger.info(c.bold('Writing vitest.workspace.ts file...'));
+    await writeFile(
+      browserWorkspaceFile,
+      dedent`
+        import { defineWorkspace } from 'vitest/config'
+
+        export default defineWorkspace([
+          'vitest.config.ts',
+          {
+            extends: 'vitest.config${extname}',
+            plugins: [
+              storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
+            ],
+            test: {
+              include: ['**/*.stories.?(m)[jt]s?(x)'],
+              browser: {
+                enabled: true,
+                name: 'chromium',
+                provider: 'playwright',
+                headless: true,
+              },
+              isolate: false,
+              setupFiles: ['./.storybook/vitest.setup.ts'],
+            },
+          },
+        ])
+      `
+    );
+    return;
+  }
   logger.info(c.bold('Writing vitest.config.ts file...'));
   await writeFile(
-    configFile,
+    resolve('vitest.config.ts'),
     dedent`
       import { defineConfig } from "vitest/config";
       import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
diff --git a/code/yarn.lock b/code/yarn.lock
index 16faae9c7535..525d1d6c99d2 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6133,6 +6133,7 @@ __metadata:
   dependencies:
     "@storybook/csf": "npm:^0.1.11"
     "@vitest/browser": "npm:^2.0.0"
+    find-up: "npm:^7.0.0"
     tinyrainbow: "npm:^1.2.0"
     ts-dedent: "npm:^2.2.0"
     vitest: "npm:^2.0.0"

From 480f404a4f8623adcf28570cdc2cdbc4e336d9eb Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Aug 2024 15:53:31 +0200
Subject: [PATCH 12/39] Update unit tests

---
 code/lib/cli-storybook/src/add.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/lib/cli-storybook/src/add.test.ts b/code/lib/cli-storybook/src/add.test.ts
index 10e7b90b23ac..137e60a72008 100644
--- a/code/lib/cli-storybook/src/add.test.ts
+++ b/code/lib/cli-storybook/src/add.test.ts
@@ -144,6 +144,7 @@ describe('add (extra)', () => {
 
     expect(MockedPostInstall.postinstallAddon).toHaveBeenCalledWith('@storybook/addon-docs', {
       packageManager: 'npm',
+      configDir: '.storybook',
     });
   });
 });

From e9070eb663cd3f564c60f40598a64f6053cbff6b Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Aug 2024 17:15:20 +0200
Subject: [PATCH 13/39] Update code/addons/vitest/src/postinstall.ts

Co-authored-by: Yann Braga <yannbf@gmail.com>
---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index d734e4d3d128..809d8e6a8e40 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -85,7 +85,7 @@ export default async function postInstall(options: PostinstallOptions) {
   });
 
   if (rootConfig) {
-    const extname = rootConfig ? path.extname(rootConfig) : 'ts';
+    const extname = rootConfig ? path.extname(rootConfig) : '.ts';
     const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extname}`);
     if (existsSync(browserWorkspaceFile)) {
       logger.info(

From 675fdb8933defaa07c6f0491fe114c7e3a094059 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Tue, 20 Aug 2024 17:36:59 +0200
Subject: [PATCH 14/39] Get correct path

---
 code/addons/vitest/src/postinstall.ts |  5 ++---
 code/lib/cli-storybook/src/add.ts     | 16 ++++++++--------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 809d8e6a8e40..b4acaafe9f30 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -1,7 +1,7 @@
 import { existsSync } from 'node:fs';
 import * as fs from 'node:fs/promises';
 import { writeFile } from 'node:fs/promises';
-import { dirname, join, resolve } from 'node:path';
+import { dirname, join, relative, resolve } from 'node:path';
 import * as path from 'node:path';
 
 import {
@@ -100,9 +100,8 @@ export default async function postInstall(options: PostinstallOptions) {
         import { defineWorkspace } from 'vitest/config'
 
         export default defineWorkspace([
-          'vitest.config.ts',
+          '${relative(dirname(browserWorkspaceFile), rootConfig)}',
           {
-            extends: 'vitest.config${extname}',
             plugins: [
               storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
             ],
diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts
index df3ac84f140f..82de4e6cad02 100644
--- a/code/lib/cli-storybook/src/add.ts
+++ b/code/lib/cli-storybook/src/add.ts
@@ -102,11 +102,11 @@ export async function add(
     return;
   }
 
-  if (checkInstalled(addonName, requireMain(configDir))) {
-    throw new Error(dedent`
-      Addon ${addonName} is already installed; we skipped adding it to your ${mainConfig}.
-    `);
-  }
+  // if (checkInstalled(addonName, requireMain(configDir))) {
+  //   throw new Error(dedent`
+  //     Addon ${addonName} is already installed; we skipped adding it to your ${mainConfig}.
+  //   `);
+  // }
 
   const main = await readConfig(mainConfig);
   logger.log(`Verifying ${addonName}`);
@@ -135,9 +135,9 @@ export async function add(
   logger.log(`Installing ${addonWithVersion}`);
   await packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]);
 
-  logger.log(`Adding '${addon}' to main.js addons field.`);
-  main.appendValueToArray(['addons'], addonName);
-  await writeConfig(main);
+  // logger.log(`Adding '${addon}' to main.js addons field.`);
+  // main.appendValueToArray(['addons'], addonName);
+  // await writeConfig(main);
 
   if (!skipPostinstall && isCoreAddon(addonName)) {
     await postinstallAddon(addonName, { packageManager: packageManager.type, configDir });

From dbd4844aa4a89f64f9dfcea8a0866dbfdd63d31b Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 21 Aug 2024 14:14:53 +0200
Subject: [PATCH 15/39] Add comment about isolation

---
 code/addons/vitest/src/postinstall.ts | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index b4acaafe9f30..9a7d98a90736 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -18,6 +18,8 @@ import dedent from 'ts-dedent';
 
 import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add';
 
+const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs'];
+
 export default async function postInstall(options: PostinstallOptions) {
   const packageManager = JsPackageManagerFactory.getPackageManager({
     force: options.packageManager,
@@ -53,6 +55,9 @@ export default async function postInstall(options: PostinstallOptions) {
   const vitestInfo = getVitestPluginInfo(info.frameworkPackageName);
 
   const packages = ['vitest@latest', '@vitest/browser@latest', 'playwright@latest'];
+  if (info.frameworkPackageName === '@storybook/nextjs') {
+    packages.push('vite-plugin-storybook-nextjs@latest');
+  }
   logger.info(c.bold('Installing packages...'));
   logger.info(packages.join(', '));
   await packageManager.addDependencies({ installAsDevDependencies: true }, packages);
@@ -64,20 +69,24 @@ export default async function postInstall(options: PostinstallOptions) {
   });
 
   logger.info(c.bold('Writing .storybook/vitest.setup.ts file...'));
+
+  const previewExists = extensions
+    .map((ext) => path.resolve(path.join(options.configDir, `preview${ext}`)))
+    .some((config) => existsSync(config));
+
   await writeFile(
     resolve(options.configDir, 'vitest.setup.ts'),
     dedent`
       import { beforeAll } from 'vitest'
       import { setProjectAnnotations } from '${annotationsImport}'
-      import * as projectAnnotations from './preview'
+      ${previewExists ? `import * as projectAnnotations from './preview'` : ''}
       
-      const project = setProjectAnnotations(projectAnnotations)
+      const project = setProjectAnnotations(${previewExists ? 'projectAnnotations' : '[]'})
       
       beforeAll(project.beforeAll)
     `
   );
 
-  const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs'];
   const configFiles = extensions.map((ext) => 'vitest.config' + ext);
 
   const rootConfig = await findUp(configFiles, {
@@ -113,6 +122,8 @@ export default async function postInstall(options: PostinstallOptions) {
                 provider: 'playwright',
                 headless: true,
               },
+              // Disabling isolation is faster and should work for most storybooks.
+              // Consider removing this, if you have flaky tests.
               isolate: false,
               setupFiles: ['./.storybook/vitest.setup.ts'],
             },
@@ -181,6 +192,7 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta
 
   const frameworkPackageName = extractProperFrameworkName(frameworkName);
 
+  console.log(configDir);
   const presets = await loadAllPresets({
     corePresets: [join(frameworkName, 'preset')],
     overridePresets: [

From 419b81c18d58edbbcd6f8a76bfff0b6b44cfdedf Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 21 Aug 2024 14:23:40 +0200
Subject: [PATCH 16/39] Rollback

---
 code/lib/cli-storybook/src/add.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts
index 82de4e6cad02..df3ac84f140f 100644
--- a/code/lib/cli-storybook/src/add.ts
+++ b/code/lib/cli-storybook/src/add.ts
@@ -102,11 +102,11 @@ export async function add(
     return;
   }
 
-  // if (checkInstalled(addonName, requireMain(configDir))) {
-  //   throw new Error(dedent`
-  //     Addon ${addonName} is already installed; we skipped adding it to your ${mainConfig}.
-  //   `);
-  // }
+  if (checkInstalled(addonName, requireMain(configDir))) {
+    throw new Error(dedent`
+      Addon ${addonName} is already installed; we skipped adding it to your ${mainConfig}.
+    `);
+  }
 
   const main = await readConfig(mainConfig);
   logger.log(`Verifying ${addonName}`);
@@ -135,9 +135,9 @@ export async function add(
   logger.log(`Installing ${addonWithVersion}`);
   await packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]);
 
-  // logger.log(`Adding '${addon}' to main.js addons field.`);
-  // main.appendValueToArray(['addons'], addonName);
-  // await writeConfig(main);
+  logger.log(`Adding '${addon}' to main.js addons field.`);
+  main.appendValueToArray(['addons'], addonName);
+  await writeConfig(main);
 
   if (!skipPostinstall && isCoreAddon(addonName)) {
     await postinstallAddon(addonName, { packageManager: packageManager.type, configDir });

From 71ad82754d25049a32e9a61a5dc01da769cb210a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 21 Aug 2024 14:26:51 +0200
Subject: [PATCH 17/39] Fix

---
 code/addons/vitest/src/postinstall.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 9a7d98a90736..db9dae75ef2b 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -107,7 +107,8 @@ export default async function postInstall(options: PostinstallOptions) {
       browserWorkspaceFile,
       dedent`
         import { defineWorkspace } from 'vitest/config'
-
+        import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
+        ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
         export default defineWorkspace([
           '${relative(dirname(browserWorkspaceFile), rootConfig)}',
           {
@@ -122,7 +123,7 @@ export default async function postInstall(options: PostinstallOptions) {
                 provider: 'playwright',
                 headless: true,
               },
-              // Disabling isolation is faster and should work for most storybooks.
+              // Disabling isolation is faster and is similar to how tests are isolated in storybook itself.
               // Consider removing this, if you have flaky tests.
               isolate: false,
               setupFiles: ['./.storybook/vitest.setup.ts'],
@@ -152,6 +153,8 @@ export default async function postInstall(options: PostinstallOptions) {
             provider: 'playwright',
             headless: true,
           },
+          // Disabling isolation is faster and is similar to how tests are isolated in storybook itself.
+          // Consider removing this, if you have flaky tests.
           isolate: false,
           setupFiles: ['./.storybook/vitest.setup.ts'],
         },

From 718b8790f4aeb97956019ef13335c36667875874 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 21 Aug 2024 14:38:40 +0200
Subject: [PATCH 18/39] Improve messages

---
 code/addons/vitest/src/postinstall.ts | 48 +++++++++++++++++++--------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index db9dae75ef2b..c6c4cffe7ed9 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -55,6 +55,14 @@ export default async function postInstall(options: PostinstallOptions) {
   const vitestInfo = getVitestPluginInfo(info.frameworkPackageName);
 
   const packages = ['vitest@latest', '@vitest/browser@latest', 'playwright@latest'];
+
+  logger.info(
+    dedent`
+      We detected that you're using Next.js. 
+      We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest.
+    `
+  );
+
   if (info.frameworkPackageName === '@storybook/nextjs') {
     packages.push('vite-plugin-storybook-nextjs@latest');
   }
@@ -98,14 +106,17 @@ export default async function postInstall(options: PostinstallOptions) {
     const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extname}`);
     if (existsSync(browserWorkspaceFile)) {
       logger.info(
-        'A workspace file already exists. Check our docs how to configure vitest to test stories: https://storybook.js.org/docs/configure/vitest'
+        dedent`
+          We detected that you have Vitest and workspaces configured, so we couldn't automatically set the plugin for you. 
+          Please refer to the documentation on how to complete the set up:
+          https://storybook.js.org/docs/configure/vitest
+        `
       );
-      return;
-    }
-    logger.info(c.bold('Writing vitest.workspace.ts file...'));
-    await writeFile(
-      browserWorkspaceFile,
-      dedent`
+    } else {
+      logger.info(c.bold('Writing vitest.workspace.ts file...'));
+      await writeFile(
+        browserWorkspaceFile,
+        dedent`
         import { defineWorkspace } from 'vitest/config'
         import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
         ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
@@ -131,13 +142,13 @@ export default async function postInstall(options: PostinstallOptions) {
           },
         ])
       `
-    );
-    return;
-  }
-  logger.info(c.bold('Writing vitest.config.ts file...'));
-  await writeFile(
-    resolve('vitest.config.ts'),
-    dedent`
+      );
+    }
+  } else {
+    logger.info(c.bold('Writing vitest.config.ts file...'));
+    await writeFile(
+      resolve('vitest.config.ts'),
+      dedent`
       import { defineConfig } from "vitest/config";
       import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
       ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
@@ -160,6 +171,15 @@ export default async function postInstall(options: PostinstallOptions) {
         },
       })
     `
+    );
+  }
+
+  logger.info(
+    dedent`
+      The Vitest addon is now configured and you're ready to run your tests! 
+      Check the documentation for more information about its features and configurations at:
+      https://storybook.js.org/docs/configure/vitest
+    `
   );
 }
 

From a26e267cd4efe295df4a6ed0872468cbc9f35995 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 21 Aug 2024 14:42:09 +0200
Subject: [PATCH 19/39] Validate framework

---
 code/addons/vitest/src/postinstall.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index c6c4cffe7ed9..21bb495e7a97 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -9,6 +9,7 @@ import {
   extractProperFrameworkName,
   loadAllPresets,
   loadMainConfig,
+  validateFrameworkName,
 } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
@@ -208,11 +209,7 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta
   const { framework } = config;
 
   const frameworkName = typeof framework === 'string' ? framework : framework?.name;
-
-  if (!frameworkName) {
-    throw new Error('Could not detect your storybook framework.');
-  }
-
+  validateFrameworkName(frameworkName);
   const frameworkPackageName = extractProperFrameworkName(frameworkName);
 
   console.log(configDir);

From 6c4651b5ae024e8cf45d0cf122cee1621d6634ba Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 21 Aug 2024 16:36:27 +0200
Subject: [PATCH 20/39] Fix default viewports

---
 code/addons/vitest/src/plugin/viewports.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/addons/vitest/src/plugin/viewports.ts b/code/addons/vitest/src/plugin/viewports.ts
index c68047877006..c779eb3a6633 100644
--- a/code/addons/vitest/src/plugin/viewports.ts
+++ b/code/addons/vitest/src/plugin/viewports.ts
@@ -3,7 +3,7 @@ import { UnsupportedViewportDimensionError } from 'storybook/internal/preview-er
 
 import { page } from '@vitest/browser/context';
 
-import { INITIAL_VIEWPORTS } from '../../../viewport/src/defaults';
+import { MINIMAL_VIEWPORTS } from '../../../viewport/src/defaults';
 import type { ViewportMap, ViewportStyles } from '../../../viewport/src/types';
 
 declare global {
@@ -50,12 +50,12 @@ const parseDimension = (value: string, dimension: 'width' | 'height') => {
 export const setViewport = async (viewportsParam: ViewportsParam = {} as ViewportsParam) => {
   const defaultViewport = viewportsParam.defaultViewport;
 
-  if (!page || !globalThis.__vitest_browser__ || !defaultViewport) {
+  if (!page || !globalThis.__vitest_browser__) {
     return;
   }
 
   const viewports = {
-    ...INITIAL_VIEWPORTS,
+    ...MINIMAL_VIEWPORTS,
     ...viewportsParam.viewports,
   };
 

From 840c1bb6a2658dccb0b00092ab7d82728dff230e Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Wed, 21 Aug 2024 16:51:16 +0200
Subject: [PATCH 21/39] Fix tests

---
 code/addons/vitest/src/plugin/viewports.test.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/code/addons/vitest/src/plugin/viewports.test.ts b/code/addons/vitest/src/plugin/viewports.test.ts
index cd83f5edc518..a175077cf649 100644
--- a/code/addons/vitest/src/plugin/viewports.test.ts
+++ b/code/addons/vitest/src/plugin/viewports.test.ts
@@ -1,6 +1,8 @@
 /* eslint-disable no-underscore-dangle */
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
 import { page } from '@vitest/browser/context';
 
 import { DEFAULT_VIEWPORT_DIMENSIONS, type ViewportsParam, setViewport } from './viewports';
@@ -42,6 +44,7 @@ describe('setViewport', () => {
 
   it('should set the dimensions of viewport from INITIAL_VIEWPORTS', async () => {
     const viewportsParam: any = {
+      viewports: INITIAL_VIEWPORTS,
       // supported by default in addon viewports
       defaultViewport: 'ipad',
     };

From 1a59b66d12d37478a6f0cdbadcc769d0bb52148e Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 21 Aug 2024 17:02:45 +0200
Subject: [PATCH 22/39] add default options for addon-viewports via parameters

---
 code/.storybook/preview.tsx         | 3 ---
 code/addons/viewport/preview.js     | 2 +-
 code/addons/viewport/src/preview.ts | 9 +++++++++
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index 638217cad31d..1f366074846f 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -342,9 +342,6 @@ export const parameters = {
       'slategray',
     ],
   },
-  viewport: {
-    options: MINIMAL_VIEWPORTS,
-  },
   themes: {
     disable: true,
   },
diff --git a/code/addons/viewport/preview.js b/code/addons/viewport/preview.js
index 6a4da7cfa953..49ad602f79f4 100644
--- a/code/addons/viewport/preview.js
+++ b/code/addons/viewport/preview.js
@@ -1 +1 @@
-export { globals } from './dist/preview';
+export * from './dist/preview';
diff --git a/code/addons/viewport/src/preview.ts b/code/addons/viewport/src/preview.ts
index a59790415d2f..21f45e310635 100644
--- a/code/addons/viewport/src/preview.ts
+++ b/code/addons/viewport/src/preview.ts
@@ -1,4 +1,5 @@
 import { PARAM_KEY as KEY } from './constants';
+import { MINIMAL_VIEWPORTS } from './defaults';
 import type { GlobalState } from './types';
 
 const modern: Record<string, GlobalState> = {
@@ -9,3 +10,11 @@ const modern: Record<string, GlobalState> = {
 const legacy = { viewport: 'reset', viewportRotated: false };
 
 export const initialGlobals = FEATURES?.viewportStoryGlobals ? modern : legacy;
+
+export const parameters = FEATURES?.viewportStoryGlobals
+  ? {
+      [KEY]: {
+        options: MINIMAL_VIEWPORTS,
+      },
+    }
+  : {};

From ce006bf896dd879bd56125eacc8d6ec7f6e0d94d Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 10:48:24 +0200
Subject: [PATCH 23/39] Update code/addons/vitest/src/postinstall.ts

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>
---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 21bb495e7a97..eb8c020803a2 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -32,7 +32,7 @@ export default async function postInstall(options: PostinstallOptions) {
     info.frameworkPackageName !== '@storybook/nextjs' &&
     info.builderPackageName !== '@storybook/builder-vite'
   ) {
-    logger.info('The vitest addon can only be used with a vite framework or nextjs.');
+    logger.info('The Vitest addon can only be used with a Vite-based Storybook framework or Next.js.');
     return;
   }
 

From 76734a0df3deaa126912b6c3d4ba893b02e70cd1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 10:48:30 +0200
Subject: [PATCH 24/39] Update code/addons/vitest/src/postinstall.ts

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>
---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index eb8c020803a2..2093281be2cb 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -49,7 +49,7 @@ export default async function postInstall(options: PostinstallOptions) {
       : null;
 
   if (!annotationsImport) {
-    logger.info('The vitest addon cannot yet be used with: ' + info.frameworkPackageName);
+    logger.info('The Vitest addon cannot yet be used with: ' + info.frameworkPackageName);
     return;
   }
 

From 78d544e6975cd2c3548988ab4f6fed15292a5b1a Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 10:48:38 +0200
Subject: [PATCH 25/39] Update code/addons/vitest/src/postinstall.ts

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>
---
 code/addons/vitest/src/postinstall.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 2093281be2cb..60273d5bdaea 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -178,8 +178,8 @@ export default async function postInstall(options: PostinstallOptions) {
   logger.info(
     dedent`
       The Vitest addon is now configured and you're ready to run your tests! 
-      Check the documentation for more information about its features and configurations at:
-      https://storybook.js.org/docs/configure/vitest
+      Check the documentation for more information about its features and options at:
+      https://storybook.js.org/docs/writing-tests/test-runner-with-vitest
     `
   );
 }

From b45a9b4d7f643f361d4f9c52cbb27749834b2ae1 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 10:50:31 +0200
Subject: [PATCH 26/39] Update code/addons/vitest/src/postinstall.ts

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>
---
 code/addons/vitest/src/postinstall.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 60273d5bdaea..685c1e028294 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -108,9 +108,9 @@ export default async function postInstall(options: PostinstallOptions) {
     if (existsSync(browserWorkspaceFile)) {
       logger.info(
         dedent`
-          We detected that you have Vitest and workspaces configured, so we couldn't automatically set the plugin for you. 
-          Please refer to the documentation on how to complete the set up:
-          https://storybook.js.org/docs/configure/vitest
+          We detected that you are using Vitest with workspaces, so we do not have enough information to continue setting up the plugin automatically.
+          Please refer to the documentation to complete the setup manually:
+          https://storybook.js.org/docs/writing-tests/test-runner-with-vitest#manual
         `
       );
     } else {

From d8a5c72a84363c83852fb039e647221d7a2bc431 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 10:50:41 +0200
Subject: [PATCH 27/39] Update code/addons/vitest/src/postinstall.ts

Co-authored-by: Kyle Gach <kyle.gach@gmail.com>
---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 685c1e028294..5410cc6cb417 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -228,7 +228,7 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta
   const { builder, renderer } = core;
 
   if (!builder || !renderer) {
-    throw new Error('Could not detect your storybook framework.');
+    throw new Error('Could not detect your Storybook framework.');
   }
 
   const builderPackageJson = await fs.readFile(

From cc42862561e99f8cecbeaafcb30f1ff7e5f8e4d0 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 10:53:09 +0200
Subject: [PATCH 28/39] Correct message

---
 code/addons/vitest/src/postinstall.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 5410cc6cb417..8fb621830b1d 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -32,7 +32,9 @@ export default async function postInstall(options: PostinstallOptions) {
     info.frameworkPackageName !== '@storybook/nextjs' &&
     info.builderPackageName !== '@storybook/builder-vite'
   ) {
-    logger.info('The Vitest addon can only be used with a Vite-based Storybook framework or Next.js.');
+    logger.info(
+      'The Vitest addon can only be used with a Vite-based Storybook framework or Next.js.'
+    );
     return;
   }
 
@@ -108,7 +110,7 @@ export default async function postInstall(options: PostinstallOptions) {
     if (existsSync(browserWorkspaceFile)) {
       logger.info(
         dedent`
-          We detected that you are using Vitest with workspaces, so we do not have enough information to continue setting up the plugin automatically.
+          We can not automatically setup the plugin when you use Vitest with workspaces.
           Please refer to the documentation to complete the setup manually:
           https://storybook.js.org/docs/writing-tests/test-runner-with-vitest#manual
         `

From 5026a1b90186bb81acf4d4e997f54c1812d2e29c Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 11:15:22 +0200
Subject: [PATCH 29/39] Make sure local @storybook/cli packages is used in
 linked mode

---
 scripts/tasks/sandbox.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
index c7848a748c57..b650c80df276 100644
--- a/scripts/tasks/sandbox.ts
+++ b/scripts/tasks/sandbox.ts
@@ -81,7 +81,12 @@ export const sandbox: Task = {
       await addStories(details, options);
     }
 
-    const extraDeps = details.template.modifications?.extraDependencies ?? [];
+    const extraDeps = [
+      ...(details.template.modifications?.extraDependencies ?? []),
+      // The storybook package forwards some CLI commands to @storybook/cli with npx.
+      // Adding the dep makes sure that even npx will use the linked workspace version.
+      '@storybook/cli',
+    ];
     if (!details.template.skipTasks?.includes('vitest-integration')) {
       extraDeps.push(
         'happy-dom',

From 9c82d82ee777a35fb3155b074e917040393d913d Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 12:06:38 +0200
Subject: [PATCH 30/39] Version it

---
 scripts/tasks/sandbox-parts.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 1efffdb68593..976154350b7c 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -545,10 +545,11 @@ export async function addExtraDependencies({
   await packageManager.addDependencies({ installAsDevDependencies: true }, extraDevDeps);
 
   if (extraDeps) {
+    const versionedExtraDeps = await packageManager.getVersionedPackages(extraDeps);
     if (debug) {
-      logger.log('\uD83C\uDF81 Adding extra deps', extraDeps);
+      logger.log('\uD83C\uDF81 Adding extra deps', versionedExtraDeps);
     }
-    await packageManager.addDependencies({ installAsDevDependencies: true }, extraDeps);
+    await packageManager.addDependencies({ installAsDevDependencies: true }, versionedExtraDeps);
   }
   await packageManager.installDependencies();
 }

From b80775b6d5402e6b7336a9e38e9a49f7ae4ae396 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 12:07:12 +0200
Subject: [PATCH 31/39] Change isolate message

---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 8fb621830b1d..6c34eaa19c1a 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -138,7 +138,7 @@ export default async function postInstall(options: PostinstallOptions) {
                 headless: true,
               },
               // Disabling isolation is faster and is similar to how tests are isolated in storybook itself.
-              // Consider removing this, if you have flaky tests.
+              // Consider removing this if you are seeing problems with your tests.
               isolate: false,
               setupFiles: ['./.storybook/vitest.setup.ts'],
             },

From 4d80b1f62cbf7ddcbc4bec59928a14c7d73f82c5 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 12:08:34 +0200
Subject: [PATCH 32/39] Fix code style

---
 code/addons/vitest/src/postinstall.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 6c34eaa19c1a..9e930a82cc88 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -120,7 +120,7 @@ export default async function postInstall(options: PostinstallOptions) {
       await writeFile(
         browserWorkspaceFile,
         dedent`
-        import { defineWorkspace } from 'vitest/config'
+        import { defineWorkspace } from 'vitest/config';
         import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
         ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
         export default defineWorkspace([
@@ -143,7 +143,7 @@ export default async function postInstall(options: PostinstallOptions) {
               setupFiles: ['./.storybook/vitest.setup.ts'],
             },
           },
-        ])
+        ]);
       `
       );
     }
@@ -172,7 +172,7 @@ export default async function postInstall(options: PostinstallOptions) {
           isolate: false,
           setupFiles: ['./.storybook/vitest.setup.ts'],
         },
-      })
+      });
     `
     );
   }

From 0a35a32cbd1b4213e076c38479329a4ae2724040 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 22 Aug 2024 15:57:22 +0200
Subject: [PATCH 33/39] Fix more codestyle

---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index 9e930a82cc88..bc47cad6f961 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -121,7 +121,7 @@ export default async function postInstall(options: PostinstallOptions) {
         browserWorkspaceFile,
         dedent`
         import { defineWorkspace } from 'vitest/config';
-        import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
+        import { storybookTest } from '@storybook/experimental-addon-vitest/plugin';
         ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
         export default defineWorkspace([
           '${relative(dirname(browserWorkspaceFile), rootConfig)}',

From 61338bf3d33e1ac5a890ed5498d1c8ed49ea32e3 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 23 Aug 2024 14:57:57 +0200
Subject: [PATCH 34/39] Fix default export

---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index bc47cad6f961..eb80b34c3bc4 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -13,7 +13,7 @@ import {
 } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
-import { findUp } from 'find-up';
+import findUp from 'find-up';
 import c from 'tinyrainbow';
 import dedent from 'ts-dedent';
 

From cd8f1f272fd743bc97dde8916f44acbb50af63c5 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 23 Aug 2024 15:14:34 +0200
Subject: [PATCH 35/39] Fix

---
 code/addons/vitest/src/postinstall.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index eb80b34c3bc4..bc47cad6f961 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -13,7 +13,7 @@ import {
 } from 'storybook/internal/common';
 import { logger } from 'storybook/internal/node-logger';
 
-import findUp from 'find-up';
+import { findUp } from 'find-up';
 import c from 'tinyrainbow';
 import dedent from 'ts-dedent';
 

From c17df9f8811767be638532bf8c69f5e31759e703 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 23 Aug 2024 15:54:03 +0200
Subject: [PATCH 36/39] Make renderer nullable

---
 code/addons/vitest/src/postinstall.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index bc47cad6f961..ca1af611e18e 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -229,8 +229,8 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta
 
   const { builder, renderer } = core;
 
-  if (!builder || !renderer) {
-    throw new Error('Could not detect your Storybook framework.');
+  if (!builder) {
+    throw new Error('Could not detect your Storybook builder.');
   }
 
   const builderPackageJson = await fs.readFile(
@@ -239,8 +239,12 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta
   );
   const builderPackageName = JSON.parse(builderPackageJson).name;
 
-  const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8');
-  const rendererPackageName = JSON.parse(rendererPackageJson).name;
+  let rendererPackageName;
+
+  if (renderer) {
+    const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8');
+    rendererPackageName = JSON.parse(rendererPackageJson).name;
+  }
 
   return {
     frameworkPackageName,

From 963014874935ac8d7eadbcbd4902b0f9e7503030 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 23 Aug 2024 15:56:22 +0200
Subject: [PATCH 37/39] Fix type issues

---
 code/addons/vitest/src/postinstall.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
index ca1af611e18e..53361975704b 100644
--- a/code/addons/vitest/src/postinstall.ts
+++ b/code/addons/vitest/src/postinstall.ts
@@ -44,7 +44,8 @@ export default async function postInstall(options: PostinstallOptions) {
     '@storybook/sveltekit',
   ].includes(info.frameworkPackageName)
     ? info.frameworkPackageName
-    : ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes(
+    : info.rendererPackageName &&
+        ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes(
           info.rendererPackageName
         )
       ? info.rendererPackageName
@@ -239,8 +240,7 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta
   );
   const builderPackageName = JSON.parse(builderPackageJson).name;
 
-  let rendererPackageName;
-
+  let rendererPackageName: string | undefined;
   if (renderer) {
     const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8');
     rendererPackageName = JSON.parse(rendererPackageJson).name;

From dc9432a31fa9c14635f25887db6dd04978fc5ea4 Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 23 Aug 2024 15:59:08 +0200
Subject: [PATCH 38/39] Throw errors in renderToCanvas in portable stories

---
 .../src/preview-api/modules/store/csf/portable-stories.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index f81ec95eca77..1525b6e3e6d8 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -165,8 +165,12 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
             name: story.name,
             tags: story.tags,
             showMain: () => {},
-            showError: (error) => {},
-            showException: (error) => {},
+            showError: (error): void => {
+              throw new Error(`${error.title}\n${error.description}`);
+            },
+            showException: (error): void => {
+              throw error;
+            },
             forceRemount: true,
             storyContext: context,
             storyFn: () => story.unboundStoryFn(context),

From befba4f7a814ebcb1ace2a718478c9611f33ea1a Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Fri, 23 Aug 2024 15:19:36 +0000
Subject: [PATCH 39/39] Write changelog for 8.3.0-alpha.9 [skip ci]

---
 CHANGELOG.prerelease.md | 8 ++++++++
 code/package.json       | 3 ++-
 docs/versions/next.json | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index dc1270061fa3..bade8a334b3a 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,11 @@
+## 8.3.0-alpha.9
+
+- Addon Viewport: Add default options via parameters - [#28944](https://github.com/storybookjs/storybook/pull/28944), thanks @ndelangen!
+- CLI: Make PackageJson optional for starting a dev server - [#28594](https://github.com/storybookjs/storybook/pull/28594), thanks @tobiasdiez!
+- Svelte: Fix events not being logged in Actions when a story has decorators - [#28247](https://github.com/storybookjs/storybook/pull/28247), thanks @JReinhold!
+- Vitest: Fix default viewport - [#28943](https://github.com/storybookjs/storybook/pull/28943), thanks @kasperpeulen!
+- Vitest: Implement add command for vitest addon - [#28920](https://github.com/storybookjs/storybook/pull/28920), thanks @kasperpeulen!
+
 ## 8.3.0-alpha.8
 
 - Addon Vitest: Improve transformation logic to avoid duplicate tests - [#28929](https://github.com/storybookjs/storybook/pull/28929), thanks @yannbf!
diff --git a/code/package.json b/code/package.json
index 264fb23412bb..d6adab474ae7 100644
--- a/code/package.json
+++ b/code/package.json
@@ -292,5 +292,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.3.0-alpha.9"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 713ecd1b6677..551af3e7b3d7 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.3.0-alpha.8","info":{"plain":"- Addon Vitest: Improve transformation logic to avoid duplicate tests - [#28929](https://github.com/storybookjs/storybook/pull/28929), thanks @yannbf!\n- Addon Vitest: Set default viewport if applicable - [#28905](https://github.com/storybookjs/storybook/pull/28905), thanks @yannbf!\n- Addon-docs: Remove babel dependency - [#28915](https://github.com/storybookjs/storybook/pull/28915), thanks @shilman!\n- Blocks: Fix scroll to non-ascii anchors - [#28826](https://github.com/storybookjs/storybook/pull/28826), thanks @SkReD!\n- Core: Introduce setProjectAnnotations API to more renderers and frameworks - [#28907](https://github.com/storybookjs/storybook/pull/28907), thanks @yannbf!\n- Dependencies: Upgrade `commander` - [#28857](https://github.com/storybookjs/storybook/pull/28857), thanks @43081j!\n- SvelteKit: Introduce portable stories support - [#28918](https://github.com/storybookjs/storybook/pull/28918), thanks @yannbf!"}}
+{"version":"8.3.0-alpha.9","info":{"plain":"- Addon Viewport: Add default options via parameters - [#28944](https://github.com/storybookjs/storybook/pull/28944), thanks @ndelangen!\n- CLI: Make PackageJson optional for starting a dev server - [#28594](https://github.com/storybookjs/storybook/pull/28594), thanks @tobiasdiez!\n- Svelte: Fix events not being logged in Actions when a story has decorators - [#28247](https://github.com/storybookjs/storybook/pull/28247), thanks @JReinhold!\n- Vitest: Fix default viewport - [#28943](https://github.com/storybookjs/storybook/pull/28943), thanks @kasperpeulen!\n- Vitest: Implement add command for vitest addon - [#28920](https://github.com/storybookjs/storybook/pull/28920), thanks @kasperpeulen!"}}