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

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

@@ -1,45 +0,0 @@
-import chalk from 'chalk';
-import { dedent } from 'ts-dedent';
-
-/**
- * Is the user using npm7+? If so create a .npmrc with legacy-peer-deps=true
- */
-export 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.cyan(`npm ${npmVersion}`);
-    return 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.yellow('https://github.com/storybookjs/storybook/issues/18298')}
-    `;
-  },
-
-  async run({
-    packageManager
-  }) {
-    packageManager.setLegacyPeerDeps();
-  }
-
-};

package/dist/esm/automigrate/fixes/sb-scripts.js

@@ -1,119 +0,0 @@
-import chalk from 'chalk';
-import { dedent } from 'ts-dedent';
-import semver from '@storybook/semver';
-import { getStorybookInfo } from '@storybook/core-common';
-import { getStorybookVersionSpecifier } from '../../helpers';
-const logger = console;
-export const getStorybookScripts = scripts => {
-  const storybookScripts = {
-    custom: {},
-    official: {}
-  };
-  Object.keys(scripts).forEach(key => {
-    if (key === 'storybook' || key === 'build-storybook') {
-      storybookScripts.official[key] = scripts[key];
-    } else if (scripts[key].match(/start-storybook/) || scripts[key].match(/build-storybook/)) {
-      storybookScripts.custom[key] = scripts[key];
-    }
-  });
-  return storybookScripts;
-};
-/**
- * Is the user using start-storybook
- *
- * If so:
- * - Add storybook dependency
- * - Change start-storybook and build-storybook scripts
- */
-
-export const sbScripts = {
-  id: 'sb-scripts',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      scripts = {},
-      devDependencies,
-      dependencies
-    } = packageJson;
-    const {
-      version: storybookVersion
-    } = getStorybookInfo(packageJson);
-    const allDeps = Object.assign({}, dependencies, devDependencies);
-    const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version;
-
-    if (!storybookCoerced) {
-      logger.warn(dedent`
-        ❌ Unable to determine storybook version, skipping ${chalk.cyan('sb-scripts')} fix.
-        🤔 Are you running automigrate from your project directory?
-      `);
-      return null;
-    }
-
-    if (allDeps.sb || allDeps.storybook) {
-      return null;
-    }
-
-    const storybookScripts = getStorybookScripts(scripts);
-
-    if (Object.keys(storybookScripts.official).length === 0 && Object.keys(storybookScripts.custom).length === 0) {
-      return null;
-    }
-
-    Object.keys(storybookScripts.official).forEach(key => {
-      storybookScripts.official[key] = storybookScripts.official[key].replace('start-storybook', 'storybook dev').replace('build-storybook', 'storybook build');
-    });
-    return semver.gte(storybookCoerced, '7.0.0') ? {
-      packageJson,
-      storybookScripts,
-      storybookVersion
-    } : null;
-  },
-
-  prompt({
-    storybookVersion
-  }) {
-    const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
-    const explanationMessage = [`Starting in Storybook 7, the ${chalk.yellow('start-storybook')} and ${chalk.yellow('build-storybook')} binaries have changed to ${chalk.magenta('storybook dev')} and ${chalk.magenta('storybook build')} respectively.`, `In order to work with ${sbFormatted}, Storybook's ${chalk.magenta('storybook')} binary has to be installed and your storybook scripts have to be adjusted to use the binary. We can install the storybook binary and attempt to adjust your scripts for you.`].join('\n');
-    return [`We've detected you are using ${sbFormatted} with scripts from previous versions of Storybook.`, explanationMessage, `More info: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed')}`].filter(Boolean).join('\n\n');
-  },
-
-  async run({
-    result: {
-      storybookScripts,
-      packageJson
-    },
-    packageManager,
-    dryRun
-  }) {
-    logger.log();
-    logger.info(`Adding 'storybook' as dev dependency`);
-    logger.log();
-
-    if (!dryRun) {
-      const versionToInstall = getStorybookVersionSpecifier(packageJson);
-      packageManager.addDependencies({
-        installAsDevDependencies: true
-      }, [`storybook@${versionToInstall}`]);
-    }
-
-    logger.info(`Updating scripts in package.json`);
-    logger.log();
-
-    if (!dryRun && Object.keys(storybookScripts.official).length > 0) {
-      const message = [`Migrating your scripts to:`, chalk.yellow(JSON.stringify(storybookScripts.official, null, 2))].join('\n');
-      logger.log(message);
-      logger.log();
-      packageManager.addScripts(storybookScripts.official);
-    }
-
-    if (!dryRun && Object.keys(storybookScripts.custom).length > 0) {
-      const message = [`We detected custom scripts that we can't automigrate:`, chalk.yellow(JSON.stringify(storybookScripts.custom, null, 2)), '\n', `Please manually migrate the ones applicable and use the documentation below for reference: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed')}`].join('\n');
-      logger.log(message);
-      logger.log();
-    }
-  }
-
-};

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

@@ -1,60 +0,0 @@
-import chalk from 'chalk';
-import { dedent } from 'ts-dedent';
-import semver from '@storybook/semver';
-import { webpack5 } from './webpack5';
-
-/**
- * Is the user upgrading to Vue3?
- *
- * If so:
- * - Run webpack5 fix
- */
-export const vue3 = {
-  id: 'vue3',
-
-  async check({
-    packageManager
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      dependencies,
-      devDependencies
-    } = packageJson;
-    const vueVersion = dependencies.vue || devDependencies.vue;
-    const vueCoerced = semver.coerce(vueVersion)?.version;
-
-    if (!vueCoerced || semver.lt(vueCoerced, '3.0.0')) {
-      return null;
-    }
-
-    const builderInfo = await webpack5.checkWebpack5Builder(packageJson);
-    return builderInfo ? Object.assign({
-      vueVersion
-    }, builderInfo) : null;
-  },
-
-  prompt({
-    vueVersion,
-    storybookVersion
-  }) {
-    const vueFormatted = chalk.cyan(`Vue ${vueVersion}`);
-    const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
-    return dedent`
-      We've detected you are running ${vueFormatted} with Storybook.
-      ${sbFormatted} runs webpack4 by default, which is incompatible.
-
-      In order to work with your version of Vue, we need to install Storybook's ${chalk.cyan('webpack5 builder')}.
-
-      More info: ${chalk.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vue3-upgrade')}
-    `;
-  },
-
-  async run(options) {
-    return webpack5.run(Object.assign({}, options, {
-      result: Object.assign({
-        webpackVersion: null
-      }, options.result)
-    }));
-  }
-
-};

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

