From 26e02f35d185bbfea1e5d0b291dd14e75eee26e5 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 1 Aug 2022 17:22:31 +0200 Subject: [PATCH 1/3] cleanup generate repros workflow file --- .github/workflows/generate-repros-next.yml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.github/workflows/generate-repros-next.yml b/.github/workflows/generate-repros-next.yml index 6e2adcf7f65..fcfd6f56ac0 100644 --- a/.github/workflows/generate-repros-next.yml +++ b/.github/workflows/generate-repros-next.yml @@ -3,11 +3,6 @@ name: Generate and push repros to the next branch on: schedule: - cron: '2 2 */1 * *' - workflow_dispatch: - # To remove when the branch will be merged - push: - branches: - - yann/sb-509-create-github-action jobs: generate: From 7c63d0dfec3f6d9402bf547da91107242ea56080 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 1 Aug 2022 17:39:41 +0200 Subject: [PATCH 2/3] CLI: add preprepare script to generate repro templates list --- code/lib/cli/package.json | 2 + .../scripts/generate-repro-templates-list.js | 42 +++++++++++++++++++ code/lib/cli/src/repro-templates.ts | 21 ++++++++++ code/yarn.lock | 1 + 4 files changed, 66 insertions(+) create mode 100755 code/lib/cli/scripts/generate-repro-templates-list.js create mode 100644 code/lib/cli/src/repro-templates.ts diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index db2bf66f405..2e210532991 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -42,6 +42,7 @@ ], "scripts": { "check": "tsc --noEmit", + "preprepare": "node ./scripts/generate-repro-templates-list.js", "prepare": "node ../../../scripts/prepare.js", "test": "jest test/**/*.test.js" }, @@ -67,6 +68,7 @@ "fs-extra": "^9.0.1", "get-port": "^5.1.1", "globby": "^11.0.2", + "js-yaml": "^3.14.1", "jscodeshift": "^0.13.1", "json5": "^2.1.3", "leven": "^3.1.0", diff --git a/code/lib/cli/scripts/generate-repro-templates-list.js b/code/lib/cli/scripts/generate-repro-templates-list.js new file mode 100755 index 00000000000..5f1eaf32ce4 --- /dev/null +++ b/code/lib/cli/scripts/generate-repro-templates-list.js @@ -0,0 +1,42 @@ +#!/usr/bin/env node + +const { writeFile } = require('fs-extra'); +const { exec } = require('child_process'); +const path = require('path'); +const { default: dedent } = require('ts-dedent'); +const { readFile } = require('fs-extra'); +const yml = require('js-yaml'); + +const logger = console; + +async function getTemplatesData(filePath) { + const configContents = await readFile(filePath, 'utf8'); + return yml.load(configContents); +} + +const run = async () => { + logger.log('Generating templates list...'); + const templatesData = await getTemplatesData( + path.resolve(__dirname, '../../../../scripts/next-repro-generators/repro-config.yml') + ); + const destination = path.join(__dirname, '..', 'src', 'repro-templates.ts'); + + await writeFile( + destination, + dedent` + // This file was auto generated from generate-repro-templates-list.js, please do not edit! + export default ${JSON.stringify(templatesData, null, 2)} + ` + ); + + exec(`yarn lint:js:cmd --fix ${destination}`, { + cwd: path.join(__dirname, '..', '..', '..'), + }); + + logger.log('Done! generated ', destination); +}; + +run().catch((e) => { + logger.error(e); + process.exit(1); +}); diff --git a/code/lib/cli/src/repro-templates.ts b/code/lib/cli/src/repro-templates.ts new file mode 100644 index 00000000000..09a0a2699c5 --- /dev/null +++ b/code/lib/cli/src/repro-templates.ts @@ -0,0 +1,21 @@ +// auto generated file, do not edit +export default { + 'cra/default-js': { + name: 'Create React App (Javascript)', + script: 'npx create-react-app .', + expected: { + framework: '@storybook/cra', + renderer: '@storybook/react', + builder: '@storybook/builder-webpack5', + }, + }, + 'cra/default-ts': { + name: 'Create React App (Typescript)', + script: 'npx create-react-app . --template typescript', + expected: { + framework: '@storybook/cra', + renderer: '@storybook/react', + builder: '@storybook/builder-webpack5', + }, + }, +} as const; diff --git a/code/yarn.lock b/code/yarn.lock index 940aa44590b..f00e329cbdc 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7708,6 +7708,7 @@ __metadata: fs-extra: ^9.0.1 get-port: ^5.1.1 globby: ^11.0.2 + js-yaml: ^3.14.1 jscodeshift: ^0.13.1 json5: ^2.1.3 leven: ^3.1.0 From 1790cd2bcbc258b1a464067a9d7a3b952f4ebec7 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 1 Aug 2022 17:40:23 +0200 Subject: [PATCH 3/3] CLI: add repro-next command Temporary command which will eventually replace sb repro once ready --- code/lib/cli/package.json | 2 + code/lib/cli/src/generate.ts | 13 +++ code/lib/cli/src/repro-next.ts | 172 +++++++++++++++++++++++++++++++++ code/yarn.lock | 18 ++++ 4 files changed, 205 insertions(+) create mode 100644 code/lib/cli/src/repro-next.ts diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 2e210532991..f11686302c3 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -61,6 +61,7 @@ "commander": "^6.2.1", "core-js": "^3.8.2", "cross-spawn": "^7.0.3", + "degit": "^2.8.4", "envinfo": "^7.7.3", "execa": "^5.0.0", "express": "^4.17.1", @@ -83,6 +84,7 @@ "devDependencies": { "@storybook/client-api": "7.0.0-alpha.17", "@types/cross-spawn": "^6.0.2", + "@types/degit": "^2.8.3", "@types/prompts": "^2.0.9", "@types/puppeteer-core": "^2.1.0", "@types/semver": "^7.3.4", diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index bdfe9c12a88..e6e58fbd8ea 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -13,6 +13,7 @@ import { migrate } from './migrate'; import { extract } from './extract'; import { upgrade } from './upgrade'; import { repro } from './repro'; +import { reproNext } from './repro-next'; import { link } from './link'; import { automigrate } from './automigrate'; import { generateStorybookBabelConfigInCWD } from './babel-config'; @@ -146,6 +147,18 @@ program }) ); +program + .command('repro-next [filterValue]') + .description('Create a reproduction from a set of possible templates') + .option('-o --output ', 'Define an output directory') + .option('-b --branch ', 'Define the branch to degit from', 'next') + .action((filterValue, options) => + reproNext({ filterValue, ...options }).catch((e) => { + logger.error(e); + process.exit(1); + }) + ); + program .command('link ') .description('Pull down a repro from a URL (or a local directory), link it, and run storybook') diff --git a/code/lib/cli/src/repro-next.ts b/code/lib/cli/src/repro-next.ts new file mode 100644 index 00000000000..7d0b03049a3 --- /dev/null +++ b/code/lib/cli/src/repro-next.ts @@ -0,0 +1,172 @@ +import prompts from 'prompts'; +import fs from 'fs'; +import path from 'path'; +import chalk from 'chalk'; +import boxen from 'boxen'; +import { dedent } from 'ts-dedent'; +import degit from 'degit'; + +import TEMPLATES from './repro-templates'; + +const logger = console; + +interface ReproOptions { + filterValue?: string; + output?: string; + branch?: string; +} +type Choice = keyof typeof TEMPLATES; + +const toChoices = (c: Choice): prompts.Choice => ({ title: TEMPLATES[c].name, value: c }); + +export const reproNext = async ({ output: outputDirectory, filterValue, branch }: ReproOptions) => { + const keys = Object.keys(TEMPLATES) as Choice[]; + // get value from template and reduce through TEMPLATES to filter out the correct template + const choices = keys.reduce((acc, group) => { + const current = TEMPLATES[group]; + + const filterRegex = new RegExp(filterValue, 'i'); + if (!filterValue) { + acc.push(group); + return acc; + } + + if ( + current.name.match(filterRegex) || + group.match(filterRegex) || + current.expected.builder.match(filterRegex) || + current.expected.framework.match(filterRegex) || + current.expected.renderer.match(filterRegex) + ) { + acc.push(group); + return acc; + } + + return acc; + }, []); + + if (choices.length === 0) { + logger.info( + boxen( + dedent` + 🔎 You filtered out all templates. 🔍 + After filtering all the templates with "${chalk.yellow( + filterValue + )}", we found no templates. + + Available templates: + ${keys.map((key) => chalk.blue`- ${key}`).join('\n')} + `.trim(), + { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any + ) + ); + return; + } + + let selectedTemplate: Choice | null = null; + + if (choices.length === 1) { + [selectedTemplate] = choices; + } else { + logger.info( + boxen( + dedent` + 🤗 Welcome to ${chalk.yellow('sb repro NEXT')}! 🤗 + + Create a ${chalk.green('new project')} to minimally reproduce Storybook issues. + + 1. select an environment that most closely matches your project setup. + 2. select a location for the reproduction, outside of your project. + + After the reproduction is ready, we'll guide you through the next steps. + `.trim(), + { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any + ) + ); + + selectedTemplate = await promptSelectedTemplate(choices); + } + + const hasSelectedTemplate = !!(selectedTemplate ?? null); + if (!hasSelectedTemplate) { + logger.error('Somehow we got no templates. Please rerun this command!'); + return; + } + + const selectedConfig = TEMPLATES[selectedTemplate]; + + if (!selectedConfig) { + throw new Error('🚨 Repro: please specify a valid template type'); + } + + let selectedDirectory = outputDirectory; + if (!selectedDirectory) { + const { directory } = await prompts({ + type: 'text', + message: 'Enter the output directory', + name: 'directory', + initial: selectedTemplate, + validate: (directoryName) => + fs.existsSync(directoryName) + ? `${directoryName} already exists. Please choose another name.` + : true, + }); + selectedDirectory = directory; + } + + try { + const cwd = path.isAbsolute(selectedDirectory) + ? selectedDirectory + : path.join(process.cwd(), selectedDirectory); + + logger.info(`🏃 Adding ${selectedConfig.name} into ${cwd}`); + + logger.log('📦 Downloading repro template...'); + try { + // Download the repro based on subfolder "after-storybook" and selected branch + await degit( + `storybookjs/repro-templates-temp/${selectedTemplate}/after-storybook#${branch}`, + { + force: true, + } + ).clone(selectedTemplate.replace('/', '-')); + } catch (err) { + logger.error(`🚨 Failed to download repro template: ${err.message}`); + return; + } + + logger.info( + boxen( + dedent` + 🎉 Your Storybook reproduction project is ready to use! 🎉 + + ${chalk.yellow(`cd ${selectedDirectory}`)} + ${chalk.yellow(`yarn storybook`)} + + Once you've recreated the problem you're experiencing, please: + + 1. Document any additional steps in ${chalk.cyan('README.md')} + 2. Publish the repository to github + 3. Link to the repro repository in your issue + + Having a clean repro helps us solve your issue faster! 🙏 + `.trim(), + { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any + ) + ); + } catch (error) { + logger.error('🚨 Failed to create repro'); + throw error; + } +}; + +async function promptSelectedTemplate(choices: Choice[]): Promise { + const { template } = await prompts({ + type: 'select', + message: '🌈 Select the template', + name: 'template', + choices: choices.map(toChoices), + }); + + return template || null; +} diff --git a/code/yarn.lock b/code/yarn.lock index f00e329cbdc..e2b8205b926 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7691,6 +7691,7 @@ __metadata: "@storybook/semver": ^7.3.2 "@storybook/telemetry": 7.0.0-alpha.17 "@types/cross-spawn": ^6.0.2 + "@types/degit": ^2.8.3 "@types/prompts": ^2.0.9 "@types/puppeteer-core": ^2.1.0 "@types/semver": ^7.3.4 @@ -7701,6 +7702,7 @@ __metadata: commander: ^6.2.1 core-js: ^3.8.2 cross-spawn: ^7.0.3 + degit: ^2.8.4 envinfo: ^7.7.3 execa: ^5.0.0 express: ^4.17.1 @@ -10111,6 +10113,13 @@ __metadata: languageName: node linkType: hard +"@types/degit@npm:^2.8.3": + version: 2.8.3 + resolution: "@types/degit@npm:2.8.3" + checksum: 1693dc0033aa5aa5c339b76d570c462e3e0ff41e22a7cc2d0164276199ddbd6ed18813042868355bc5f60ee257c0b18bce904c193008685b790392454ec9fcbd + languageName: node + linkType: hard + "@types/detect-port@npm:^1.3.2": version: 1.3.2 resolution: "@types/detect-port@npm:1.3.2" @@ -18447,6 +18456,15 @@ __metadata: languageName: node linkType: hard +"degit@npm:^2.8.4": + version: 2.8.4 + resolution: "degit@npm:2.8.4" + bin: + degit: degit + checksum: 25ae9daf8010b450ffe8307c5ca903fe8bfaa8bb8622da12f81f2b6c3b1bb24e96fe3ab0b4ec4a1a19684f674b2158a8a3a2178c481882cc4991c7a0859ec40a + languageName: node + linkType: hard + "del-cli@npm:^4.0.1": version: 4.0.1 resolution: "del-cli@npm:4.0.1"