Merge pull request #15877 from storybookjs/generate-repros

Misc: Generate and push repros to a GitHub repo every night

.eslintignore

@@ -13,6 +13,7 @@ lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__
 lib/components/src/controls/react-editable-json-tree
 scripts/storage
+scripts/repros-generator
 *.bundle.js
 *.js.map
 *.d.ts

.github/workflows/generate-repros.yml

@@ -0,0 +1,28 @@
+name: Generate And Push Repros
+
+on:
+  schedule:
+    - cron: '2 2 */1 * *'
+  workflow_dispatch:
+# To remove when the branch will be merged
+  push:
+    branches:
+      - generate-repros
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_IMMUTABLE_INSTALLS: false
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup git user
+        run: |
+          git config --global user.name "Storybook Bot"
+          git config --global user.email "bot@storybook.js.org"
+      - 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

package.json

@@ -66,6 +66,7 @@
     "dev:check-types": "tsc --noEmit",
     "dev:tsc": "lerna exec --scope \"@storybook/*\" --parallel -- cross-env-shell node \\$LERNA_ROOT_PATH/scripts/utils/watch-tsc.js",
     "github-release": "github-release-from-changelog",
+    "generate-repros": "zx scripts/repros-generator/index.mjs",
     "lint": "yarn lint:js . && yarn lint:md .",
     "lint:js": "cross-env NODE_ENV=production eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
     "lint:md": "remark -q",
@@ -270,7 +271,8 @@
     "web-component-analyzer": "^1.1.6",
     "webpack": "4",
     "webpack-dev-middleware": "^3.7.3",