@@ -1,131 +0,0 @@
-import chalk from 'chalk';
-import { dedent } from 'ts-dedent';
-import semver from '@storybook/semver';
-import { readConfig, writeConfig } from '@storybook/csf-tools';
-import { getStorybookInfo } from '@storybook/core-common';
-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
- */
-export const webpack5 = {
-  id: 'webpack5',
-
-  async checkWebpack5Builder(packageJson) {
-    const {
-      mainConfig,
-      version: storybookVersion
-    } = getStorybookInfo(packageJson);
-    const storybookCoerced = storybookVersion && semver.coerce(storybookVersion)?.version;
-
-    if (!storybookCoerced) {
-      logger.warn(dedent`
-        ❌ Unable to determine storybook version, skipping ${chalk.cyan('webpack5')} fix.
-        🤔 Are you running automigrate from your project directory?
-      `);
-      return null;
-    }
-
-    if (semver.lt(storybookCoerced, '6.3.0')) {
-      logger.warn(dedent`
-          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.cyan('npx storybook upgrade')}
-
-          Add the ${chalk.cyan('--prerelease')} flag to get the latest prerelease.
-        `.trim());
-      return null;
-    }
-
-    if (semver.gte(storybookCoerced, '7.0.0')) {
-      return null;
-    }
-
-    if (!mainConfig) {
-      logger.warn('Unable to find storybook main.js config');
-      return null;
-    }
-
-    const main = await 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
-  }) {
-    const packageJson = packageManager.retrievePackageJson();
-    const {
-      dependencies,
-      devDependencies
-    } = packageJson;
-    const webpackVersion = dependencies.webpack || devDependencies.webpack;
-    const webpackCoerced = semver.coerce(webpackVersion)?.version;
-    if (!webpackCoerced || semver.lt(webpackCoerced, '5.0.0') || semver.gte(webpackCoerced, '6.0.0')) return null;
-    const builderInfo = await this.checkWebpack5Builder(packageJson);
-    return builderInfo ? Object.assign({
-      webpackVersion
-    }, builderInfo) : null;
-  },
-
-  prompt({
-    webpackVersion
-  }) {
-    const webpackFormatted = chalk.cyan(`webpack ${webpackVersion}`);
-    return dedent`
-      We've detected you're running ${webpackFormatted}.
-      Your Storybook's main.js files specifies webpack4, which is incompatible.
-      
-      To run Storybook in webpack5-mode, we can install Storybook's ${chalk.cyan('@storybook/builder-webpack5')} for you.
-
-      More info: ${chalk.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/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 `@storybook/builder-webpack5` in main.js');
-
-    if (!dryRun) {
-      main.setFieldValue(['core', 'builder'], '@storybook/builder-webpack5');
-      await writeConfig(main);
-    }
-  }
-
-};

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

@@ -1,14 +0,0 @@
-import fse from 'fs-extra';
-export const SUPPORTED_ESLINT_EXTENSIONS = ['js', 'cjs'];
-const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml', 'json'];
-export const findEslintFile = () => {
-  const filePrefix = '.eslintrc';
-  const unsupportedExtension = UNSUPPORTED_ESLINT_EXTENSIONS.find(ext => fse.existsSync(`${filePrefix}.${ext}`));
-
-  if (unsupportedExtension) {
-    throw new Error(unsupportedExtension);
-  }
-
-  const extension = SUPPORTED_ESLINT_EXTENSIONS.find(ext => fse.existsSync(`${filePrefix}.${ext}`));
-  return extension ? `${filePrefix}.${extension}` : null;
-};

package/dist/esm/automigrate/index.js

@@ -1,80 +0,0 @@
-/* eslint-disable no-await-in-loop */
-import prompts from 'prompts';
-import chalk from 'chalk';
-import boxen from 'boxen';
-import { JsPackageManagerFactory } from '../js-package-manager';
-import { fixes } from './fixes';
-const logger = console;
-export const automigrate = async ({
-  fixId,
-  dryRun,
-  yes
-} = {}) => {
-  const packageManager = JsPackageManagerFactory.getPackageManager();
-  const filtered = fixId ? fixes.filter(f => f.id === fixId) : fixes;
-  logger.info('🔎 checking possible migrations..');
-
-  for (let i = 0; i < filtered.length; i += 1) {
-    const f = fixes[i];
-    let result;
-
-    try {
-      result = await f.check({
-        packageManager
-      });
-    } catch (e) {
-      logger.info(`failed to check fix: ${f.id}`);
-    }
-
-    if (result) {
-      logger.info(`🔎 found a '${chalk.cyan(f.id)}' migration:`);
-      logger.info();
-      const message = f.prompt(result);
-      logger.info(boxen(message, {
-        borderStyle: 'round',
-        padding: 1,
-        borderColor: '#F1618C'
-      }));
-      let runAnswer;
-
-      if (dryRun) {
-        runAnswer = {
-          fix: false
-        };
-      } else if (yes) {
-        runAnswer = {
-          fix: true
-        };
-      } else {
-        runAnswer = await prompts({
-          type: 'confirm',
-          name: 'fix',
-          message: `Do you want to run the '${chalk.cyan(f.id)}' migration on your project?`
-        });
-      }
-
-      if (runAnswer.fix) {
-        try {
-          await f.run({
-            result,
-            packageManager,
-            dryRun
-          });
-          logger.info(`✅ ran ${chalk.cyan(f.id)} migration`);
-        } catch (error) {
-          logger.info(`❌ error when running ${chalk.cyan(f.id)} migration:`);
-          logger.info(error);
-          logger.info();
-        }
-      } else {
-        logger.info(`Skipping the ${chalk.cyan(f.id)} migration.`);
-        logger.info();
-        logger.info(`If you change your mind, run '${chalk.cyan('npx storybook@next automigrate')}'`);
-      }
-    }
-  }
-
-  logger.info();
-  logger.info('✅ migration check successfully ran');
-  logger.info();
-};

package/dist/esm/automigrate/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/babel-config.js

@@ -1,42 +0,0 @@
-import { writeFile, access } from 'fs-extra';
-import { logger } from '@storybook/node-logger';
-import path from 'path';
-import prompts from 'prompts';
-export const generateStorybookBabelConfigInCWD = async () => {
-  const target = process.cwd();
-  return generateStorybookBabelConfig({
-    target
-  });
-};
-export const generateStorybookBabelConfig = async ({
-  target
-}) => {
-  logger.info(`Generating the storybook default babel config at ${target}`);
-  const contents = JSON.stringify({
-    sourceType: 'unambiguous',
-    presets: [],
-    plugins: []
-  }, null, 2);
-  const fileName = '.babelrc.json';
-  const location = path.join(target, fileName);
-  const exists = await access(location).then(() => true, () => false);
-
-  if (exists) {
-    const {
-      overwrite
-    } = await prompts({
-      type: 'confirm',
-      initial: true,
-      name: 'overwrite',
-      message: `${fileName} already exists. Would you like overwrite it?`
-    });
-
-    if (overwrite === false) {
-      logger.warn(`Cancelled, babel config file was NOT written to file-system.`);
-      return;
-    }
-  }
-
-  logger.info(`Writing file to ${location}`);
-  await writeFile(location, contents);
-};

package/dist/esm/build.js

@@ -1,22 +0,0 @@
-import { sync as readUpSync } from 'read-pkg-up';
-import { logger } from '@storybook/node-logger';
-import { buildStaticStandalone } from '@storybook/core-server';
-import { cache } from '@storybook/core-common';
-export const build = async cliOptions => {
-  try {
-    await buildStaticStandalone(Object.assign({}, cliOptions, {
-      configDir: cliOptions.configDir || './.storybook',
-      outputDir: cliOptions.outputDir || './storybook-static',
-      ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
-      docsMode: !!cliOptions.docs,
-      configType: 'PRODUCTION',
-      cache,
-      packageJson: readUpSync({
-        cwd: __dirname
-      }).packageJson
-    }));
-  } catch (e) {
-    logger.error(e);
-    process.exit(1);
-  }
-};

package/dist/esm/detect-nextjs.js

@@ -1,24 +0,0 @@
-const regex = /[\s"\n]next.*?(\d+).*/;
-export const detectNextJS = packageManager => {
-  try {
-    let out = '';
-
-    if (packageManager.type === 'npm') {
-      try {
-        // npm <= v7
-        out = packageManager.executeCommand('npm', ['ls', 'next']);
-      } catch (e2) {
-        // npm >= v8
-        out = packageManager.executeCommand('npm', ['why', 'next']);
-      }
-    } else {
-      out = packageManager.executeCommand('yarn', ['why', 'next']);
-    }
-
-    const [, version] = out.match(regex);
-    return version && parseInt(version, 10) ? parseInt(version, 10) : false;
-  } catch (err) {//
-  }
-
-  return false;
-};

package/dist/esm/detect-webpack.js

@@ -1,30 +0,0 @@
-export const detectWebpack = packageManager => {
-  try {
-    let out = '';
-
-    if (packageManager.type === 'npm') {
-      try {
-        // npm <= v7
-        out = packageManager.executeCommand('npm', ['ls', 'webpack']);
-      } catch (e2) {
-        // npm >= v8
-        out = packageManager.executeCommand('npm', ['why', 'webpack']);
-      }
-    } else {
-      out = packageManager.executeCommand('yarn', ['why', 'webpack']);
-    } // if the user has BOTH webpack 4 and 5 installed already, we'll pick the safest options (4)
-
-
-    if (out.includes('webpack@4') || out.includes('webpack@npm:4')) {
-      return 4;
-    } // the user has webpack 4 installed, but not 5
-
-
-    if (out.includes('webpack@5') || out.includes('webpack@npm:5')) {
-      return 5;
-    }
-  } catch (err) {//
-  }
-
-  return false;
-};