Merge branch 'next' into fix-configure-page-links

.circleci/config.yml

@@ -6,6 +6,14 @@ parameters:
     type: enum
     enum: ["normal", "merged", "daily", "skipped", "docs"]
     default: "skipped"
+  ghPrNumber:
+    description: The PR number
+    type: string
+    default: ""
+  ghBaseBranch:
+    description: The name of the base branch (the target of the PR)
+    type: string
+    default: "next"
 
 executors:
   sb_node_18_classic:
@@ -500,7 +508,7 @@ jobs:
           command: yarn task --task bench --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) --no-link --start-from=never --junit
       - run:
           name: Uploading results
-          command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench)
+          command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) << pipeline.parameters.ghPrNumber >> << pipeline.parameters.ghBaseBranch >>
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench)
   test-empty-init:
@@ -833,6 +841,10 @@ workflows:
                 # --smoke-test is not supported for the angular builder right now
                 # - "angular-cli"
                 - "lit-vite-ts"
+      - bench:
+          parallelism: 5
+          requires:
+            - build-sandboxes
 
       # TODO: reenable once we find out the source of flakyness
       # - test-runner-dev:

.github/PULL_REQUEST_TEMPLATE.md

@@ -72,3 +72,6 @@ This PR does not have a canary release associated. You can request a canary rele
 _core team members can create a canary release [here](https://github.com/storybookjs/storybook/actions/workflows/canary-release-pr.yml) or locally with `gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>`_
 
 <!-- CANARY_RELEASE_SECTION -->
+
+<!-- BENCHMARK_SECTION -->
+<!-- BENCHMARK_SECTION -->

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

@@ -36,79 +36,31 @@ jobs:
     outputs:
       branch: ${{ env.branch }}
 
-  trigger-normal-tests:
+  get-parameters:
     runs-on: ubuntu-latest
-    needs: get-branch
-    if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:normal') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:normal')))
     steps:
-      - name: Trigger Normal tests
-        run: >
-          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
-            -H "Content-Type: application/json" \
-            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
-            -d '{
-                  "branch": "'"$BRANCH"'",
-                  "parameters": {
-                    "workflow": "normal"
-                  }
-                }'
-        env:
-          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
-          BRANCH: ${{ needs.get-branch.outputs.branch }}
-  trigger-docs-tests:
-    runs-on: ubuntu-latest
-    needs: get-branch
-    if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:docs') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:docs')))
-    steps:
-      - name: Trigger docs tests
-        run: >
-          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
-            -H "Content-Type: application/json" \
-            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
-            -d '{
-                  "branch": "'"$BRANCH"'",
-                  "parameters": {
-                    "workflow": "docs"
-                  }
-                }'
-        env:
-          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
-          BRANCH: ${{ needs.get-branch.outputs.branch }}
-  trigger-merged-tests:
-    runs-on: ubuntu-latest
-    needs: get-branch
-    if: github.event_name == 'push' || (github.event.action == 'labeled' && github.event.label.name == 'ci:merged') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:merged'))
-    steps:
-      - name: Trigger merged tests
-        run: >
-          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
-            -H "Content-Type: application/json" \
-            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
-            -d '{
-                  "branch": "'"$BRANCH"'",
-                  "parameters": {
-                    "workflow": "merged"
-                  }
-                }'
-        env:
-          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
-          BRANCH: ${{ needs.get-branch.outputs.branch }}
-  trigger-daily-tests:
+      - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:normal') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:normal')))
+        run: echo "workflow=normal" >> $GITHUB_ENV
+      - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:docs') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:docs')))
+        run: echo "workflow=docs" >> $GITHUB_ENV
+      - if: github.event_name == 'push' || (github.event.action == 'labeled' && github.event.label.name == 'ci:merged') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:merged'))
+        run: echo "workflow=merged" >> $GITHUB_ENV
+      - if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:daily') || (github.event.action != 'labeled' && 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
-    if: github.event_name == 'pull_request_target' && ((github.event.action == 'labeled' && github.event.label.name == 'ci:daily') || (github.event.action != 'labeled' && contains(github.event.pull_request.labels.*.name, 'ci:daily')))
+    needs: [get-branch, get-parameters]
+    if: needs.get-parameters.outputs.workflow != ''
     steps:
