Build: Port remaining CircleCI jobs to NX Cloud

.circleci/config.yml

@@ -0,0 +1,54 @@
+version: 2.1
+
+# https://circleci.com/docs/guides/orchestrate/dynamic-config/
+setup: true
+
+orbs:
+  git-shallow-clone: guitarrapc/git-shallow-clone@2.8.0
+  continuation: circleci/continuation@2.0.1
+  node: circleci/node@7.2.1
+
+parameters:
+  ghBaseBranch:
+    default: next
+    description: The name of the base branch (the target of the PR)
+    type: string
+  ghPrNumber:
+    default: ''
+    description: The PR number
+    type: string
+  workflow:
+    default: skipped
+    description: Which workflow to run
+    enum:
+      - normal
+      - merged
+      - daily
+      - skipped
+      - docs
+    type: enum
+
+jobs:
+  generate-and-run-config:
+    executor: 
+      name: node/default
+      resource_class: small
+    steps:
+      - node/install:
+          install-yarn: true
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1'
+      - run:
+          name: Install dependencies
+          command: yarn workspaces focus @storybook/scripts
+      - run:
+          name: Generate config
+          command: |
+            yarn dlx jiti ./scripts/ci/main.ts --workflow=<< pipeline.parameters.workflow >>
+      - continuation/continue:
+          configuration_path: .circleci/config.generated.yml
+workflows:
+  setup:
+    jobs:
+      - generate-and-run-config
+    when: pipeline.parameters.workflow != "skipped"

.github/workflows/nx.yml

@@ -36,7 +36,50 @@ jobs:
 
     runs-on: ubuntu-latest
     env:
