@storybook/cli 7.0.0-alpha.31 → 7.0.0-alpha.34

package/dist/cjs/automigrate/fixes/eslint-plugin.js

@@ -1,126 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.eslintPlugin = void 0;
-
-var _chalk = _interopRequireDefault(require("chalk"));
-
-var _tsDedent = require("ts-dedent");
-
-var _csfTools = require("@storybook/csf-tools");
-
-var _coreCommon = require("@storybook/core-common");
-
-var _getEslintInfo = require("../helpers/getEslintInfo");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const logger = console;
-
-/**
- * Does the user not have eslint-plugin-storybook installed?
- *
- * If so:
- * - Install it, and if possible configure it
- */
-const eslintPlugin = {
-  id: 'eslintPlugin',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      dependencies,
-      devDependencies
-    } = packageJson;
-    const eslintPluginStorybook = dependencies['eslint-plugin-storybook'] || devDependencies['eslint-plugin-storybook'];
-    const eslintDependency = dependencies.eslint || devDependencies.eslint;
-
-    if (eslintPluginStorybook || !eslintDependency) {
-      return null;
-    }
-
-    const {
-      mainConfig
-    } = (0, _coreCommon.getStorybookInfo)(packageJson);
-
-    if (!mainConfig) {
-      logger.warn('Unable to find storybook main.js config, skipping');
-      return null;
-    }
-
-    let eslintFile;
-    let unsupportedExtension;
-
-    try {
-      eslintFile = (0, _getEslintInfo.findEslintFile)();
-    } catch (err) {
-      unsupportedExtension = err.message;
-    }
-
-    if (!eslintFile && !unsupportedExtension) {
-      logger.warn('Unable to find .eslintrc config file, skipping');
-      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);
-    return {
-      eslintFile,
-      main,
-      unsupportedExtension
-    };
-  },
-
-  prompt() {
-    return (0, _tsDedent.dedent)`
-      We've detected you are not using our eslint-plugin.
-
-      In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook.
-
-      More info: ${_chalk.default.yellow('https://github.com/storybookjs/eslint-plugin-storybook#readme')}
-    `;
-  },
-
-  async run({
-    result: {
-      eslintFile,
-      unsupportedExtension
-    },
-    packageManager,
-    dryRun
-  }) {
-    const deps = [`eslint-plugin-storybook`];
-    logger.info(`✅ Adding dependencies: ${deps}`);
-    if (!dryRun) packageManager.addDependencies({
-      installAsDevDependencies: true
-    }, deps);
-
-    if (!dryRun && unsupportedExtension) {
-      throw new Error((0, _tsDedent.dedent)`
-          ⚠️ The plugin was successfuly installed but failed to configure.
-          
-          Found an .eslintrc config file with an unsupported automigration format: ${unsupportedExtension}.
-          Supported formats for automigration are: ${_getEslintInfo.SUPPORTED_ESLINT_EXTENSIONS.join(', ')}.
-
-          Please refer to https://github.com/storybookjs/eslint-plugin-storybook#usage to finish setting up the plugin manually.
-      `);
-    }
-
-    const eslint = await (0, _csfTools.readConfig)(eslintFile);
-    logger.info(`✅ Configuring eslint rules in ${eslint.fileName}`);
-
-    if (!dryRun) {
-      logger.info(`✅ Adding Storybook to extends list`);
-      const extendsConfig = eslint.getFieldValue(['extends']) || [];
-      const existingConfigValue = Array.isArray(extendsConfig) ? extendsConfig : [extendsConfig];
-      eslint.setFieldValue(['extends'], [...existingConfigValue, 'plugin:storybook/recommended']);
-      await (0, _csfTools.writeConfig)(eslint);
-    }
-  }
-
-};
-exports.eslintPlugin = eslintPlugin;

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

@@ -1,45 +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 _vue = require("./vue3");
-
-var _mainjsFramework = require("./mainjsFramework");
-
-var _eslintPlugin = require("./eslint-plugin");
-
-var _builderVite = require("./builder-vite");
-
-var _npm = require("./npm7");
-
-var _sbScripts = require("./sb-scripts");
-
-var _newFrameworks = require("./new-frameworks");
-
-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, _vue.vue3, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite, _npm.npm7, _sbScripts.sbScripts, _newFrameworks.newFrameworks];
-exports.fixes = fixes;

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

