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: yarn local-registry --publish --open &
         working-directory: ./code
       - name: Wait for registry
         run: yarn wait-on http://localhost:6001
         working-directory: ./code
-      - name: Generate repros
+      - name: Generate
         run: yarn generate-sandboxes --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: yarn publish-sandboxes --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 "bot@storybook.js.org"
+      - 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: yarn local-registry --publish --open &
+        working-directory: ./code
+      - name: Wait for registry
+        run: yarn wait-on http://localhost:6001
+        working-directory: ./code
+      - name: Generate
+        run: yarn generate-sandboxes --local-registry
+        working-directory: ./code
+      - name: Publish
+        run: yarn publish-sandboxes --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",

scripts/get-report-message.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { readJson } from 'fs-extra';
 import { join } from 'path';
+import { CODE_DIRECTORY } from './utils/constants';
 import { execaCommand } from './utils/exec';
 
 type Branch = 'main' | 'next' | 'alpha' | 'next-release' | 'latest-release';
@@ -13,7 +14,7 @@ const getFooter = async (branch: Branch, workflow: Workflow, job: string) => {
 
   // The CI workflows can run on release branches and we should display the version number
   if (branch === 'next-release' || branch === 'latest-release') {
-    const packageJson = await readJson(join(__dirname, '..', 'code', 'package.json'));
+    const packageJson = await readJson(join(CODE_DIRECTORY, 'package.json'));
 
     // running in alpha branch we should just show the version which failed
     return `\n**Version: ${packageJson.version}**`;

scripts/get-template.ts

@@ -1,15 +1,15 @@
 import { readdir } from 'fs/promises';
 import { pathExists } from 'fs-extra';
-import { resolve } from 'path';
 import {
   allTemplates,
   templatesByCadence,
   type Cadence,
   type Template as TTemplate,
   type SkippableTask,
 } from '../code/lib/cli/src/sandbox-templates';
+import { SANDBOX_DIRECTORY } from './utils/constants';
 
-const sandboxDir = process.env.SANDBOX_ROOT || resolve(__dirname, '../sandbox');
+const sandboxDir = process.env.SANDBOX_ROOT || SANDBOX_DIRECTORY;
 
 type Template = Pick<TTemplate, 'inDevelopment' | 'skipTasks'>;
 export type TemplateKey = keyof typeof allTemplates;

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, JUNIT_DIRECTORY, SANDBOX_DIRECTORY } from './utils/constants';
 import type { OptionValues } from './utils/options';
 import { createOptions, getCommand, getOptionsOrPrompt } from './utils/options';
 import { install } from './tasks/install';
@@ -33,9 +34,7 @@ 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');
+const sandboxDir = process.env.SANDBOX_ROOT || SANDBOX_DIRECTORY;
 
 export const extraAddons = ['a11y', 'storysource'];
 
@@ -180,7 +179,7 @@ type PassedOptionValues = Omit<OptionValues<typeof options>, 'task' | 'startFrom
 const logger = console;
 
 function getJunitFilename(taskKey: TaskKey) {
-  return join(junitDir, `${taskKey}.xml`);
+  return join(JUNIT_DIRECTORY, `${taskKey}.xml`);
 }
 
 async function writeJunitXml(
@@ -336,7 +335,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,