Merge pull request #18931 from storybookjs/shilman/add-angular-repro-…

…template

Examples: Add angular repro template and refactor

.github/workflows/generate-repros-next.yml

@@ -2,7 +2,12 @@ name: Generate and push repros to the next branch
 
 on:
   schedule:
-    - cron: '2 2 */1 * *'
+    - cron: "2 2 */1 * *"
+  workflow_dispatch:
+  # To remove when the branch will be merged
+  push:
+    branches:
+      - shilman/add-angular-repro-template
 
 jobs:
   generate:
@@ -21,7 +26,7 @@ jobs:
         run: yarn bootstrap --prep
         working-directory: ./code
       - name: Generate repros
-        run: yarn next-repro
+        run: yarn generate-repros-next
         working-directory: ./code
       - name: Publish repros to GitHub
         run: yarn publish-repros --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/repro-templates-temp.git --push

CONTRIBUTING.md

@@ -7,10 +7,10 @@
 
 # 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.)
+The monorepo has a script that generates Storybook reproductions based on configurations set in the `code/lib/cli/src/repro-templates.ts` 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
+- Check the `code/lib/cli/src/repro-templates.ts` if you want to see what will be generated
 - Run `./generate-repros.sh`
 - Check the result in the `repros` directory
 

code/lib/cli/package.json

@@ -42,7 +42,6 @@
   ],
   "scripts": {
     "check": "tsc --noEmit",
-    "preprepare": "node ./scripts/generate-repro-templates-list.js",
     "prepare": "node ../../../scripts/prepare.js",
     "test": "jest test/**/*.test.js"
   },

code/lib/cli/src/repro-templates.ts

@@ -1,4 +1,3 @@
-// auto generated file, do not edit
 export default {
   'cra/default-js': {
     name: 'Create React App (Javascript)',
@@ -18,4 +17,14 @@ export default {
       builder: '@storybook/builder-webpack5',
     },
   },
+  'angular/latest': {
+    name: 'Angular (latest)',
+    script:
+      'npx -p @angular/cli ng new angular-latest --directory . --routing=true --minimal=true --style=scss --skip-install=true --strict',
+    expected: {
+      framework: '@storybook/angular',
+      renderer: '@storybook/angular',
+      builder: '@storybook/builder-webpack5',
+    },
+  },
 } as const;

code/package.json

@@ -63,6 +63,7 @@
     "coverage": "codecov",
     "danger": "danger",
     "generate-repros": "zx ../scripts/repros-generator/index.mjs",
+    "generate-repros-next": "ts-node ../scripts/next-repro-generators/generate-repros.ts",
     "github-release": "github-release-from-changelog",
     "linear-export": "ts-node --project=../scripts/tsconfig.json ../scripts/linear-export.ts",
     "lint": "yarn lint:js && yarn lint:md",
@@ -73,7 +74,6 @@
     "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/generate.ts",
     "publish-repros": "ts-node ../scripts/next-repro-generators/publish.ts",
     "publish:debug": "npm run publish:latest -- --npm-tag=debug --no-push",
     "publish:latest": "lerna publish --exact --concurrency 1 --force-publish",

generate-repros.sh

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

scripts/next-repro-generators/generate.ts → scripts/next-repro-generators/generate-repros.ts

@@ -1,12 +1,13 @@
 /* eslint-disable no-console */
-import path, { join, relative } from 'path';
+import { 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, writeFile } from 'fs-extra';
+import { copy, emptyDir, ensureDir, rename, writeFile } from 'fs-extra';
+import reproTemplates from '../../code/lib/cli/src/repro-templates';
+
 // @ts-ignore
 import { maxConcurrentTasks } from '../utils/concurrency';
 
@@ -105,31 +106,19 @@ const runGenerators = async (generators: (GeneratorConfig & { dirName: string })
   );
 };
 
