Merge branch 'next' into shilman/react-native-web-vite

.circleci/config.yml

@@ -211,6 +211,31 @@ jobs:
             yarn knip --no-exit-code
       - report-workflow-on-failure
       - cancel-workflow-on-failure
+  bench-packages:
+    executor:
+      class: medium
+      name: sb_node_22_classic
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Benchmarking Packages
+          working_directory: scripts
+          command: |
+            yarn local-registry --open &
+            until curl -s http://localhost:6001 > /dev/null; do
+              echo 'Waiting for local registry to be available...'
+              sleep 2
+            done
+            yarn bench-packages --baseBranch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload
+      - store_artifacts: 
+          path: bench/packages/results.json
+      - store_artifacts: 
+          path: bench/packages/compare-with-<< pipeline.parameters.ghBaseBranch >>.json
+      - report-workflow-on-failure
+      - cancel-workflow-on-failure
   check:
     executor:
       class: xlarge
@@ -543,7 +568,7 @@ jobs:
       - store_artifacts: # this is where playwright puts more complex stuff
           path: code/playwright-results/
           destination: playwright
-  bench:
+  bench-sandboxes:
     parameters:
       parallelism:
         type: integer
@@ -753,6 +778,9 @@ workflows:
       - knip:
           requires:
             - build
+      - bench-packages:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -799,7 +827,7 @@ workflows:
           parallelism: 5
           requires:
             - create-sandboxes
-      - bench:
+      - bench-sandboxes:
           parallelism: 5
           requires:
             - build-sandboxes
@@ -828,6 +856,9 @@ workflows:
       - knip:
           requires:
             - build
+      - bench-packages:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -883,7 +914,7 @@ workflows:
       - test-ui-testing-module:
           requires:
             - build
-      - bench:
+      - bench-sandboxes:
           parallelism: 5
           requires:
             - build-sandboxes
@@ -904,6 +935,9 @@ workflows:
       - knip:
           requires:
             - build
+      - bench-packages:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -977,7 +1011,7 @@ workflows:
                 # --smoke-test is not supported for the angular builder right now
                 # - "angular-cli"
                 - "lit-vite-ts"
