CLI: install the same version as the user in sb-scripts automigration

code/lib/cli/src/automigrate/fixes/sb-scripts.test.ts

@@ -88,16 +88,18 @@ describe('sb scripts fix', () => {
           checkSbScripts({
             packageJson,
           })
-        ).resolves.toEqual({
-          storybookScripts: {
-            official: {
-              storybook: 'storybook dev -p 6006',
-              'build-storybook': 'storybook build -o build/storybook',
+        ).resolves.toEqual(
+          expect.objectContaining({
+            storybookScripts: {
+              official: {
+                storybook: 'storybook dev -p 6006',
+                'build-storybook': 'storybook build -o build/storybook',
+              },
+              custom: {},
             },
-            custom: {},
-          },
-          storybookVersion: '^7.0.0-alpha.0',
-        });
+            storybookVersion: '^7.0.0-alpha.0',
+          })
+        );
       });
     });
 
@@ -122,18 +124,20 @@ describe('sb scripts fix', () => {
           checkSbScripts({
             packageJson,
           })
-        ).resolves.toEqual({
-          storybookScripts: {
-            custom: {
-              'sb:start': 'start-storybook -p 6006',
-              'sb:build': 'build-storybook -o buid/storybook',
-              'test-storybook:ci':
-                'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
+        ).resolves.toEqual(
+          expect.objectContaining({
+            storybookScripts: {
+              custom: {
+                'sb:start': 'start-storybook -p 6006',
+                'sb:build': 'build-storybook -o buid/storybook',
+                'test-storybook:ci':
+                  'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
+              },
+              official: {},
             },
-            official: {},
-          },
-          storybookVersion: '^7.0.0-alpha.0',
-        });
+            storybookVersion: '^7.0.0-alpha.0',
+          })
+        );
       });
 
       describe('with old official and custom scripts', () => {
@@ -156,19 +160,21 @@ describe('sb scripts fix', () => {
             checkSbScripts({
               packageJson,
             })
-          ).resolves.toEqual({
-            storybookScripts: {
-              custom: {
-                'storybook:build': 'build-storybook -o buid/storybook',
-                'test-storybook:ci':
-                  'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
+          ).resolves.toEqual(
+            expect.objectContaining({
+              storybookScripts: {
+                custom: {
+                  'storybook:build': 'build-storybook -o buid/storybook',
+                  'test-storybook:ci':
+                    'concurrently -k -s first -n "SB,TEST" -c "magenta,blue" "yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent" "wait-on tcp:6006 && yarn test-storybook"',
+                },
+                official: {
+                  storybook: 'storybook dev -p 6006',
+                },
               },
-              official: {
-                storybook: 'storybook dev -p 6006',
-              },
-            },
-            storybookVersion: '^7.0.0-alpha.0',
-          });
+              storybookVersion: '^7.0.0-alpha.0',
+            })
+          );
         });
       });
 

code/lib/cli/src/automigrate/fixes/sb-scripts.ts

@@ -3,13 +3,16 @@ import { dedent } from 'ts-dedent';
 import semver from '@storybook/semver';
 import { getStorybookInfo } from '@storybook/core-common';
 import { Fix } from '../types';
+import { getStorybookVersionSpecifier } from '../../helpers';
+import { PackageJsonWithDepsAndDevDeps } from '../../js-package-manager';
 
 interface SbScriptsRunOptions {
   storybookScripts: {
     custom: Record<string, string>;
     official: Record<string, string>;
   };
   storybookVersion: string;
+  packageJson: PackageJsonWithDepsAndDevDeps;
 }
 
 const logger = console;
@@ -76,7 +79,9 @@ export const sbScripts: Fix<SbScriptsRunOptions> = {
         .replace('build-storybook', 'storybook build');
     });
 
-    return semver.gte(storybookCoerced, '6.0.0') ? { storybookScripts, storybookVersion } : null;
+    return semver.gte(storybookCoerced, '7.0.0')
+      ? { packageJson, storybookScripts, storybookVersion }
+      : null;
   },
 
   prompt({ storybookVersion }) {
@@ -104,13 +109,16 @@ export const sbScripts: Fix<SbScriptsRunOptions> = {
       .join('\n\n');
   },
 
-  async run({ result: { storybookScripts }, packageManager, dryRun }) {
+  async run({ result: { storybookScripts, packageJson }, packageManager, dryRun }) {
     logger.log();
     logger.info(`Adding 'storybook' as dev dependency`);
     logger.log();
 
     if (!dryRun) {
-      packageManager.addDependencies({ installAsDevDependencies: true }, ['storybook']);
+      const versionToInstall = getStorybookVersionSpecifier(packageJson);
+      packageManager.addDependencies({ installAsDevDependencies: true }, [
+        `storybook@${versionToInstall}`,
+      ]);
     }
 
     logger.info(`Updating scripts in package.json`);

code/lib/cli/src/helpers.test.ts

@@ -108,4 +108,28 @@ describe('Helpers', () => {
       helpers.copyComponents(framework, SupportedLanguage.JAVASCRIPT)
     ).rejects.toThrowError(expectedMessage);
   });
+
+  describe('getStorybookVersionSpecifier', () => {
+    it(`should return the specifier if storybook lib exists in package.json`, () => {
+      expect(
+        helpers.getStorybookVersionSpecifier({
+          dependencies: {},
+          devDependencies: {
+            '@storybook/react': '^x.x.x',
+          },
+        })
+      ).toEqual('^x.x.x');
+    });
+
+    it(`should throw an error if no package is found`, () => {
+      expect(() => {
+        helpers.getStorybookVersionSpecifier({
+          dependencies: {},
+          devDependencies: {
+            'something-else': '^x.x.x',
+          },
+        });
+      }).toThrowError("Couldn't find any official storybook packages in package.json");
+    });
+  });
 });

code/lib/cli/src/helpers.ts

@@ -9,6 +9,7 @@ import stripJsonComments from 'strip-json-comments';
 import { SupportedRenderers, SupportedLanguage } from './project_types';
 import { JsPackageManager, PackageJson, PackageJsonWithDepsAndDevDeps } from './js-package-manager';
 import { getBaseDir } from './dirs';
+import storybookMonorepoPackages from './versions';
 
 const logger = console;
 
@@ -222,3 +223,20 @@ export async function copyComponents(framework: SupportedRenderers, language: Su
     overwrite: true,
   });
 }
+
+// Given a package.json, finds any official storybook package within it
+// and if it exists, returns the version of that package from the specified package.json
+export function getStorybookVersionSpecifier(packageJson: PackageJsonWithDepsAndDevDeps) {
+  const allDeps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+  const storybookPackage = Object.keys(allDeps).find(
+    (name: keyof typeof storybookMonorepoPackages) => {
+      return storybookMonorepoPackages[name];
+    }
+  );
+
+  if (!storybookPackage) {
+    throw new Error(`Couldn't find any official storybook packages in package.json`);
+  }
+
+  return allDeps[storybookPackage];
+}