@storybook/cli 6.4.0-beta.20 → 6.4.0-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "6.4.0-beta.20",
+  "version": "6.4.0-beta.24",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -48,10 +48,10 @@
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "6.4.0-beta.20",
-    "@storybook/core-common": "6.4.0-beta.20",
-    "@storybook/csf-tools": "6.4.0-beta.20",
-    "@storybook/node-logger": "6.4.0-beta.20",
+    "@storybook/codemod": "6.4.0-beta.24",
+    "@storybook/core-common": "6.4.0-beta.24",
+    "@storybook/csf-tools": "6.4.0-beta.24",
+    "@storybook/node-logger": "6.4.0-beta.24",
     "@storybook/semver": "^7.3.2",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
@@ -76,7 +76,7 @@
     "update-notifier": "^5.0.1"
   },
   "devDependencies": {
-    "@storybook/client-api": "6.4.0-beta.20",
+    "@storybook/client-api": "6.4.0-beta.24",
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
@@ -92,5 +92,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1a9315fd39f7e4abcdf3eb839dc29aedce346e01"
+  "gitHead": "f53ba4d7210b5c4809d57c74d7a42314172aa63e"
 }

package/dist/cjs/NpmOptions.js

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

package/dist/cjs/add.js

@@ -1,151 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.add = add;
-exports.addStorybookAddonToFile = exports.getPackageArg = exports.getInstalledStorybookVersion = exports.getPackageName = exports.storybookAddonScope = void 0;
-
-require("core-js/modules/es.promise.js");
-
-var _path = _interopRequireDefault(require("path"));
-
-var _fs = _interopRequireDefault(require("fs"));
-
-var _crossSpawn = require("cross-spawn");
-
-var _helpers = require("./helpers");
-
-var _jsPackageManager = require("./js-package-manager");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const logger = console;
-const storybookAddonScope = '@storybook/addon-';
-exports.storybookAddonScope = storybookAddonScope;
-
-const isAddon = async (packageManager, name) => {
-  try {
-    await packageManager.latestVersion(name);
-    return true;
-  } catch (e) {
-    return false;
-  }
-};
-
-const isStorybookAddon = async (packageManager, name) => isAddon(packageManager, `${storybookAddonScope}${name}`);
-
-const getPackageName = (addonName, isOfficialAddon) => isOfficialAddon ? storybookAddonScope + addonName : addonName;
-
-exports.getPackageName = getPackageName;
-
-const getInstalledStorybookVersion = packageJson => packageJson.devDependencies[// This only considers the first occurrence.
-Object.keys(packageJson.devDependencies).find(devDep => /@storybook/.test(devDep))] || false;
-
-exports.getInstalledStorybookVersion = getInstalledStorybookVersion;
-
-const getPackageArg = (addonName, isOfficialAddon, packageJson) => {
-  if (isOfficialAddon) {
-    const addonNameNoTag = addonName.split('@')[0];
-    const installedStorybookVersion = getInstalledStorybookVersion(packageJson);
-    return installedStorybookVersion ? `${addonNameNoTag}@${getInstalledStorybookVersion(packageJson)}` : addonName;
-  }
-
-  return addonName;
-};
-
-exports.getPackageArg = getPackageArg;
-
-const installAddon = (packageManager, addonName, isOfficialAddon) => {
-  const prepareDone = (0, _helpers.commandLog)(`Preparing to install the ${addonName} Storybook addon`);
-  prepareDone();
-  logger.log();
-  const packageArg = getPackageArg(addonName, isOfficialAddon, packageManager.retrievePackageJson());
-  logger.log();
-  const installDone = (0, _helpers.commandLog)(`Installing the ${addonName} Storybook addon`);
-
-  try {
-    packageManager.addDependencies({}, [packageArg]);
-  } catch (e) {
-    installDone(`Something went wrong installing the addon: "${getPackageName(addonName, isOfficialAddon)}"`);
-    logger.log();
-    process.exit(1);
-  }
-
-  installDone();
-};
-
-const addStorybookAddonToFile = (addonName, addonsFile, isOfficialAddon) => {
-  const addonNameNoTag = addonName.split('@')[0];
-  const alreadyRegistered = addonsFile.find(line => line.includes(`${addonNameNoTag}/register`));
-
-  if (alreadyRegistered) {
-    return addonsFile;
-  }
-
-  const latestImportIndex = addonsFile.reduce((prev, curr, currIndex) => curr.startsWith('import') && curr.includes('register') ? currIndex : prev, -1);
-  return [...addonsFile.slice(0, latestImportIndex + 1), `import '${getPackageName(addonNameNoTag, isOfficialAddon)}/register';`, ...addonsFile.slice(latestImportIndex + 1)];
-};
-
-exports.addStorybookAddonToFile = addStorybookAddonToFile;
-const LEGACY_CONFIGS = ['addons', 'config', 'presets'];
-
-const postinstallAddon = async (addonName, isOfficialAddon) => {
-  let skipMsg = null;
-
-  if (!isOfficialAddon) {
-    skipMsg = 'unofficial addon';
-  } else if (!_fs.default.existsSync('.storybook')) {
-    skipMsg = 'no .storybook config';
-  } else {
-    skipMsg = 'no codmods found';
-    LEGACY_CONFIGS.forEach(config => {
-      try {
-        const codemod = require.resolve(`${getPackageName(addonName, isOfficialAddon)}/postinstall/${config}.js`);
-
-        (0, _helpers.commandLog)(`Running postinstall script for ${addonName}`)();
-
-        let configFile = _path.default.join('.storybook', `${config}.ts`);
-
-        if (!_fs.default.existsSync(configFile)) {
-          configFile = _path.default.join('.storybook', `${config}.js`);
-
-          if (!_fs.default.existsSync(configFile)) {
-            _fs.default.writeFileSync(configFile, '', 'utf8');
-          }
-        }
-
-        (0, _crossSpawn.sync)('npx', ['jscodeshift', '-t', codemod, configFile], {
-          stdio: 'inherit'
-        });
-        skipMsg = null;
-      } catch (err) {// resolve failed, skip
-      }
-    });
-  }
-
-  if (skipMsg) {
-    (0, _helpers.commandLog)(`Skipping postinstall for ${addonName}, ${skipMsg}`)();
-  }
-};
-
-async function add(addonName, options) {
-  const packageManager = _jsPackageManager.JsPackageManagerFactory.getPackageManager(options.useNpm);
-
-  const addonCheckDone = (0, _helpers.commandLog)(`Verifying that ${addonName} is an addon`);
-  const isOfficialAddon = await isStorybookAddon(packageManager, addonName);
-
-  if (!isOfficialAddon) {
-    if (!(await isAddon(packageManager, addonName))) {
-      addonCheckDone(`The provided package was not a Storybook addon: ${addonName}.`);
-      return;
-    }
-  }
-
-  addonCheckDone();
-  installAddon(packageManager, addonName, isOfficialAddon);
-
-  if (!options.skipPostinstall) {
-    await postinstallAddon(addonName, isOfficialAddon);
-  }
-}

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