-    "window-size": "^1.1.1"
+    "window-size": "^1.1.1",
+    "zx": "^3.0.0"
   },
   "dependenciesMeta": {
     "@compodoc/compodoc": {

scripts/repros-generator/fs-helper.mjs

@@ -0,0 +1,19 @@
+import { $ } from 'zx';
+
+/**
+ * Create a tmp directory using `mktemp` command and return the result
+ *
+ * @return {Promise<string>}
+ */
+export async function createTmpDir() {
+  return (await $`mktemp -d`).toString().replace('\n', '');
+}
+
+/**
+ * Copy the source file to the target directory
+ *
+ * @return {Promise<void>}
+ */
+export async function copy(sourceFile, targetDirectory) {
+  return await $`cp ${sourceFile} ${targetDirectory}`;
+}

scripts/repros-generator/git-helper.mjs

@@ -0,0 +1,27 @@
+import { $ } from "zx";
+
+/**
+ * Git add everything in the directory this method is called and commit all the files
+ *
+ * @param {string} commitMessage
+ * @return {Promise<void>}
+ */
+export async function commitEverythingInDirectory(commitMessage) {
+  await $`git add .`;
+
+  try {
+    await $`git commit -m ${commitMessage}`;
+  } catch (e) {
+    console.log(`Nothing to commit 🤷`);
+  }
+}
+
+/**
+ * Init a Git repository with initial branch named with input string
+ *
+ * @param {string} branch
+ * @return {Promise<void>}
+ */
+export async function initRepo(branch) {
+  await $`git init --initial-branch ${branch}`;
+}

scripts/repros-generator/index.mjs

@@ -0,0 +1,84 @@
+import { $, cd } from 'zx';
+import { commitEverythingInDirectory, initRepo } from './git-helper.mjs';
+import { copy, createTmpDir } from './fs-helper.mjs';
+
+export const frameworks = [
+  'cra',
+  'cra_typescript',
+  'react',
+  // "react_typescript",
+  // "webpack_react",
+  // "react_in_yarn_workspace",
+  // "angular10",
+  // "angular11",
+  'angular',
+  // "web_components",
+  'web_components_typescript',
+  'web_components_lit2',
+  'vue',
+  'vue3',
+  'html',
+  'preact',
+  // "sfcVue",
+  'svelte',
+];
+
+const logger = console;
+const tmpFolder = await createTmpDir();
+const scriptPath = __dirname;
+const templatesFolderPath = `${scriptPath}/templates`;
+
+const useNextVersion = argv.next;
+const remote = argv.remote;
+const push = argv.push;
+const forcePush = argv['force-push'];
+const gitBranch = useNextVersion ? 'next' : 'main';
+const sbCliVersion = useNextVersion ? 'next' : 'latest';
+
+cd(tmpFolder);
+
+await initRepo(gitBranch);
+await copy(`${templatesFolderPath}/${gitBranch}/README.md`, tmpFolder);
+
+for (const framework of frameworks) {
+  await $`npx sb@${sbCliVersion} repro --template ${framework} ${framework}`;
+  await $`rm -rf ${framework}/.git`;
+  await copy(`${templatesFolderPath}/${gitBranch}/.stackblitzrc`, `${tmpFolder}/${framework}`);
+}
+
+let commitMessage = `Storybook Examples - ${new Date().toDateString()}`;
+await commitEverythingInDirectory(commitMessage);
+
+logger.info(`
+ All the examples were bootstrapped:
+    - in ${tmpFolder}
+    - using the '${sbCliVersion}' version of Storybook CLI
+    - and committed on the '${gitBranch}' branch of a local Git repository 
+ 
+ Also all the files in the 'templates' folder were copied at the root of the Git repository.
+`);
+
+try {
+  if (remote) {
+    await $`git remote add origin ${remote}`;
+
+    if (push) {
+      await $`git push --set-upstream origin ${gitBranch} ${forcePush ? '--force' : ''}`;
+      const remoteRepoUrl = `${remote.replace('.git', '')}/tree/${gitBranch}`;
+      logger.info(`🚀 Everything was pushed on ${remoteRepoUrl}`);
+    } else {
+      logger.info(`
+   To publish these examples you just need to:
+      - push the branch: 'git push --set-upstream origin ${gitBranch}' (you might need '--force' option ;))
+  `);
+    }
+  } else {
+    logger.info(`
+   To publish these examples you just need to:
+      - add a remote Git repository: 'git remote add origin XXXXXXX'
+      - push the branch: 'git push --set-upstream origin ${gitBranch}' (you might need '--force' option ;))
+  `);
+  }
+} catch (e) {
+  logger.error(e);
+}

scripts/repros-generator/templates/main/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "yarn storybook"
+}

scripts/repros-generator/templates/main/README.md

@@ -0,0 +1,19 @@
+# Storybook Reproduction Templates
+
+![Storybook Latest Badge](https://img.shields.io/npm/v/@storybook/react/latest)
+
+The repros have been generated with the latest stable version of Storybook.
+If you want to try the cutting edge version go on the `next` branch. 
+
+Preview any repro live on [StackBlitz](http://stackblitz.com/):
+
+- [Angular](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/angular?preset=node)
+- [React](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/react?preset=node)
+- [Create React App](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/cra?preset=node)
+- [Create React App + TypeScript](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/cra_typescript?preset=node)
+- [Lit 2](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/web_components_lit2?preset=node)
+- [HTML](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/html?preset=node)
+- [Preact](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/preact?preset=node)
+- [Svelte](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/svelte?preset=node)
+- [Vue](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/vue?preset=node)
+- [Vue 3](https://stackblitz.com/github/storybookjs/repro-templates/tree/main/vue3?preset=node)

scripts/repros-generator/templates/next/.stackblitzrc

@@ -0,0 +1,4 @@
+{
+  "installDependencies": true,
+  "startCommand": "yarn storybook"
+}

scripts/repros-generator/templates/next/README.md

@@ -0,0 +1,18 @@
+# Storybook Reproduction Templates
+
+![Storybook Latest Badge](https://img.shields.io/npm/v/@storybook/react/next)
+
+The repros have been generated with the latest stable version of Storybook
+
+Preview any repro live on [StackBlitz](http://stackblitz.com/):
+
+- [Angular](https://stackblitz.com/github/storybookjs/repro-templates/tree/next/angular?preset=node)
+- [React](https://stackblitz.com/github/storybookjs/repro-templates/tree/next/react?preset=node)
+- [Create React App](https://stackblitz.com/github/storybookjs/repro-templates/tree/next/cra?preset=node)
+- [Create React App + TypeScript](https://stackblitz.com/github/repro-templates/tree/next/cra_typescript?preset=node)
+- [Lit 2](https://stackblitz.com/github/storybookjs/repro-templates/tree/next/web_components_lit2?preset=node)
+- [HTML](https://stackblitz.com/github/storybookjs/repro-templates/tree/next/html?preset=node)
+- [Preact](https://stackblitz.com/github/storybookjs/repro-templates/tree/next/preact?preset=node)
+- [Svelte](https://stackblitz.com/github/storybookjs/repro-templates/tree/next/svelte?preset=node)
+- [Vue](https://stackblitz.com/github/storybookjs/repro-templates/tree/next/vue?preset=node)
+- [Vue 3](https://stackblitz.com/github/storybookjs/repro-templates/tree/next/vue3?preset=node)