CLI: Fix peer dep issues for npm users during upgrade

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();
   }