@@ -1,94 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mainjsFramework = void 0;
-
-var _chalk = _interopRequireDefault(require("chalk"));
-
-var _tsDedent = require("ts-dedent");
-
-var _semver = _interopRequireDefault(require("@storybook/semver"));
-
-var _csfTools = require("@storybook/csf-tools");
-
-var _coreCommon = require("@storybook/core-common");
-
-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(); // FIXME: use renderer in SB7?
-
-    const {
-      mainConfig,
-      framework,
-      version: storybookVersion
-    } = (0, _coreCommon.getStorybookInfo)(packageJson);
-
-    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.dedent)`
-        ❌ 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.dedent)`
-      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/new-frameworks.js

@@ -1,258 +0,0 @@
-"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' // TODO: bring this back if we ever want to support vue 2 + vite. Else delete this!
-    // vite: '@storybook/vue-vite',
-
-  },
-  '@storybook/vue3': {
-    webpack5: '@storybook/vue3-webpack5',
-    vite: '@storybook/vue3-vite'
-  },
-  '@storybook/svelte': {
-    webpack5: '@storybook/svelte-webpack5',
-    // TODO: bring this back once we have the svelte-vite package
-    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); // FIXME: update to use renderer instead of framework
-
-    const {
-      mainConfig,
-      version: storybookVersion,
-      framework
-    } = (0, _coreCommon.getStorybookInfo)(packageJson);
-
-    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']) || {}
-    };
-    const newFrameworkPackage = packagesMap[frameworkPackage][builderInfo.name]; // not all frameworks support vite yet e.g. Svelte
-
-    if (!newFrameworkPackage) {
-      return null;
-    }
-
-    if (allDeps.vite && _semver.default.lt(_semver.default.coerce(allDeps.vite).version, '3.0.0')) {
-      logger.warn((0, _tsDedent.default)`
-        ❌ Detected Vite ${allDeps.vite}, which is unsupported in Storybook 7.0, so the ${_chalk.default.cyan('newFrameworks')} fix will be skipped.
-      Please upgrade vite to 3.0.0 or higher and rerun this automigration with "npx storybook@future automigrate".
-      `);
-      return null;
-    }
-
-    const frameworkOptions = getFrameworkOptions(framework, main);
-    const dependenciesToRemove = ['@storybook/builder-webpack5', '@storybook/manager-webpack5', '@storybook/builder-webpack4', '@storybook/manager-webpack4', '@storybook/builder-vite', 'storybook-builder-vite'].filter(dep => allDeps[dep]);
-    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/fixes/npm7.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.npm7 = void 0;
-
-var _chalk = _interopRequireDefault(require("chalk"));
-
-var _tsDedent = require("ts-dedent");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Is the user using npm7+? If so create a .npmrc with legacy-peer-deps=true
- */
-const npm7 = {
-  id: 'npm7',
-
-  async check({
-    packageManager
-  }) {
-    if (packageManager.type !== 'npm') return null;
-    const npmVersion = packageManager.getNpmVersion();
-
-    if (packageManager.needsLegacyPeerDeps(npmVersion)) {
-      return {
-        npmVersion
-      };
-    }
-
-    return null;
-  },
-
-  prompt({
-    npmVersion
-  }) {
-    const npmFormatted = _chalk.default.cyan(`npm ${npmVersion}`);
-
-    return (0, _tsDedent.dedent)`
-      We've detected you are running ${npmFormatted} which has peer dependency semantics which Storybook is incompatible with.
-
-      In order to work with Storybook's package structure, you'll need to run \`npm\` with the
-      \`--legacy-peer-deps=true\` flag. We can generate an \`.npmrc\` which will do that automatically.
-      
-      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/issues/18298')}
-    `;
-  },
-
-  async run({
-    packageManager
-  }) {
-    packageManager.setLegacyPeerDeps();
-  }
-
-};
-exports.npm7 = npm7;