Build: make the CI config ready for 7.0 release

.github/workflows/generate-repros.yml → .github/workflows/generate-sandboxes-main.yml

@@ -1,13 +1,9 @@
-name: Generate and push repros to Github
+name: Generate and push sandboxes (main)
 
 on:
   schedule:
     - cron: '2 2 */1 * *'
   workflow_dispatch:
-  # To remove when the branch will be merged
-  push:
-    branches:
-      - vite-frameworks-xyz
 
 jobs:
   generate:
@@ -20,6 +16,8 @@ jobs:
         with:
           node-version: 16
       - uses: actions/checkout@v3
+        with:
+          ref: main
       - name: Setup git user
         run: |
           git config --global user.name "Storybook Bot"
@@ -29,14 +27,14 @@ jobs:
       - name: Compile Storybook libraries
         run: yarn task --task publish --start-from=auto --no-link
       - name: Running local registry
-        run: yarn local-registry --open &
+        run: ts-node --swc --project=../scripts/tsconfig.json ../scripts/run-registry.ts --open &
         working-directory: ./code
       - name: Wait for registry
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
-      - name: Generate repros
-        run: yarn generate-sandboxes --local-registry
+      - name: Generate
+        run: ts-node --swc ../scripts/sandbox/generate.ts --local-registry
         working-directory: ./code
-      - name: Publish sandboxes to GitHub
-        run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push
+      - name: Publish
+        run: ts-node --swc ../scripts/sandbox/publish.ts --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=main
         working-directory: ./code

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

@@ -0,0 +1,40 @@
+name: Generate and push sandboxes (next)
+
+on:
+  schedule:
+    - cron: '2 2 */1 * *'
+  workflow_dispatch:
+
+jobs:
+  generate:
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_IMMUTABLE_INSTALLS: false
+      CLEANUP_SANDBOX_NODE_MODULES: true
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - uses: actions/checkout@v3
+        with:
+          ref: next
+      - name: Setup git user
+        run: |
+          git config --global user.name "Storybook Bot"
+          git config --global user.email "[email protected]"
+      - name: Install dependencies
+        run: node ./scripts/check-dependencies.js
+      - name: Compile Storybook libraries
+        run: yarn task --task publish --start-from=auto --no-link
+      - name: Running local registry
+        run: ts-node --swc --project=../scripts/tsconfig.json ../scripts/run-registry.ts --open &
+        working-directory: ./code
+      - name: Wait for registry
+        run: yarn wait-on http://localhost:6001
+        working-directory: ./code
+      - name: Generate
+        run: ts-node --swc ../scripts/sandbox/generate.ts --local-registry
+        working-directory: ./code
+      - name: Publish
+        run: ts-node --swc ../scripts/sandbox/publish.ts --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
+        working-directory: ./code

code/lib/cli/src/generate.ts

@@ -134,10 +134,10 @@ command('extract [location] [output]')
   );
 
 command('sandbox [filterValue]')
-  .alias('repro') // for retrocompatibility purposes
+  .alias('repro') // for backwards compatibility
   .description('Create a sandbox from a set of possible templates')
   .option('-o --output <outDir>', 'Define an output directory')
