From ad085e8416f6f15a02eb588cac53670b3b54afef Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Fri, 21 Feb 2025 14:10:30 +0100
Subject: [PATCH] Fix peer dep issues for npm users during upgrade

---
 code/lib/cli-storybook/src/upgrade.ts | 55 ++++++++++++++++-----------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/code/lib/cli-storybook/src/upgrade.ts b/code/lib/cli-storybook/src/upgrade.ts
index 002216ba99f..0929fc51762 100644
--- a/code/lib/cli-storybook/src/upgrade.ts
+++ b/code/lib/cli-storybook/src/upgrade.ts
@@ -254,36 +254,47 @@ export const doUpgrade = async ({
     // GitHub Issue: https://github.com/storybookjs/storybook/issues/30306
     // Solution: Remove all Storybook packages (except 'storybook') from the package.json and install them again
     if (packageManager.type === 'npm') {
+      const getPackageName = (dep: string) => {
+        const lastAtIndex = dep.lastIndexOf('@');
+        return lastAtIndex > 0 ? dep.slice(0, lastAtIndex) : dep;
+      };
+
+      // Remove all Storybook packages except 'storybook'
       await packageManager.removeDependencies(
-        {
-          skipInstall: false,
-        },
+        { skipInstall: false },
         [...upgradedDependencies, ...upgradedDevDependencies]
-          .map((dep) => {
-            const lastAtIndex = dep.lastIndexOf('@');
-            return lastAtIndex > 0 ? dep.slice(0, lastAtIndex) : dep;
-          })
-          // We don't want to remove the storybook package from the package.json
-          // because third-party packages which we don't remove may depend on it via peer-dependency requirements
+          .map(getPackageName)
           .filter((dep) => dep !== 'storybook')
       );
 
-      await packageManager.installDependencies();
+      // Handle 'storybook' package separately to maintain peer dependencies
+      const findStorybookPackage = (deps: string[]) =>
+        deps.find((dep) => getPackageName(dep) === 'storybook');
+
+      const storybookDep = findStorybookPackage(upgradedDependencies);
+      const storybookDevDep = findStorybookPackage(upgradedDevDependencies);
+
+      if (storybookDep) {
+        await packageManager.addDependencies({ installAsDevDependencies: false }, [storybookDep]);
+      }
+      if (storybookDevDep) {
+        await packageManager.addDependencies({ installAsDevDependencies: true }, [storybookDevDep]);
+      }
     }
 
+    // Update all dependencies
     logger.info(`Updating dependencies in ${picocolors.cyan('package.json')}..`);
-    if (upgradedDependencies.length > 0) {
-      await packageManager.addDependencies(
-        { installAsDevDependencies: false, skipInstall: true, packageJson },
-        upgradedDependencies
-      );
-    }
-    if (upgradedDevDependencies.length > 0) {
-      await packageManager.addDependencies(
-        { installAsDevDependencies: true, skipInstall: true, packageJson },
-        upgradedDevDependencies
-      );
-    }
+    const addDeps = async (deps: string[], isDev: boolean) => {
+      if (deps.length > 0) {
+        await packageManager.addDependencies(
+          { installAsDevDependencies: isDev, skipInstall: true, packageJson },
+          deps
+        );
+      }
+    };
+
+    await addDeps(upgradedDependencies, false);
+    await addDeps(upgradedDevDependencies, true);
     await packageManager.installDependencies();
   }