-      ALL_TASKS: compile,check,knip,test,lint,fmt,sandbox,build,e2e-tests,e2e-tests-dev,test-runner,vitest-integration,check-sandbox,e2e-ui,jest,vitest,playwright-ct
+      NX_CI_EXECUTION_ENV: 'linux'
+      ALL_TASKS: compile,check,knip,test,lint,fmt,sandbox,build,e2e-tests,e2e-tests-dev,vitest-integration,e2e-ui,jest,vitest,playwright-ct,chromatic,storybook-chromatic,bench-packages,init-empty,init-features,daily-test-runner
+      # Benchmark packages upload to BigQuery
+      GCP_CREDENTIALS: ${{ secrets.GCP_CREDENTIALS }}
+      GH_BASE_BRANCH: ${{ github.event.pull_request.base.ref || 'next' }}
+      GH_PR_NUMBER: ${{ github.event.pull_request.number || '0' }}
+      # Per-sandbox Chromatic tokens (must exist as GitHub repo secrets;
+      # mirror of the CircleCI CHROMATIC_TOKEN_* project env vars)
+      CHROMATIC_TOKEN_ANGULAR_CLI_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_ANGULAR_CLI_DEFAULT_TS }}
+      CHROMATIC_TOKEN_ANGULAR_CLI_PRERELEASE: ${{ secrets.CHROMATIC_TOKEN_ANGULAR_CLI_PRERELEASE }}
+      CHROMATIC_TOKEN_BENCH_REACT_VITE_DEFAULT_TS_TEST_BUILD: ${{ secrets.CHROMATIC_TOKEN_BENCH_REACT_VITE_DEFAULT_TS_TEST_BUILD }}
+      CHROMATIC_TOKEN_BENCH_REACT_WEBPACK_18_TS_TEST_BUILD: ${{ secrets.CHROMATIC_TOKEN_BENCH_REACT_WEBPACK_18_TS_TEST_BUILD }}
+      CHROMATIC_TOKEN_HTML_RSBUILD_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_HTML_RSBUILD_DEFAULT_TS }}
+      CHROMATIC_TOKEN_HTML_VITE_DEFAULT_JS: ${{ secrets.CHROMATIC_TOKEN_HTML_VITE_DEFAULT_JS }}
+      CHROMATIC_TOKEN_HTML_VITE_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_HTML_VITE_DEFAULT_TS }}
+      CHROMATIC_TOKEN_INTERNAL_REACT16_WEBPACK: ${{ secrets.CHROMATIC_TOKEN_INTERNAL_REACT16_WEBPACK }}
+      CHROMATIC_TOKEN_INTERNAL_REACT18_WEBPACK_BABEL: ${{ secrets.CHROMATIC_TOKEN_INTERNAL_REACT18_WEBPACK_BABEL }}
+      CHROMATIC_TOKEN_LIT_RSBUILD_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_LIT_RSBUILD_DEFAULT_TS }}
+      CHROMATIC_TOKEN_LIT_VITE_DEFAULT_JS: ${{ secrets.CHROMATIC_TOKEN_LIT_VITE_DEFAULT_JS }}
+      CHROMATIC_TOKEN_LIT_VITE_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_LIT_VITE_DEFAULT_TS }}
+      CHROMATIC_TOKEN_NEXTJS_14_TS: ${{ secrets.CHROMATIC_TOKEN_NEXTJS_14_TS }}
+      CHROMATIC_TOKEN_NEXTJS_15_TS: ${{ secrets.CHROMATIC_TOKEN_NEXTJS_15_TS }}
+      CHROMATIC_TOKEN_NEXTJS_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_NEXTJS_DEFAULT_TS }}
+      CHROMATIC_TOKEN_NEXTJS_PRERELEASE: ${{ secrets.CHROMATIC_TOKEN_NEXTJS_PRERELEASE }}
+      CHROMATIC_TOKEN_NEXTJS_VITE_14_TS: ${{ secrets.CHROMATIC_TOKEN_NEXTJS_VITE_14_TS }}
+      CHROMATIC_TOKEN_NEXTJS_VITE_15_TS: ${{ secrets.CHROMATIC_TOKEN_NEXTJS_VITE_15_TS }}
+      CHROMATIC_TOKEN_NEXTJS_VITE_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_NEXTJS_VITE_DEFAULT_TS }}
+      CHROMATIC_TOKEN_PREACT_VITE_DEFAULT_JS: ${{ secrets.CHROMATIC_TOKEN_PREACT_VITE_DEFAULT_JS }}
+      CHROMATIC_TOKEN_PREACT_VITE_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_PREACT_VITE_DEFAULT_TS }}
+      CHROMATIC_TOKEN_REACT_NATIVE_WEB_VITE_EXPO_TS: ${{ secrets.CHROMATIC_TOKEN_REACT_NATIVE_WEB_VITE_EXPO_TS }}
+      CHROMATIC_TOKEN_REACT_RSBUILD_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_REACT_RSBUILD_DEFAULT_TS }}
+      CHROMATIC_TOKEN_REACT_VITE_DEFAULT_JS: ${{ secrets.CHROMATIC_TOKEN_REACT_VITE_DEFAULT_JS }}
+      CHROMATIC_TOKEN_REACT_VITE_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_REACT_VITE_DEFAULT_TS }}
+      CHROMATIC_TOKEN_REACT_VITE_PRERELEASE_TS: ${{ secrets.CHROMATIC_TOKEN_REACT_VITE_PRERELEASE_TS }}
+      CHROMATIC_TOKEN_REACT_WEBPACK_17_TS: ${{ secrets.CHROMATIC_TOKEN_REACT_WEBPACK_17_TS }}
+      CHROMATIC_TOKEN_REACT_WEBPACK_18_TS: ${{ secrets.CHROMATIC_TOKEN_REACT_WEBPACK_18_TS }}
+      CHROMATIC_TOKEN_REACT_WEBPACK_PRERELEASE_TS: ${{ secrets.CHROMATIC_TOKEN_REACT_WEBPACK_PRERELEASE_TS }}
+      CHROMATIC_TOKEN_SOLID_VITE_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_SOLID_VITE_DEFAULT_TS }}
+      CHROMATIC_TOKEN_SVELTE_KIT_SKELETON_TS: ${{ secrets.CHROMATIC_TOKEN_SVELTE_KIT_SKELETON_TS }}
+      CHROMATIC_TOKEN_SVELTE_VITE_DEFAULT_JS: ${{ secrets.CHROMATIC_TOKEN_SVELTE_VITE_DEFAULT_JS }}
+      CHROMATIC_TOKEN_SVELTE_VITE_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_SVELTE_VITE_DEFAULT_TS }}
+      CHROMATIC_TOKEN_VUE3_RSBUILD_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_VUE3_RSBUILD_DEFAULT_TS }}
+      CHROMATIC_TOKEN_VUE3_VITE_DEFAULT_JS: ${{ secrets.CHROMATIC_TOKEN_VUE3_VITE_DEFAULT_JS }}
+      CHROMATIC_TOKEN_VUE3_VITE_DEFAULT_TS: ${{ secrets.CHROMATIC_TOKEN_VUE3_VITE_DEFAULT_TS }}
     steps:
       - uses: actions/checkout@v4
         with:
@@ -72,7 +115,17 @@ jobs:
           else
             echo "config=./.nx/workflows/distribution-config.yaml" >> "$GITHUB_OUTPUT"
           fi
-      - run: npx nx-cloud@latest start-ci-run --distribute-on="${{ steps.dist.outputs.config }}" --stop-agents-after="$ALL_TASKS"
+      - name: Build --with-env-vars list
+        id: envvars
+        run: |
+          # Forward Chromatic + benchmark secrets from primary to NX Cloud agents.
+          # List stays in sync with the env: block above.
+          vars="GCP_CREDENTIALS,GH_BASE_BRANCH,GH_PR_NUMBER"
+          for key in $(env | grep -oE '^CHROMATIC_TOKEN_[A-Z0-9_]+'); do
+            vars="${vars},${key}"
+          done
+          echo "vars=$vars" >> "$GITHUB_OUTPUT"
+      - run: npx nx-cloud@latest start-ci-run --distribute-on="${{ steps.dist.outputs.config }}" --stop-agents-after="$ALL_TASKS" --with-env-vars="${{ steps.envvars.outputs.vars }}"
       - name: Create Nx Cloud Status (pending)
         uses: actions/github-script@v7
         with:
@@ -99,10 +152,20 @@ jobs:
       - id: nx
         name: 'Run nx'
         run: |
-          echo 'nx_output<<EOF' >> "$GITHUB_OUTPUT"
-          yarn nx run-many -t $ALL_TASKS -c production -p="tag:library,tag:ci:${{ steps.tag.outputs.tag }}" | tee -a "$GITHUB_OUTPUT"
+          set -o pipefail
+          output_file=$(mktemp)
+
+          yarn nx run-many -t $ALL_TASKS -c production -p="tag:library,tag:ci:${{ steps.tag.outputs.tag }}" | tee "$output_file"
           status=${PIPESTATUS[0]}
-          echo 'EOF' >> "$GITHUB_OUTPUT"
+
+          # Use a random delimiter so any "EOF" lines inside nx output
+          # cannot terminate the GITHUB_OUTPUT heredoc prematurely.
+          delim="NXOUTPUT_$(openssl rand -hex 8)"
+          {
+            echo "nx_output<<${delim}"
+            cat "$output_file"
+            echo "${delim}"
+          } >> "$GITHUB_OUTPUT"
           exit $status
 
       - name: Create per-task Nx statuses
@@ -161,4 +224,107 @@ jobs:
                 ? `Nx Cloud run failed (${failedCount} tasks failed)`
                 : 'Nx Cloud run finished successfully',
               context: `nx: ${tag}`,