-      - bench:
+      - bench-sandboxes:
           parallelism: 5
           requires:
             - build-sandboxes

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 8.4.2
+
+- Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic!
+- Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf!
+- CLI: Fix Solid init by installing `@storybook/test` - [#29514](https://github.com/storybookjs/storybook/pull/29514), thanks @shilman!
+- Core: Shim CJS-only globals in ESM output - [#29157](https://github.com/storybookjs/storybook/pull/29157), thanks @valentinpalkovic!
+- Next.js: Fix bundled react and react-dom in monorepos - [#29444](https://github.com/storybookjs/storybook/pull/29444), thanks @sentience!
+
 ## 8.4.1
 
 - Core: Relax peer dep constraint of shim packages - [#29503](https://github.com/storybookjs/storybook/pull/29503), thanks @kasperpeulen!

CHANGELOG.prerelease.md

@@ -1,3 +1,8 @@
+## 8.5.0-alpha.3
+
+- Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic!
+- Core: Prevent clipping box shadow on file search modal - [#29523](https://github.com/storybookjs/storybook/pull/29523), thanks @ghengeveld!
+
 ## 8.5.0-alpha.2
 
 - Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf!

CONTRIBUTING.md

@@ -5,6 +5,7 @@ Storybook is developed against a specific node version which is defined in an `.
 ## Ensure you have the required system utilities
 
 You will need to have the following installed:
+
 - git
 - node
 - yarn
@@ -20,7 +21,7 @@ You will need to have the following installed:
 
 ## Running the local development environment
 
-- Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
+- All commands should be run in a terminal with administrator privileges in Windows environments.
 - Run `yarn start` in the root directory to run a basic test Storybook "sandbox".
 
 The `yarn start` script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc). There is no need to run `yarn` or `yarn install` as `yarn start` will do this for you.

CONTRIBUTING/RELEASING.md

@@ -19,6 +19,7 @@
   - [5. Make Manual Changes](#5-make-manual-changes)
   - [6. Merge](#6-merge)
   - [7. See the "Publish" Workflow Finish](#7-see-the-publish-workflow-finish)
+- [Releasing changes to older minor versions](#releasing-changes-to-older-minor-versions)
 - [Releasing Locally in an Emergency 🚨](#releasing-locally-in-an-emergency-)
 - [Canary Releases](#canary-releases)
   - [With GitHub UI](#with-github-ui)
@@ -330,6 +331,59 @@ Merging the pull request will trigger [the publish workflow](https://github.com/
 
 Done! 🚀
 
+## Releasing changes to older minor versions
+
+If you need to release a change to an older minor version that is not the latest, you have to do it manually, locally. The process is described below, with an example of releasing a new `v8.3.7` in a situation where `8.4.0` is currently the latest version.
+
+1. Checkout the _existing_ tag that matches the latest minor release you want to bump, and create a new branch from it. In this case, we want to do:
+    1. `git fetch --all --tags`
+    2. `git checkout tags/v8.3.6 -b patch-8-3-7`
+2. Make the changes you need to, most likely cherry-picking commits from the fix you need to back-port.
+3. Run `yarn install` in `scripts` and `code`
+4. Build all packages in `code` with `yarn task --task compile --no-link`
+5. Commit and push your changes.
+6. Trigger _daily_ CI manually on your branch:
+    1. Open [CircleCI](https://app.circleci.com/pipelines/github/storybookjs/storybook) and click "Trigger Pipeline" on the top right corner of the page.
+    2. Set the following configuration options:
+        - Pipeline: _"storybook default"_
+        - Config Source: _"storybook"_
+        - Branch: Your branch, eg. `patch-8-3-7`
+    3. Add a parameter, with _"name"_ `workflow`, _"value"_ `daily`
+7. Wait for CI to finish successfully.
+8. Bump all package versions:
+    1. `cd scripts`
+    2. `yarn release:version --release-type patch`
+9.  Commit with `git commit -m "Bump version from <CURRENT_VERSION> to <NEXT_VERSION> MANUALLY"`
+10. Add a new entry to `CHANGELOG.md`, describing your changes
+11. Commit with `git commit -m "Update CHANGELOG.md with <NEXT_VERSION> MANUALLY"`
+12. Ensure you have the correct write permissions for all the Storybook npm packages. You need to be an admin of the _storybook_ org, and the packages that are not in the org. The simplest way to check this is to ensure you can see the _"Settings"_ tab in the following packages:
+    1.  [`@storybook/react-vite`](https://www.npmjs.com/package/@storybook/react-vite/access)
+    2.  [`storybook`](https://www.npmjs.com/package/storybook/access)
+    3.  [`sb`](https://www.npmjs.com/package/sb/access)
+    4.  [`create-storybook`](https://www.npmjs.com/package/create-storybook/access)
+13. Get your npm access token or generate a new one at https://www.npmjs.com/settings/your-username/tokens. Remember to give it access to the `storybook` org and the packages not in the org, as listed above.
+14. Publish all packages with `YARN_NPM_AUTH_TOKEN=<NPM_TOKEN> yarn release:publish --tag tag-for-publishing-older-releases --verbose`
+    - It goes through all packages and publishes them. If any number of packages fails to publish, it will retry 5 times, skipping those that have already been published.
+15. Confirm the new version has been released on npm with the tag `tag-for-publishing-older-releases`:
+    1. [`@storybook/react-vite`](https://www.npmjs.com/package/@storybook/react-vite?activeTab=versions)
+    2. [`storybook`](https://www.npmjs.com/package/storybook?activeTab=versions)
+    3. [`sb`](https://www.npmjs.com/package/sb?activeTab=versions)
+    4. [`create-storybook`](https://www.npmjs.com/package/create-storybook?activeTab=versions)
+16. Push
+17. Manually create a GitHub Release at https://github.com/storybookjs/storybook/releases/new with:
+    1.  Create new tag: `v<VERSION>` (e.g., `v8.3.7`)
+    2.  Target: your branch (e.g., `patch-8-3-7`)
+    3.  Previous tag: `v<PREVIOUS_VERSION>` (e.g., `v8.3.6`)
+    4.  Title: `v<VERSION>` (e.g., `v8.3.7`)
+    5.  Description: The content you added to `CHANGELOG.md`
+    6.  Untick _"Set as the latest release"_
+18. Cherry-pick your changelog changes into `next`, so they are actually visible 
+    1.  Checkout the `next` branch
+    2.  Cherry-pick the commit you created with your changelog modifications
+    3.  Push
+
+Done. 🎉
+
 ## Releasing Locally in an Emergency 🚨
 
 Things can fail, code can break, and bugs can exist. When automation is broken, there may be a need for an emergency escape hatch to release new fixes. In such a situation, it's valid to run the whole release process locally instead of relying on pull requests and workflows. You don't need to create pull requests or split preparation and publishing; you can do it all at once, but make sure you still follow the correct branching strategy.

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "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.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "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.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/backgrounds/src/components/Tool.tsx

@@ -124,7 +124,7 @@ const Pure = memo(function PureTool(props: PureProps) {
                       onHide();
                     },
                   })),
-                ]}
+                ].flat()}
               />
             );
           }}

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "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.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "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.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "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.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "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.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "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.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "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.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "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.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",

code/addons/test/src/postinstall.ts

@@ -58,7 +58,9 @@ export default async function postInstall(options: PostinstallOptions) {
     '@storybook/experimental-nextjs-vite',
     '@storybook/sveltekit',
   ].includes(info.frameworkPackageName)
-    ? info.frameworkPackageName
+    ? info.frameworkPackageName === '@storybook/nextjs'
+      ? '@storybook/experimental-nextjs-vite'
+      : info.frameworkPackageName
     : info.rendererPackageName &&
         ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes(
           info.rendererPackageName
@@ -431,7 +433,7 @@ const getVitestPluginInfo = (framework: string) => {
   let frameworkPluginCall = '';
   let frameworkPluginDocs = '';
 
-  if (framework === '@storybook/nextjs') {
+  if (framework === '@storybook/nextjs' || framework === '@storybook/experimental-nextjs-vite') {
     frameworkPluginImport =
       "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';";
     frameworkPluginDocs =

code/addons/themes/README.md

@@ -36,7 +36,7 @@ Don't see your favorite tool listed? Don't worry! That doesn't mean this addon i
 
 ### ❗️ Overriding theme
 
-If you want to override your theme for a particular component or story, you can use the `themes.themeOverride` parameter.
+If you want to override your theme for a particular component or story, you can use the `globals.theme` parameter.
 
 ```js
 import React from 'react';

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.5.0-alpha.2",
+  "version": "8.5.0-alpha.3",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",