From 582e70af5256d519e7c7536862f4e14dbb92c786 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABtan=20Maisse?= Date: Wed, 18 Aug 2021 22:32:54 +0200 Subject: [PATCH] feat: add a script to generate and push repros every night --- .eslintignore | 1 + .github/workflows/generate-repros.yml | 28 ++++++ package.json | 4 +- scripts/repros-generator/fs-helper.mjs | 19 ++++ scripts/repros-generator/git-helper.mjs | 27 ++++++ scripts/repros-generator/index.mjs | 84 ++++++++++++++++++ .../templates/main/.stackblitzrc | 4 + .../repros-generator/templates/main/README.md | 19 ++++ .../templates/next/.stackblitzrc | 4 + .../repros-generator/templates/next/README.md | 18 ++++ yarn.lock | 88 ++++++++++++++++++- 11 files changed, 292 insertions(+), 4 deletions(-) create mode 100644 .github/workflows/generate-repros.yml create mode 100644 scripts/repros-generator/fs-helper.mjs create mode 100644 scripts/repros-generator/git-helper.mjs create mode 100755 scripts/repros-generator/index.mjs create mode 100644 scripts/repros-generator/templates/main/.stackblitzrc create mode 100644 scripts/repros-generator/templates/main/README.md create mode 100644 scripts/repros-generator/templates/next/.stackblitzrc create mode 100644 scripts/repros-generator/templates/next/README.md diff --git a/.eslintignore b/.eslintignore index 55d571343afc..7ba4c1389c28 100644 --- a/.eslintignore +++ b/.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 diff --git a/.github/workflows/generate-repros.yml b/.github/workflows/generate-repros.yml new file mode 100644 index 000000000000..eec4352b8287 --- /dev/null +++ b/.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 diff --git a/package.json b/package.json index 7ef00888161a..fa43b5c4c8f4 100644 --- a/package.json +++ b/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": { diff --git a/scripts/repros-generator/fs-helper.mjs b/scripts/repros-generator/fs-helper.mjs new file mode 100644 index 000000000000..c563f6733755 --- /dev/null +++ b/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} + */ +export async function createTmpDir() { + return (await $`mktemp -d`).toString().replace('\n', ''); +} + +/** + * Copy the source file to the target directory + * + * @return {Promise} + */ +export async function copy(sourceFile, targetDirectory) { + return await $`cp ${sourceFile} ${targetDirectory}`; +} diff --git a/scripts/repros-generator/git-helper.mjs b/scripts/repros-generator/git-helper.mjs new file mode 100644 index 000000000000..95efbcee9dea --- /dev/null +++ b/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} + */ +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} + */ +export async function initRepo(branch) { + await $`git init --initial-branch ${branch}`; +} diff --git a/scripts/repros-generator/index.mjs b/scripts/repros-generator/index.mjs new file mode 100755 index 000000000000..103b664b381b --- /dev/null +++ b/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); +} diff --git a/scripts/repros-generator/templates/main/.stackblitzrc b/scripts/repros-generator/templates/main/.stackblitzrc new file mode 100644 index 000000000000..58bd8bde3389 --- /dev/null +++ b/scripts/repros-generator/templates/main/.stackblitzrc @@ -0,0 +1,4 @@ +{ + "installDependencies": true, + "startCommand": "yarn storybook" +} diff --git a/scripts/repros-generator/templates/main/README.md b/scripts/repros-generator/templates/main/README.md new file mode 100644 index 000000000000..6c49e3aa1684 --- /dev/null +++ b/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) diff --git a/scripts/repros-generator/templates/next/.stackblitzrc b/scripts/repros-generator/templates/next/.stackblitzrc new file mode 100644 index 000000000000..58bd8bde3389 --- /dev/null +++ b/scripts/repros-generator/templates/next/.stackblitzrc @@ -0,0 +1,4 @@ +{ + "installDependencies": true, + "startCommand": "yarn storybook" +} diff --git a/scripts/repros-generator/templates/next/README.md b/scripts/repros-generator/templates/next/README.md new file mode 100644 index 000000000000..3fb29d9cd317 --- /dev/null +++ b/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) diff --git a/yarn.lock b/yarn.lock index 95b6e16bc965..147552c16680 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8742,6 +8742,7 @@ __metadata: webpack: 4 webpack-dev-middleware: ^3.7.3 window-size: ^1.1.1 + zx: ^3.0.0 dependenciesMeta: "@compodoc/compodoc": built: false @@ -9803,6 +9804,15 @@ __metadata: languageName: node linkType: hard +"@types/fs-extra@npm:^9.0.11": + version: 9.0.12 + resolution: "@types/fs-extra@npm:9.0.12" + dependencies: + "@types/node": "*" + checksum: 4284e2ff62312ac1580553f83bab4ee9cde53fdaddfee01c54ea9238e94a08941779db27dcd4e0a889e80e1ff7c5d7c0c671493c4d558ee16a33edba209703b9 + languageName: node + linkType: hard + "@types/fs-extra@npm:^9.0.6": version: 9.0.7 resolution: "@types/fs-extra@npm:9.0.7" @@ -10098,6 +10108,13 @@ __metadata: languageName: node linkType: hard +"@types/minimist@npm:^1.2.1": + version: 1.2.2 + resolution: "@types/minimist@npm:1.2.2" + checksum: f220f57f682bbc3793dab4518f8e2180faa79d8e2589c79614fd777d7182be203ba399020c3a056a115064f5d57a065004a32b522b2737246407621681b24137 + languageName: node + linkType: hard + "@types/mock-fs@npm:^4.13.0": version: 4.13.0 resolution: "@types/mock-fs@npm:4.13.0" @@ -10114,6 +10131,16 @@ __metadata: languageName: node linkType: hard +"@types/node-fetch@npm:^2.5.10": + version: 2.5.12 + resolution: "@types/node-fetch@npm:2.5.12" + dependencies: + "@types/node": "*" + form-data: ^3.0.0 + checksum: aaa69c354e596f9e293136ac43c9e5d91503415fb4eddfae3a9689153f0f033863bbd627e700b3f419ce14d06303e18e1d61b788d9085411f1fc12fc56afe356 + languageName: node + linkType: hard + "@types/node-fetch@npm:^2.5.7": version: 2.5.8 resolution: "@types/node-fetch@npm:2.5.8" @@ -10145,6 +10172,13 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:^16.0": + version: 16.6.1 + resolution: "@types/node@npm:16.6.1" + checksum: 6fb1cff755290d1ecc6bf1d036fb822112d583e9fdc69c685b40c3b2ea965d0e4da71e1f24aaa000911b24ec8ac76683ee5df914351678c37f9dee5304d0bbf2 + languageName: node + linkType: hard + "@types/normalize-package-data@npm:^2.4.0": version: 2.4.0 resolution: "@types/normalize-package-data@npm:2.4.0" @@ -13124,6 +13158,13 @@ __metadata: languageName: node linkType: hard +"array-union@npm:^3.0.1": + version: 3.0.1 + resolution: "array-union@npm:3.0.1" + checksum: b5271d7e5688d2d1932928b271796dbbddc422448557ab05ef6f34a9f84fb645eb855384feec6234bf59c226053a0e21b8a00b0e6cd588874b90a5c13dbeb64e + languageName: node + linkType: hard + "array-uniq@npm:^1.0.1": version: 1.0.3 resolution: "array-uniq@npm:1.0.3" @@ -22548,7 +22589,7 @@ __metadata: languageName: node linkType: hard -"fast-glob@npm:^3.2.5": +"fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.7": version: 3.2.7 resolution: "fast-glob@npm:3.2.7" dependencies: @@ -24354,6 +24395,20 @@ fsevents@^1.2.7: languageName: node linkType: hard +"globby@npm:^12.0.0": + version: 12.0.1 + resolution: "globby@npm:12.0.1" + dependencies: + array-union: ^3.0.1 + dir-glob: ^3.0.1 + fast-glob: ^3.2.7 + ignore: ^5.1.8 + merge2: ^1.4.1 + slash: ^4.0.0 + checksum: 103844cf485dee2d9b811702204c05f9a6cac7ab70d13a8e352551f0ba037de0fb602c7524eaf35d92bc6ddbae9b635478a1e1d2b7ae97e5b35274b8c18125ba + languageName: node + linkType: hard + "globby@npm:^5.0.0": version: 5.0.0 resolution: "globby@npm:5.0.0" @@ -25803,7 +25858,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"ignore@npm:^5.0.0, ignore@npm:^5.0.4, ignore@npm:^5.1.1, ignore@npm:^5.1.4": +"ignore@npm:^5.0.0, ignore@npm:^5.0.4, ignore@npm:^5.1.1, ignore@npm:^5.1.4, ignore@npm:^5.1.8": version: 5.1.8 resolution: "ignore@npm:5.1.8" checksum: 3d09e733049c7bad1c0982be8fe3e767bd7b756dd0bfeceff11acda0b7b57634b5516acc3554d2d536e64b2701b3d08d0e5fa4dbf46389847dd3f8fa49d437bb @@ -31328,7 +31383,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"merge2@npm:^1.2.3, merge2@npm:^1.3.0": +"merge2@npm:^1.2.3, merge2@npm:^1.3.0, merge2@npm:^1.4.1": version: 1.4.1 resolution: "merge2@npm:1.4.1" checksum: 254a8a4605b58f450308fc474c82ac9a094848081bf4c06778200207820e5193726dc563a0d2c16468810516a5c97d9d3ea0ca6585d23c58ccfff2403e8dbbeb @@ -40339,6 +40394,13 @@ resolve@1.19.0: languageName: node linkType: hard +"slash@npm:^4.0.0": + version: 4.0.0 + resolution: "slash@npm:4.0.0" + checksum: b522ca75d80d107fd30d29df0549a7b2537c83c4c4ecd12cd7d4ea6c8aaca2ab17ada002e7a1d78a9d736a0261509f26ea5b489082ee443a3a810586ef8eff18 + languageName: node + linkType: hard + "slice-ansi@npm:0.0.4": version: 0.0.4 resolution: "slice-ansi@npm:0.0.4" @@ -46876,3 +46938,23 @@ resolve@1.19.0: checksum: 26dc7d32e5596824b565db1da9650d00d32659c1211195bef50c25c60820f9c942aa7abefe678fc1ed0b97c1755036ac1bde5f97881d7d0e73e04e02aca56957 languageName: node linkType: hard + +"zx@npm:^3.0.0": + version: 3.0.0 + resolution: "zx@npm:3.0.0" + dependencies: + "@types/fs-extra": ^9.0.11 + "@types/minimist": ^1.2.1 + "@types/node": ^16.0 + "@types/node-fetch": ^2.5.10 + chalk: ^4.1.1 + fs-extra: ^10.0.0 + globby: ^12.0.0 + minimist: ^1.2.5 + node-fetch: ^2.6.1 + which: ^2.0.2 + bin: + zx: zx.mjs + checksum: 51e8e236858b2c9b7d0c5505fe2af45b8142de75c020a3f7d52631649383061a3b84083138afe9fe79d4cead546529e36b75ad71962eb7bfc03a4a8c02ba5d27 + languageName: node + linkType: hard