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

package/dist/esm/add.js

@@ -0,0 +1,151 @@
+"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/esm/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/esm/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/esm/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/esm/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;

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

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