-      - name: Trigger the daily tests
-        run: >
-          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
-            -H "Content-Type: application/json" \
-            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
-            -d '{
-                  "branch": "'"$BRANCH"'",
-                  "parameters": {
-                    "workflow": "daily"
-                  }
-                }'
-        env:
-          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
-          BRANCH: ${{ needs.get-branch.outputs.branch }}
+      - 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)}} }'

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 8.2.2
+
+- CPC: Add `ESM` export to `docs-tools` & `node-logger` packages - [#28539](https://github.com/storybookjs/storybook/pull/28539), thanks @ndelangen!
+- CPC: Fix missing dependency in `@storybook/addon-interactions` - [#28518](https://github.com/storybookjs/storybook/pull/28518), thanks @ndelangen!
+- CPC: Revert renames of panels, addon_ids - [#28524](https://github.com/storybookjs/storybook/pull/28524), thanks @ndelangen!
+
 ## 8.2.1
 
 - CPC: Fix type generation - [#28507](https://github.com/storybookjs/storybook/pull/28507), thanks @ndelangen!

code/core/package.json

@@ -277,7 +277,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
-    "@storybook/docs-mdx": "3.1.0-next.0",
+    "@storybook/docs-mdx": "4.0.0-next.0",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@tanstack/react-virtual": "^3.3.0",

code/core/src/core-server/utils/StoryIndexGenerator.ts

@@ -23,7 +23,6 @@ import { commonGlobOptions, normalizeStoryPath } from '@storybook/core/common';
 import { logger, once } from '@storybook/core/node-logger';
 import { getStorySortParameter, loadConfig } from '@storybook/core/csf-tools';
 import { storyNameFromExport, toId, combineTags } from '@storybook/csf';
-import { analyze } from '@storybook/docs-mdx';
 import { dedent } from 'ts-dedent';
 import { autoName } from './autoName';
 import { IndexingError, MultipleIndexingError } from './IndexingError';
@@ -408,7 +407,8 @@ export class StoryIndexGenerator {
 
       const content = await fs.readFile(absolutePath, 'utf8');
 
-      const result = analyze(content);
+      const { analyze } = await import('@storybook/docs-mdx');
+      const result = await analyze(content);
 
       // Templates are not indexed
       if (result.isTemplate) return false;

code/deprecated/docs-tools/package.json

@@ -23,11 +23,13 @@
   "exports": {
     ".": {
       "types": "./shim.d.ts",
+      "import": "./shim.mjs",
       "require": "./shim.js"
     },
     "./package.json": "./package.json"
   },
   "main": "./shim.js",
+  "module": "./shim.mjs",
   "types": "./shim.d.ts",
   "files": [
     "README.md",

code/deprecated/docs-tools/shim.mjs

@@ -0,0 +1 @@
+export * from 'storybook/internal/docs-tools';

code/deprecated/node-logger/package.json

@@ -23,11 +23,13 @@
   "exports": {
     ".": {
       "types": "./shim.d.ts",
+      "module": "./shim.mjs",
       "require": "./shim.js"
     },
     "./package.json": "./package.json"
   },
   "main": "./shim.js",
+  "module": "./shim.mjs",
   "types": "./shim.d.ts",
   "files": [
     "README.md",

code/deprecated/node-logger/shim.mjs

@@ -0,0 +1 @@
+export * from 'storybook/internal/node-logger';

code/lib/codemod/package.json

@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@types/jscodeshift": "^0.11.10",
-    "ansi-regex": "^5.0.1",
+    "ansi-regex": "^6.0.1",
     "mdast-util-mdx-jsx": "^3.0.0",
     "mdast-util-mdxjs-esm": "^2.0.1",
     "remark": "^15.0.1",

code/package.json

@@ -86,7 +86,7 @@
     "type-fest": "~2.19"
   },
   "dependencies": {
-    "@chromatic-com/storybook": "^1.3.2",
+    "@chromatic-com/storybook": "^1.6.1",
     "@happy-dom/global-registrator": "^14.12.0",
     "@nx/eslint": "18.0.6",
     "@nx/vite": "18.0.6",

code/presets/vue3-webpack/package.json

@@ -62,7 +62,7 @@
     "@storybook/core-webpack": "workspace:*",
     "@types/node": "^18.0.0",
     "ts-loader": "^9.2.8",
-    "vue-docgen-api": "^4.46.0",
+    "vue-docgen-api": "^4.75.1",
     "vue-docgen-loader": "^1.5.1",
     "vue-loader": "^16.0.0",
     "webpack": "5"

code/yarn.lock

@@ -2292,16 +2292,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chromatic-com/storybook@npm:^1.3.2":
-  version: 1.3.2
-  resolution: "@chromatic-com/storybook@npm:1.3.2"
+"@chromatic-com/storybook@npm:^1.6.1":
+  version: 1.6.1
+  resolution: "@chromatic-com/storybook@npm:1.6.1"
   dependencies:
-    chromatic: "npm:^11.3.0"
+    chromatic: "npm:^11.4.0"
     filesize: "npm:^10.0.12"
     jsonfile: "npm:^6.1.0"
     react-confetti: "npm:^6.1.0"
     strip-ansi: "npm:^7.1.0"
-  checksum: 10c0/30f7d946e41d031d45991ea8cf2f42b64330a12ddb1330a5a0bfe9734511e36f0691f897b0075c41c4c9fa5de6382598e98179a5ac2f9139bd619fc46487bbeb
+  checksum: 10c0/411a2c9f44542c4940e6452846f1c2b71f4529640cefcf60396c1eb0a16cd2a4d27ba648523c73a7ca9b5b64f2a67b19159281add6730d0a237336a3856c8f37
   languageName: node
   linkType: hard
 
@@ -5666,7 +5666,7 @@ __metadata:
     "@storybook/csf": "npm:0.1.11"
     "@types/cross-spawn": "npm:^6.0.2"
     "@types/jscodeshift": "npm:^0.11.10"
-    ansi-regex: "npm:^5.0.1"
+    ansi-regex: "npm:^6.0.1"
     cross-spawn: "npm:^7.0.3"
     globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
@@ -5758,7 +5758,7 @@ __metadata:
     "@radix-ui/react-scroll-area": "npm:^1.0.5"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@storybook/csf": "npm:0.1.11"
-    "@storybook/docs-mdx": "npm:3.1.0-next.0"
+    "@storybook/docs-mdx": "npm:4.0.0-next.0"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@tanstack/react-virtual": "npm:^3.3.0"
@@ -5911,10 +5911,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-mdx@npm:3.1.0-next.0":
-  version: 3.1.0-next.0
-  resolution: "@storybook/docs-mdx@npm:3.1.0-next.0"
-  checksum: 10c0/7622d7c6318e842c90a71c1836d68531236c31fff7081c885803eddfafb7e3f8998689f612eaa0292209ada8352a36657dcacb5d3ef4632b8e8b8a283c39602e
+"@storybook/docs-mdx@npm:4.0.0-next.0":
+  version: 4.0.0-next.0
+  resolution: "@storybook/docs-mdx@npm:4.0.0-next.0"
+  dependencies:
+    acorn: "npm:^8.12.1"
+  checksum: 10c0/6253361e4e3c6c716c4f4c8cc30c082bcdab66b35b30183f6574d94720d875e28927916be8bda0bff4987090c3e50d348ca898160b1812a90c5afa845400414e
   languageName: node
   linkType: hard
 
@@ -6314,7 +6316,7 @@ __metadata:
     ts-loader: "npm:^9.2.8"
     typescript: "npm:^5.3.2"
     vue: "npm:^3.2.33"
-    vue-docgen-api: "npm:^4.46.0"
+    vue-docgen-api: "npm:^4.75.1"
     vue-docgen-loader: "npm:^1.5.1"
     vue-loader: "npm:^16.0.0"
     webpack: "npm:5"
@@ -6457,7 +6459,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/root@workspace:."
   dependencies:
-    "@chromatic-com/storybook": "npm:^1.3.2"
+    "@chromatic-com/storybook": "npm:^1.6.1"
     "@happy-dom/global-registrator": "npm:^14.12.0"
     "@nx/eslint": "npm:18.0.6"
     "@nx/vite": "npm:18.0.6"
@@ -7216,9 +7218,9 @@ __metadata:
   linkType: hard
 
 "@types/babel__preset-env@npm:^7":
-  version: 7.9.6
-  resolution: "@types/babel__preset-env@npm:7.9.6"
-  checksum: 10c0/639bcf58094530eb8509b302de9c42fc1a9e44e236bcbfd218e987aba7a2c15052c3a1cac7ca7f260255e74beb3b489ff877b9870f8587394457cd3aa9f64934
+  version: 7.9.7
+  resolution: "@types/babel__preset-env@npm:7.9.7"
+  checksum: 10c0/e1da078fee75841af512c7084e66f8a2b9136d72185d72c85c6fb41697358d330d195896d7d22834fca92fad1f16a8c0fb6269e890f9e6842c9a9972313b7baa
   languageName: node
   linkType: hard
 
@@ -9241,7 +9243,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
   version: 8.12.1
   resolution: "acorn@npm:8.12.1"
   bin:
@@ -11255,9 +11257,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^11.3.0":
-  version: 11.3.0
-  resolution: "chromatic@npm:11.3.0"
+"chromatic@npm:^11.4.0":
+  version: 11.5.5
+  resolution: "chromatic@npm:11.5.5"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
@@ -11270,7 +11272,7 @@ __metadata:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10c0/e977ef43a43ebb0250ec8fc46f5751c8cb9b798f75fcf9ec52485c1127caf9d6cef0346a9dd1660a8967faf1a7cde579571a0ac130cfaf475d6f22e4929003b6
+  checksum: 10c0/3d812122548f9c29ab7116f7054e03cbf523b30ddde7e3142017cd23c42b6b99b3023e0146ef3afcfe4245a8cbb2ed97cedecca4e2cf9e5f6e8666db84a827d4
   languageName: node
   linkType: hard
 
@@ -27973,7 +27975,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-docgen-api@npm:^4.46.0, vue-docgen-api@npm:^4.75.1":
+"vue-docgen-api@npm:^4.75.1":
   version: 4.79.1
   resolution: "vue-docgen-api@npm:4.79.1"
   dependencies:

docs/writing-stories/mocking-data-and-modules/mocking-modules.mdx

@@ -70,11 +70,13 @@ To configure subpath imports, you define the `imports` property in your project'
 
 {/* prettier-ignore-end */}
 
-There are two aspects to this configuration worth noting:
+There are three aspects to this configuration worth noting:
 
 First, **each subpath must begin with `#`**, to differentiate it from a regular module path. The `#*` entry is a catch-all that maps all subpaths to the root directory.
 
-Second, note the **`storybook`, `test`, and `default` keys** in each module's entry. The `storybook` value is used to import the mock file when loaded in Storybook, while the `default` value is used to import the original module when loaded in your project. The `test` condition is also used within Storybook, which allows you to use the same configuration in Storybook and your other tests.
+Second, the order of the keys is important. The `default` key should come last.
+
+Third, note the **`storybook`, `test`, and `default` keys** in each module's entry. The `storybook` value is used to import the mock file when loaded in Storybook, while the `default` value is used to import the original module when loaded in your project. The `test` condition is also used within Storybook, which allows you to use the same configuration in Storybook and your other tests.
 
 With the package configuration in place, you can then update your component file to use the subpath import: