@storybook/cli 7.0.0-alpha.17 → 7.0.0-alpha.18

package/dist/cjs/generate.js

@@ -26,6 +26,8 @@ var _upgrade = require("./upgrade");
 
 var _repro = require("./repro");
 
+var _reproNext = require("./repro-next");
+
 var _link = require("./link");
 
 var _automigrate = require("./automigrate");
@@ -50,7 +52,11 @@ process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMET
 
 _commander.default.option('--enable-crash-reports', 'enable sending crash reports to telemetry data');
 
-_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('--use-pnp', 'Enable pnp mode').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg));
+_commander.default.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('--use-pnp', 'Enable pnp mode').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => (0, _initiate.initiate)(options, pkg).catch(err => {
+  _nodeLogger.logger.error(err);
+
+  process.exit(1);
+}));
 
 _commander.default.command('add <addon>').description('Add an addon to your Storybook').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-s --skip-postinstall', 'Skip package specific postinstall config modifications').action((addonName, options) => (0, _add.add)(addonName, options));
 
@@ -122,11 +128,21 @@ _commander.default.command('repro [outputDirectory]').description('Create a repr
   process.exit(1);
 }));
 
-_commander.default.command('link <repo-url-or-directory>').description('Pull down a repro from a URL (or a local directory), link it, and run storybook').option('--local', 'Link a local directory already in your file system').action((target, {
-  local
+_commander.default.command('repro-next [filterValue]').description('Create a reproduction from a set of possible templates').option('-o --output <outDir>', 'Define an output directory').option('-b --branch <branch>', 'Define the branch to degit from', 'next').action((filterValue, options) => (0, _reproNext.reproNext)(Object.assign({
+  filterValue
+}, options)).catch(e => {
+  _nodeLogger.logger.error(e);
+
+  process.exit(1);
+}));
+
+_commander.default.command('link <repo-url-or-directory>').description('Pull down a repro from a URL (or a local directory), link it, and run storybook').option('--local', 'Link a local directory already in your file system').option('--no-start', 'Start the storybook', true).action((target, {
+  local,
+  start
 }) => (0, _link.link)({
   target,
-  local
+  local,
+  start
 }).catch(e => {
   _nodeLogger.logger.error(e);
 

package/dist/cjs/link.js

@@ -19,7 +19,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const link = async ({
   target,
-  local
+  local,
+  start
 }) => {
   const storybookDir = process.cwd();
 
@@ -86,11 +87,13 @@ const link = async ({
     cwd: reproDir
   });
 
-  _nodeLogger.logger.info(`Running ${reproName} storybook`);
+  if (start) {
+    _nodeLogger.logger.info(`Running ${reproName} storybook`);
 
-  await (0, _scripts.exec)(`yarn run storybook`, {
-    cwd: reproDir
-  });
+    await (0, _scripts.exec)(`yarn run storybook`, {
+      cwd: reproDir
+    });
+  }
 };
 
 exports.link = link;

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

@@ -29,10 +29,14 @@ const logger = console;
 
 const exec = async (command, options = {}, {
   startMessage,
-  errorMessage
+  errorMessage,
+  dryRun
 } = {}) => {
-  if (startMessage) {
-    logger.info(startMessage);
+  if (startMessage) logger.info(startMessage);
+
+  if (dryRun) {
+    logger.info(`\n> ${command}\n`);
+    return undefined;
   }
 
   logger.debug(command);
@@ -47,7 +51,6 @@ const exec = async (command, options = {}, {
     }));
 
     child.stderr.pipe(process.stderr);
-    child.stdout.pipe(process.stdout);
     child.on('exit', code => {
       if (code === 0) {
         resolve(undefined);

package/dist/cjs/repro-next.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reproNext = void 0;
+
+var _prompts = _interopRequireDefault(require("prompts"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _chalk = _interopRequireDefault(require("chalk"));
+
+var _boxen = _interopRequireDefault(require("boxen"));
+
+var _tsDedent = require("ts-dedent");
+
+var _degit = _interopRequireDefault(require("degit"));
+
+var _reproTemplates = _interopRequireDefault(require("./repro-templates"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const logger = console;
+
+const toChoices = c => ({
+  title: _reproTemplates.default[c].name,
+  value: c
+});
+
+const reproNext = async ({
+  output: outputDirectory,
+  filterValue,
+  branch
+}) => {
+  const keys = Object.keys(_reproTemplates.default); // get value from template and reduce through TEMPLATES to filter out the correct template
+
+  const choices = keys.reduce((acc, group) => {
+    const current = _reproTemplates.default[group];
+    const filterRegex = new RegExp(filterValue, 'i');
+
+    if (!filterValue) {
+      acc.push(group);
+      return acc;
+    }
+
+    if (current.name.match(filterRegex) || group.match(filterRegex) || current.expected.builder.match(filterRegex) || current.expected.framework.match(filterRegex) || current.expected.renderer.match(filterRegex)) {
+      acc.push(group);
+      return acc;
+    }
+
+    return acc;
+  }, []);
+
+  if (choices.length === 0) {
+    logger.info((0, _boxen.default)((0, _tsDedent.dedent)`
+          🔎 You filtered out all templates. 🔍
+          After filtering all the templates with "${_chalk.default.yellow(filterValue)}", we found no templates.
+
+          Available templates:
+          ${keys.map(key => _chalk.default.blue`- ${key}`).join('\n')}
+          `.trim(), {
+      borderStyle: 'round',
+      padding: 1,
+      borderColor: '#F1618C'
+    }));
+    return;
+  }
+
+  let selectedTemplate = null;
+
+  if (choices.length === 1) {
+    [selectedTemplate] = choices;
+  } else {
+    logger.info((0, _boxen.default)((0, _tsDedent.dedent)`
+          🤗 Welcome to ${_chalk.default.yellow('sb repro NEXT')}! 🤗 
+  
+          Create a ${_chalk.default.green('new project')} to minimally reproduce Storybook issues.
+          
+          1. select an environment that most closely matches your project setup.
+          2. select a location for the reproduction, outside of your project.
+          
+          After the reproduction is ready, we'll guide you through the next steps.
+          `.trim(), {
+      borderStyle: 'round',
+      padding: 1,
+      borderColor: '#F1618C'
+    }));
+    selectedTemplate = await promptSelectedTemplate(choices);
+  }
+
+  const hasSelectedTemplate = !!(selectedTemplate ?? null);
+
+  if (!hasSelectedTemplate) {
+    logger.error('Somehow we got no templates. Please rerun this command!');
+    return;
+  }
+
+  const selectedConfig = _reproTemplates.default[selectedTemplate];
+
+  if (!selectedConfig) {
+    throw new Error('🚨 Repro: please specify a valid template type');
+  }
+
+  let selectedDirectory = outputDirectory;
+
+  if (!selectedDirectory) {
+    const {
+      directory
+    } = await (0, _prompts.default)({
+      type: 'text',
+      message: 'Enter the output directory',
+      name: 'directory',
+      initial: selectedTemplate,
+      validate: directoryName => _fs.default.existsSync(directoryName) ? `${directoryName} already exists. Please choose another name.` : true
+    });
+    selectedDirectory = directory;
+  }
+
+  try {
+    const cwd = _path.default.isAbsolute(selectedDirectory) ? selectedDirectory : _path.default.join(process.cwd(), selectedDirectory);
+    logger.info(`🏃 Adding ${selectedConfig.name} into ${cwd}`);
+    logger.log('📦 Downloading repro template...');
+
+    try {
+      // Download the repro based on subfolder "after-storybook" and selected branch
+      await (0, _degit.default)(`storybookjs/repro-templates-temp/${selectedTemplate}/after-storybook#${branch}`, {
+        force: true
+      }).clone(selectedTemplate.replace('/', '-'));
+    } catch (err) {
+      logger.error(`🚨 Failed to download repro template: ${err.message}`);
+      return;
+    }
+
+    logger.info((0, _boxen.default)((0, _tsDedent.dedent)`
+        🎉 Your Storybook reproduction project is ready to use! 🎉
+
+        ${_chalk.default.yellow(`cd ${selectedDirectory}`)}
+        ${_chalk.default.yellow(`yarn storybook`)}
+
+        Once you've recreated the problem you're experiencing, please:
+        
+        1. Document any additional steps in ${_chalk.default.cyan('README.md')}
+        2. Publish the repository to github
+        3. Link to the repro repository in your issue
+
+        Having a clean repro helps us solve your issue faster! 🙏
+      `.trim(), {
+      borderStyle: 'round',
+      padding: 1,
+      borderColor: '#F1618C'
+    }));
+  } catch (error) {
+    logger.error('🚨 Failed to create repro');
+    throw error;
+  }
+};
+
+exports.reproNext = reproNext;
+
+async function promptSelectedTemplate(choices) {
+  const {
+    template
+  } = await (0, _prompts.default)({
+    type: 'select',
+    message: '🌈 Select the template',
+    name: 'template',
+    choices: choices.map(toChoices)
+  });
+  return template || null;
+}

package/dist/cjs/repro-templates.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// auto generated file, do not edit
+var _default = {
+  'cra/default-js': {
+    name: 'Create React App (Javascript)',
+    script: 'npx create-react-app .',
+    expected: {
+      framework: '@storybook/cra',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-webpack5'
+    }
+  },
+  'cra/default-ts': {
+    name: 'Create React App (Typescript)',
+    script: 'npx create-react-app . --template typescript',
+    expected: {
+      framework: '@storybook/cra',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-webpack5'
+    }
+  }
+};
+exports.default = _default;

package/dist/cjs/versions.js

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

package/dist/esm/generate.js

@@ -11,6 +11,7 @@ import { migrate } from './migrate';
 import { extract } from './extract';
 import { upgrade } from './upgrade';
 import { repro } from './repro';
+import { reproNext } from './repro-next';
 import { link } from './link';
 import { automigrate } from './automigrate';
 import { generateStorybookBabelConfigInCWD } from './babel-config';
@@ -24,7 +25,10 @@ const consoleLogger = console;
 program.option('--disable-telemetry', 'disable sending telemetry data', // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true
 process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false');
 program.option('--enable-crash-reports', 'enable sending crash reports to telemetry data');
-program.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('--use-pnp', 'Enable pnp mode').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => initiate(options, pkg));
+program.command('init').description('Initialize Storybook into your project.').option('-f --force', 'Force add Storybook').option('-s --skip-install', 'Skip installing deps').option('-N --use-npm', 'Use npm to install deps').option('--use-pnp', 'Enable pnp mode').option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser').option('-t --type <type>', 'Add Storybook for a specific project type').option('-y --yes', 'Answer yes to all prompts').option('-b --builder <builder>', 'Builder library').option('-l --linkable', 'Prepare installation for link (contributor helper)').action(options => initiate(options, pkg).catch(err => {
+  logger.error(err);
+  process.exit(1);
+}));
 program.command('add <addon>').description('Add an addon to your Storybook').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-s --skip-postinstall', 'Skip package specific postinstall config modifications').action((addonName, options) => add(addonName, options));
 program.command('babelrc').description('generate the default storybook babel config into your current working directory').action(() => generateStorybookBabelConfigInCWD());
 program.command('upgrade').description('Upgrade your Storybook packages to the latest').option('-N --use-npm', 'Use NPM to build the Storybook server').option('-y --yes', 'Skip prompting the user').option('-n --dry-run', 'Only check for upgrades, do not install').option('-p --prerelease', 'Upgrade to the pre-release packages').option('-s --skip-check', 'Skip postinstall version and automigration checks').action(options => upgrade(options));
@@ -84,11 +88,19 @@ program.command('repro [outputDirectory]').description('Create a reproduction fr
   logger.error(e);
   process.exit(1);
 }));
-program.command('link <repo-url-or-directory>').description('Pull down a repro from a URL (or a local directory), link it, and run storybook').option('--local', 'Link a local directory already in your file system').action((target, {
-  local
+program.command('repro-next [filterValue]').description('Create a reproduction from a set of possible templates').option('-o --output <outDir>', 'Define an output directory').option('-b --branch <branch>', 'Define the branch to degit from', 'next').action((filterValue, options) => reproNext(Object.assign({
+  filterValue
+}, options)).catch(e => {
+  logger.error(e);
+  process.exit(1);
+}));
+program.command('link <repo-url-or-directory>').description('Pull down a repro from a URL (or a local directory), link it, and run storybook').option('--local', 'Link a local directory already in your file system').option('--no-start', 'Start the storybook', true).action((target, {
+  local,
+  start
 }) => link({
   target,
-  local
+  local,
+  start
 }).catch(e => {
   logger.error(e);
   process.exit(1);

package/dist/esm/link.js

@@ -5,7 +5,8 @@ import { logger } from '@storybook/node-logger';
 import { exec } from './repro-generators/scripts';
 export const link = async ({
   target,
-  local
+  local,
+  start
 }) => {
   const storybookDir = process.cwd();
 
@@ -58,8 +59,11 @@ export const link = async ({
   await exec(`yarn add -D webpack-hot-middleware`, {
     cwd: reproDir
   });
-  logger.info(`Running ${reproName} storybook`);
-  await exec(`yarn run storybook`, {
-    cwd: reproDir
-  });
+
+  if (start) {
+    logger.info(`Running ${reproName} storybook`);
+    await exec(`yarn run storybook`, {
+      cwd: reproDir
+    });
+  }
 };

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

@@ -13,10 +13,14 @@ import storybookVersions from '../versions';
 const logger = console;
 export const exec = async (command, options = {}, {
   startMessage,
-  errorMessage
+  errorMessage,
+  dryRun
 } = {}) => {
-  if (startMessage) {
-    logger.info(startMessage);
+  if (startMessage) logger.info(startMessage);
+
+  if (dryRun) {
+    logger.info(`\n> ${command}\n`);
+    return undefined;
   }
 
   logger.debug(command);
@@ -29,7 +33,6 @@ export const exec = async (command, options = {}, {
       silent: false
     }));
     child.stderr.pipe(process.stderr);
-    child.stdout.pipe(process.stdout);
     child.on('exit', code => {
       if (code === 0) {
         resolve(undefined);

package/dist/esm/repro-next.js

@@ -0,0 +1,154 @@
+import prompts from 'prompts';
+import fs from 'fs';
+import path from 'path';
+import chalk from 'chalk';
+import boxen from 'boxen';
+import { dedent } from 'ts-dedent';
+import degit from 'degit';
+import TEMPLATES from './repro-templates';
+const logger = console;
+
+const toChoices = c => ({
+  title: TEMPLATES[c].name,
+  value: c
+});
+
+export const reproNext = async ({
+  output: outputDirectory,
+  filterValue,
+  branch
+}) => {
+  const keys = Object.keys(TEMPLATES); // get value from template and reduce through TEMPLATES to filter out the correct template
+
+  const choices = keys.reduce((acc, group) => {
+    const current = TEMPLATES[group];
+    const filterRegex = new RegExp(filterValue, 'i');
+
+    if (!filterValue) {
+      acc.push(group);
+      return acc;
+    }
+
+    if (current.name.match(filterRegex) || group.match(filterRegex) || current.expected.builder.match(filterRegex) || current.expected.framework.match(filterRegex) || current.expected.renderer.match(filterRegex)) {
+      acc.push(group);
+      return acc;
+    }
+
+    return acc;
+  }, []);
+
+  if (choices.length === 0) {
+    logger.info(boxen(dedent`
+          🔎 You filtered out all templates. 🔍
+          After filtering all the templates with "${chalk.yellow(filterValue)}", we found no templates.
+
+          Available templates:
+          ${keys.map(key => chalk.blue`- ${key}`).join('\n')}
+          `.trim(), {
+      borderStyle: 'round',
+      padding: 1,
+      borderColor: '#F1618C'
+    }));
+    return;
+  }
+
+  let selectedTemplate = null;
+
+  if (choices.length === 1) {
+    [selectedTemplate] = choices;
+  } else {
+    logger.info(boxen(dedent`
+          🤗 Welcome to ${chalk.yellow('sb repro NEXT')}! 🤗 
+  
+          Create a ${chalk.green('new project')} to minimally reproduce Storybook issues.
+          
+          1. select an environment that most closely matches your project setup.
+          2. select a location for the reproduction, outside of your project.
+          
+          After the reproduction is ready, we'll guide you through the next steps.
+          `.trim(), {
+      borderStyle: 'round',
+      padding: 1,
+      borderColor: '#F1618C'
+    }));
+    selectedTemplate = await promptSelectedTemplate(choices);
+  }
+
+  const hasSelectedTemplate = !!(selectedTemplate ?? null);
+
+  if (!hasSelectedTemplate) {
+    logger.error('Somehow we got no templates. Please rerun this command!');
+    return;
+  }
+
+  const selectedConfig = TEMPLATES[selectedTemplate];
+
+  if (!selectedConfig) {
+    throw new Error('🚨 Repro: please specify a valid template type');
+  }
+
+  let selectedDirectory = outputDirectory;
+
+  if (!selectedDirectory) {
+    const {
+      directory
+    } = await prompts({
+      type: 'text',
+      message: 'Enter the output directory',
+      name: 'directory',
+      initial: selectedTemplate,
+      validate: directoryName => fs.existsSync(directoryName) ? `${directoryName} already exists. Please choose another name.` : true
+    });
+    selectedDirectory = directory;
+  }
+
+  try {
+    const cwd = path.isAbsolute(selectedDirectory) ? selectedDirectory : path.join(process.cwd(), selectedDirectory);
+    logger.info(`🏃 Adding ${selectedConfig.name} into ${cwd}`);
+    logger.log('📦 Downloading repro template...');
+
+    try {
+      // Download the repro based on subfolder "after-storybook" and selected branch
+      await degit(`storybookjs/repro-templates-temp/${selectedTemplate}/after-storybook#${branch}`, {
+        force: true
+      }).clone(selectedTemplate.replace('/', '-'));
+    } catch (err) {
+      logger.error(`🚨 Failed to download repro template: ${err.message}`);
+      return;
+    }
+
+    logger.info(boxen(dedent`
+        🎉 Your Storybook reproduction project is ready to use! 🎉
+
+        ${chalk.yellow(`cd ${selectedDirectory}`)}
+        ${chalk.yellow(`yarn storybook`)}
+
+        Once you've recreated the problem you're experiencing, please:
+        
+        1. Document any additional steps in ${chalk.cyan('README.md')}
+        2. Publish the repository to github
+        3. Link to the repro repository in your issue
+
+        Having a clean repro helps us solve your issue faster! 🙏
+      `.trim(), {
+      borderStyle: 'round',
+      padding: 1,
+      borderColor: '#F1618C'
+    }));
+  } catch (error) {
+    logger.error('🚨 Failed to create repro');
+    throw error;
+  }
+};
+
+async function promptSelectedTemplate(choices) {
+  const {
+    template
+  } = await prompts({
+    type: 'select',
+    message: '🌈 Select the template',
+    name: 'template',
+    choices: choices.map(toChoices)
+  });
+  return template || null;
+}

package/dist/esm/repro-templates.js

@@ -0,0 +1,21 @@
+// auto generated file, do not edit
+export default {
+  'cra/default-js': {
+    name: 'Create React App (Javascript)',
+    script: 'npx create-react-app .',
+    expected: {
+      framework: '@storybook/cra',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-webpack5'
+    }
+  },
+  'cra/default-ts': {
+    name: 'Create React App (Typescript)',
+    script: 'npx create-react-app . --template typescript',
+    expected: {
+      framework: '@storybook/cra',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-webpack5'
+    }
+  }
+};

package/dist/esm/versions.js

@@ -1,78 +1,78 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '7.0.0-alpha.17',
-  '@storybook/addon-actions': '7.0.0-alpha.17',
-  '@storybook/addon-backgrounds': '7.0.0-alpha.17',
-  '@storybook/addon-controls': '7.0.0-alpha.17',
-  '@storybook/addon-docs': '7.0.0-alpha.17',
-  '@storybook/addon-essentials': '7.0.0-alpha.17',
-  '@storybook/addon-highlight': '7.0.0-alpha.17',
-  '@storybook/addon-interactions': '7.0.0-alpha.17',
-  '@storybook/addon-jest': '7.0.0-alpha.17',
-  '@storybook/addon-links': '7.0.0-alpha.17',
-  '@storybook/addon-measure': '7.0.0-alpha.17',
-  '@storybook/addon-outline': '7.0.0-alpha.17',
-  '@storybook/addon-storyshots': '7.0.0-alpha.17',
-  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.17',
-  '@storybook/addon-storysource': '7.0.0-alpha.17',
-  '@storybook/addon-toolbars': '7.0.0-alpha.17',
-  '@storybook/addon-viewport': '7.0.0-alpha.17',
-  '@storybook/addons': '7.0.0-alpha.17',
-  '@storybook/angular': '7.0.0-alpha.17',
-  '@storybook/api': '7.0.0-alpha.17',
-  '@storybook/blocks': '7.0.0-alpha.17',
-  '@storybook/builder-manager': '7.0.0-alpha.17',
-  '@storybook/builder-webpack5': '7.0.0-alpha.17',
-  '@storybook/channel-postmessage': '7.0.0-alpha.17',
-  '@storybook/channel-websocket': '7.0.0-alpha.17',
-  '@storybook/channels': '7.0.0-alpha.17',
-  '@storybook/cli': '7.0.0-alpha.17',
-  '@storybook/client-api': '7.0.0-alpha.17',
-  '@storybook/client-logger': '7.0.0-alpha.17',
-  '@storybook/codemod': '7.0.0-alpha.17',
-  '@storybook/components': '7.0.0-alpha.17',
-  '@storybook/core-client': '7.0.0-alpha.17',
-  '@storybook/core-common': '7.0.0-alpha.17',
-  '@storybook/core-events': '7.0.0-alpha.17',
-  '@storybook/core-server': '7.0.0-alpha.17',
-  '@storybook/core-webpack': '7.0.0-alpha.17',
-  '@storybook/csf-tools': '7.0.0-alpha.17',
-  '@storybook/docs-tools': '7.0.0-alpha.17',
-  '@storybook/ember': '7.0.0-alpha.17',
-  '@storybook/html': '7.0.0-alpha.17',
-  '@storybook/html-webpack5': '7.0.0-alpha.17',
-  '@storybook/instrumenter': '7.0.0-alpha.17',
-  '@storybook/node-logger': '7.0.0-alpha.17',
-  '@storybook/postinstall': '7.0.0-alpha.17',
-  '@storybook/preact': '7.0.0-alpha.17',
-  '@storybook/preact-webpack5': '7.0.0-alpha.17',
-  '@storybook/preset-html-webpack': '7.0.0-alpha.17',
-  '@storybook/preset-preact-webpack': '7.0.0-alpha.17',
-  '@storybook/preset-react-webpack': '7.0.0-alpha.17',
-  '@storybook/preset-server-webpack': '7.0.0-alpha.17',
-  '@storybook/preset-svelte-webpack': '7.0.0-alpha.17',
-  '@storybook/preset-vue-webpack': '7.0.0-alpha.17',
-  '@storybook/preset-vue3-webpack': '7.0.0-alpha.17',
-  '@storybook/preset-web-components-webpack': '7.0.0-alpha.17',
-  '@storybook/preview-web': '7.0.0-alpha.17',
-  '@storybook/react': '7.0.0-alpha.17',
-  '@storybook/react-webpack5': '7.0.0-alpha.17',
-  '@storybook/router': '7.0.0-alpha.17',
-  '@storybook/server': '7.0.0-alpha.17',
-  '@storybook/server-webpack5': '7.0.0-alpha.17',
-  '@storybook/source-loader': '7.0.0-alpha.17',
-  '@storybook/store': '7.0.0-alpha.17',
-  '@storybook/svelte': '7.0.0-alpha.17',
-  '@storybook/svelte-webpack5': '7.0.0-alpha.17',
-  '@storybook/telemetry': '7.0.0-alpha.17',
-  '@storybook/theming': '7.0.0-alpha.17',
-  '@storybook/ui': '7.0.0-alpha.17',
-  '@storybook/vue': '7.0.0-alpha.17',
-  '@storybook/vue-webpack5': '7.0.0-alpha.17',
-  '@storybook/vue3': '7.0.0-alpha.17',
-  '@storybook/vue3-webpack5': '7.0.0-alpha.17',
-  '@storybook/web-components': '7.0.0-alpha.17',
-  '@storybook/web-components-webpack5': '7.0.0-alpha.17',
-  sb: '7.0.0-alpha.17',
-  storybook: '7.0.0-alpha.17'
+  '@storybook/addon-a11y': '7.0.0-alpha.18',
+  '@storybook/addon-actions': '7.0.0-alpha.18',
+  '@storybook/addon-backgrounds': '7.0.0-alpha.18',
+  '@storybook/addon-controls': '7.0.0-alpha.18',
+  '@storybook/addon-docs': '7.0.0-alpha.18',
+  '@storybook/addon-essentials': '7.0.0-alpha.18',
+  '@storybook/addon-highlight': '7.0.0-alpha.18',
+  '@storybook/addon-interactions': '7.0.0-alpha.18',
+  '@storybook/addon-jest': '7.0.0-alpha.18',
+  '@storybook/addon-links': '7.0.0-alpha.18',
+  '@storybook/addon-measure': '7.0.0-alpha.18',
+  '@storybook/addon-outline': '7.0.0-alpha.18',
+  '@storybook/addon-storyshots': '7.0.0-alpha.18',
+  '@storybook/addon-storyshots-puppeteer': '7.0.0-alpha.18',
+  '@storybook/addon-storysource': '7.0.0-alpha.18',
+  '@storybook/addon-toolbars': '7.0.0-alpha.18',
+  '@storybook/addon-viewport': '7.0.0-alpha.18',
+  '@storybook/addons': '7.0.0-alpha.18',
+  '@storybook/angular': '7.0.0-alpha.18',
+  '@storybook/api': '7.0.0-alpha.18',
+  '@storybook/blocks': '7.0.0-alpha.18',
+  '@storybook/builder-manager': '7.0.0-alpha.18',
+  '@storybook/builder-webpack5': '7.0.0-alpha.18',
+  '@storybook/channel-postmessage': '7.0.0-alpha.18',
+  '@storybook/channel-websocket': '7.0.0-alpha.18',
+  '@storybook/channels': '7.0.0-alpha.18',
+  '@storybook/cli': '7.0.0-alpha.18',
+  '@storybook/client-api': '7.0.0-alpha.18',
+  '@storybook/client-logger': '7.0.0-alpha.18',
+  '@storybook/codemod': '7.0.0-alpha.18',
+  '@storybook/components': '7.0.0-alpha.18',
+  '@storybook/core-client': '7.0.0-alpha.18',
+  '@storybook/core-common': '7.0.0-alpha.18',
+  '@storybook/core-events': '7.0.0-alpha.18',
+  '@storybook/core-server': '7.0.0-alpha.18',
+  '@storybook/core-webpack': '7.0.0-alpha.18',
+  '@storybook/csf-tools': '7.0.0-alpha.18',
+  '@storybook/docs-tools': '7.0.0-alpha.18',
+  '@storybook/ember': '7.0.0-alpha.18',
+  '@storybook/html': '7.0.0-alpha.18',
+  '@storybook/html-webpack5': '7.0.0-alpha.18',
+  '@storybook/instrumenter': '7.0.0-alpha.18',
+  '@storybook/node-logger': '7.0.0-alpha.18',
+  '@storybook/postinstall': '7.0.0-alpha.18',
+  '@storybook/preact': '7.0.0-alpha.18',
+  '@storybook/preact-webpack5': '7.0.0-alpha.18',
+  '@storybook/preset-html-webpack': '7.0.0-alpha.18',
+  '@storybook/preset-preact-webpack': '7.0.0-alpha.18',
+  '@storybook/preset-react-webpack': '7.0.0-alpha.18',
+  '@storybook/preset-server-webpack': '7.0.0-alpha.18',
+  '@storybook/preset-svelte-webpack': '7.0.0-alpha.18',
+  '@storybook/preset-vue-webpack': '7.0.0-alpha.18',
+  '@storybook/preset-vue3-webpack': '7.0.0-alpha.18',
+  '@storybook/preset-web-components-webpack': '7.0.0-alpha.18',
+  '@storybook/preview-web': '7.0.0-alpha.18',
+  '@storybook/react': '7.0.0-alpha.18',
+  '@storybook/react-webpack5': '7.0.0-alpha.18',
+  '@storybook/router': '7.0.0-alpha.18',
+  '@storybook/server': '7.0.0-alpha.18',
+  '@storybook/server-webpack5': '7.0.0-alpha.18',
+  '@storybook/source-loader': '7.0.0-alpha.18',
+  '@storybook/store': '7.0.0-alpha.18',
+  '@storybook/svelte': '7.0.0-alpha.18',
+  '@storybook/svelte-webpack5': '7.0.0-alpha.18',
+  '@storybook/telemetry': '7.0.0-alpha.18',
+  '@storybook/theming': '7.0.0-alpha.18',
+  '@storybook/ui': '7.0.0-alpha.18',
+  '@storybook/vue': '7.0.0-alpha.18',
+  '@storybook/vue-webpack5': '7.0.0-alpha.18',
+  '@storybook/vue3': '7.0.0-alpha.18',
+  '@storybook/vue3-webpack5': '7.0.0-alpha.18',
+  '@storybook/web-components': '7.0.0-alpha.18',
+  '@storybook/web-components-webpack5': '7.0.0-alpha.18',
+  sb: '7.0.0-alpha.18',
+  storybook: '7.0.0-alpha.18'
 };

package/dist/types/link.d.ts

@@ -1,6 +1,7 @@
 interface LinkOptions {
     target: string;
     local?: boolean;
+    start: boolean;
 }
-export declare const link: ({ target, local }: LinkOptions) => Promise<void>;
+export declare const link: ({ target, local, start }: LinkOptions) => Promise<void>;
 export {};

package/dist/types/repro-generators/scripts.d.ts

@@ -35,9 +35,10 @@ export interface Options extends Parameters {
     e2e: boolean;
     pnp: boolean;
 }
-export declare const exec: (command: string, options?: ExecOptions, { startMessage, errorMessage }?: {
+export declare const exec: (command: string, options?: ExecOptions, { startMessage, errorMessage, dryRun, }?: {
     startMessage?: string;
     errorMessage?: string;
+    dryRun?: boolean;
 }) => Promise<unknown>;
 export declare const createAndInit: (cwd: string, { name, version, ...rest }: Parameters, { e2e, pnp, local, registry }: Configuration) => Promise<void>;
 export {};

package/dist/types/repro-next.d.ts

@@ -0,0 +1,7 @@
+interface ReproOptions {
+    filterValue?: string;
+    output?: string;
+    branch?: string;
+}
+export declare const reproNext: ({ output: outputDirectory, filterValue, branch }: ReproOptions) => Promise<void>;
+export {};

package/dist/types/repro-templates.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    readonly 'cra/default-js': {
+        readonly name: "Create React App (Javascript)";
+        readonly script: "npx create-react-app .";
+        readonly expected: {
+            readonly framework: "@storybook/cra";
+            readonly renderer: "@storybook/react";
+            readonly builder: "@storybook/builder-webpack5";
+        };
+    };
+    readonly 'cra/default-ts': {
+        readonly name: "Create React App (Typescript)";
+        readonly script: "npx create-react-app . --template typescript";
+        readonly expected: {
+            readonly framework: "@storybook/cra";
+            readonly renderer: "@storybook/react";
+            readonly builder: "@storybook/builder-webpack5";
+        };
+    };
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "7.0.0-alpha.17",
+  "version": "7.0.0-alpha.18",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -42,24 +42,26 @@
   ],
   "scripts": {
     "check": "tsc --noEmit",
+    "preprepare": "node ./scripts/generate-repro-templates-list.js",
     "prepare": "node ../../../scripts/prepare.js",
     "test": "jest test/**/*.test.js"
   },
   "dependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
-    "@storybook/codemod": "7.0.0-alpha.17",
-    "@storybook/core-common": "7.0.0-alpha.17",
-    "@storybook/core-server": "7.0.0-alpha.17",
-    "@storybook/csf-tools": "7.0.0-alpha.17",
-    "@storybook/node-logger": "7.0.0-alpha.17",
+    "@storybook/codemod": "7.0.0-alpha.18",
+    "@storybook/core-common": "7.0.0-alpha.18",
+    "@storybook/core-server": "7.0.0-alpha.18",
+    "@storybook/csf-tools": "7.0.0-alpha.18",
+    "@storybook/node-logger": "7.0.0-alpha.18",
     "@storybook/semver": "^7.3.2",
-    "@storybook/telemetry": "7.0.0-alpha.17",
+    "@storybook/telemetry": "7.0.0-alpha.18",
     "boxen": "^5.1.2",
     "chalk": "^4.1.0",
     "commander": "^6.2.1",
     "core-js": "^3.8.2",
     "cross-spawn": "^7.0.3",
+    "degit": "^2.8.4",
     "envinfo": "^7.7.3",
     "execa": "^5.0.0",
     "express": "^4.17.1",
@@ -67,6 +69,7 @@
     "fs-extra": "^9.0.1",
     "get-port": "^5.1.1",
     "globby": "^11.0.2",
+    "js-yaml": "^3.14.1",
     "jscodeshift": "^0.13.1",
     "json5": "^2.1.3",
     "leven": "^3.1.0",
@@ -79,8 +82,9 @@
     "update-notifier": "^5.0.1"
   },
   "devDependencies": {
-    "@storybook/client-api": "7.0.0-alpha.17",
+    "@storybook/client-api": "7.0.0-alpha.18",
     "@types/cross-spawn": "^6.0.2",
+    "@types/degit": "^2.8.3",
     "@types/prompts": "^2.0.9",
     "@types/puppeteer-core": "^2.1.0",
     "@types/semver": "^7.3.4",
@@ -93,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7d44bfd3e759c6f17b75029ee2e067fab811f27b"
+  "gitHead": "bd59f1eef0f644175abdb0d9873ed0553f431f53"
 }