Merge pull request #18787 from storybookjs/yann/sb-617-setting-up-the-generate-repro-script

feat: add next-repro CLI command

.gitignore

@@ -7,6 +7,7 @@ dist
 *.DS_Store
 .cache
 junit.xml
+/repros
 
 # Yarn stuff
 /**/.yarn/*

CONTRIBUTING.md

@@ -5,6 +5,15 @@
 - Run `./bootstrap.sh` to install the dependencies, and get the repo ready to be developed on.
 - Run `yarn start` inside of the `code` directory to start the development server.
 
+# Generating reproductions
+
+The monorepo has a script that generates Storybook reproductions based on configurations set in the `scripts/next-repro-generators/repro-config.yml` file. This makes it possible to quickly bootstrap examples with and without Storybook, for given configurations (e.g. CRA, Angular, Vue, etc.)
+
+To do so:
+- Check the `scripts/next-repro-generators/repro-config.yml` if you want to see what will be generated
+- Run `./generate-repros.sh`
+- Check the result in the `repros` directory
+
 # Contributing to Storybook
 
 For further advice on how to contribute, please refer to our [NEW contributing guide on the Storybook website](https://storybook.js.org/docs/react/contribute/how-to-contribute).

code/package.json

@@ -73,6 +73,7 @@
     "lint:other": "prettier --write '**/*.{css,html,json,md,yml}'",
     "lint:package": "sort-package-json",
     "local-registry": "ts-node --project=../scripts/tsconfig.json ../scripts/run-registry.ts --port 6000",
+    "next-repro": "ts-node ../scripts/next-repro-generators/index.ts",
     "publish:debug": "npm run publish:latest -- --npm-tag=debug --no-push",
     "publish:latest": "lerna publish --exact --concurrency 1 --force-publish",
     "publish:next": "npm run publish:latest -- --npm-tag=next",

generate-repros.sh

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+./scripts/node_modules/.bin/ts-node ./scripts/next-repro-generators/index.ts

scripts/next-repro-generators/index.ts

@@ -0,0 +1,126 @@
+/* eslint-disable no-console */
+import path, { join, relative } from 'path';
+import program from 'commander';
+import { command } from 'execa';
+import type { Options as ExecaOptions } from 'execa';
+import yaml from 'js-yaml';
+import pLimit from 'p-limit';
+import prettyTime from 'pretty-hrtime';
+import { copy, emptyDir, ensureDir, readFile, rename } from 'fs-extra';
+// @ts-ignore
+import { maxConcurrentTasks } from '../utils/concurrency';
+
+import { localizeYarnConfigFiles, setupYarn } from './utils/yarn';
+
+type GeneratorConfig = {
+  name: string;
+  script: string;
+  // expected?: {
+  //   framework?: string;
+  //   renderer?: string;
+  //   builder?: string;
+  // };
+};
+
+type DataEntry = {
+  script: string;
+};
+
+const OUTPUT_DIRECTORY = join(__dirname, '..', '..', 'repros');
+const BEFORE_DIR_NAME = 'before-storybook';
+const AFTER_DIR_NAME = 'after-storybook';
+
+const addStorybook = async (baseDir: string) => {
+  const beforeDir = join(baseDir, BEFORE_DIR_NAME);
+  const afterDir = join(baseDir, AFTER_DIR_NAME);
+  const tmpDir = join(baseDir, '.tmp');
+
+  await ensureDir(tmpDir);
+  await emptyDir(tmpDir);
+
+  await copy(beforeDir, tmpDir);
+
+  const sbCliBinaryPath = join(__dirname, `../../code/lib/cli/bin/index.js`);
+  await runCommand(`${sbCliBinaryPath} init`, {
+    cwd: tmpDir,
+    env: {
+      STORYBOOK_DISABLE_TELEMETRY: 'true',
+    },
+  });
+
+  await rename(tmpDir, afterDir);
+};
+
+export const runCommand = async (script: string, options: ExecaOptions) => {
+  const shouldDebug = !!process.env.DEBUG;
+
+  if (shouldDebug) {
+    console.log(`Running command: ${script}`);
+  }
+
+  return command(script, { stdout: shouldDebug ? 'inherit' : 'ignore', ...options });
+};
+
+const runGenerators = async (generators: GeneratorConfig[]) => {
+  console.log(`🤹‍♂️ Generating repros with a concurrency of ${maxConcurrentTasks}`);
+
+  const limit = pLimit(maxConcurrentTasks);
+
+  return Promise.all(
+    generators.map(({ name, script }) =>
+      limit(async () => {
+        const time = process.hrtime();
+        console.log(`🧬 generating ${name}`);
+
+        const baseDir = join(OUTPUT_DIRECTORY, name);
+        const beforeDir = join(baseDir, BEFORE_DIR_NAME);
+
+        await emptyDir(baseDir);
+        await ensureDir(beforeDir);
+
+        await setupYarn({ cwd: baseDir });
+
+        await runCommand(script, { cwd: beforeDir });
+
+        await localizeYarnConfigFiles(baseDir, beforeDir);
+
+        await addStorybook(baseDir);
+
+        console.log(
+          `✅ Created ${name} in ./${relative(process.cwd(), baseDir)} successfully in ${prettyTime(
+            process.hrtime(time)
+          )}`
+        );
+      })
+    )
+  );
+};
+
+const generate = async ({ config }: { config: string }) => {
+  const configContents = await readFile(config, 'utf8');
+  const data: Record<string, DataEntry> = yaml.load(configContents);
+
+  runGenerators(
+    Object.entries(data).map(([name, configuration]) => ({
+      name,
+      script: configuration.script,
+    }))
+  );
+};
+
+program
+  .description('Create a reproduction from a set of possible templates')
+  .option(
+    '-c --config <config>',
+    'Choose a custom configuration file (.yml format)',
+    path.join(__dirname, 'repro-config.yml')
+  );
+
+program.parse(process.argv);
+
+const options = program.opts() as { config: string };
+
+generate(options).catch((e) => {
+  console.trace(e);
+  process.exit(1);
+});