@@ -1,79 +0,0 @@
-"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/cjs/automigrate/fixes/cra5.js

@@ -1,79 +0,0 @@
-"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/cjs/automigrate/fixes/index.js

@@ -1,33 +0,0 @@
-"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/cjs/automigrate/fixes/mainjsFramework.js

@@ -1,89 +0,0 @@
-"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;

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

@@ -1,156 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.webpack5 = 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;
-
-/**
- * Is the user using webpack5 in their project?
- *
- * If the user is using a version of SB >= 6.3,
- * prompt them to upgrade to webpack5.
- *
- * - Add manager-webpack5 builder-webpack5 as dev dependencies
- * - Add core.builder = 'webpack5' to main.js
- * - Add 'webpack5' as a project dependency
- */
-const webpack5 = {
-  id: 'webpack5',
-
-  async checkWebpack5Builder(packageJson) {
-    var _semver$coerce;
-
-    const {
-      mainConfig,
-      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('webpack5')} fix.
-        🤔 Are you running automigrate from your project directory?
-      `);
-      return null;
-    }
-
-    if (_semver.default.lt(storybookCoerced, '6.3.0')) {
-      logger.warn((0, _tsDedent.default)`
-          Detected SB 6.3 or below, please upgrade storybook to use webpack5.
-
-          To upgrade to the latest stable release, run this from your project directory:
-
-          ${_chalk.default.cyan('npx sb upgrade')}
-
-          Add the ${_chalk.default.cyan('--prerelease')} flag to get the latest prerelease.
-        `.trim());
-      return null;
-    }
-
-    if (_semver.default.gte(storybookCoerced, '7.0.0')) {
-      return null;
-    }
-
-    if (!mainConfig) {
-      logger.warn('Unable to find storybook main.js config');
-      return null;
-    }
-
-    const main = await (0, _csfTools.readConfig)(mainConfig);
-    const builder = main.getFieldValue(['core', 'builder']);
-
-    if (builder && builder !== 'webpack4') {
-      logger.info(`Found builder ${builder}, skipping`);
-      return null;
-    }
-
-    return {
-      storybookVersion,
-      main
-    };
-  },
-
-  async check({
-    packageManager
-  }) {
-    var _semver$coerce2;
-
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      dependencies,
-      devDependencies
-    } = packageJson;
-    const webpackVersion = dependencies.webpack || devDependencies.webpack;
-    const webpackCoerced = (_semver$coerce2 = _semver.default.coerce(webpackVersion)) === null || _semver$coerce2 === void 0 ? void 0 : _semver$coerce2.version;
-    if (!webpackCoerced || _semver.default.lt(webpackCoerced, '5.0.0') || _semver.default.gte(webpackCoerced, '6.0.0')) return null;
-    const builderInfo = await this.checkWebpack5Builder(packageJson);
-    return builderInfo ? Object.assign({
-      webpackVersion
-    }, builderInfo) : null;
-  },
-
-  prompt({
-    webpackVersion,
-    storybookVersion
-  }) {
-    const webpackFormatted = _chalk.default.cyan(`webpack ${webpackVersion}`);
-
-    const sbFormatted = _chalk.default.cyan(`Storybook ${storybookVersion}`);
-
-    return (0, _tsDedent.default)`
-      We've detected you're running ${webpackFormatted}.
-      ${sbFormatted} runs webpack4 by default, which may not be compatible.
-      
-      To run Storybook in webpack5-mode, we can install Storybook's ${_chalk.default.cyan('webpack5 builder')} for you.
-
-      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build')}
-    `;
-  },
-
-  async run({
-    result: {
-      main,
-      storybookVersion,
-      webpackVersion
-    },
-    packageManager,
-    dryRun
-  }) {
-    const deps = [`@storybook/manager-webpack5@${storybookVersion}`, `@storybook/builder-webpack5@${storybookVersion}`]; // this also gets called by 'cra5' fix so we need to add
-    // webpack5 at the project root so that it gets hoisted
-
-    if (!webpackVersion) {
-      deps.push('webpack@5');
-    }
-
-    logger.info(`✅ Adding dependencies: ${deps}`);
-    if (!dryRun) packageManager.addDependencies({
-      installAsDevDependencies: true
-    }, deps);
-    logger.info('✅ Setting `core.builder` to `webpack5` in main.js');
-
-    if (!dryRun) {
-      main.setFieldValue(['core', 'builder'], 'webpack5');
-      await (0, _csfTools.writeConfig)(main);
-    }
-  }
-
-};
-exports.webpack5 = webpack5;

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

@@ -1,27 +0,0 @@
-"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];
-}