-            });
+            });
+
+  nx-windows:
+    if: >
+      github.repository == 'storybookjs/storybook' &&
+        ((github.event_name == 'pull_request' &&
+          github.event.pull_request.head.repo.full_name == github.repository &&
+          contains(github.event.pull_request.labels.*.name, 'ci:daily')
+        ) || (github.event_name == 'schedule'))
+    runs-on: windows-latest
+    # GH will auto-cancel the job when the timeout expires. Needed because
+    # NX Cloud manual agents on Windows occasionally fail to stop after the
+    # primary finishes, which would otherwise leave the job running for
+    # hours (confirmed w/ James Henry on NX side).
+    timeout-minutes: 60
+    defaults:
+      run:
+        shell: bash
+    env:
+      NX_CI_EXECUTION_ENV: 'windows'
+      # Matches CircleCI daily Windows jobs: common build/test + init-empty + per-first-template sandbox build/e2e.
+      # e2e-tests-dev is intentionally excluded: it depends on the continuous `dev` task which
+      # crashes with exit code 1 when NX Cloud tries to stop it on Windows agents (known NX
+      # team-side bug, being tracked). Without it the Windows pipeline reliably terminates;
+      # with it the primary waits forever for a misbehaving agent. Keep `e2e-tests` (which
+      # uses `serve` — same continuous pattern but stops cleanly).
+      # TODO: re-add e2e-tests-dev once NX fixes continuous-task cleanup on Windows.
+      WINDOWS_TASKS: compile,test,init-empty,sandbox,build,e2e-tests
+      # NX_BRANCH links the primary and the agents to the same CI pipeline execution
+      NX_BRANCH: ${{ github.event.pull_request.number || github.ref_name }}
+      # Verbose logging for the first Windows runs — drop once it's green
+      NX_CLOUD_VERBOSE_LOGGING: 'true'
+      # Short tmp paths without username avoid e.g. empty-init storybook init
+      # running into Windows MAX_PATH limits. Matches lerna's pattern.
+      TEMP: 'C:\temp'
+      TMP: 'C:\temp'
+      # Git Bash path form of TEMP for the `bash -c` commands in the init-empty /
+      # init-features NX targets (nx.json). On Linux the default of /tmp kicks in.
+      STORYBOOK_INIT_TMPDIR: '/c/temp'
+    steps:
+      - name: Ensure C:\temp exists
+        run: mkdir -p /c/temp
+      - uses: actions/checkout@v4
+        with:
+          filter: tree:0
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'yarn'
+      - uses: nrwl/nx-set-shas@v4
+      - run: npx nx-cloud@latest start-ci-run --distribute-on="manual" --stop-agents-after="$WINDOWS_TASKS"
+      - run: yarn install --immutable
+      - name: 'Run nx'
+        run: yarn nx run-many -t $WINDOWS_TASKS -c production -p="tag:library,tag:ci:windows"
+      - name: Stop all running agents
+        if: always()
+        run: npx nx-cloud stop-all-agents
+  nx-windows-agents:
+    name: Nx Cloud - Windows Agent ${{ matrix.agent }}
+    if: >
+      github.repository == 'storybookjs/storybook' &&
+        ((github.event_name == 'pull_request' &&
+          github.event.pull_request.head.repo.full_name == github.repository &&
+          contains(github.event.pull_request.labels.*.name, 'ci:daily')
+        ) || (github.event_name == 'schedule'))
+    runs-on: windows-latest
+    # See nx-windows job: agents sometimes don't shut down cleanly.
+    # Timeout lets GH reclaim the runner instead of burning 6h.
+    timeout-minutes: 60
+    defaults:
+      run:
+        shell: bash
+    strategy:
+      matrix:
+        agent: [1, 2, 3]
+    env:
+      NX_CI_EXECUTION_ENV: 'windows'
+      # Must match nx-windows primary so NX Cloud pairs them into the same pipeline execution
+      NX_BRANCH: ${{ github.event.pull_request.number || github.ref_name }}
+      NX_CLOUD_VERBOSE_LOGGING: 'true'
+      # Short tmp paths (same as primary) so any cache/install work the
+      # agent does stays under Windows MAX_PATH.
+      TEMP: 'C:\temp'
+      TMP: 'C:\temp'
+      # See nx-windows primary: this is the Git-Bash form agents use when
+      # running init-empty / init-features tasks.
+      STORYBOOK_INIT_TMPDIR: '/c/temp'
+    steps:
+      - name: Ensure C:\temp exists
+        run: mkdir -p /c/temp
+      - uses: actions/checkout@v4
+        with:
+          filter: tree:0
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'yarn'
+      - run: yarn install --immutable
+      - name: Start Nx Agent ${{ matrix.agent }}
+        run: npx nx-cloud start-agent
+        env:
+          NX_AGENT_NAME: windows-agent-${{ matrix.agent }}

.github/workflows/trigger-circle-ci-workflow.yml