-const generate = async ({ config }: { config: string }) => {
-  const configContents = await readFile(config, 'utf8');
-  const data: Record<string, GeneratorConfig> = yaml.load(configContents);
-
+const generate = async () => {
   runGenerators(
-    Object.entries(data).map(([dirName, configuration]) => ({
+    Object.entries(reproTemplates).map(([dirName, configuration]) => ({
       dirName,
       ...configuration,
     }))
   );
 };
 
-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.description('Create a reproduction from a set of possible templates');
 program.parse(process.argv);
 
-const options = program.opts() as { config: string };
-
-generate(options).catch((e) => {
+generate().catch((e) => {
   console.trace(e);
   process.exit(1);
 });

scripts/next-repro-generators/publish.ts

@@ -24,7 +24,7 @@ const publish = async (options: PublishOptions & { tmpFolder: string }) => {
   const scriptPath = __dirname;
   const gitBranch = useNextVersion ? 'next' : 'main';
 
-  const templatesData = await getTemplatesData(join(scriptPath, 'repro-config.yml'));
+  const templatesData = await getTemplatesData();
 
   logger.log(`👯‍♂️ Cloning the repository ${remote} in branch ${gitBranch}`);
   await command(`git clone ${remote} .`, { cwd: tmpFolder });

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

@@ -1,8 +1,8 @@
 import { render } from 'ejs';
 import { readFile } from 'fs-extra';
-import yml from 'js-yaml';
 import { format } from 'prettier';
 import { GeneratorConfig } from './types';
+import reproTemplates from '../../../code/lib/cli/src/repro-templates';
 
 export async function renderTemplate(templatePath: string, templateData: Record<string, any>) {
   const template = await readFile(templatePath, 'utf8');
@@ -13,14 +13,11 @@ export async function renderTemplate(templatePath: string, templateData: Record<
   return output;
 }
 
-export const getStackblitzUrl = (path: string) => {
-  return `https://stackblitz.com/github/storybookjs/repro-templates-temp/tree/main/${path}/after-storybook?preset=node`;
+export const getStackblitzUrl = (path: string, branch = 'next') => {
+  return `https://stackblitz.com/github/storybookjs/repro-templates-temp/tree/${branch}/${path}/after-storybook?preset=node`;
 };
 
-export async function getTemplatesData(filePath: string) {
-  const configContents = await readFile(filePath, 'utf8');
-  const ymlData: Record<string, GeneratorConfig> = yml.load(configContents);
-
+export async function getTemplatesData() {
   type TemplatesData = Record<
     string,
     Record<
@@ -31,17 +28,20 @@ export async function getTemplatesData(filePath: string) {
     >
   >;
 
-  const templatesData = Object.keys(ymlData).reduce<TemplatesData>((acc, next) => {
-    const [dirName, templateName] = next.split('/');
-    const groupName =
-      dirName === 'cra' ? 'CRA' : dirName.slice(0, 1).toUpperCase() + dirName.slice(1);
-    const generatorData = ymlData[next];
-    acc[groupName] = acc[groupName] || {};
-    acc[groupName][templateName] = {
-      ...generatorData,
-      stackblitzUrl: getStackblitzUrl(next),
-    };
-    return acc;
-  }, {});
+  const templatesData = Object.keys(reproTemplates).reduce<TemplatesData>(
+    (acc, curr: keyof typeof reproTemplates) => {
+      const [dirName, templateName] = curr.split('/');
+      const groupName =
+        dirName === 'cra' ? 'CRA' : dirName.slice(0, 1).toUpperCase() + dirName.slice(1);
+      const generatorData = reproTemplates[curr];
+      acc[groupName] = acc[groupName] || {};
+      acc[groupName][templateName] = {
+        ...generatorData,
+        stackblitzUrl: getStackblitzUrl(curr),
+      };
+      return acc;
+    },
+    {}
+  );
   return templatesData;
 }

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

@@ -1,6 +1,6 @@
 import { join } from 'path';
 import { move, remove } from 'fs-extra';
-import { runCommand } from '../generate';
+import { runCommand } from '../generate-repros';
 
 interface SetupYarnOptions {
   cwd: string;