@storybook/cli 7.0.0-alpha.19 → 7.0.0-alpha.21

package/README.md

@@ -53,4 +53,4 @@ If the CLI cannot detect your project type, it will ask you. You can also force
 npx sb init --type <type>
 ```
 
-Where type is one of the project types defined in [project_types.js](https://github.com/storybookjs/storybook/blob/next/lib/cli/src/project_types.ts)
+Where type is one of the project types defined in [project_types.ts](https://github.com/storybookjs/storybook/blob/next/code/lib/cli/src/project_types.ts)

package/dist/cjs/automigrate/fixes/index.js

@@ -26,6 +26,8 @@ var _npm = require("./npm7");
 
 var _sbScripts = require("./sb-scripts");
 
+var _newFrameworks = require("./new-frameworks");
+
 var _types = require("../types");
 
 Object.keys(_types).forEach(function (key) {
@@ -39,5 +41,5 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _vue.vue3, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite, _npm.npm7, _sbScripts.sbScripts];
+const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _vue.vue3, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite, _npm.npm7, _sbScripts.sbScripts, _newFrameworks.newFrameworks];
 exports.fixes = fixes;

package/dist/cjs/automigrate/fixes/new-frameworks.js

@@ -0,0 +1,249 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.newFrameworks = exports.getFrameworkOptions = exports.getBuilder = void 0;
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _semver = _interopRequireDefault(require("@storybook/semver"));
+
+var _csfTools = require("@storybook/csf-tools");
+
+var _coreCommon = require("@storybook/core-common");
+
+var _helpers = require("../../helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const logger = console;
+const packagesMap = {
+  '@storybook/react': {
+    webpack5: '@storybook/react-webpack5',
+    vite: '@storybook/react-vite'
+  },
+  '@storybook/preact': {
+    webpack5: '@storybook/preact-webpack5'
+  },
+  '@storybook/server': {
+    webpack5: '@storybook/server-webpack5'
+  },
+  '@storybook/angular': {
+    webpack5: '@storybook/angular'
+  },
+  '@storybook/vue': {
+    webpack5: '@storybook/vue-webpack5',
+    vite: '@storybook/vue-vite'
+  },
+  '@storybook/vue3': {
+    webpack5: '@storybook/vue3-webpack5',
+    vite: '@storybook/vue3-vite'
+  },
+  '@storybook/svelte': {
+    webpack5: '@storybook/svelte-webpack5',
+    vite: '@storybook/svelte-vite'
+  },
+  '@storybook/web-components': {
+    webpack5: '@storybook/web-components-webpack5'
+  },
+  '@storybook/html': {
+    webpack5: '@storybook/html-webpack5'
+  }
+};
+
+const getBuilder = builder => {
+  if (typeof builder === 'string') {
+    return builder.includes('vite') ? 'vite' : 'webpack5';
+  }
+
+  return builder !== null && builder !== void 0 && builder.name.includes('vite') ? 'vite' : 'webpack5';
+};
+
+exports.getBuilder = getBuilder;
+
+const getFrameworkOptions = (framework, main) => {
+  const frameworkOptions = main.getFieldValue([`${framework}Options`]);
+  return frameworkOptions || {};
+};
+/**
+ * Does the user have separate framework and builders (e.g. @storybook/react + core.builder -> webpack5?
+ *
+ * If so:
+ * - Remove the dependencies (@storybook/react + @storybook/builder-webpack5 + @storybook/manager-webpack5)
+ * - Install the correct new package e.g. (@storybook/react-webpack5)
+ * - Update the main config to use the new framework
+ * -- moving core.builder into framework.options.builder
+ * -- moving frameworkOptions (e.g. reactOptions) into framework.options
+ */
+
+
+exports.getFrameworkOptions = getFrameworkOptions;
+const newFrameworks = {
+  id: 'newFrameworks',
+
+  async check({
+    packageManager
+  }) {
+    var _semver$coerce;
+
+    const packageJson = packageManager.retrievePackageJson();
+    const allDeps = Object.assign({}, packageJson.dependencies, packageJson.devDependencies);
+    const config = (0, _coreCommon.getStorybookInfo)(packageJson);
+    const {
+      mainConfig,
+      version: storybookVersion,
+      framework
+    } = config;
+
+    if (!mainConfig) {
+      logger.warn('Unable to find storybook main.js config, skipping');
+      return null;
+    }
+
+    const storybookCoerced = storybookVersion && ((_semver$coerce = _semver.default.coerce(storybookVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version);
+
+    if (!storybookCoerced) {
+      logger.warn((0, _tsDedent.default)`
+        ❌ Unable to determine storybook version, skipping ${_chalk.default.cyan('newFrameworks')} fix.
+        🤔 Are you running automigrate from your project directory?
+      `);
+      return null;
+    }
+
+    if (!_semver.default.gte(storybookCoerced, '7.0.0')) {
+      return null;
+    } // If in the future the eslint plugin has a framework option, using main to extract the framework field will be very useful
+
+
+    const main = await (0, _csfTools.readConfig)(mainConfig);
+    const frameworkPackage = main.getFieldValue(['framework']);
+    const builder = main.getFieldValue(['core', 'builder']);
+
+    if (!frameworkPackage) {
+      return null;
+    }
+
+    const supportedPackages = Object.keys(packagesMap);
+
+    if (!supportedPackages.includes(frameworkPackage)) {
+      return null;
+    }
+
+    const builderInfo = {
+      name: getBuilder(builder),
+      options: main.getFieldValue(['core', 'builder', 'options']) || {}
+    }; // TODO: once we have vite frameworks e.g. @storybook/react-vite, then we support it here
+    // and remove ['storybook-builder-vite', '@storybook/builder-vite'] from deps
+
+    if (builderInfo.name === 'vite') {
+      return null;
+    }
+
+    const frameworkOptions = getFrameworkOptions(framework, main);
+    const dependenciesToRemove = ['@storybook/builder-webpack5', '@storybook/manager-webpack5', '@storybook/builder-webpack4', '@storybook/manager-webpack4'].filter(dep => allDeps[dep]);
+    const newFrameworkPackage = packagesMap[frameworkPackage][builderInfo.name];
+    const dependenciesToAdd = []; // some frameworks didn't change e.g. Angular, Ember
+
+    if (newFrameworkPackage !== frameworkPackage) {
+      dependenciesToRemove.push(frameworkPackage);
+      dependenciesToAdd.push(newFrameworkPackage);
+    }
+
+    return {
+      main,
+      dependenciesToAdd,
+      dependenciesToRemove,
+      frameworkPackage: newFrameworkPackage,
+      frameworkOptions,
+      builderInfo,
+      packageJson
+    };
+  },
+
+  prompt() {
+    return (0, _tsDedent.default)`
+      We've detected you are using an older format of Storybook frameworks and builders.
+
+      In Storybook 7, frameworks also specify the builder to be used.
+
+      We can remove the dependencies that are no longer needed and install the new framework that already includes the builder.
+
+      To learn more about the framework field, see: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory')}
+
+      ${_chalk.default.underline(_chalk.default.bold(_chalk.default.cyan('Webpack4 users')))}
+
+      Unless you're using Storybook's Vite builder, this automigration will install a Webpack5-based framework.
+      
+      If you were using Storybook's Webpack4 builder (default in 6.x, discontinued in 7.0), this could be a breaking
+      change--especially if your project has a custom webpack configuration.
+      
+      To learn more about migrating from Webpack4, see: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued')}
+    `;
+  },
+
+  async run({
+    result: {
+      dependenciesToAdd,
+      dependenciesToRemove,
+      main,
+      frameworkPackage,
+      frameworkOptions,
+      builderInfo,
+      packageJson
+    },
+    packageManager,
+    dryRun
+  }) {
+    logger.info(`✅ Removing legacy dependencies: ${dependenciesToRemove.join(', ')}`);
+
+    if (!dryRun) {
+      packageManager.removeDependencies({
+        skipInstall: dependenciesToAdd.length > 0,
+        packageJson
+      }, dependenciesToRemove);
+    }
+
+    if (dependenciesToAdd.length > 0) {
+      logger.info(`✅ Installing new dependencies: ${dependenciesToAdd.join(', ')}`);
+
+      if (!dryRun) {
+        const versionToInstall = (0, _helpers.getStorybookVersionSpecifier)(packageJson);
+        const depsToAdd = dependenciesToAdd.map(dep => `${dep}@${versionToInstall}`);
+        packageManager.addDependencies({
+          installAsDevDependencies: true
+        }, depsToAdd);
+      }
+    }
+
+    if (!dryRun) {
+      logger.info(`✅ Updating framework field in main.js`);
+      const currentCore = main.getFieldValue(['core']);
+      main.setFieldValue(['framework', 'name'], frameworkPackage);
+      main.setFieldValue(['framework', 'options'], frameworkOptions);
+
+      if (currentCore !== null && currentCore !== void 0 && currentCore.builder) {
+        delete currentCore.builder;
+      }
+
+      if (Object.keys(builderInfo.options).length > 0) {
+        main.setFieldValue(['framework', 'options', 'builder'], builderInfo.options);
+      }
+
+      if (currentCore) {
+        if (Object.keys(currentCore).length === 0) {
+          // TODO: this should delete the field instead
+          main.setFieldValue(['core'], {});
+        } else {
+          main.setFieldValue(['core'], currentCore);
+        }
+      }
+
+      await (0, _csfTools.writeConfig)(main);
+    }
+  }
+
+};
+exports.newFrameworks = newFrameworks;

package/dist/cjs/automigrate/index.js

@@ -79,7 +79,7 @@ const automigrate = async ({
           logger.info(`✅ ran ${_chalk.default.cyan(f.id)} migration`);
         } catch (error) {
           logger.info(`❌ error when running ${_chalk.default.cyan(f.id)} migration:`);
-          logger.info(error.message);
+          logger.info(error);
           logger.info();
         }
       } else {

package/dist/cjs/repro-templates.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-// auto generated file, do not edit
 var _default = {
   'cra/default-js': {
     name: 'Create React App (Javascript)',
     script: 'npx create-react-app .',
+    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/cra',
       renderer: '@storybook/react',
@@ -18,11 +18,24 @@ var _default = {
   'cra/default-ts': {
     name: 'Create React App (Typescript)',
     script: 'npx create-react-app . --template typescript',
+    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/cra',
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5'
     }
-  }
+  } // FIXME: missing documentation.json
+  // 'angular/latest': {
+  //   name: 'Angular (latest)',
+  //   script:
+  //     'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --skip-install=true --strict',
+  //   cadence: ['ci', 'daily', 'weekly'],
+  //   expected: {
+  //     framework: '@storybook/angular',
+  //     renderer: '@storybook/angular',
+  //     builder: '@storybook/builder-webpack5',
+  //   },
+  // },
+
 };
 exports.default = _default;

package/dist/cjs/versions.js

@@ -6,80 +6,80 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // auto generated file, do not edit
 var _default = {
-  '@storybook/addon-a11y': '7.0.0-alpha.19',
-  '@storybook/addon-actions': '7.0.0-alpha.19',
-  '@storybook/addon-backgrounds': '7.0.0-alpha.19',
-  '@storybook/addon-controls': '7.0.0-alpha.19',
-  '@storybook/addon-docs': '7.0.0-alpha.19',
-  '@storybook/addon-essentials': '7.0.0-alpha.19',
-  '@storybook/addon-highlight': '7.0.0-alpha.19',
-  '@storybook/addon-interactions': '7.0.0-alpha.19',
-  '@storybook/addon-jest': '7.0.0-alpha.19',
-  '@storybook/addon-links': '7.0.0-alpha.19',
-  '@storybook/addon-measure': '7.0.0-alpha.19',
-  '@storybook/addon-outline': '7.0.0-alpha.19',
-  '@storybook/addon-storyshots': '7.0.0-alpha.19',
-  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.19',
-  '@storybook/addon-storysource': '7.0.0-alpha.19',
-  '@storybook/addon-toolbars': '7.0.0-alpha.19',
-  '@storybook/addon-viewport': '7.0.0-alpha.19',
-  '@storybook/addons': '7.0.0-alpha.19',
-  '@storybook/angular': '7.0.0-alpha.19',
-  '@storybook/api': '7.0.0-alpha.19',
-  '@storybook/blocks': '7.0.0-alpha.19',
-  '@storybook/builder-manager': '7.0.0-alpha.19',
-  '@storybook/builder-webpack5': '7.0.0-alpha.19',
-  '@storybook/channel-postmessage': '7.0.0-alpha.19',
-  '@storybook/channel-websocket': '7.0.0-alpha.19',
-  '@storybook/channels': '7.0.0-alpha.19',
-  '@storybook/cli': '7.0.0-alpha.19',
-  '@storybook/client-api': '7.0.0-alpha.19',
-  '@storybook/client-logger': '7.0.0-alpha.19',
-  '@storybook/codemod': '7.0.0-alpha.19',
-  '@storybook/components': '7.0.0-alpha.19',
-  '@storybook/core-client': '7.0.0-alpha.19',
-  '@storybook/core-common': '7.0.0-alpha.19',
-  '@storybook/core-events': '7.0.0-alpha.19',
-  '@storybook/core-server': '7.0.0-alpha.19',
-  '@storybook/core-webpack': '7.0.0-alpha.19',
-  '@storybook/csf-tools': '7.0.0-alpha.19',
-  '@storybook/docs-tools': '7.0.0-alpha.19',
-  '@storybook/ember': '7.0.0-alpha.19',
-  '@storybook/html': '7.0.0-alpha.19',
-  '@storybook/html-webpack5': '7.0.0-alpha.19',
-  '@storybook/instrumenter': '7.0.0-alpha.19',
-  '@storybook/node-logger': '7.0.0-alpha.19',
-  '@storybook/postinstall': '7.0.0-alpha.19',
-  '@storybook/preact': '7.0.0-alpha.19',
-  '@storybook/preact-webpack5': '7.0.0-alpha.19',
-  '@storybook/preset-html-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-preact-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-react-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-server-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-svelte-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-vue-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-vue3-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-web-components-webpack': '7.0.0-alpha.19',
-  '@storybook/preview-web': '7.0.0-alpha.19',
-  '@storybook/react': '7.0.0-alpha.19',
-  '@storybook/react-webpack5': '7.0.0-alpha.19',
-  '@storybook/router': '7.0.0-alpha.19',
-  '@storybook/server': '7.0.0-alpha.19',
-  '@storybook/server-webpack5': '7.0.0-alpha.19',
-  '@storybook/source-loader': '7.0.0-alpha.19',
-  '@storybook/store': '7.0.0-alpha.19',
-  '@storybook/svelte': '7.0.0-alpha.19',
-  '@storybook/svelte-webpack5': '7.0.0-alpha.19',
-  '@storybook/telemetry': '7.0.0-alpha.19',
-  '@storybook/theming': '7.0.0-alpha.19',
-  '@storybook/ui': '7.0.0-alpha.19',
-  '@storybook/vue': '7.0.0-alpha.19',
-  '@storybook/vue-webpack5': '7.0.0-alpha.19',
-  '@storybook/vue3': '7.0.0-alpha.19',
-  '@storybook/vue3-webpack5': '7.0.0-alpha.19',
-  '@storybook/web-components': '7.0.0-alpha.19',
-  '@storybook/web-components-webpack5': '7.0.0-alpha.19',
-  sb: '7.0.0-alpha.19',
-  storybook: '7.0.0-alpha.19'
+  '@storybook/addon-a11y': '7.0.0-alpha.21',
+  '@storybook/addon-actions': '7.0.0-alpha.21',
+  '@storybook/addon-backgrounds': '7.0.0-alpha.21',
+  '@storybook/addon-controls': '7.0.0-alpha.21',
+  '@storybook/addon-docs': '7.0.0-alpha.21',
+  '@storybook/addon-essentials': '7.0.0-alpha.21',
+  '@storybook/addon-highlight': '7.0.0-alpha.21',
+  '@storybook/addon-interactions': '7.0.0-alpha.21',
+  '@storybook/addon-jest': '7.0.0-alpha.21',
+  '@storybook/addon-links': '7.0.0-alpha.21',
+  '@storybook/addon-measure': '7.0.0-alpha.21',
+  '@storybook/addon-outline': '7.0.0-alpha.21',
+  '@storybook/addon-storyshots': '7.0.0-alpha.21',
+  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.21',
+  '@storybook/addon-storysource': '7.0.0-alpha.21',
+  '@storybook/addon-toolbars': '7.0.0-alpha.21',
+  '@storybook/addon-viewport': '7.0.0-alpha.21',
+  '@storybook/addons': '7.0.0-alpha.21',
+  '@storybook/angular': '7.0.0-alpha.21',
+  '@storybook/api': '7.0.0-alpha.21',
+  '@storybook/blocks': '7.0.0-alpha.21',
+  '@storybook/builder-manager': '7.0.0-alpha.21',
+  '@storybook/builder-webpack5': '7.0.0-alpha.21',
+  '@storybook/channel-postmessage': '7.0.0-alpha.21',
+  '@storybook/channel-websocket': '7.0.0-alpha.21',
+  '@storybook/channels': '7.0.0-alpha.21',
+  '@storybook/cli': '7.0.0-alpha.21',
+  '@storybook/client-api': '7.0.0-alpha.21',
+  '@storybook/client-logger': '7.0.0-alpha.21',
+  '@storybook/codemod': '7.0.0-alpha.21',
+  '@storybook/components': '7.0.0-alpha.21',
+  '@storybook/core-client': '7.0.0-alpha.21',
+  '@storybook/core-common': '7.0.0-alpha.21',
+  '@storybook/core-events': '7.0.0-alpha.21',
+  '@storybook/core-server': '7.0.0-alpha.21',
+  '@storybook/core-webpack': '7.0.0-alpha.21',
+  '@storybook/csf-tools': '7.0.0-alpha.21',
+  '@storybook/docs-tools': '7.0.0-alpha.21',
+  '@storybook/ember': '7.0.0-alpha.21',
+  '@storybook/html': '7.0.0-alpha.21',
+  '@storybook/html-webpack5': '7.0.0-alpha.21',
+  '@storybook/instrumenter': '7.0.0-alpha.21',
+  '@storybook/node-logger': '7.0.0-alpha.21',
+  '@storybook/postinstall': '7.0.0-alpha.21',
+  '@storybook/preact': '7.0.0-alpha.21',
+  '@storybook/preact-webpack5': '7.0.0-alpha.21',
+  '@storybook/preset-html-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-preact-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-react-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-server-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-svelte-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-vue-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-vue3-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-web-components-webpack': '7.0.0-alpha.21',
+  '@storybook/preview-web': '7.0.0-alpha.21',
+  '@storybook/react': '7.0.0-alpha.21',
+  '@storybook/react-webpack5': '7.0.0-alpha.21',
+  '@storybook/router': '7.0.0-alpha.21',
+  '@storybook/server': '7.0.0-alpha.21',
+  '@storybook/server-webpack5': '7.0.0-alpha.21',
+  '@storybook/source-loader': '7.0.0-alpha.21',
+  '@storybook/store': '7.0.0-alpha.21',
+  '@storybook/svelte': '7.0.0-alpha.21',
+  '@storybook/svelte-webpack5': '7.0.0-alpha.21',
+  '@storybook/telemetry': '7.0.0-alpha.21',
+  '@storybook/theming': '7.0.0-alpha.21',
+  '@storybook/ui': '7.0.0-alpha.21',
+  '@storybook/vue': '7.0.0-alpha.21',
+  '@storybook/vue-webpack5': '7.0.0-alpha.21',
+  '@storybook/vue3': '7.0.0-alpha.21',
+  '@storybook/vue3-webpack5': '7.0.0-alpha.21',
+  '@storybook/web-components': '7.0.0-alpha.21',
+  '@storybook/web-components-webpack5': '7.0.0-alpha.21',
+  sb: '7.0.0-alpha.21',
+  storybook: '7.0.0-alpha.21'
 };
 exports.default = _default;

package/dist/esm/automigrate/fixes/index.js

@@ -7,5 +7,6 @@ import { eslintPlugin } from './eslint-plugin';
 import { builderVite } from './builder-vite';
 import { npm7 } from './npm7';
 import { sbScripts } from './sb-scripts';
+import { newFrameworks } from './new-frameworks';
 export * from '../types';
-export const fixes = [cra5, webpack5, angular12, vue3, mainjsFramework, eslintPlugin, builderVite, npm7, sbScripts];
+export const fixes = [cra5, webpack5, angular12, vue3, mainjsFramework, eslintPlugin, builderVite, npm7, sbScripts, newFrameworks];

package/dist/esm/automigrate/fixes/new-frameworks.js

@@ -0,0 +1,225 @@
+import chalk from 'chalk';
+import dedent from 'ts-dedent';
+import semver from '@storybook/semver';
+import { readConfig, writeConfig } from '@storybook/csf-tools';
+import { getStorybookInfo } from '@storybook/core-common';
+import { getStorybookVersionSpecifier } from '../../helpers';
+const logger = console;
+const packagesMap = {
+  '@storybook/react': {
+    webpack5: '@storybook/react-webpack5',
+    vite: '@storybook/react-vite'
+  },
+  '@storybook/preact': {
+    webpack5: '@storybook/preact-webpack5'
+  },
+  '@storybook/server': {
+    webpack5: '@storybook/server-webpack5'
+  },
+  '@storybook/angular': {
+    webpack5: '@storybook/angular'
+  },
+  '@storybook/vue': {
+    webpack5: '@storybook/vue-webpack5',
+    vite: '@storybook/vue-vite'
+  },
+  '@storybook/vue3': {
+    webpack5: '@storybook/vue3-webpack5',
+    vite: '@storybook/vue3-vite'
+  },
+  '@storybook/svelte': {
+    webpack5: '@storybook/svelte-webpack5',
+    vite: '@storybook/svelte-vite'
+  },
+  '@storybook/web-components': {
+    webpack5: '@storybook/web-components-webpack5'
+  },
+  '@storybook/html': {
+    webpack5: '@storybook/html-webpack5'
+  }
+};
+export const getBuilder = builder => {
+  if (typeof builder === 'string') {
+    return builder.includes('vite') ? 'vite' : 'webpack5';
+  }
+
+  return builder?.name.includes('vite') ? 'vite' : 'webpack5';
+};
+export const getFrameworkOptions = (framework, main) => {
+  const frameworkOptions = main.getFieldValue([`${framework}Options`]);
+  return frameworkOptions || {};
+};
+/**
+ * Does the user have separate framework and builders (e.g. @storybook/react + core.builder -> webpack5?
+ *
+ * If so:
+ * - Remove the dependencies (@storybook/react + @storybook/builder-webpack5 + @storybook/manager-webpack5)
+ * - Install the correct new package e.g. (@storybook/react-webpack5)
+ * - Update the main config to use the new framework
+ * -- moving core.builder into framework.options.builder
+ * -- moving frameworkOptions (e.g. reactOptions) into framework.options
+ */
+
+export const newFrameworks = {
+  id: 'newFrameworks',
+
+  async check({
+    packageManager
+  }) {
+    const packageJson = packageManager.retrievePackageJson();
+    const allDeps = Object.assign({}, packageJson.dependencies, packageJson.devDependencies);
+    const config = getStorybookInfo(packageJson);
+    const {
+      mainConfig,
+      version: storybookVersion,
+      framework
+    } = config;
+
+    if (!mainConfig) {
+      logger.warn('Unable to find storybook main.js config, skipping');
+      return null;
+    }
+
+    const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version;
+
+    if (!storybookCoerced) {
+      logger.warn(dedent`
+        ❌ Unable to determine storybook version, skipping ${chalk.cyan('newFrameworks')} fix.
+        🤔 Are you running automigrate from your project directory?
+      `);
+      return null;
+    }
+
+    if (!semver.gte(storybookCoerced, '7.0.0')) {
+      return null;
+    } // If in the future the eslint plugin has a framework option, using main to extract the framework field will be very useful
+
+
+    const main = await readConfig(mainConfig);
+    const frameworkPackage = main.getFieldValue(['framework']);
+    const builder = main.getFieldValue(['core', 'builder']);
+
+    if (!frameworkPackage) {
+      return null;
+    }
+
+    const supportedPackages = Object.keys(packagesMap);
+
+    if (!supportedPackages.includes(frameworkPackage)) {
+      return null;
+    }
+
+    const builderInfo = {
+      name: getBuilder(builder),
+      options: main.getFieldValue(['core', 'builder', 'options']) || {}
+    }; // TODO: once we have vite frameworks e.g. @storybook/react-vite, then we support it here
+    // and remove ['storybook-builder-vite', '@storybook/builder-vite'] from deps
+
+    if (builderInfo.name === 'vite') {
+      return null;
+    }
+
+    const frameworkOptions = getFrameworkOptions(framework, main);
+    const dependenciesToRemove = ['@storybook/builder-webpack5', '@storybook/manager-webpack5', '@storybook/builder-webpack4', '@storybook/manager-webpack4'].filter(dep => allDeps[dep]);
+    const newFrameworkPackage = packagesMap[frameworkPackage][builderInfo.name];
+    const dependenciesToAdd = []; // some frameworks didn't change e.g. Angular, Ember
+
+    if (newFrameworkPackage !== frameworkPackage) {
+      dependenciesToRemove.push(frameworkPackage);
+      dependenciesToAdd.push(newFrameworkPackage);
+    }
+
+    return {
+      main,
+      dependenciesToAdd,
+      dependenciesToRemove,
+      frameworkPackage: newFrameworkPackage,
+      frameworkOptions,
+      builderInfo,
+      packageJson
+    };
+  },
+
+  prompt() {
+    return dedent`
+      We've detected you are using an older format of Storybook frameworks and builders.
+
+      In Storybook 7, frameworks also specify the builder to be used.
+
+      We can remove the dependencies that are no longer needed and install the new framework that already includes the builder.
+
+      To learn more about the framework field, see: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory')}
+
+      ${chalk.underline(chalk.bold(chalk.cyan('Webpack4 users')))}
+
+      Unless you're using Storybook's Vite builder, this automigration will install a Webpack5-based framework.
+      
+      If you were using Storybook's Webpack4 builder (default in 6.x, discontinued in 7.0), this could be a breaking
+      change--especially if your project has a custom webpack configuration.
+      
+      To learn more about migrating from Webpack4, see: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued')}
+    `;
+  },
+
+  async run({
+    result: {
+      dependenciesToAdd,
+      dependenciesToRemove,
+      main,
+      frameworkPackage,
+      frameworkOptions,
+      builderInfo,
+      packageJson
+    },
+    packageManager,
+    dryRun
+  }) {
+    logger.info(`✅ Removing legacy dependencies: ${dependenciesToRemove.join(', ')}`);
+
+    if (!dryRun) {
+      packageManager.removeDependencies({
+        skipInstall: dependenciesToAdd.length > 0,
+        packageJson
+      }, dependenciesToRemove);
+    }
+
+    if (dependenciesToAdd.length > 0) {
+      logger.info(`✅ Installing new dependencies: ${dependenciesToAdd.join(', ')}`);
+
+      if (!dryRun) {
+        const versionToInstall = getStorybookVersionSpecifier(packageJson);
+        const depsToAdd = dependenciesToAdd.map(dep => `${dep}@${versionToInstall}`);
+        packageManager.addDependencies({
+          installAsDevDependencies: true
+        }, depsToAdd);
+      }
+    }
+
+    if (!dryRun) {
+      logger.info(`✅ Updating framework field in main.js`);
+      const currentCore = main.getFieldValue(['core']);
+      main.setFieldValue(['framework', 'name'], frameworkPackage);
+      main.setFieldValue(['framework', 'options'], frameworkOptions);
+
+      if (currentCore?.builder) {
+        delete currentCore.builder;
+      }
+
+      if (Object.keys(builderInfo.options).length > 0) {
+        main.setFieldValue(['framework', 'options', 'builder'], builderInfo.options);
+      }
+
+      if (currentCore) {
+        if (Object.keys(currentCore).length === 0) {
+          // TODO: this should delete the field instead
+          main.setFieldValue(['core'], {});
+        } else {
+          main.setFieldValue(['core'], currentCore);
+        }
+      }
+
+      await writeConfig(main);
+    }
+  }
+
+};

package/dist/esm/automigrate/index.js

@@ -63,7 +63,7 @@ export const automigrate = async ({
           logger.info(`✅ ran ${chalk.cyan(f.id)} migration`);
         } catch (error) {
           logger.info(`❌ error when running ${chalk.cyan(f.id)} migration:`);
-          logger.info(error.message);
+          logger.info(error);
           logger.info();
         }
       } else {

package/dist/esm/repro-templates.js

@@ -1,8 +1,8 @@
-// auto generated file, do not edit
 export default {
   'cra/default-js': {
     name: 'Create React App (Javascript)',
     script: 'npx create-react-app .',
+    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/cra',
       renderer: '@storybook/react',
@@ -12,10 +12,23 @@ export default {
   'cra/default-ts': {
     name: 'Create React App (Typescript)',
     script: 'npx create-react-app . --template typescript',
+    cadence: ['ci', 'daily', 'weekly'],
     expected: {
       framework: '@storybook/cra',
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5'
     }
-  }
+  } // FIXME: missing documentation.json
+  // 'angular/latest': {
+  //   name: 'Angular (latest)',
+  //   script:
+  //     'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --skip-install=true --strict',
+  //   cadence: ['ci', 'daily', 'weekly'],
+  //   expected: {
+  //     framework: '@storybook/angular',
+  //     renderer: '@storybook/angular',
+  //     builder: '@storybook/builder-webpack5',
+  //   },
+  // },
+
 };

package/dist/esm/versions.js

@@ -1,78 +1,78 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '7.0.0-alpha.19',
-  '@storybook/addon-actions': '7.0.0-alpha.19',
-  '@storybook/addon-backgrounds': '7.0.0-alpha.19',
-  '@storybook/addon-controls': '7.0.0-alpha.19',
-  '@storybook/addon-docs': '7.0.0-alpha.19',
-  '@storybook/addon-essentials': '7.0.0-alpha.19',
-  '@storybook/addon-highlight': '7.0.0-alpha.19',
-  '@storybook/addon-interactions': '7.0.0-alpha.19',
-  '@storybook/addon-jest': '7.0.0-alpha.19',
-  '@storybook/addon-links': '7.0.0-alpha.19',
-  '@storybook/addon-measure': '7.0.0-alpha.19',
-  '@storybook/addon-outline': '7.0.0-alpha.19',
-  '@storybook/addon-storyshots': '7.0.0-alpha.19',
-  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.19',
-  '@storybook/addon-storysource': '7.0.0-alpha.19',
-  '@storybook/addon-toolbars': '7.0.0-alpha.19',
-  '@storybook/addon-viewport': '7.0.0-alpha.19',
-  '@storybook/addons': '7.0.0-alpha.19',
-  '@storybook/angular': '7.0.0-alpha.19',
-  '@storybook/api': '7.0.0-alpha.19',
-  '@storybook/blocks': '7.0.0-alpha.19',
-  '@storybook/builder-manager': '7.0.0-alpha.19',
-  '@storybook/builder-webpack5': '7.0.0-alpha.19',
-  '@storybook/channel-postmessage': '7.0.0-alpha.19',
-  '@storybook/channel-websocket': '7.0.0-alpha.19',
-  '@storybook/channels': '7.0.0-alpha.19',
-  '@storybook/cli': '7.0.0-alpha.19',
-  '@storybook/client-api': '7.0.0-alpha.19',
-  '@storybook/client-logger': '7.0.0-alpha.19',
-  '@storybook/codemod': '7.0.0-alpha.19',
-  '@storybook/components': '7.0.0-alpha.19',
-  '@storybook/core-client': '7.0.0-alpha.19',
-  '@storybook/core-common': '7.0.0-alpha.19',
-  '@storybook/core-events': '7.0.0-alpha.19',
-  '@storybook/core-server': '7.0.0-alpha.19',
-  '@storybook/core-webpack': '7.0.0-alpha.19',
-  '@storybook/csf-tools': '7.0.0-alpha.19',
-  '@storybook/docs-tools': '7.0.0-alpha.19',
-  '@storybook/ember': '7.0.0-alpha.19',
-  '@storybook/html': '7.0.0-alpha.19',
-  '@storybook/html-webpack5': '7.0.0-alpha.19',
-  '@storybook/instrumenter': '7.0.0-alpha.19',
-  '@storybook/node-logger': '7.0.0-alpha.19',
-  '@storybook/postinstall': '7.0.0-alpha.19',
-  '@storybook/preact': '7.0.0-alpha.19',
-  '@storybook/preact-webpack5': '7.0.0-alpha.19',
-  '@storybook/preset-html-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-preact-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-react-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-server-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-svelte-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-vue-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-vue3-webpack': '7.0.0-alpha.19',
-  '@storybook/preset-web-components-webpack': '7.0.0-alpha.19',
-  '@storybook/preview-web': '7.0.0-alpha.19',
-  '@storybook/react': '7.0.0-alpha.19',
-  '@storybook/react-webpack5': '7.0.0-alpha.19',
-  '@storybook/router': '7.0.0-alpha.19',
-  '@storybook/server': '7.0.0-alpha.19',
-  '@storybook/server-webpack5': '7.0.0-alpha.19',
-  '@storybook/source-loader': '7.0.0-alpha.19',
-  '@storybook/store': '7.0.0-alpha.19',
-  '@storybook/svelte': '7.0.0-alpha.19',
-  '@storybook/svelte-webpack5': '7.0.0-alpha.19',
-  '@storybook/telemetry': '7.0.0-alpha.19',
-  '@storybook/theming': '7.0.0-alpha.19',
-  '@storybook/ui': '7.0.0-alpha.19',
-  '@storybook/vue': '7.0.0-alpha.19',
-  '@storybook/vue-webpack5': '7.0.0-alpha.19',
-  '@storybook/vue3': '7.0.0-alpha.19',
-  '@storybook/vue3-webpack5': '7.0.0-alpha.19',
-  '@storybook/web-components': '7.0.0-alpha.19',
-  '@storybook/web-components-webpack5': '7.0.0-alpha.19',
-  sb: '7.0.0-alpha.19',
-  storybook: '7.0.0-alpha.19'
+  '@storybook/addon-a11y': '7.0.0-alpha.21',
+  '@storybook/addon-actions': '7.0.0-alpha.21',
+  '@storybook/addon-backgrounds': '7.0.0-alpha.21',
+  '@storybook/addon-controls': '7.0.0-alpha.21',
+  '@storybook/addon-docs': '7.0.0-alpha.21',
+  '@storybook/addon-essentials': '7.0.0-alpha.21',
+  '@storybook/addon-highlight': '7.0.0-alpha.21',
+  '@storybook/addon-interactions': '7.0.0-alpha.21',
+  '@storybook/addon-jest': '7.0.0-alpha.21',
+  '@storybook/addon-links': '7.0.0-alpha.21',
+  '@storybook/addon-measure': '7.0.0-alpha.21',
+  '@storybook/addon-outline': '7.0.0-alpha.21',
+  '@storybook/addon-storyshots': '7.0.0-alpha.21',
+  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.21',
+  '@storybook/addon-storysource': '7.0.0-alpha.21',
+  '@storybook/addon-toolbars': '7.0.0-alpha.21',
+  '@storybook/addon-viewport': '7.0.0-alpha.21',
+  '@storybook/addons': '7.0.0-alpha.21',
+  '@storybook/angular': '7.0.0-alpha.21',
+  '@storybook/api': '7.0.0-alpha.21',
+  '@storybook/blocks': '7.0.0-alpha.21',
+  '@storybook/builder-manager': '7.0.0-alpha.21',
+  '@storybook/builder-webpack5': '7.0.0-alpha.21',
+  '@storybook/channel-postmessage': '7.0.0-alpha.21',
+  '@storybook/channel-websocket': '7.0.0-alpha.21',
+  '@storybook/channels': '7.0.0-alpha.21',
+  '@storybook/cli': '7.0.0-alpha.21',
+  '@storybook/client-api': '7.0.0-alpha.21',
+  '@storybook/client-logger': '7.0.0-alpha.21',
+  '@storybook/codemod': '7.0.0-alpha.21',
+  '@storybook/components': '7.0.0-alpha.21',
+  '@storybook/core-client': '7.0.0-alpha.21',
+  '@storybook/core-common': '7.0.0-alpha.21',
+  '@storybook/core-events': '7.0.0-alpha.21',
+  '@storybook/core-server': '7.0.0-alpha.21',
+  '@storybook/core-webpack': '7.0.0-alpha.21',
+  '@storybook/csf-tools': '7.0.0-alpha.21',
+  '@storybook/docs-tools': '7.0.0-alpha.21',
+  '@storybook/ember': '7.0.0-alpha.21',
+  '@storybook/html': '7.0.0-alpha.21',
+  '@storybook/html-webpack5': '7.0.0-alpha.21',
+  '@storybook/instrumenter': '7.0.0-alpha.21',
+  '@storybook/node-logger': '7.0.0-alpha.21',
+  '@storybook/postinstall': '7.0.0-alpha.21',
+  '@storybook/preact': '7.0.0-alpha.21',
+  '@storybook/preact-webpack5': '7.0.0-alpha.21',
+  '@storybook/preset-html-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-preact-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-react-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-server-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-svelte-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-vue-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-vue3-webpack': '7.0.0-alpha.21',
+  '@storybook/preset-web-components-webpack': '7.0.0-alpha.21',
+  '@storybook/preview-web': '7.0.0-alpha.21',
+  '@storybook/react': '7.0.0-alpha.21',
+  '@storybook/react-webpack5': '7.0.0-alpha.21',
+  '@storybook/router': '7.0.0-alpha.21',
+  '@storybook/server': '7.0.0-alpha.21',
+  '@storybook/server-webpack5': '7.0.0-alpha.21',
+  '@storybook/source-loader': '7.0.0-alpha.21',
+  '@storybook/store': '7.0.0-alpha.21',
+  '@storybook/svelte': '7.0.0-alpha.21',
+  '@storybook/svelte-webpack5': '7.0.0-alpha.21',
+  '@storybook/telemetry': '7.0.0-alpha.21',
+  '@storybook/theming': '7.0.0-alpha.21',
+  '@storybook/ui': '7.0.0-alpha.21',
+  '@storybook/vue': '7.0.0-alpha.21',
+  '@storybook/vue-webpack5': '7.0.0-alpha.21',
+  '@storybook/vue3': '7.0.0-alpha.21',
+  '@storybook/vue3-webpack5': '7.0.0-alpha.21',
+  '@storybook/web-components': '7.0.0-alpha.21',
+  '@storybook/web-components-webpack5': '7.0.0-alpha.21',
+  sb: '7.0.0-alpha.21',
+  storybook: '7.0.0-alpha.21'
 };

package/dist/types/automigrate/fixes/new-frameworks.d.ts

@@ -0,0 +1,31 @@
+import { ConfigFile } from '@storybook/csf-tools';
+import type { Fix } from '../types';
+import type { PackageJsonWithDepsAndDevDeps } from '../../js-package-manager';
+interface NewFrameworkRunOptions {
+    main: ConfigFile;
+    packageJson: PackageJsonWithDepsAndDevDeps;
+    dependenciesToAdd: string[];
+    dependenciesToRemove: string[];
+    frameworkPackage: string;
+    frameworkOptions: Record<string, any>;
+    builderInfo: {
+        name: string;
+        options: Record<string, any>;
+    };
+}
+export declare const getBuilder: (builder: string | {
+    name: string;
+}) => "webpack5" | "vite";
+export declare const getFrameworkOptions: (framework: string, main: ConfigFile) => any;
+/**
+ * Does the user have separate framework and builders (e.g. @storybook/react + core.builder -> webpack5?
+ *
+ * If so:
+ * - Remove the dependencies (@storybook/react + @storybook/builder-webpack5 + @storybook/manager-webpack5)
+ * - Install the correct new package e.g. (@storybook/react-webpack5)
+ * - Update the main config to use the new framework
+ * -- moving core.builder into framework.options.builder
+ * -- moving frameworkOptions (e.g. reactOptions) into framework.options
+ */
+export declare const newFrameworks: Fix<NewFrameworkRunOptions>;
+export {};

package/dist/types/repro-templates.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     readonly 'cra/default-js': {
         readonly name: "Create React App (Javascript)";
         readonly script: "npx create-react-app .";
+        readonly cadence: readonly ["ci", "daily", "weekly"];
         readonly expected: {
             readonly framework: "@storybook/cra";
             readonly renderer: "@storybook/react";
@@ -11,6 +12,7 @@ declare const _default: {
     readonly 'cra/default-ts': {
         readonly name: "Create React App (Typescript)";
         readonly script: "npx create-react-app . --template typescript";
+        readonly cadence: readonly ["ci", "daily", "weekly"];
         readonly expected: {
             readonly framework: "@storybook/cra";
             readonly renderer: "@storybook/react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "7.0.0-alpha.19",
+  "version": "7.0.0-alpha.21",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -42,20 +42,19 @@
   ],
   "scripts": {
     "check": "tsc --noEmit",
-    "preprepare": "node ./scripts/generate-repro-templates-list.js",
     "prepare": "node ../../../scripts/prepare.js",
     "test": "jest test/**/*.test.js"
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "7.0.0-alpha.19",
-    "@storybook/core-common": "7.0.0-alpha.19",
-    "@storybook/core-server": "7.0.0-alpha.19",
-    "@storybook/csf-tools": "7.0.0-alpha.19",
-    "@storybook/node-logger": "7.0.0-alpha.19",
+    "@storybook/codemod": "7.0.0-alpha.21",
+    "@storybook/core-common": "7.0.0-alpha.21",
+    "@storybook/core-server": "7.0.0-alpha.21",
+    "@storybook/csf-tools": "7.0.0-alpha.21",
+    "@storybook/node-logger": "7.0.0-alpha.21",
     "@storybook/semver": "^7.3.2",
-    "@storybook/telemetry": "7.0.0-alpha.19",
+    "@storybook/telemetry": "7.0.0-alpha.21",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
     "commander": "^6.2.1",
@@ -82,7 +81,7 @@
     "update-notifier": "^5.0.1"
   },
   "devDependencies": {
-    "@storybook/client-api": "7.0.0-alpha.19",
+    "@storybook/client-api": "7.0.0-alpha.21",
     "@types/cross-spawn": "^6.0.2",
     "@types/degit": "^2.8.3",
     "@types/prompts": "^2.0.9",
@@ -97,5 +96,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "74bdb53f67dd59bae2661c668d2d5d4296113281"
+  "gitHead": "d8cdc5b21af68e69c6eefeaae0e1efadd06947ea"
 }