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

package/dist/esm/initiate.js

@@ -63,8 +63,6 @@ var _RAX = _interopRequireDefault(require("./generators/RAX"));
 
 var _SERVER = _interopRequireDefault(require("./generators/SERVER"));
 
-var _warn = require("./warn");
-
 var _jsPackageManager = require("./js-package-manager");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -79,13 +77,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 +130,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';"]);
@@ -289,14 +281,7 @@ 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 ? {
+  return installStorybook(projectType, Object.assign({}, options, isEsm ? {
     commonJs: true
   } : undefined));
 }

package/dist/esm/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/esm/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;

package/dist/esm/versions.json

@@ -1,57 +1,59 @@
 {
-  "@storybook/addon-a11y": "6.4.0-beta.3",
-  "@storybook/addon-actions": "6.4.0-beta.3",
-  "@storybook/addon-backgrounds": "6.4.0-beta.3",
-  "@storybook/addon-controls": "6.4.0-beta.3",
-  "@storybook/addon-docs": "6.4.0-beta.3",
-  "@storybook/addon-essentials": "6.4.0-beta.3",
-  "@storybook/addon-jest": "6.4.0-beta.3",
-  "@storybook/addon-links": "6.4.0-beta.3",
-  "@storybook/addon-storyshots": "6.4.0-beta.3",
-  "@storybook/addon-storyshots-puppeteer": "6.4.0-beta.3",
-  "@storybook/addon-storysource": "6.4.0-beta.3",
-  "@storybook/addon-toolbars": "6.4.0-beta.3",
-  "@storybook/addon-viewport": "6.4.0-beta.3",
-  "@storybook/addons": "6.4.0-beta.3",
-  "@storybook/angular": "6.4.0-beta.3",
-  "@storybook/api": "6.4.0-beta.3",
-  "@storybook/aurelia": "6.4.0-beta.3",
-  "@storybook/builder-webpack4": "6.4.0-beta.3",
-  "@storybook/builder-webpack5": "6.4.0-beta.3",
-  "@storybook/channel-postmessage": "6.4.0-beta.3",
-  "@storybook/channel-websocket": "6.4.0-beta.3",
-  "@storybook/channels": "6.4.0-beta.3",
-  "@storybook/cli": "6.4.0-beta.3",
-  "@storybook/client-api": "6.4.0-beta.3",
-  "@storybook/client-logger": "6.4.0-beta.3",
-  "@storybook/codemod": "6.4.0-beta.3",
-  "@storybook/components": "6.4.0-beta.3",
-  "@storybook/core": "6.4.0-beta.3",
-  "@storybook/core-client": "6.4.0-beta.3",
-  "@storybook/core-common": "6.4.0-beta.3",
-  "@storybook/core-events": "6.4.0-beta.3",
-  "@storybook/core-server": "6.4.0-beta.3",
-  "@storybook/csf-tools": "6.4.0-beta.3",
-  "@storybook/ember": "6.4.0-beta.3",
-  "@storybook/html": "6.4.0-beta.3",
-  "@storybook/manager-webpack4": "6.4.0-beta.3",
-  "@storybook/manager-webpack5": "6.4.0-beta.3",
-  "@storybook/marionette": "6.4.0-beta.3",
-  "@storybook/marko": "6.4.0-beta.3",
-  "@storybook/mithril": "6.4.0-beta.3",
-  "@storybook/node-logger": "6.4.0-beta.3",
-  "@storybook/postinstall": "6.4.0-beta.3",
-  "@storybook/preact": "6.4.0-beta.3",
-  "@storybook/rax": "6.4.0-beta.3",
-  "@storybook/react": "6.4.0-beta.3",
-  "@storybook/riot": "6.4.0-beta.3",
-  "@storybook/router": "6.4.0-beta.3",
-  "@storybook/server": "6.4.0-beta.3",
-  "@storybook/source-loader": "6.4.0-beta.3",
-  "@storybook/svelte": "6.4.0-beta.3",
-  "@storybook/theming": "6.4.0-beta.3",
-  "@storybook/ui": "6.4.0-beta.3",
-  "@storybook/vue": "6.4.0-beta.3",
-  "@storybook/vue3": "6.4.0-beta.3",
-  "@storybook/web-components": "6.4.0-beta.3"
+  "@storybook/addon-a11y": "6.4.0-beta.30",
+  "@storybook/addon-actions": "6.4.0-beta.30",
+  "@storybook/addon-backgrounds": "6.4.0-beta.30",
+  "@storybook/addon-controls": "6.4.0-beta.30",
+  "@storybook/addon-docs": "6.4.0-beta.30",
+  "@storybook/addon-essentials": "6.4.0-beta.30",
+  "@storybook/addon-interactions": "6.4.0-beta.30",
+  "@storybook/addon-jest": "6.4.0-beta.30",
+  "@storybook/addon-links": "6.4.0-beta.30",
+  "@storybook/addon-storyshots": "6.4.0-beta.30",
+  "@storybook/addon-storyshots-puppeteer": "6.4.0-beta.30",
+  "@storybook/addon-storysource": "6.4.0-beta.30",
+  "@storybook/addon-toolbars": "6.4.0-beta.30",
+  "@storybook/addon-viewport": "6.4.0-beta.30",
+  "@storybook/addons": "6.4.0-beta.30",
+  "@storybook/angular": "6.4.0-beta.30",
+  "@storybook/api": "6.4.0-beta.30",
+  "@storybook/aurelia": "6.4.0-beta.30",
+  "@storybook/builder-webpack4": "6.4.0-beta.30",
+  "@storybook/builder-webpack5": "6.4.0-beta.30",
+  "@storybook/channel-postmessage": "6.4.0-beta.30",
+  "@storybook/channel-websocket": "6.4.0-beta.30",
+  "@storybook/channels": "6.4.0-beta.30",
+  "@storybook/cli": "6.4.0-beta.30",
+  "@storybook/client-api": "6.4.0-beta.30",
+  "@storybook/client-logger": "6.4.0-beta.30",
+  "@storybook/codemod": "6.4.0-beta.30",
+  "@storybook/components": "6.4.0-beta.30",
+  "@storybook/core": "6.4.0-beta.30",
+  "@storybook/core-client": "6.4.0-beta.30",
+  "@storybook/core-common": "6.4.0-beta.30",
+  "@storybook/core-events": "6.4.0-beta.30",
+  "@storybook/core-server": "6.4.0-beta.30",
+  "@storybook/csf-tools": "6.4.0-beta.30",
+  "@storybook/ember": "6.4.0-beta.30",
+  "@storybook/html": "6.4.0-beta.30",
+  "@storybook/instrumenter": "6.4.0-beta.30",
+  "@storybook/manager-webpack4": "6.4.0-beta.30",
+  "@storybook/manager-webpack5": "6.4.0-beta.30",
+  "@storybook/marionette": "6.4.0-beta.30",
+  "@storybook/marko": "6.4.0-beta.30",
+  "@storybook/mithril": "6.4.0-beta.30",
+  "@storybook/node-logger": "6.4.0-beta.30",
+  "@storybook/postinstall": "6.4.0-beta.30",
+  "@storybook/preact": "6.4.0-beta.30",
+  "@storybook/rax": "6.4.0-beta.30",
+  "@storybook/react": "6.4.0-beta.30",
+  "@storybook/riot": "6.4.0-beta.30",
+  "@storybook/router": "6.4.0-beta.30",
+  "@storybook/server": "6.4.0-beta.30",
+  "@storybook/source-loader": "6.4.0-beta.30",
+  "@storybook/svelte": "6.4.0-beta.30",
+  "@storybook/theming": "6.4.0-beta.30",
+  "@storybook/ui": "6.4.0-beta.30",
+  "@storybook/vue": "6.4.0-beta.30",
+  "@storybook/vue3": "6.4.0-beta.30",
+  "@storybook/web-components": "6.4.0-beta.30"
 }

