Merge branch 'next' into 16150-cra5-sb-upgrade

lib/cli/src/upgrade.test.ts

@@ -1,4 +1,4 @@
-import { getStorybookVersion, isCorePackage } from './upgrade';
+import { addExtraFlags, getStorybookVersion, isCorePackage } from './upgrade';
 
 describe.each([
   ['│ │ │ ├── @babel/code-frame@7.10.3 deduped', null],
@@ -36,3 +36,39 @@ describe.each([
     expect(isCorePackage(input)).toEqual(output);
   });
 });
+
+describe('extra flags', () => {
+  const extraFlags = {
+    'react-scripts@<5': ['--foo'],
+  };
+  const devDependencies = {};
+  it('package matches constraints', () => {
+    expect(
+      addExtraFlags(extraFlags, [], { dependencies: { 'react-scripts': '4' }, devDependencies })
+    ).toEqual(['--foo']);
+  });
+  it('package prerelease matches constraints', () => {
+    expect(
+      addExtraFlags(extraFlags, [], {
+        dependencies: { 'react-scripts': '4.0.0-alpha.0' },
+        devDependencies,
+      })
+    ).toEqual(['--foo']);
+  });
+  it('package not matches constraints', () => {
+    expect(
+      addExtraFlags(extraFlags, [], {
+        dependencies: { 'react-scripts': '5.0.0-alpha.0' },
+        devDependencies,
+      })
+    ).toEqual([]);
+  });
+  it('no package not matches constraints', () => {
+    expect(
+      addExtraFlags(extraFlags, [], {
+        dependencies: {},
+        devDependencies,
+      })
+    ).toEqual([]);
+  });
+});

lib/cli/src/upgrade.ts

@@ -1,7 +1,11 @@
 import { sync as spawnSync } from 'cross-spawn';
 import semver from '@storybook/semver';
 import { logger } from '@storybook/node-logger';
-import { JsPackageManagerFactory } from './js-package-manager';
+import {
+  getPackageDetails,
+  JsPackageManagerFactory,
+  PackageJsonWithDepsAndDevDeps,
+} from './js-package-manager';
 import { commandLog } from './helpers';
 import { automigrate } from './automigrate';
 
@@ -92,6 +96,32 @@ export const checkVersionConsistency = () => {
   });
 };
 
+type ExtraFlags = Record<string, string[]>;
+const EXTRA_FLAGS: ExtraFlags = {
+  'react-scripts@<5': ['--reject', '/preset-create-react-app/'],
+};
+
+export const addExtraFlags = (
+  extraFlags: ExtraFlags,
+  flags: string[],
+  { dependencies, devDependencies }: PackageJsonWithDepsAndDevDeps
+) => {
+  return Object.entries(extraFlags).reduce(
+    (acc, entry) => {
+      const [pattern, extra] = entry;
+      const [pkg, specifier] = getPackageDetails(pattern);
+      const pkgVersion = dependencies[pkg] || devDependencies[pkg];
+
+      if (pkgVersion && semver.satisfies(semver.coerce(pkgVersion), specifier)) {
+        return [...acc, ...extra];
+      }
+
+      return acc;
+    },
+    [...flags]
+  );
+};
+
 interface UpgradeOptions {
   prerelease: boolean;
   skipCheck: boolean;
@@ -105,10 +135,11 @@ export const upgrade = async ({ prerelease, skipCheck, useNpm, dryRun, yes }: Up
 
   commandLog(`Checking for latest versions of '@storybook/*' packages`);
 
-  const flags = [];
+  let flags = [];
   if (!dryRun) flags.push('--upgrade');
   flags.push('--target');
   flags.push(prerelease ? 'greatest' : 'latest');
+  flags = addExtraFlags(EXTRA_FLAGS, flags, packageManager.retrievePackageJson());
   const check = spawnSync('npx', ['npm-check-updates', '/storybook/', ...flags], {
     stdio: 'pipe',
   }).output.toString();