Merge branch 'next' into addon-react-jsx

.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,26 @@
+## 8.2.4
+
+- CLI: Add diagnostic when the `storybook` package is missing - [#28604](https://github.com/storybookjs/storybook/pull/28604), thanks @kasperpeulen!
+- CLI: Make a few automigrations run on all version upgrades - [#28601](https://github.com/storybookjs/storybook/pull/28601), thanks @yannbf!
+- CPC: Direct dependencies on shim packages in renderers - [#28599](https://github.com/storybookjs/storybook/pull/28599), thanks @ndelangen!
+
+## 8.2.3
+
+- Bug: Fix invalid docs links in Configure.mdx template page - [#28560](https://github.com/storybookjs/storybook/pull/28560), thanks @kylegach!
+- CLI: Add "missing-storybook-dependencies" automigration - [#28579](https://github.com/storybookjs/storybook/pull/28579), thanks @yannbf!
+- CPC: Add `theming/create` aliases in docs preset - [#28570](https://github.com/storybookjs/storybook/pull/28570), thanks @ndelangen!
+- CPC: Fix incorrect re-export in `core-events` - [#28573](https://github.com/storybookjs/storybook/pull/28573), thanks @ndelangen!
+- CPC: Fix Vite builder had wrong conditions - [#28581](https://github.com/storybookjs/storybook/pull/28581), thanks @ndelangen!
+- CSF: Fix small typing issue - [#28587](https://github.com/storybookjs/storybook/pull/28587), thanks @valentinpalkovic!
+- Portable stories: Remove unused types - [#28548](https://github.com/storybookjs/storybook/pull/28548), thanks @kasperpeulen!
+- Webpack: Fix sourceMap generation in csf-tools - [#28585](https://github.com/storybookjs/storybook/pull/28585), thanks @valentinpalkovic!
+
+## 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!

CHANGELOG.prerelease.md

@@ -1,3 +1,18 @@
+## 8.3.0-alpha.1
+
+- Bug: Fix invalid docs links in Configure.mdx template page - [#28560](https://github.com/storybookjs/storybook/pull/28560), thanks @kylegach!
+- CLI: Add "missing-storybook-dependencies" automigration - [#28579](https://github.com/storybookjs/storybook/pull/28579), thanks @yannbf!
+- CLI: Add diagnostic when the `storybook` package is missing - [#28604](https://github.com/storybookjs/storybook/pull/28604), thanks @kasperpeulen!
+- CLI: Make a few automigrations run on all version upgrades - [#28601](https://github.com/storybookjs/storybook/pull/28601), thanks @yannbf!
+- CPC: Add `theming/create` aliases in docs preset - [#28570](https://github.com/storybookjs/storybook/pull/28570), thanks @ndelangen!
+- CPC: Direct dependencies on shim packages in renderers - [#28599](https://github.com/storybookjs/storybook/pull/28599), thanks @ndelangen!
+- CPC: Fix Vite builder had wrong conditions - [#28581](https://github.com/storybookjs/storybook/pull/28581), thanks @ndelangen!
+- CPC: Fix incorrect re-export in `core-events` - [#28573](https://github.com/storybookjs/storybook/pull/28573), thanks @ndelangen!
+- CSF: Fix small typing issue - [#28587](https://github.com/storybookjs/storybook/pull/28587), thanks @valentinpalkovic!
+- Core: Upgrade docs-mdx for smaller install - [#28552](https://github.com/storybookjs/storybook/pull/28552), thanks @shilman!
+- Portable stories: Remove unused types - [#28548](https://github.com/storybookjs/storybook/pull/28548), thanks @kasperpeulen!
+- Webpack: Fix sourceMap generation in csf-tools - [#28585](https://github.com/storybookjs/storybook/pull/28585), thanks @valentinpalkovic!
+
 ## 8.3.0-alpha.0
 
 

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/a11y/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
  "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
  "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
  "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
  "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
  "addon",

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/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
  "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-mdx-gfm",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "GitHub Flavored Markdown in Storybook",
  "keywords": [
  "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-highlight",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Highlight DOM nodes within your stories",
  "keywords": [
  "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-interactions",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Automate, test and debug user interactions",
  "keywords": [
  "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "React storybook addon that show component jest report",
  "keywords": [
  "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
  "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-measure",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Inspect layouts by visualizing the box model",
  "keywords": [
  "storybook-addons",

code/addons/onboarding/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-onboarding",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
  "keywords": [
  "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-outline",
- "version": "8.3.0-alpha.0",
+ "version": "8.3.0-alpha.1",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "keywords": [
  "storybook-addons",