package/dist/modern/automigrate/fixes/angular12.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.angular12 = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _semver = _interopRequireDefault(require("@storybook/semver"));
+
+var _webpack = require("./webpack5");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Is the user upgrading to Angular12?
+ *
+ * If so:
+ * - Run webpack5 fix
+ */
+const angular12 = {
+  id: 'angular12',
+
+  async check({
+    packageManager
+  }) {
+    var _semver$coerce;
+
+    const packageJson = packageManager.retrievePackageJson();
+    const {
+      dependencies,
+      devDependencies
+    } = packageJson;
+    const angularVersion = dependencies['@angular/core'] || devDependencies['@angular/core'];
+    const angularCoerced = (_semver$coerce = _semver.default.coerce(angularVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;
+
+    if (!angularCoerced || _semver.default.lt(angularCoerced, '12.0.0')) {
+      return null;
+    }
+
+    const builderInfo = await _webpack.webpack5.checkWebpack5Builder(packageJson);
+    return builderInfo ? Object.assign({
+      angularVersion
+    }, builderInfo) : null;
+  },
+
+  prompt({
+    angularVersion,
+    storybookVersion
+  }) {
+    const angularFormatted = _chalk.default.cyan(`Angular ${angularVersion}`);
+
+    const sbFormatted = _chalk.default.cyan(`Storybook ${storybookVersion}`);
+
+    return (0, _tsDedent.default)`
+      We've detected you are running ${angularFormatted} which is powered by webpack5.
+      ${sbFormatted} runs webpack4 by default, which is incompatible.
+
+      In order to work with your version of Angular, we need to install Storybook's ${_chalk.default.cyan('webpack5 builder')}.
+
+      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular12-upgrade')}
+    `;
+  },
+
+  async run(options) {
+    return _webpack.webpack5.run(Object.assign({}, options, {
+      result: Object.assign({
+        webpackVersion: null
+      }, options.result)
+    }));
+  }
+
+};
+exports.angular12 = angular12;

package/dist/modern/automigrate/fixes/cra5.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cra5 = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _semver = _interopRequireDefault(require("@storybook/semver"));
+
+var _webpack = require("./webpack5");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Is the user upgrading from CRA4 to CRA5?
+ *
+ * If so:
+ * - Run webpack5 fix
+ */
+const cra5 = {
+  id: 'cra5',
+
+  async check({
+    packageManager
+  }) {
+    var _semver$coerce;
+
+    const packageJson = packageManager.retrievePackageJson();
+    const {
+      dependencies,
+      devDependencies
+    } = packageJson;
+    const craVersion = dependencies['react-scripts'] || devDependencies['react-scripts'];
+    const craCoerced = (_semver$coerce = _semver.default.coerce(craVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;
+
+    if (!craCoerced || _semver.default.lt(craCoerced, '5.0.0')) {
+      return null;
+    }
+
+    const builderInfo = await _webpack.webpack5.checkWebpack5Builder(packageJson);
+    return builderInfo ? Object.assign({
+      craVersion
+    }, builderInfo) : null;
+  },
+
+  prompt({
+    craVersion,
+    storybookVersion
+  }) {
+    const craFormatted = _chalk.default.cyan(`Create React App (CRA) ${craVersion}`);
+
+    const sbFormatted = _chalk.default.cyan(`Storybook ${storybookVersion}`);
+
+    return (0, _tsDedent.default)`
+      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.default.cyan('webpack5 builder')}.
+
+      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade')}
+    `;
+  },
+
+  async run(options) {
+    return _webpack.webpack5.run(Object.assign({}, options, {
+      result: Object.assign({
+        webpackVersion: null
+      }, options.result)
+    }));
+  }
+
+};
+exports.cra5 = cra5;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  fixes: true
+};
+exports.fixes = void 0;
+
+var _cra = require("./cra5");
+
+var _webpack = require("./webpack5");
+
+var _angular = require("./angular12");
+
+var _mainjsFramework = require("./mainjsFramework");
+
+var _types = require("../types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework];
+exports.fixes = fixes;

package/dist/modern/automigrate/fixes/mainjsFramework.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mainjsFramework = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(require("ts-dedent"));
+
+var _semver = _interopRequireDefault(require("@storybook/semver"));
+
+var _csfTools = require("@storybook/csf-tools");
+
+var _getStorybookInfo = require("../helpers/getStorybookInfo");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const logger = console;
+const mainjsFramework = {
+  id: 'mainjsFramework',
+
+  async check({
+    packageManager
+  }) {
+    var _semver$coerce;
+
+    const packageJson = packageManager.retrievePackageJson();
+    const {
+      mainConfig,
+      framework,
+      version: storybookVersion
+    } = (0, _getStorybookInfo.getStorybookInfo)(packageJson);
+    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('mainjsFramework')} fix.
+        🤔 Are you running automigrate from your project directory?
+      `);
+      return null;
+    }
+
+    const main = await (0, _csfTools.readConfig)(mainConfig);
+    const currentFramework = main.getFieldValue(['framework']);
+    const features = main.getFieldValue(['features']);
+    if (currentFramework) return null;
+    return features !== null && features !== void 0 && features.breakingChangesV7 || features !== null && features !== void 0 && features.storyStoreV7 || _semver.default.gte(storybookCoerced, '7.0.0') ? {
+      main,
+      framework: `@storybook/${framework}`
+    } : null;
+  },
+
+  prompt({
+    framework
+  }) {
+    const frameworkFormatted = _chalk.default.cyan(`framework: '${framework}'`);
+
+    return (0, _tsDedent.default)`
+      We've detected that your main.js configuration file does not specify the
+      'framework' field, which is a requirement in SB7.0 and above. We can add one
+      for you automatically:
+
+      ${frameworkFormatted}
+
+      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field')}
+    `;
+  },
+
+  async run({
+    result: {
+      main,
+      framework
+    },
+    dryRun
+  }) {
+    logger.info(`✅ Setting 'framework' to '${framework}' in main.js`);
+
+    if (!dryRun) {
+      main.setFieldValue(['framework'], framework);
+      await (0, _csfTools.writeConfig)(main);
+    }
+  }
+
+};
+exports.mainjsFramework = mainjsFramework;