Merge branch 'next' into larsrickert/improve-vue-source-code

.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!

CODEOWNERS

@@ -6,7 +6,7 @@
 # .yarnrc.yml @ndelangen @JReinhold
 
 # Docs
-# /docs/ @kylegach @jonniebigodes
+/docs/ @kylegach @jonniebigodes
 
 # Scripts
 # /scripts/         @ndelangen @kasperpeulen

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.1.x to 8.2.x](#from-version-81x-to-82x)
+  - [Failed to resolve import "@storybook/X" error](#failed-to-resolve-import-storybookx-error)
   - [Preview.js globals renamed to initialGlobals](#previewjs-globals-renamed-to-initialglobals)
 - [From version 8.0.x to 8.1.x](#from-version-80x-to-81x)
   - [Portable stories](#portable-stories)
@@ -415,6 +416,26 @@
 
 ## From version 8.1.x to 8.2.x
 
+### Failed to resolve import "@storybook/X" error
+
+Storybook's package structure changed in 8.2. It is a non-breaking change, but can expose missing project dependencies.
+
+This happens when `@storybook/X` is missing in your `package.json`, but your project references `@storybook/X` in your source code (typically in a story file or in a `.storybook` config file). This is a problem with your project, and if it worked in earlier versions of Storybook, it was purely accidental.
+
+Now in Storybook 8.2, that incorrect project configuration no longer works. The solution is to install `@storybook/X` as a dev dependency and re-run.
+
+Example errors:
+
+```sh
+Cannot find module @storybook/preview-api or its corresponding type declarations
+```
+
+```sh
+Internal server error: Failed to resolve import "@storybook/theming/create" from ".storybook/theme.ts". Does the file exist?
+```
+
+To protect your project from missing dependencies, try the `no-extraneous-dependencies` rule in [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import).
+
 ### Preview.js globals renamed to initialGlobals
 
 Starting in 8.2 `preview.js` `globals` are deprecated and have been renamed to `initialGlobals`. We will remove `preview.js` `globals` in 9.0.

code/addons/docs/src/preset.ts

@@ -70,6 +70,8 @@ async function webpack(
    */
   const cliPath = require.resolve('storybook/package.json');
   const themingPath = join(cliPath, '..', 'core', 'theming', 'index.js');
+  const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js');
+
   const componentsPath = join(cliPath, '..', 'core', 'components', 'index.js');
   const blocksPath = dirname(require.resolve('@storybook/blocks/package.json'));
   if (Array.isArray(webpackConfig.resolve?.alias)) {
@@ -87,6 +89,10 @@ async function webpack(
         name: '@mdx-js/react',
         alias: mdx,
       },
+      {
+        name: '@storybook/theming/create',
+        alias: themingCreatePath,
+      },
       {
         name: '@storybook/theming',
         alias: themingPath,
@@ -104,6 +110,7 @@ async function webpack(
     alias = {
       ...webpackConfig.resolve?.alias,
       react,
+      '@storybook/theming/create': themingCreatePath,
       '@storybook/theming': themingPath,
       '@storybook/components': componentsPath,
       '@storybook/blocks': blocksPath,
@@ -168,6 +175,7 @@ export const viteFinal = async (config: any, options: Options) => {
 
   const cliPath = dirname(require.resolve('storybook/package.json'));
   const themingPath = join(cliPath, 'core', 'theming', 'index.js');
+  const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js');
   const componentsPath = join(cliPath, 'core', 'components', 'index.js');
   const blocksPath = dirname(require.resolve('@storybook/blocks/package.json'));
 
@@ -187,6 +195,7 @@ export const viteFinal = async (config: any, options: Options) => {
            *
            * In the future the `@storybook/theming` and `@storybook/components` can be removed, as they should be singletons in the future due to the peerDependency on `storybook` package.
            */
+          '@storybook/theming/create': themingCreatePath,
           '@storybook/theming': themingPath,
           '@storybook/components': componentsPath,
           '@storybook/blocks': blocksPath,

code/builders/builder-vite/src/vite-config.ts

@@ -65,7 +65,7 @@ export async function commonConfig(
     base: './',
     plugins: await pluginConfig(options),
     resolve: {
-      conditions: ['storybook', 'stories', 'test', 'browser', 'import', 'module', 'default'],
+      conditions: ['storybook', 'stories', 'test'],
       preserveSymlinks: isPreservingSymlinks(),
       alias: {
         assert: require.resolve('browser-assert'),

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/core/src/csf-tools/CsfFile.ts

@@ -3,7 +3,7 @@ import { readFile, writeFile } from 'node:fs/promises';
 import { dedent } from 'ts-dedent';
 
 import * as t from '@babel/types';
-import bg from '@babel/generator';
+import bg, { type GeneratorOptions } from '@babel/generator';
 import bt from '@babel/traverse';
 
 import * as recast from 'recast';
@@ -599,15 +599,9 @@ export const loadCsf = (code: string, options: CsfOptions) => {
   return new CsfFile(ast, options);
 };
 
-interface FormatOptions {
-  sourceMaps?: boolean;
-  preserveStyle?: boolean;
-  inputSourceMap?: any;
-}
-
 export const formatCsf = (
   csf: CsfFile,
-  options: FormatOptions = { sourceMaps: false },
+  options: GeneratorOptions & { inputSourceMap?: any } = { sourceMaps: false },
   code?: string
 ) => {
   const result = generate(csf._ast, options, code);

code/core/src/preview-api/modules/store/csf/portable-stories.ts

@@ -263,10 +263,7 @@ type UnwrappedJSXStoryRef = {
   __pw_type: 'jsx';
   type: UnwrappedImportStoryRef;
 };
-type UnwrappedImportStoryRef = ComposedStoryFn & {
-  playPromise?: Promise<void>;
-  renderingEnded?: PromiseWithResolvers<void>;
-};
+type UnwrappedImportStoryRef = ComposedStoryFn;
 
 declare global {
   function __pwUnwrapObject(

code/deprecated/core-events/shim.js

@@ -1 +1 @@
-module.exports = require('storybook/internal/core-errors');
+module.exports = require('storybook/internal/core-events');