scripts/next-repro-generators/repro-config.yml

@@ -0,0 +1,14 @@
+# group-name/instance-name. Should always be two levels deep.
+cra/default-js:
+  script: "yarn create react-app ."
+  expected:
+    framework: "@storybook/cra"
+    renderer: "@storybook/react"
+    builder: "@storybook/builder-webpack5"
+
+cra/default-ts:
+  script: "yarn create react-app . --template typescript"
+  expected:
+    framework: "@storybook/cra"
+    renderer: "@storybook/react"
+    builder: "@storybook/builder-webpack5"

scripts/next-repro-generators/utils/yarn.ts

@@ -0,0 +1,25 @@
+import { join } from 'path';
+import { move, remove } from 'fs-extra';
+import { runCommand } from '../index';
+
+interface SetupYarnOptions {
+  cwd: string;
+  pnp?: boolean;
+  version?: 'berry' | 'classic';
+}
+
+export async function setupYarn({ cwd, pnp = false, version = 'classic' }: SetupYarnOptions) {
+  await runCommand(`yarn set version ${version}`, { cwd });
+  if (version === 'berry' && !pnp) {
+    await runCommand('yarn config set nodeLinker node-modules', { cwd });
+  }
+  await remove(join(cwd, 'package.json'));
+}
+
+export async function localizeYarnConfigFiles(baseDir: string, beforeDir: string) {
+  await Promise.allSettled([
+    move(join(baseDir, '.yarn'), join(beforeDir, '.yarn')),
+    move(join(baseDir, '.yarnrc.yml'), join(beforeDir, '.yarnrc.yml')),
+    move(join(baseDir, '.yarnrc'), join(beforeDir, '.yarnrc')),
+  ]);
+}

scripts/package.json

@@ -147,6 +147,7 @@
     "npmlog": "^5.0.1",
     "p-limit": "^3.1.0",
     "prettier": ">=2.2.1 <=2.3.0",
+    "pretty-hrtime": "^1.0.0",
     "prompts": "^2.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",

scripts/typings.d.ts

@@ -1 +1,2 @@
 declare module 'verdaccio';
+declare module 'pretty-hrtime';

scripts/yarn.lock

@@ -3334,6 +3334,7 @@ __metadata:
     npmlog: ^5.0.1
     p-limit: ^3.1.0
     prettier: ">=2.2.1 <=2.3.0"
+    pretty-hrtime: ^1.0.0
     prompts: ^2.4.0
     puppeteer: ^2.1.1
     react: 16.14.0
@@ -15639,6 +15640,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-hrtime@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "pretty-hrtime@npm:1.0.3"
+  checksum: 67cb3fc283a72252b49ac488647e6a01b78b7aa1b8f2061834aa1650691229081518ef3ca940f77f41cc8a8f02ba9eeb74b843481596670209e493062f2e89e0
+  languageName: node
+  linkType: hard
+
 "prettyjson@npm:^1.2.1":
   version: 1.2.5
   resolution: "prettyjson@npm:1.2.5"