@storybook/cli 6.4.0-beta.3 → 6.4.0-beta.33

package/dist/modern/automigrate/helpers/getEslintInfo.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findEslintFile = exports.SUPPORTED_ESLINT_EXTENSIONS = void 0;
+
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SUPPORTED_ESLINT_EXTENSIONS = ['js', 'cjs'];
+exports.SUPPORTED_ESLINT_EXTENSIONS = SUPPORTED_ESLINT_EXTENSIONS;
+const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml', 'json'];
+
+const findEslintFile = () => {
+  const filePrefix = '.eslintrc';
+  const unsupportedExtension = UNSUPPORTED_ESLINT_EXTENSIONS.find(ext => _fsExtra.default.existsSync(`${filePrefix}.${ext}`));
+
+  if (unsupportedExtension) {
+    throw new Error(unsupportedExtension);
+  }
+
+  const extension = SUPPORTED_ESLINT_EXTENSIONS.find(ext => _fsExtra.default.existsSync(`${filePrefix}.${ext}`));
+  return extension ? `${filePrefix}.${extension}` : null;
+};
+
+exports.findEslintFile = findEslintFile;

package/dist/modern/automigrate/helpers/getStorybookConfiguration.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStorybookConfiguration = getStorybookConfiguration;
+
+/*
+ * Lifted from chromatic-cli
+ *
+ * This is not exactly clever but it works most of the time
+ * we receive the full text of the npm script, and we look if we can find the cli flag
+ */
+function getStorybookConfiguration(storybookScript, shortName, longName) {
+  const parts = storybookScript.split(/[\s='"]+/);
+  let index = parts.indexOf(longName);
+
+  if (index === -1) {
+    index = parts.indexOf(shortName);
+  }
+
+  if (index === -1) {
+    return null;
+  }
+
+  return parts[index + 1];
+}

package/dist/modern/automigrate/helpers/getStorybookInfo.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStorybookInfo = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fsExtra = _interopRequireDefault(require("fs-extra"));
+
+var _getStorybookConfiguration = require("./getStorybookConfiguration");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const viewLayers = {
+  '@storybook/react': 'react',
+  '@storybook/vue': 'vue',
+  '@storybook/vue3': 'vue3',
+  '@storybook/angular': 'angular',
+  '@storybook/html': 'html',
+  '@storybook/web-components': 'web-components',
+  '@storybook/polymer': 'polymer',
+  '@storybook/ember': 'ember',
+  '@storybook/marko': 'marko',
+  '@storybook/mithril': 'mithril',
+  '@storybook/riot': 'riot',
+  '@storybook/svelte': 'svelte',
+  '@storybook/preact': 'preact',
+  '@storybook/rax': 'rax'
+};
+const logger = console;
+
+const findDependency = ({
+  dependencies,
+  devDependencies,
+  peerDependencies
+}, predicate) => [Object.entries(dependencies || {}).find(predicate), Object.entries(devDependencies || {}).find(predicate), Object.entries(peerDependencies || {}).find(predicate)];
+
+const getFrameworkInfo = packageJson => {
+  // Pull the viewlayer from dependencies in package.json
+  const [dep, devDep, peerDep] = findDependency(packageJson, ([key]) => viewLayers[key]);
+  const [pkg, version] = dep || devDep || peerDep || [];
+  const framework = viewLayers[pkg];
+
+  if (dep && devDep && dep[0] === devDep[0]) {
+    logger.warn(`Found "${dep[0]}" in both "dependencies" and "devDependencies". This is probably a mistake.`);
+  }
+
+  if (dep && peerDep && dep[0] === peerDep[0]) {
+    logger.warn(`Found "${dep[0]}" in both "dependencies" and "peerDependencies". This is probably a mistake.`);
+  }
+
+  return {
+    framework,
+    version
+  };
+};
+
+const validConfigExtensions = ['ts', 'js', 'tsx', 'jsx', 'mjs', 'cjs'];
+
+const findConfigFile = (prefix, configDir) => {
+  const filePrefix = _path.default.join(configDir, prefix);
+
+  const extension = validConfigExtensions.find(ext => _fsExtra.default.existsSync(`${filePrefix}.${ext}`));
+  return extension ? `${filePrefix}.${extension}` : null;
+};
+
+const getConfigInfo = packageJson => {
+  var _packageJson$scripts;
+
+  let configDir = '.storybook';
+  const storybookScript = (_packageJson$scripts = packageJson.scripts) === null || _packageJson$scripts === void 0 ? void 0 : _packageJson$scripts.storybook;
+
+  if (storybookScript) {
+    const configParam = (0, _getStorybookConfiguration.getStorybookConfiguration)(storybookScript, '-c', '--config-dir');
+    if (configParam) configDir = configParam;
+  }
+
+  return {
+    configDir,
+    mainConfig: findConfigFile('main', configDir),
+    previewConfig: findConfigFile('preview', configDir),
+    managerConfig: findConfigFile('manager', configDir)
+  };
+};
+
+const getStorybookInfo = packageJson => {
+  const frameworkInfo = getFrameworkInfo(packageJson);
+  const configInfo = getConfigInfo(packageJson);
+  return Object.assign({}, frameworkInfo, configInfo);
+};
+
+exports.getStorybookInfo = getStorybookInfo;

package/dist/modern/automigrate/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.automigrate = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _prompts = _interopRequireDefault(require("prompts"));
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _boxen = _interopRequireDefault(require("boxen"));
+
+var _jsPackageManager = require("../js-package-manager");
+
+var _fixes = require("./fixes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable no-await-in-loop */
+const logger = console;
+
+const automigrate = async ({
+  fixId,
+  dryRun,
+  yes
+} = {}) => {
+  const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager();
+
+  const filtered = fixId ? _fixes.fixes.filter(f => f.id === fixId) : _fixes.fixes;
+
+  for (let i = 0; i < filtered.length; i += 1) {
+    const f = _fixes.fixes[i];
+    logger.info(`🔎 checking '${_chalk.default.cyan(f.id)}'`);
+    const result = await f.check({
+      packageManager
+    });
+
+    if (result) {
+      const message = f.prompt(result);
+      logger.info((0, _boxen.default)(message, {
+        borderStyle: 'round',
+        padding: 1,
+        borderColor: '#F1618C'
+      }));
+      const runAnswer = yes || dryRun ? {
+        fix: false
+      } : await (0, _prompts.default)([{
+        type: 'confirm',
+        name: 'fix',
+        message: `Do you want to run the '${_chalk.default.cyan(f.id)}' fix on your project?`
+      }]);
+
+      if (runAnswer.fix) {
+        try {
+          await f.run({
+            result,
+            packageManager,
+            dryRun
+          });
+          logger.info(`✅ fixed ${_chalk.default.cyan(f.id)}`);
+        } catch (error) {
+          logger.info(`❌ error in ${_chalk.default.cyan(f.id)}:`);
+          logger.info(error.message);
+          logger.info();
+        }
+      } else {
+        logger.info(`Skipping the ${_chalk.default.cyan(f.id)} fix.`);
+        logger.info();
+        logger.info(`If you change your mind, run '${_chalk.default.cyan('npx sb@next automigrate')}'`);
+      }
+    }
+  }
+};
+
+exports.automigrate = automigrate;

package/dist/modern/automigrate/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/modern/extract.js

@@ -37,6 +37,9 @@ const read = async url => {
 };
 
 const useLocation = async input => {
+  // check for input's existence
+  await (0, _fsExtra.stat)(_path.default.resolve(input));
+
   if (input.match(/^http/)) {
     return [input, async () => {}];
   }

package/dist/modern/frameworks/web-components/js/Button.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit-html/directives/style-map.js';
 import './button.css';
 
 /**

package/dist/modern/generate.js

@@ -28,6 +28,8 @@ var _repro = require("./repro");
 
 var _link = require("./link");
 
+var _automigrate = require("./automigrate");
+
 var _babelConfig = require("./babel-config");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,13 +39,13 @@ const pkg = (0, _readPkgUp.sync)({
 }).packageJson;
 const logger = console;
 
-_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('--story-format <csf | csf-ts | mdx >', 'Generate stories in a specified format').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
+_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
 
 _commander.default.command('add <addon>').description('Add an addon to your Storybook').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-s --skip-postinstall', 'Skip package specific postinstall config modifications').action((addonName, options) => (0, _add.add)(addonName, options));
 
 _commander.default.command('babelrc').description('generate the default storybook babel config into your current working directory').action(() => (0, _babelConfig.generateStorybookBabelConfigInCWD)());
 
-_commander.default.command('upgrade').description('Upgrade your Storybook packages to the latest').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-n --dry-run', 'Only check for upgrades, do not install').option('-p --prerelease', 'Upgrade to the pre-release packages').option('-s --skip-check', 'Skip postinstall version consistency checks').action(options => (0, _upgrade.upgrade)(options));
+_commander.default.command('upgrade').description('Upgrade your Storybook packages to the latest').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-y --yes', 'Skip prompting the user').option('-n --dry-run', 'Only check for upgrades, do not install').option('-p --prerelease', 'Upgrade to the pre-release packages').option('-s --skip-check', 'Skip postinstall version and automigration checks').action(options => (0, _upgrade.upgrade)(options));
 
 _commander.default.command('info').description('Prints debugging information about the local environment').action(() => {
   logger.log(_chalk.default.bold('\nEnvironment Info:'));
@@ -114,6 +116,13 @@ _commander.default.command('link <repo-url-or-directory>').description('Pull dow
   process.exit(1);
 }));
 
+_commander.default.command('automigrate [fixId]').description('Check storybook for known problems or migrations and apply fixes').option('-y --yes', 'Skip prompting the user').option('-n --dry-run', 'Only check for fixes, do not actually run them').action((fixId, options) => (0, _automigrate.automigrate)(Object.assign({
+  fixId
+}, options)).catch(e => {
+  logger.error(e);
+  process.exit(1);
+}));
+
 _commander.default.on('command:*', ([invalidCmd]) => {
   logger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd); // eslint-disable-next-line
 

package/dist/modern/generators/ANGULAR/index.js

@@ -59,7 +59,7 @@ const generator = async (packageManager, npmOptions, options) => {
     extraPackages: ['@compodoc/compodoc', '@angular/elements', '@webcomponents/custom-elements'],
     addScripts: false
   });
-  (0, _helpers.copyTemplate)(__dirname, options.storyFormat);
+  (0, _helpers.copyTemplate)(__dirname);
   editAngularAppTsConfig();
   (0, _angularHelpers.editStorybookTsConfig)(_path.default.resolve('./.storybook/tsconfig.json')); // edit scripts to generate docs
 

package/dist/modern/generators/AURELIA/index.js

@@ -36,7 +36,7 @@ const generator = async (packageManager, npmOptions, options) => {
   (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'aurelia', {
     extraPackages: ['aurelia']
   });
-  (0, _helpers.copyTemplate)(__dirname, options.storyFormat);
+  (0, _helpers.copyTemplate)(__dirname);
 };
 
 var _default = generator;

package/dist/modern/generators/REACT_NATIVE/index.js

@@ -15,7 +15,7 @@ var _helpers = require("../../helpers");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const generator = async (packageManager, npmOptions, installServer, options) => {
+const generator = async (packageManager, npmOptions, installServer) => {
   // set correct project name on entry files if possible
   const dirname = _shelljs.default.ls('-d', 'ios/*.xcodeproj').stdout; // Only notify about app name if running in React Native vanilla (Expo projects do not have ios directory)
 
@@ -50,7 +50,7 @@ const generator = async (packageManager, npmOptions, installServer, options) =>
     });
   }
 
-  (0, _helpers.copyTemplate)(__dirname, options.storyFormat);
+  (0, _helpers.copyTemplate)(__dirname);
 };
 
 var _default = generator;

package/dist/modern/generators/REACT_NATIVE/template-csf/storybook/index.js

@@ -14,7 +14,7 @@ configure(() => {
   require('./stories');
 }, module);
 
-// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
+// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
 // To find allowed options for getStorybookUI
 const StorybookUIRoot = getStorybookUI({});
 

package/dist/modern/generators/REACT_SCRIPTS/index.js

@@ -37,7 +37,7 @@ const generator = async (packageManager, npmOptions, options) => {
   } : {};
   const craVersion = (_semver$coerce = _semver.default.coerce(packageManager.retrievePackageJson().dependencies['react-scripts'])) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;
 
-  const isCra5 = _semver.default.gte(craVersion, '5.0.0');
+  const isCra5 = craVersion && _semver.default.gte(craVersion, '5.0.0');
 
   const updatedOptions = isCra5 ? Object.assign({}, options, {
     builder: _project_types.CoreBuilder.Webpack5

package/dist/modern/generators/SERVER/index.js

@@ -15,7 +15,7 @@ const generator = async (packageManager, npmOptions, options) => {
   (0, _baseGenerator.baseGenerator)(packageManager, npmOptions, options, 'server', {
     extensions: ['json']
   });
-  (0, _helpers.copyTemplate)(__dirname, options.storyFormat);
+  (0, _helpers.copyTemplate)(__dirname);
 };
 
 var _default = generator;

package/dist/modern/generators/baseGenerator.js

@@ -76,7 +76,8 @@ async function baseGenerator(packageManager, npmOptions, {
   const isNewFolder = !files.some(fname => fname.startsWith('.babel') || fname.startsWith('babel') || fname === 'package.json');
   const packageJson = packageManager.retrievePackageJson();
   const installedDependencies = new Set(Object.keys(packageJson.dependencies));
-  const packages = [`@storybook/${framework}`, ...addonPackages, ...extraPackages, ...extraAddons, ...yarn2Dependencies, ...builderDependencies(builder)].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
+  const frameworkPackage = `@storybook/${framework}`;
+  const packages = [frameworkPackage, ...addonPackages, ...extraPackages, ...extraAddons, ...yarn2Dependencies, ...builderDependencies(builder)].filter(Boolean).filter(packageToInstall => !installedDependencies.has((0, _jsPackageManager.getPackageDetails)(packageToInstall)[0]));
   const versionedPackages = await packageManager.getVersionedPackages(...packages);
   const mainOptions = builder !== _project_types.CoreBuilder.Webpack4 ? Object.assign({
     core: {
@@ -84,6 +85,7 @@ async function baseGenerator(packageManager, npmOptions, {
     }
   }, extraMain) : extraMain;
   (0, _configure.configure)(framework, Object.assign({
+    framework: frameworkPackage,
     addons: [...addons, ...stripVersions(extraAddons)],
     extensions,
     commonJs: options.commonJs

package/dist/modern/helpers.js

@@ -28,8 +28,6 @@ var _semver = require("@storybook/semver");
 
 var _stripJsonComments = _interopRequireDefault(require("strip-json-comments"));
 
-var _project_types = require("./project_types");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable no-param-reassign */
@@ -178,17 +176,11 @@ function addToDevDependenciesIfNotPresent(packageJson, name, packageVersion) {
   }
 }
 
-function copyTemplate(templateRoot, storyFormat) {
-  const templateDir = _path.default.resolve(templateRoot, `template-${storyFormat}/`);
+function copyTemplate(templateRoot) {
+  const templateDir = _path.default.resolve(templateRoot, `template-csf/`);
 
   if (!_fs.default.existsSync(templateDir)) {
-    // Fallback to CSF plain first, in case format is typescript but template is not available.
-    if (storyFormat === _project_types.StoryFormat.CSF_TYPESCRIPT) {
-      copyTemplate(templateRoot, _project_types.StoryFormat.CSF);
-      return;
-    }
-
-    throw new Error(`Unsupported story format: ${storyFormat}`);
+    throw new Error(`Couldn't find template dir`);
   }
 
   _fsExtra.default.copySync(templateDir, '.', {

package/dist/modern/initiate.js

@@ -63,10 +63,10 @@ var _RAX = _interopRequireDefault(require("./generators/RAX"));
 
 var _SERVER = _interopRequireDefault(require("./generators/SERVER"));
 
-var _warn = require("./warn");
-
 var _jsPackageManager = require("./js-package-manager");
 
+var _automigrate = require("./automigrate");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const logger = console;
@@ -79,13 +79,7 @@ const installStorybook = (projectType, options) => {
     skipInstall: options.skipInstall
   };
   const language = (0, _detect.detectLanguage)();
-  const hasTSDependency = language === _project_types.SupportedLanguage.TYPESCRIPT;
-  (0, _warn.warn)({
-    hasTSDependency
-  });
-  const defaultStoryFormat = hasTSDependency ? _project_types.StoryFormat.CSF_TYPESCRIPT : _project_types.StoryFormat.CSF;
   const generatorOptions = {
-    storyFormat: options.storyFormat || defaultStoryFormat,
     language,
     builder: options.builder || _project_types.CoreBuilder.Webpack4,
     linkable: !!options.linkable,
@@ -138,7 +132,7 @@ const installStorybook = (projectType, options) => {
             initial: false
           }])).then(({
             server
-          }) => (0, _REACT_NATIVE.default)(packageManager, npmOptions, server, generatorOptions)).then((0, _helpers.commandLog)('Adding Storybook support to your "React Native" app')).then(end).then(() => {
+          }) => (0, _REACT_NATIVE.default)(packageManager, npmOptions, server)).then((0, _helpers.commandLog)('Adding Storybook support to your "React Native" app')).then(end).then(() => {
             logger.log(_chalk.default.red('NOTE: installation is not 100% automated.'));
             logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
             (0, _helpers.codeLog)(["export {default} from './storybook';"]);
@@ -250,7 +244,7 @@ const projectTypeInquirer = async options => {
   return Promise.resolve();
 };
 
-function initiate(options, pkg) {
+async function initiate(options, pkg) {
   const welcomeMessage = 'sb init - the simplest way to add a Storybook to your project.';
   logger.log(_chalk.default.inverse(`\n ${welcomeMessage} \n`)); // Update notify code.
 
@@ -261,18 +255,18 @@ function initiate(options, pkg) {
   }).notify();
   let projectType;
   const projectTypeProvided = options.type;
-  const infoText = projectTypeProvided ? 'Installing Storybook for user specified project type' : 'Detecting project type';
+  const infoText = projectTypeProvided ? `Installing Storybook for user specified project type: ${projectTypeProvided}` : 'Detecting project type';
   const done = (0, _helpers.commandLog)(infoText);
   const packageJson = (0, _jsPackageManager.readPackageJson)();
   const isEsm = packageJson && packageJson.type === 'module';
 
   try {
     if (projectTypeProvided) {
-      if (_project_types.installableProjectTypes.includes(options.type)) {
+      if (_project_types.installableProjectTypes.includes(projectTypeProvided)) {
         const storybookInstalled = (0, _detect.isStorybookInstalled)(packageJson, options.force);
-        projectType = storybookInstalled ? _project_types.ProjectType.ALREADY_HAS_STORYBOOK : options.type.toUpperCase();
+        projectType = storybookInstalled ? _project_types.ProjectType.ALREADY_HAS_STORYBOOK : projectTypeProvided.toUpperCase();
       } else {
-        done(`The provided project type was not recognized by Storybook.`);
+        done(`The provided project type was not recognized by Storybook: ${projectTypeProvided}`);
         logger.log(`\nThe project types currently supported by Storybook are:\n`);
 
         _project_types.installableProjectTypes.sort().forEach(framework => (0, _helpers.paddedLog)(`- ${framework}`));
@@ -289,14 +283,8 @@ function initiate(options, pkg) {
   }
 
   done();
-  const cleanOptions = Object.assign({}, options);
-
-  if (options.storyFormat === _project_types.StoryFormat.MDX) {
-    logger.warn('   The MDX CLI template is deprecated. The JS and TS templates already include MDX examples!');
-    cleanOptions.storyFormat = undefined;
-  }
-
-  return installStorybook(projectType, Object.assign({}, cleanOptions, isEsm ? {
+  await installStorybook(projectType, Object.assign({}, options, isEsm ? {
     commonJs: true
   } : undefined));
+  return (0, _automigrate.automigrate)();
 }

package/dist/modern/project_types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.installableProjectTypes = exports.unsupportedTemplate = exports.supportedTemplates = exports.SupportedLanguage = exports.CoreBuilder = exports.StoryFormat = exports.SUPPORTED_FRAMEWORKS = exports.ProjectType = void 0;
+exports.installableProjectTypes = exports.unsupportedTemplate = exports.supportedTemplates = exports.SupportedLanguage = exports.CoreBuilder = exports.SUPPORTED_FRAMEWORKS = exports.ProjectType = void 0;
 
 var _semver = require("@storybook/semver");
 
@@ -52,15 +52,6 @@ exports.ProjectType = ProjectType;
 
 const SUPPORTED_FRAMEWORKS = ['react', 'react-native', 'vue', 'vue3', 'angular', 'mithril', 'riot', 'ember', 'marionette', 'marko', 'meteor', 'preact', 'svelte', 'rax', 'aurelia'];
 exports.SUPPORTED_FRAMEWORKS = SUPPORTED_FRAMEWORKS;
-let StoryFormat;
-exports.StoryFormat = StoryFormat;
-
-(function (StoryFormat) {
-  StoryFormat["CSF"] = "csf";
-  StoryFormat["CSF_TYPESCRIPT"] = "csf-ts";
-  StoryFormat["MDX"] = "mdx";
-})(StoryFormat || (exports.StoryFormat = StoryFormat = {}));
-
 let CoreBuilder; // The `& {}` bit allows for auto-complete, see: https://github.com/microsoft/TypeScript/issues/29729
 
 exports.CoreBuilder = CoreBuilder;

package/dist/modern/repro-generators/configs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.svelte = exports.sfcVue = exports.preact = exports.html = exports.vue3 = exports.vue = exports.web_components_lit2 = exports.web_components_typescript = exports.web_components = exports.angular = exports.angular11 = exports.angular10 = exports.react_in_yarn_workspace = exports.webpack_react = exports.react_typescript = exports.react = exports.cra_typescript = exports.cra = void 0;
+exports.svelte = exports.sfcVue = exports.preact = exports.html = exports.vue3 = exports.vue = exports.web_components_lit2 = exports.web_components_typescript = exports.web_components = exports.angular = exports.angular12 = exports.angular11 = exports.angular10 = exports.react_in_yarn_workspace = exports.webpack_react = exports.react_typescript = exports.react = exports.cra_typescript = exports.cra = void 0;
 
 const fromDeps = (...args) => ['mkdir {{appName}}', 'cd {{appName}}', // Create `yarn.lock` to force Yarn to consider adding deps in this directory
 // and not look for a yarn workspace in parent directory
@@ -74,6 +74,11 @@ const angular11 = Object.assign({}, baseAngular, {
   version: 'v11-lts'
 });
 exports.angular11 = angular11;
+const angular12 = Object.assign({}, baseAngular, {
+  name: 'angular12',
+  version: 'v12-lts'
+});
+exports.angular12 = angular12;
 const angular = baseAngular; // #endregion
 // #region  web components
 

package/dist/modern/upgrade.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.upgrade = exports.checkVersionConsistency = exports.isCorePackage = exports.getStorybookVersion = void 0;
+exports.upgrade = exports.addExtraFlags = exports.checkVersionConsistency = exports.isCorePackage = exports.getStorybookVersion = void 0;
 
 require("core-js/modules/es.promise.js");
 
@@ -17,6 +17,8 @@ var _jsPackageManager = require("./js-package-manager");
 
 var _helpers = require("./helpers");
 
+var _automigrate = require("./automigrate");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const versionRegex = /(@storybook\/[^@]+)@(\S+)/;
@@ -57,6 +59,8 @@ const checkVersionConsistency = () => {
     _nodeLogger.logger.warn('No storybook core packages found.');
 
     _nodeLogger.logger.warn(`'npm ls | grep storybook' can show if multiple versions are installed.`);
+
+    return;
   }
 
   storybookPackages.sort((a, b) => _semver.default.rcompare(a.version, b.version));
@@ -91,21 +95,45 @@ const checkVersionConsistency = () => {
 };
 
 exports.checkVersionConsistency = checkVersionConsistency;
+const EXTRA_FLAGS = {
+  'react-scripts@<5': ['--reject', '/preset-create-react-app/']
+};
+
+const addExtraFlags = (extraFlags, flags, {
+  dependencies,
+  devDependencies
+}) => {
+  return Object.entries(extraFlags).reduce((acc, entry) => {
+    const [pattern, extra] = entry;
+    const [pkg, specifier] = (0, _jsPackageManager.getPackageDetails)(pattern);
+    const pkgVersion = dependencies[pkg] || devDependencies[pkg];
+
+    if (pkgVersion && _semver.default.satisfies(_semver.default.coerce(pkgVersion), specifier)) {
+      return [...acc, ...extra];
+    }
+
+    return acc;
+  }, [...flags]);
+};
+
+exports.addExtraFlags = addExtraFlags;
 
 const upgrade = async ({
   prerelease,
   skipCheck,
   useNpm,
-  dryRun
+  dryRun,
+  yes
 }) => {
   const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager(useNpm);
 
   (0, _helpers.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');
-  const check = (0, _crossSpawn.sync)('npx', ['npm-check-updates', '/storybook/', ...flags], {
+  flags = addExtraFlags(EXTRA_FLAGS, flags, packageManager.retrievePackageJson());
+  const check = (0, _crossSpawn.sync)('npx', ['npm-check-updates@latest', '/storybook/', ...flags], {
     stdio: 'pipe'
   }).output.toString();
 
@@ -116,7 +144,13 @@ const upgrade = async ({
     packageManager.installDependencies();
   }
 
-  if (!skipCheck) checkVersionConsistency();
+  if (!skipCheck) {
+    checkVersionConsistency();
+    await (0, _automigrate.automigrate)({
+      dryRun,
+      yes
+    });
+  }
 };
 
 exports.upgrade = upgrade;