@@ -0,0 +1,68 @@
+name: Trigger CircleCI workflow
+
+on:
+  # Use pull_request_target, as we don't need to check out the actual code of the fork in this script.
+  # And this is the only way to trigger the Circle CI API on forks as well.
+  pull_request_target:
+    types: [opened, synchronize, labeled, reopened]
+  push:
+    branches:
+      - next
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  get-branch:
+    if: github.repository_owner == 'storybookjs'
+    runs-on: ubuntu-latest
+    steps:
+      - id: get-branch
+        env:
+          # Stored as environment variable to prevent script injection
+          REF_NAME: ${{ github.ref_name }}
+          PR_REF_NAME: ${{ github.event.pull_request.head.ref }}
+        run: |
+          if  [ "${{ github.event.pull_request.head.repo.fork }}" = "true" ]; then
+            export BRANCH=pull/${{ github.event.pull_request.number }}/head
+            elif [ "${{ github.event_name }}" = "push" ]; then
+            export BRANCH="$REF_NAME"
+            else
+            export BRANCH="$PR_REF_NAME"
+          fi
+          echo "$BRANCH"
+          echo "branch=$BRANCH" >> $GITHUB_ENV
+    outputs:
+      branch: ${{ env.branch }}
+
+  get-parameters:
+    if: github.repository_owner == 'storybookjs'
+    runs-on: ubuntu-latest
+    steps:
+      - if: github.event_name == 'pull_request_target' && (contains(github.event.pull_request.labels.*.name, 'ci:normal'))
+        run: echo "workflow=normal" >> $GITHUB_ENV
+      - if: github.event_name == 'pull_request_target' && (contains(github.event.pull_request.labels.*.name, 'ci:docs'))
+        run: echo "workflow=docs" >> $GITHUB_ENV
+      - if: github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'ci:merged')
+        run: echo "workflow=merged" >> $GITHUB_ENV
+      - if: github.event_name == 'pull_request_target' && (contains(github.event.pull_request.labels.*.name, 'ci:daily'))
+        run: echo "workflow=daily" >> $GITHUB_ENV
+    outputs:
+      workflow: ${{ env.workflow }}
+      ghBaseBranch: ${{ github.event.pull_request.base.ref }}
+      ghPrNumber: ${{ github.event.pull_request.number }}
+
+  trigger-circle-ci-workflow:
+    runs-on: ubuntu-latest
+    needs: [get-branch, get-parameters]
+    if: github.repository_owner == 'storybookjs' && needs.get-parameters.outputs.workflow != ''
+    steps:
+      - name: Trigger Normal tests
+        uses: fjogeleit/http-request-action@v1
+        with:
+          url: 'https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline'
+          method: 'POST'
+          customHeaders: '{"Content-Type": "application/json", "Circle-Token": "${{ secrets.CIRCLE_CI_TOKEN }}"}'
+          data: '{ "branch": "${{needs.get-branch.outputs.branch}}", "parameters": ${{toJson(needs.get-parameters.outputs)}} }'

.nx/workflows/agents.yaml

@@ -73,6 +73,13 @@ common-env-vars: &common-env-vars
   STORYBOOK_NX_CLOUD_AGENT: true
   CI: true
   NODE_OPTIONS: --max_old_space_size=6144
+  # Chromatic + nx-set-shas need real commit history — the nrwl checkout
+  # step defaults to GIT_CHECKOUT_DEPTH=1 (shallow), which makes chromatic
+  # fail with "Found only one commit" even when the build is perfect.
+  # Mirror CircleCI's `--depth 500` instead of `0` (all refs) because on PRs
+  # NX_COMMIT_SHA is GitHub's synthetic merge-ref which is reachable as a
+  # commit but not on any branch, so "+refs/heads/*" fetch can't find it.
+  GIT_CHECKOUT_DEPTH: '500'
 
 launch-templates:
   linux-js:

.nx/workflows/distribution-config-daily.yaml

@@ -22,11 +22,20 @@ assignment-rules:
   - targets:
       - check
       - lint
-      - pretty-docs
       - knip
+      - fmt
     run-on:
       - agent: linux-js
         parallelism: 6
+  - targets:
+      - init-empty
+      - init-features
+      - bench-packages
+      - storybook-chromatic
+      - storybook-build
+    run-on:
+      - agent: linux-js
+        parallelism: 1
   - targets:
       - '*'
     run-on:

.nx/workflows/distribution-config.yaml

@@ -23,9 +23,19 @@ assignment-rules:
       - check
       - lint
       - knip
+      - fmt
     run-on:
       - agent: linux-js
         parallelism: 6
+  - targets:
+      - init-empty
+      - init-features
+      - bench-packages
+      - storybook-chromatic
+      - storybook-build
+    run-on:
+      - agent: linux-js
+        parallelism: 1
   - targets:
       - '*'
     run-on:

code/lib/codemod/src/index.ts

@@ -62,7 +62,10 @@ export async function runCodemod(
   }
 
   // Normalize the glob pattern to use forward slashes (required for glob patterns on Windows)
-  const files = await tinyglobby([normalize(glob), '!**/node_modules', '!**/dist']);
+  // Use absolute: true to avoid cross-drive relative path issues on Windows (e.g. cwd on D: but tmpdir on C:)
+  const files = await tinyglobby([normalize(glob), '!**/node_modules', '!**/dist'], {
+    absolute: true,
+  });
   const extensions = new Set(files.map((file) => extname(file).slice(1)));
   const commaSeparatedExtensions = Array.from(extensions).join(',');