CLI: Add cra5 fix

lib/cli/src/fix/fixes/cra5.ts

@@ -0,0 +1,57 @@
+import chalk from 'chalk';
+import dedent from 'ts-dedent';
+import semver from '@storybook/semver';
+import { ConfigFile } from '@storybook/csf-tools';
+import { Fix } from '../types';
+import { webpack5 } from './webpack5';
+
+/**
+ * Is the user upgrading from CRA4 to CRA5?
+ *
+ * If so:
+ * - Run upgrades/webpack5
+ */
+interface CRA5RunOptions {
+  craVersion: string;
+  // FIXME craPresetVersion: string;
+  storybookVersion: string;
+  main: ConfigFile;
+}
+
+export const cra5: Fix<CRA5RunOptions> = {
+  id: 'cra5',
+
+  async check({ packageManager }) {
+    const packageJson = packageManager.retrievePackageJson();
+    const { dependencies, devDependencies } = packageJson;
+    const craVersion = dependencies['react-scripts'] || devDependencies['react-scripts'];
+    const craCoerced = semver.coerce(craVersion)?.version;
+
+    if (semver.lt(craCoerced, '5.0.0')) {
+      return null;
+    }
+
+    const builderInfo = await webpack5.checkWebpack5Builder(packageJson);
+    return builderInfo ? { craVersion, ...builderInfo } : null;
+  },
+
+  prompt({ craVersion, storybookVersion }) {
+    const craFormatted = chalk.cyan(`Create React App (CRA) ${craVersion}`);
+    const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+    return dedent`
+      We've detected you are running ${craFormatted} which is powered by webpack5.
+      ${sbFormatted} runs webpack4 by default, which is incompatible.
+
+      In order to work with your version of CRA, we need to install Storybook's ${chalk.cyan(
+        'webpack5 builder'
+      )}.
+    `;
+  },
+
+  async run(options) {
+    return webpack5.run({
+      ...options,
+      result: { webpackVersion: null, ...options.result },
+    });
+  },
+};

lib/cli/src/fix/fixes/index.ts

@@ -1,5 +1,6 @@
+import { cra5 } from './cra5';
 import { webpack5 } from './webpack5';
 import { Fix } from '../types';
 
 export * from '../types';
-export const fixes: Fix[] = [webpack5];
+export const fixes: Fix[] = [cra5, webpack5];