CLI: overhaul storybook repro command and rename it to storybook sandbox

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -19,7 +19,7 @@ body:
     attributes:
       label: To Reproduce
       description: >-
-        Please create a reproduction by running `npx sb@next repro` and
+        Please create a reproduction by running `npx sb@next sandbox` and
         following the instructions. Read our
         [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce)
         to learn more about creating reproductions.

.github/workflows/generate-repros.yml

@@ -1,4 +1,4 @@
-name: Generate And Push Repros
+name: Generate and push repros to Github
 
 on:
   schedule:
@@ -7,13 +7,14 @@ on:
   # To remove when the branch will be merged
   push:
     branches:
-      - generate-repros
+      - vite-frameworks-xyz
 
 jobs:
-  update:
+  generate:
     runs-on: ubuntu-latest
     env:
       YARN_ENABLE_IMMUTABLE_INSTALLS: false
+      CLEANUP_SANDBOX_NODE_MODULES: true
     steps:
       - uses: actions/setup-node@v3
         with:
@@ -23,11 +24,19 @@ jobs:
         run: |
           git config --global user.name "Storybook Bot"
           git config --global user.email "bot@storybook.js.org"
-      - name: Change directory
-        run: cd code
       - name: Install dependencies
-        run: yarn install
-      - name: Generate repros with Latest Storybook CLI
-        run: yarn generate-repros --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/repro-templates.git --push --force-push
-      - name: Generate repros with Next Storybook CLI
-        run: yarn generate-repros --next --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/repro-templates.git --push --force-push
+        run: node ./scripts/check-dependencies.js
+      - name: Compile Storybook libraries
+        run: yarn task --task publish --start-from=auto --no-link
+      - name: Running local registry
+        run: yarn local-registry --open &
+        working-directory: ./code
+      - name: Wait for registry
+        run: yarn wait-on http://localhost:6001
+        working-directory: ./code
+      - name: Generate repros
+        run: yarn generate-sandboxes --local-registry
+        working-directory: ./code
+      - name: Publish sandboxes to GitHub
+        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push
+        working-directory: ./code

code/lib/cli/src/generate.ts

@@ -13,8 +13,7 @@ import { add } from './add';
 import { migrate } from './migrate';
 import { extract } from './extract';
 import { upgrade, type UpgradeOptions } from './upgrade';
-import { repro } from './repro';
-import { reproNext } from './repro-next';
+import { sandbox } from './sandbox';
 import { link } from './link';
 import { automigrate } from './automigrate';
 import { generateStorybookBabelConfigInCWD } from './babel-config';
@@ -142,31 +141,14 @@ program
   );
 
 program
-  .command('repro [outputDirectory]')
-  .description('Create a reproduction from a set of possible templates')
-  .option('-f --renderer <renderer>', 'Filter on given renderer')
-  .option('-t --template <template>', 'Use the given template')
-  .option('-l --list', 'List available templates')
-  .option('-g --generator <generator>', 'Use custom generator command')
-  .option('--registry <registry>', 'which registry to use for storybook packages')
-  .option('--pnp', "Use Yarn Plug'n'Play mode instead of node_modules one")
-  .option('--local', "use storybook's local packages instead of yarn's registry")
-  .option('--e2e', 'Used in e2e context')
-  .action((outputDirectory, { renderer, template, list, e2e, generator, pnp, local }) =>
-    repro({ outputDirectory, renderer, template, list, e2e, local, generator, pnp }).catch((e) => {
-      logger.error(e);
-      process.exit(1);
-    })
-  );
-
-program
-  .command('repro-next [filterValue]')
-  .description('Create a reproduction from a set of possible templates')
+  .command('sandbox [filterValue]')
+  .alias('repro') // for retrocompatibility purposes
+  .description('Create a sandbox from a set of possible templates')
   .option('-o --output <outDir>', 'Define an output directory')
   .option('-b --branch <branch>', 'Define the branch to download from', 'next')
   .option('--no-init', 'Whether to download a template without an initialized Storybook', false)
   .action((filterValue, options) =>
-    reproNext({ filterValue, ...options }).catch((e) => {
+    sandbox({ filterValue, ...options }).catch((e) => {
       logger.error(e);
       process.exit(1);
     })

code/lib/cli/src/link.ts

@@ -2,14 +2,59 @@ import fse from 'fs-extra';
 import path from 'path';
 import { sync as spawnSync } from 'cross-spawn';
 import { logger } from '@storybook/node-logger';
-import { exec } from './repro-generators/scripts';
+import shell from 'shelljs';
+import chalk from 'chalk';
+import type { ExecOptions } from 'shelljs';
 
 interface LinkOptions {
   target: string;
   local?: boolean;
   start: boolean;
 }
 
+// TODO: Extract this to somewhere else, or use `exec` from a different file that might already have it
+export const exec = async (
+  command: string,
+  options: ExecOptions = {},
+  {
+    startMessage,
+    errorMessage,
+    dryRun,
+  }: { startMessage?: string; errorMessage?: string; dryRun?: boolean } = {}
+) => {
+  if (startMessage) logger.info(startMessage);
+
+  if (dryRun) {
+    logger.info(`\n> ${command}\n`);
+    return undefined;
+  }
+
+  logger.info(command);
+  return new Promise((resolve, reject) => {
+    const defaultOptions: ExecOptions = {
+      silent: false,
+    };
+    const child = shell.exec(command, {
+      ...defaultOptions,
+      ...options,
+      async: true,
+      silent: false,
+    });
+
+    child.stderr.pipe(process.stderr);
+
+    child.on('exit', (code) => {
+      if (code === 0) {
+        resolve(undefined);
+      } else {
+        logger.error(chalk.red(`An error occurred while executing: \`${command}\``));
+        logger.info(errorMessage);
+        reject(new Error(`command exited with code: ${code}: `));
+      }
+    });
+  });
+};
+
 export const link = async ({ target, local, start }: LinkOptions) => {
   const storybookDir = process.cwd();
   try {
@@ -58,12 +103,12 @@ export const link = async ({ target, local, start }: LinkOptions) => {
   logger.info(`Installing ${reproName}`);
   await exec(`yarn install`, { cwd: reproDir });
 
-  // ⚠️ TODO: Fix peer deps in `@storybook/preset-create-react-app`
-  logger.info(
-    `Magic stuff related to @storybook/preset-create-react-app, we need to fix peerDependencies`
-  );
-
   if (!reproPackageJson.devDependencies?.vite) {
+    // ⚠️ TODO: Fix peer deps in `@storybook/preset-create-react-app`
+    logger.info(
+      `Magic stuff related to @storybook/preset-create-react-app, we need to fix peerDependencies`
+    );
+
     await exec(`yarn add -D webpack-hot-middleware`, { cwd: reproDir });
   }