@storybook/cli 6.5.9 → 7.0.0-alpha.10

package/dist/cjs/repro-generators/scripts.js

@@ -15,6 +15,8 @@ var _shelljs = _interopRequireDefault(require("shelljs"));
 
 var _chalk = _interopRequireDefault(require("chalk"));
 
+var _execa = require("execa");
+
 var _configs = require("./configs");
 
 var _versions = _interopRequireDefault(require("../versions"));
@@ -39,11 +41,12 @@ const exec = async (command, options = {}, {
   logger.debug(command);
   return new Promise((resolve, reject) => {
     const defaultOptions = {
-      silent: true
+      silent: false
     };
 
     const child = _shelljs.default.exec(command, Object.assign({}, defaultOptions, options, {
-      async: true
+      async: true,
+      silent: false
     }));
 
     child.stderr.pipe(process.stderr);
@@ -76,6 +79,40 @@ const addPackageResolutions = async ({
   });
 };
 
+const addLocalPackageResolutions = async ({
+  cwd
+}) => {
+  logger.info(`🔢 Adding package resolutions:`);
+
+  const packageJsonPath = _path.default.join(cwd, 'package.json');
+
+  const packageJson = await (0, _fsExtra.readJSON)(packageJsonPath);
+
+  const workspaceDir = _path.default.join(__dirname, '..', '..', '..', '..', '..');
+
+  const {
+    stdout
+  } = await (0, _execa.command)('yarn workspaces list --json', {
+    cwd: workspaceDir
+  });
+  console.log({
+    stdout,
+    workspaceDir
+  });
+  const workspaces = JSON.parse(`[${stdout.split('\n').join(',')}]`);
+  console.log({
+    workspaces
+  });
+  packageJson.resolutions = Object.keys(_versions.default).reduce((acc, key) => {
+    return Object.assign({}, acc, {
+      [key]: _path.default.join(workspaceDir, workspaces.find(item => item.name === key).location)
+    });
+  }, {});
+  await (0, _fsExtra.writeJSON)(packageJsonPath, packageJson, {
+    spaces: 2
+  });
+};
+
 const installYarn2 = async ({
   cwd,
   pnp,
@@ -130,16 +167,41 @@ const generate = async ({
   });
 };
 
+const addAdditionalFiles = async ({
+  additionalFiles,
+  cwd
+}) => {
+  logger.info(`⤵️ Adding required files`);
+  await Promise.all(additionalFiles.map(async file => {
+    await (0, _fsExtra.outputFile)(_path.default.resolve(cwd, file.path), file.contents, {
+      encoding: 'UTF-8'
+    });
+  }));
+};
+
 const initStorybook = async ({
   cwd,
   autoDetect = true,
   name,
-  e2e
+  e2e,
+  pnp
 }) => {
-  const type = autoDetect ? '' : `--type ${name}`;
-  const linkable = e2e ? '' : '--linkable';
+  const flags = ['--yes'];
+
+  if (!autoDetect) {
+    flags.push(`--type ${name}`);
+  }
+
+  if (e2e) {
+    flags.push('--linkable');
+  }
+
+  if (pnp) {
+    flags.push('--use-pnp');
+  }
+
   const sbCLICommand = useLocalSbCli ? `node ${_path.default.join(__dirname, '../../esm/generate')}` : `yarn dlx -p @storybook/cli sb`;
-  const command = `${sbCLICommand} init --yes ${type} ${linkable}`;
+  const command = `${sbCLICommand} init ${flags.join(' ')}`;
   await exec(command, {
     cwd
   }, {
@@ -205,7 +267,8 @@ const doTask = async (task, options, condition = true) => {
 
 const createAndInit = async (cwd, _ref, {
   e2e,
-  pnp
+  pnp,
+  local
 }) => {
   let {
     name,
@@ -228,13 +291,24 @@ const createAndInit = async (cwd, _ref, {
   await doTask(generate, Object.assign({}, options, {
     cwd: options.creationPath
   }));
+  await doTask(addAdditionalFiles, Object.assign({}, options, {
+    cwd
+  }), !!options.additionalFiles);
 
   if (e2e) {
     await doTask(addPackageResolutions, options);
   }
 
+  if (local) {
+    await doTask(addLocalPackageResolutions, options);
+  }
+
   await doTask(installYarn2, options);
-  await doTask(configureYarn2ForE2E, options, e2e);
+
+  if (e2e) {
+    await doTask(configureYarn2ForE2E, options, e2e);
+  }
+
   await doTask(addTypescript, options, !!options.typescript);
   await doTask(addRequiredDeps, options);
   await doTask(initStorybook, options);

package/dist/cjs/repro.js

@@ -36,8 +36,8 @@ const TEMPLATES = configs; // Create a curate list of template because some of t
 // context, fon instance react_in_yarn_workspace
 
 const CURATED_TEMPLATES = Object.fromEntries(Object.entries(configs).filter(entry => entry[0] !== 'react_in_yarn_workspace'));
-const FRAMEWORKS = Object.values(CURATED_TEMPLATES).reduce((acc, cur) => {
-  acc[cur.framework] = [...(acc[cur.framework] || []), cur];
+const RENDERERS = Object.values(CURATED_TEMPLATES).reduce((acc, cur) => {
+  acc[cur.renderer] = [...(acc[cur.renderer] || []), cur];
   return acc;
 }, {});
 
@@ -45,9 +45,10 @@ const repro = async ({
   outputDirectory,
   list,
   template,
-  framework,
+  renderer,
   generator,
   e2e,
+  local,
   pnp
 }) => {
   logger.info((0, _boxen.default)((0, _tsDedent.default)`
@@ -67,11 +68,11 @@ const repro = async ({
 
   if (list) {
     logger.info('🌈 Available templates');
-    Object.entries(FRAMEWORKS).forEach(([fmwrk, templates]) => {
-      logger.info(fmwrk);
+    Object.entries(RENDERERS).forEach(([r, templates]) => {
+      logger.info(r);
       templates.forEach(t => logger.info(`- ${t.name}`));
 
-      if (fmwrk === 'other') {
+      if (r === 'other') {
         logger.info('- blank');
       }
     });
@@ -79,33 +80,33 @@ const repro = async ({
   }
 
   let selectedTemplate = template;
-  let selectedFramework = framework;
+  let selectedRenderer = renderer;
 
   if (!selectedTemplate && !generator) {
-    if (!selectedFramework) {
+    if (!selectedRenderer) {
       const {
-        framework: frameworkOpt
+        renderer: rendererOpt
       } = await (0, _prompts.default)({
         type: 'select',
-        message: '🌈 Select the repro framework',
-        name: 'framework',
-        choices: Object.keys(FRAMEWORKS).map(f => ({
+        message: '🌈 Select the repro renderer',
+        name: 'renderer',
+        choices: Object.keys(RENDERERS).map(f => ({
           title: f,
           value: f
         }))
       });
-      selectedFramework = frameworkOpt;
+      selectedRenderer = rendererOpt;
     }
 
-    if (!selectedFramework) {
-      throw new Error('🚨 Repro: please select a framework!');
+    if (!selectedRenderer) {
+      throw new Error('🚨 Repro: please select a renderer!');
     }
 
     selectedTemplate = (await (0, _prompts.default)({
       type: 'select',
       message: '📝 Select the repro base template',
       name: 'template',
-      choices: FRAMEWORKS[selectedFramework].map(f => ({
+      choices: RENDERERS[selectedRenderer].map(f => ({
         title: f.name,
         value: f.name
       }))
@@ -142,7 +143,8 @@ const repro = async ({
     logger.info(`🏃 Running ${selectedTemplate} into ${cwd}`);
     await (0, _scripts.createAndInit)(cwd, selectedConfig, {
       e2e: !!e2e,
-      pnp: !!pnp
+      pnp: !!pnp,
+      local: !!local
     });
 
     if (!e2e) {
@@ -169,7 +171,7 @@ const repro = async ({
     }));
   } catch (error) {
     logger.error('🚨 Failed to create repro');
-    throw new Error(error);
+    throw error;
   }
 };
 

package/dist/cjs/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getEnvConfig = getEnvConfig;
+exports.parseList = parseList;
+
+function parseList(str) {
+  return str.split(',').map(item => item.trim()).filter(item => item.length > 0);
+}
+
+function getEnvConfig(program, configEnv) {
+  Object.keys(configEnv).forEach(fieldName => {
+    const envVarName = configEnv[fieldName];
+    const envVarValue = process.env[envVarName];
+
+    if (envVarValue) {
+      program[fieldName] = envVarValue; // eslint-disable-line
+    }
+  });
+}

package/dist/cjs/versions.js

@@ -6,62 +6,80 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 // auto generated file, do not edit
 var _default = {
-  '@storybook/addon-a11y': '6.5.9',
-  '@storybook/addon-actions': '6.5.9',
-  '@storybook/addon-backgrounds': '6.5.9',
-  '@storybook/addon-controls': '6.5.9',
-  '@storybook/addon-docs': '6.5.9',
-  '@storybook/addon-essentials': '6.5.9',
-  '@storybook/addon-interactions': '6.5.9',
-  '@storybook/addon-jest': '6.5.9',
-  '@storybook/addon-links': '6.5.9',
-  '@storybook/addon-measure': '6.5.9',
-  '@storybook/addon-outline': '6.5.9',
-  '@storybook/addon-storyshots': '6.5.9',
-  '@storybook/addon-storyshots-puppeteer': '6.5.9',
-  '@storybook/addon-storysource': '6.5.9',
-  '@storybook/addon-toolbars': '6.5.9',
-  '@storybook/addon-viewport': '6.5.9',
-  '@storybook/addons': '6.5.9',
-  '@storybook/angular': '6.5.9',
-  '@storybook/api': '6.5.9',
-  '@storybook/builder-webpack4': '6.5.9',
-  '@storybook/builder-webpack5': '6.5.9',
-  '@storybook/channel-postmessage': '6.5.9',
-  '@storybook/channel-websocket': '6.5.9',
-  '@storybook/channels': '6.5.9',
-  '@storybook/cli': '6.5.9',
-  '@storybook/client-api': '6.5.9',
-  '@storybook/client-logger': '6.5.9',
-  '@storybook/codemod': '6.5.9',
-  '@storybook/components': '6.5.9',
-  '@storybook/core': '6.5.9',
-  '@storybook/core-client': '6.5.9',
-  '@storybook/core-common': '6.5.9',
-  '@storybook/core-events': '6.5.9',
-  '@storybook/core-server': '6.5.9',
-  '@storybook/csf-tools': '6.5.9',
-  '@storybook/docs-tools': '6.5.9',
-  '@storybook/ember': '6.5.9',
-  '@storybook/html': '6.5.9',
-  '@storybook/instrumenter': '6.5.9',
-  '@storybook/manager-webpack4': '6.5.9',
-  '@storybook/manager-webpack5': '6.5.9',
-  '@storybook/node-logger': '6.5.9',
-  '@storybook/postinstall': '6.5.9',
-  '@storybook/preact': '6.5.9',
-  '@storybook/preview-web': '6.5.9',
-  '@storybook/react': '6.5.9',
-  '@storybook/router': '6.5.9',
-  '@storybook/server': '6.5.9',
-  '@storybook/source-loader': '6.5.9',
-  '@storybook/store': '6.5.9',
-  '@storybook/svelte': '6.5.9',
-  '@storybook/telemetry': '6.5.9',
-  '@storybook/theming': '6.5.9',
-  '@storybook/ui': '6.5.9',
-  '@storybook/vue': '6.5.9',
-  '@storybook/vue3': '6.5.9',
-  '@storybook/web-components': '6.5.9'
+  '@storybook/addon-a11y': '7.0.0-alpha.10',
+  '@storybook/addon-actions': '7.0.0-alpha.10',
+  '@storybook/addon-backgrounds': '7.0.0-alpha.10',
+  '@storybook/addon-controls': '7.0.0-alpha.10',
+  '@storybook/addon-docs': '7.0.0-alpha.10',
+  '@storybook/addon-essentials': '7.0.0-alpha.10',
+  '@storybook/addon-highlight': '7.0.0-alpha.10',
+  '@storybook/addon-interactions': '7.0.0-alpha.10',
+  '@storybook/addon-jest': '7.0.0-alpha.10',
+  '@storybook/addon-links': '7.0.0-alpha.10',
+  '@storybook/addon-measure': '7.0.0-alpha.10',
+  '@storybook/addon-outline': '7.0.0-alpha.10',
+  '@storybook/addon-storyshots': '7.0.0-alpha.10',
+  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.10',
+  '@storybook/addon-storysource': '7.0.0-alpha.10',
+  '@storybook/addon-toolbars': '7.0.0-alpha.10',
+  '@storybook/addon-viewport': '7.0.0-alpha.10',
+  '@storybook/addons': '7.0.0-alpha.10',
+  '@storybook/angular': '7.0.0-alpha.10',
+  '@storybook/api': '7.0.0-alpha.10',
+  '@storybook/blocks': '7.0.0-alpha.10',
+  '@storybook/builder-webpack5': '7.0.0-alpha.10',
+  '@storybook/channel-postmessage': '7.0.0-alpha.10',
+  '@storybook/channel-websocket': '7.0.0-alpha.10',
+  '@storybook/channels': '7.0.0-alpha.10',
+  '@storybook/cli': '7.0.0-alpha.10',
+  '@storybook/client-api': '7.0.0-alpha.10',
+  '@storybook/client-logger': '7.0.0-alpha.10',
+  '@storybook/codemod': '7.0.0-alpha.10',
+  '@storybook/components': '7.0.0-alpha.10',
+  '@storybook/core-client': '7.0.0-alpha.10',
+  '@storybook/core-common': '7.0.0-alpha.10',
+  '@storybook/core-events': '7.0.0-alpha.10',
+  '@storybook/core-server': '7.0.0-alpha.10',
+  '@storybook/core-webpack': '7.0.0-alpha.10',
+  '@storybook/csf-tools': '7.0.0-alpha.10',
+  '@storybook/docs-tools': '7.0.0-alpha.10',
+  '@storybook/ember': '7.0.0-alpha.10',
+  '@storybook/html': '7.0.0-alpha.10',
+  '@storybook/html-webpack5': '7.0.0-alpha.10',
+  '@storybook/instrumenter': '7.0.0-alpha.10',
+  '@storybook/manager-webpack5': '7.0.0-alpha.10',
+  '@storybook/node-logger': '7.0.0-alpha.10',
+  '@storybook/postinstall': '7.0.0-alpha.10',
+  '@storybook/preact': '7.0.0-alpha.10',
+  '@storybook/preact-webpack5': '7.0.0-alpha.10',
+  '@storybook/preset-html-webpack': '7.0.0-alpha.10',
+  '@storybook/preset-preact-webpack': '7.0.0-alpha.10',
+  '@storybook/preset-react-webpack': '7.0.0-alpha.10',
+  '@storybook/preset-server-webpack': '7.0.0-alpha.10',
+  '@storybook/preset-svelte-webpack': '7.0.0-alpha.10',
+  '@storybook/preset-vue-webpack': '7.0.0-alpha.10',
+  '@storybook/preset-vue3-webpack': '7.0.0-alpha.10',
+  '@storybook/preset-web-components-webpack': '7.0.0-alpha.10',
+  '@storybook/preview-web': '7.0.0-alpha.10',
+  '@storybook/react': '7.0.0-alpha.10',
+  '@storybook/react-webpack5': '7.0.0-alpha.10',
+  '@storybook/router': '7.0.0-alpha.10',
+  '@storybook/server': '7.0.0-alpha.10',
+  '@storybook/server-webpack5': '7.0.0-alpha.10',
+  '@storybook/source-loader': '7.0.0-alpha.10',
+  '@storybook/store': '7.0.0-alpha.10',
+  '@storybook/svelte': '7.0.0-alpha.10',
+  '@storybook/svelte-webpack5': '7.0.0-alpha.10',
+  '@storybook/telemetry': '7.0.0-alpha.10',
+  '@storybook/theming': '7.0.0-alpha.10',
+  '@storybook/ui': '7.0.0-alpha.10',
+  '@storybook/vue': '7.0.0-alpha.10',
+  '@storybook/vue-webpack5': '7.0.0-alpha.10',
+  '@storybook/vue3': '7.0.0-alpha.10',
+  '@storybook/vue3-webpack5': '7.0.0-alpha.10',
+  '@storybook/web-components': '7.0.0-alpha.10',
+  '@storybook/web-components-webpack5': '7.0.0-alpha.10',
+  sb: '7.0.0-alpha.10',
+  storybook: '7.0.0-alpha.10'
 };
 exports.default = _default;

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

@@ -50,18 +50,15 @@ const angular12 = {
   },
 
   prompt({
-    angularVersion,
-    storybookVersion
+    angularVersion
   }) {
     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.
+      Your Storybook's main.js files specifies webpack4, which is incompatible.
 
-      In order to work with your version of Angular, we need to install Storybook's ${_chalk.default.cyan('webpack5 builder')}.
+      In order to work with your version of Angular, we need to install Storybook's ${_chalk.default.cyan('@storybook/builder-webpack5')}.
 
       More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#angular12-upgrade')}
     `;

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

@@ -15,8 +15,12 @@ var _semver = _interopRequireDefault(require("@storybook/semver"));
 
 var _webpack = require("./webpack5");
 
+const _excluded = ["craVersion"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 /**
  * Is the user upgrading from CRA4 to CRA5?
  *
@@ -49,19 +53,20 @@ const cra5 = {
     }, builderInfo) : null;
   },
 
-  prompt({
-    craVersion,
-    storybookVersion
-  }) {
-    const craFormatted = _chalk.default.cyan(`Create React App (CRA) ${craVersion}`);
+  prompt(_ref) {
+    let {
+      craVersion
+    } = _ref,
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-    const sbFormatted = _chalk.default.cyan(`Storybook ${storybookVersion}`);
+    const craFormatted = _chalk.default.cyan(`Create React App (CRA) ${craVersion}`);
 
+    console.log(Object.assign({}, rest));
     return (0, _tsDedent.default)`
       We've detected you are running ${craFormatted} which is powered by webpack5.
-      ${sbFormatted} runs webpack4 by default, which is incompatible.
+      Your Storybook's main.js files specifies webpack4, which is incompatible.
 
-      In order to work with your version of CRA, we need to install Storybook's ${_chalk.default.cyan('webpack5 builder')}.
+      In order to work with your version of CRA, we need to install Storybook's ${_chalk.default.cyan('@storybook/builder-webpack5')}.
 
       More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade')}
     `;

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

@@ -14,12 +14,16 @@ 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 _types = require("../types");
 
 Object.keys(_types).forEach(function (key) {
@@ -33,5 +37,5 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite];
+const fixes = [_cra.cra5, _webpack.webpack5, _angular.angular12, _vue.vue3, _mainjsFramework.mainjsFramework, _eslintPlugin.eslintPlugin, _builderVite.builderVite, _npm.npm7];
 exports.fixes = fixes;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.npm7 = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _tsDedent = _interopRequireDefault(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.default)`
+      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;

package/dist/{modern/automigrate/fixes/angular12.js → esm/automigrate/fixes/vue3.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.angular12 = void 0;
+exports.vue3 = void 0;
 
 require("core-js/modules/es.promise.js");
 
@@ -18,13 +18,13 @@ var _webpack = require("./webpack5");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
- * Is the user upgrading to Angular12?
+ * Is the user upgrading to Vue3?
  *
  * If so:
  * - Run webpack5 fix
  */
-const angular12 = {
-  id: 'angular12',
+const vue3 = {
+  id: 'vue3',
 
   async check({
     packageManager
@@ -36,34 +36,34 @@ const angular12 = {
       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;
+    const vueVersion = dependencies.vue || devDependencies.vue;
+    const vueCoerced = (_semver$coerce = _semver.default.coerce(vueVersion)) === null || _semver$coerce === void 0 ? void 0 : _semver$coerce.version;
 
-    if (!angularCoerced || _semver.default.lt(angularCoerced, '12.0.0')) {
+    if (!vueCoerced || _semver.default.lt(vueCoerced, '3.0.0')) {
       return null;
     }
 
     const builderInfo = await _webpack.webpack5.checkWebpack5Builder(packageJson);
     return builderInfo ? Object.assign({
-      angularVersion
+      vueVersion
     }, builderInfo) : null;
   },
 
   prompt({
-    angularVersion,
+    vueVersion,
     storybookVersion
   }) {
-    const angularFormatted = _chalk.default.cyan(`Angular ${angularVersion}`);
+    const vueFormatted = _chalk.default.cyan(`Vue ${vueVersion}`);
 
     const sbFormatted = _chalk.default.cyan(`Storybook ${storybookVersion}`);
 
     return (0, _tsDedent.default)`
-      We've detected you are running ${angularFormatted} which is powered by webpack5.
+      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 Angular, we need to install Storybook's ${_chalk.default.cyan('webpack5 builder')}.
+      In order to work with your version of Vue, 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')}
+      More info: ${_chalk.default.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vue3-upgrade')}
     `;
   },
 
@@ -76,4 +76,4 @@ const angular12 = {
   }
 
 };
-exports.angular12 = angular12;
+exports.vue3 = vue3;