-  .option('-b --branch <branch>', 'Define the branch to download from', 'next')
+  .option('-b --branch <branch>', 'Define the branch to download from', 'main')
   .option('--no-init', 'Whether to download a template without an initialized Storybook', false)
   .action((filterValue, options) =>
     sandbox({ filterValue, ...options }).catch((e) => {

code/package.json

@@ -29,7 +29,7 @@
     "check": "NODE_ENV=production node ../scripts/check-package.js",
     "ci-tests": "yarn task --task check --no-link --start-from=install && yarn lint && yarn test && cd ../scripts && yarn test",
     "danger": "danger",
-    "generate-sandboxes": "ts-node --swc ../scripts/sandbox-generators/generate-sandboxes.ts",
+    "generate-sandboxes": "ts-node --swc ../scripts/sandbox/generate.ts",
     "github-release": "github-release-from-changelog",
     "linear-export": "ts-node --swc --project=../scripts/tsconfig.json ../scripts/linear-export.ts",
     "lint": "yarn lint:js && yarn lint:md",
@@ -40,7 +40,7 @@
     "lint:other": "prettier --write '**/*.{css,html,json,md,yml}'",
     "lint:package": "sort-package-json",
     "local-registry": "ts-node --swc --project=../scripts/tsconfig.json ../scripts/run-registry.ts",
-    "publish-sandboxes": "ts-node --swc ../scripts/sandbox-generators/publish.ts",
+    "publish-sandboxes": "ts-node --swc ../scripts/sandbox/publish.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-sandboxes.sh

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

scripts/run-registry.ts

@@ -29,6 +29,7 @@ const startVerdaccio = async () => {
         self_path: cache,
       };
 
+      // @ts-expect-error (verdaccio's interface is wrong)
       runServer(config).then((app: Server) => {
         app.listen(6001, () => {
           resolved = true;

scripts/sandbox-generators/generate-sandboxes.ts → scripts/sandbox/generate.ts

@@ -21,11 +21,13 @@ import { localizeYarnConfigFiles, setupYarn } from './utils/yarn';
 import type { GeneratorConfig } from './utils/types';
 import { getStackblitzUrl, renderTemplate } from './utils/template';
 import type { JsPackageManager } from '../../code/lib/cli/src/js-package-manager';
-
-const OUTPUT_DIRECTORY = join(__dirname, '..', '..', 'repros');
-const BEFORE_DIR_NAME = 'before-storybook';
-const AFTER_DIR_NAME = 'after-storybook';
-const SCRIPT_TIMEOUT = 5 * 60 * 1000;
+import {
+  BEFORE_DIR_NAME,
+  AFTER_DIR_NAME,
+  SCRIPT_TIMEOUT,
+  REPROS_DIRECTORY,
+  LOCAL_REGISTRY_URL,
+} from '../utils/constants';
 
 const sbInit = async (cwd: string, flags?: string[], debug?: boolean) => {
   const sbCliBinaryPath = join(__dirname, `../../code/lib/cli/bin/index.js`);
@@ -35,7 +37,6 @@ const sbInit = async (cwd: string, flags?: string[], debug?: boolean) => {
   await runCommand(`${sbCliBinaryPath} init ${fullFlags.join(' ')}`, { cwd, env }, debug);
 };
 
-const LOCAL_REGISTRY_URL = 'http://localhost:6001';
 const withLocalRegistry = async (packageManager: JsPackageManager, action: () => Promise<void>) => {
   const prevUrl = packageManager.getRegistryURL();
   let error;
@@ -89,7 +90,7 @@ const addStorybook = async ({
   await rename(tmpDir, afterDir);
 };
 
-export const runCommand = async (script: string, options: ExecaOptions, debug: boolean) => {
+export const runCommand = async (script: string, options: ExecaOptions, debug = false) => {
   if (debug) {
     console.log(`Running command: ${script}`);
   }
@@ -136,7 +137,7 @@ const runGenerators = async (
         const time = process.hrtime();
         console.log(`🧬 generating ${name}`);
 
-        const baseDir = join(OUTPUT_DIRECTORY, dirName);
+        const baseDir = join(REPROS_DIRECTORY, dirName);
         const beforeDir = join(baseDir, BEFORE_DIR_NAME);
         await emptyDir(baseDir);
 
@@ -239,7 +240,7 @@ export const generate = async ({
 
 if (require.main === module) {
   program
-    .description('Create a reproduction from a set of possible templates')
+    .description('Generate sandboxes from a set of possible templates')
     .option('--template <template>', 'Create a single template')
     .option('--debug', 'Print all the logs to the console')
     .option('--local-registry', 'Use local registry', false)

scripts/sandbox-generators/publish.ts → scripts/sandbox/publish.ts

@@ -8,28 +8,26 @@ import { execaCommand } from '../utils/exec';
 import { getTemplatesData, renderTemplate } from './utils/template';
 // eslint-disable-next-line import/no-cycle
 import { commitAllToGit } from './utils/git';
+import { REPROS_DIRECTORY } from '../utils/constants';
 
 export const logger = console;
 
-const REPROS_DIRECTORY = join(__dirname, '..', '..', 'repros');
-
 interface PublishOptions {
   remote?: string;
   push?: boolean;
-  next?: boolean;
+  branch?: string;
 }
 
 const publish = async (options: PublishOptions & { tmpFolder: string }) => {
-  const { next: useNextVersion, remote, push, tmpFolder } = options;
+  const { branch: inputBranch, remote, push, tmpFolder } = options;
 
   const scriptPath = __dirname;
-  const gitBranch = useNextVersion ? 'next' : 'main';
-
+  const branch = inputBranch || 'next';
   const templatesData = await getTemplatesData();
 
-  logger.log(`👯‍♂️ Cloning the repository ${remote} in branch ${gitBranch}`);
+  logger.log(`👯‍♂️ Cloning the repository ${remote} in branch ${branch}`);
   await execaCommand(`git clone ${remote} .`, { cwd: tmpFolder });
-  await execaCommand(`git checkout ${gitBranch}`, { cwd: tmpFolder });
+  await execaCommand(`git checkout ${branch}`, { cwd: tmpFolder });
 
   // otherwise old files will stick around and result inconsistent states
   logger.log(`🗑 Delete existing template dirs from clone`);
@@ -47,7 +45,7 @@ const publish = async (options: PublishOptions & { tmpFolder: string }) => {
   logger.log(`🚚 Moving template files into the repository`);
 
   const templatePath = join(scriptPath, 'templates', 'root.ejs');
-  const templateData = { data: templatesData, version: gitBranch };
+  const templateData = { data: templatesData, version: branch };
 
   const output = await renderTemplate(templatePath, templateData);
 
@@ -61,37 +59,37 @@ const publish = async (options: PublishOptions & { tmpFolder: string }) => {
   logger.info(`
      🙌 All the examples were bootstrapped:
         - in ${tmpFolder}
-        - using the '${gitBranch}' version of Storybook CLI
-        - and committed on the '${gitBranch}' branch of a local Git repository
+        - using the '${branch}' version of Storybook CLI
+        - and committed on the '${branch}' branch of a local Git repository
 
      Also all the files in the 'templates' folder were copied at the root of the Git repository.
     `);
 
   if (push) {
-    await execaCommand(`git push --set-upstream origin ${gitBranch}`, {
+    await execaCommand(`git push --set-upstream origin ${branch}`, {
       cwd: tmpFolder,
     });
-    const remoteRepoUrl = `${remote.replace('.git', '')}/tree/${gitBranch}`;
+    const remoteRepoUrl = `${remote.replace('.git', '')}/tree/${branch}`;
     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}
+          - push the branch: 'git push --set-upstream origin ${branch}
       `);
   }
 };
 
 program
-  .description('Create a reproduction from a set of possible templates')
+  .description('Create a sandbox from a set of possible templates')
   .option('--remote <remote>', 'Choose the remote to push the contents to')
-  .option('--next', 'Whether to use the next version of Storybook CLI', true)
+  .option('--branch <branch>', 'Choose which branch on the remote')
   .option('--push', 'Whether to push the contents to the remote', false)
   .option('--force-push', 'Whether to force push the changes into the repros repository', false);
 
 program.parse(process.argv);
 
 if (!existsSync(REPROS_DIRECTORY)) {
-  throw Error("Can't find repros directory. Did you forget to run generate-sandboxes?");
+  throw Error("Couldn't find sandbox directory. Did you forget to run generate-sandboxes?");
 }
 
 const tmpFolder = tempy.directory();

scripts/sandbox-generators/utils/yarn.ts → scripts/sandbox/utils/yarn.ts

@@ -1,7 +1,7 @@
 import { join } from 'path';
 import { move, remove } from 'fs-extra';
 // eslint-disable-next-line import/no-cycle
-import { runCommand } from '../generate-sandboxes';
+import { runCommand } from '../generate';
 
 interface SetupYarnOptions {
   cwd: string;

scripts/task.ts

@@ -6,6 +6,7 @@ import { join, resolve } from 'path';
 import { prompt } from 'prompts';
 import { dedent } from 'ts-dedent';
 
+import { CODE_DIRECTORY } from './utils/constants';
 import type { OptionValues } from './utils/options';
 import { createOptions, getCommand, getOptionsOrPrompt } from './utils/options';
 import { install } from './tasks/install';
@@ -34,7 +35,6 @@ import {
 import { version } from '../code/package.json';
 
 const sandboxDir = process.env.SANDBOX_ROOT || resolve(__dirname, '../sandbox');
-const codeDir = resolve(__dirname, '../code');
 const junitDir = resolve(__dirname, '../test-results');
 
 export const extraAddons = ['a11y', 'storysource'];
@@ -336,7 +336,7 @@ async function run() {
   const details: TemplateDetails = {
     key: templateKey,
     template,
-    codeDir,
+    codeDir: CODE_DIRECTORY,
     selectedTask: taskKey,
     sandboxDir: templateSandboxDir,
     builtSandboxDir: templateKey && join(templateSandboxDir, 'storybook-static'),

scripts/tasks/generate.ts

@@ -1,16 +1,16 @@
 import { pathExists, remove } from 'fs-extra';
-import { join, resolve } from 'path';
+import { join } from 'path';
+import { REPROS_DIRECTORY } from '../utils/constants';
 
 import type { Task } from '../task';
 
 const logger = console;
-const reprosDir = resolve(__dirname, '../../repros');
 
 export const generate: Task = {
   description: 'Create the template repro',
   dependsOn: ['run-registry'],
   async ready({ key, template }, { link }) {
-    const isReady = pathExists(join(reprosDir, key, 'after-storybook'));
+    const isReady = pathExists(join(REPROS_DIRECTORY, key, 'after-storybook'));
     if (isReady) {
       return isReady;
     }
@@ -20,14 +20,14 @@ export const generate: Task = {
     return isReady;
   },
   async run(details, options) {
-    const reproDir = join(reprosDir, details.key);
+    const reproDir = join(REPROS_DIRECTORY, details.key);
     if (await this.ready(details, options)) {
       logger.info('🗑  Removing old repro dir');
       await remove(reproDir);
     }
 
     // This uses an async import as it depends on `lib/cli` which requires `code` to be installed.
-    const { generate: generateRepro } = await import('../sandbox-generators/generate-sandboxes');
+    const { generate: generateRepro } = await import('../sandbox/generate');
 
     await generateRepro({
       template: details.key,

scripts/tasks/publish.ts

@@ -14,7 +14,7 @@ export const publish: Task = {
   },
   async run({ codeDir }, { dryRun, debug }) {
     return exec(
-      'yarn local-registry --publish',
+      'ts-node --swc --project=../scripts/tsconfig.json ../scripts/run-registry.ts',
       { cwd: codeDir },
       {
         startMessage: '📕 Publishing packages',

scripts/tasks/run-registry.ts

@@ -1,23 +1,21 @@
 import detectFreePort from 'detect-port';
-import { resolve } from 'path';
 
+import { CODE_DIRECTORY } from '../utils/constants';
 import { exec } from '../utils/exec';
 import type { Task } from '../task';
 
-const codeDir = resolve(__dirname, '../../code');
-
 export async function runRegistry({ dryRun, debug }: { dryRun?: boolean; debug?: boolean }) {
   const controller = new AbortController();
 
   exec(
-    'CI=true yarn local-registry --open',
-    { cwd: codeDir },
+    'ts-node --swc --project=../scripts/tsconfig.json ../scripts/run-registry.ts --open',
+    { cwd: CODE_DIRECTORY, env: { CI: 'true' } },
     { dryRun, debug, signal: controller.signal }
   ).catch((err) => {
     // If aborted, we want to make sure the rejection is handled.
     if (!err.killed) throw err;
   });
-  await exec('yarn wait-on http://localhost:6001', { cwd: codeDir }, { dryRun, debug });
+  await exec('yarn wait-on http://localhost:6001', { cwd: CODE_DIRECTORY }, { dryRun, debug });
 
   return controller;
 }