Release: Prerelease 8.5.0-alpha.4

.circleci/config.yml

@@ -211,6 +211,57 @@ 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: .
+      # if there is a base branch AND a PR number in parameters, benchmark packages against those
+      # this happens when run against a PR
+      - when:
+          condition:
+            and:
+              - << pipeline.parameters.ghBaseBranch >>
+              - << pipeline.parameters.ghPrNumber >>
+          steps:
+            - run:
+                name: Benchmarking packages against base branch
+                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 --base-branch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload
+      # if there is a NOT a base branch OR NOT a PR number in parameters, just upload benchmarks for the branch
+      # this happens when runned directly on branches, like next or main
+      - when:
+          condition:
+            or:
+              - not: << pipeline.parameters.ghBaseBranch >>
+              - not: << pipeline.parameters.ghPrNumber >>
+          steps:
+            - run:
+                name: Uploading package benchmarks for branch
+                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 --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 +594,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 +804,9 @@ workflows:
       - knip:
           requires:
             - build
+      - bench-packages:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -799,7 +853,7 @@ workflows:
           parallelism: 5
           requires:
             - create-sandboxes
-      - bench:
+      - bench-sandboxes:
           parallelism: 5
           requires:
             - build-sandboxes
@@ -828,6 +882,9 @@ workflows:
       - knip:
           requires:
             - build
+      - bench-packages:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -883,7 +940,7 @@ workflows:
       - test-ui-testing-module:
           requires:
             - build
-      - bench:
+      - bench-sandboxes:
           parallelism: 5
           requires:
             - build-sandboxes
@@ -904,6 +961,9 @@ workflows:
       - knip:
           requires:
             - build
+      - bench-packages:
+          requires:
+            - build
       - check:
           requires:
             - build
@@ -920,30 +980,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 38
+          parallelism: 37
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 38
+          parallelism: 37
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 35
+          parallelism: 34
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 33
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 33
+          parallelism: 32
           requires:
             - build-sandboxes
       - vitest-integration:
@@ -977,7 +1037,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.4
+
+- Next.js: Add support for Next 15 - [#29587](https://github.com/storybookjs/storybook/pull/29587), thanks @yannbf!
+- UI: Add Yarn to About Section - [#29225](https://github.com/storybookjs/storybook/pull/29225), thanks @grantwforsythe!
+
 ## 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!

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/backgrounds/src/components/Tool.tsx

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

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/viewport/src/components/Tool.tsx

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

code/core/src/manager/components/upgrade/UpgradeBlock.tsx

@@ -14,7 +14,7 @@ interface UpgradeBlockProps {
 
 export const UpgradeBlock: FC<UpgradeBlockProps> = ({ onNavigateToWhatsNew }) => {
   const api = useStorybookApi();
-  const [activeTab, setActiveTab] = useState<'npm' | 'pnpm'>('npm');
+  const [activeTab, setActiveTab] = useState<'npm' | 'yarn' | 'pnpm'>('npm');
 
   return (
     <Container>
@@ -24,12 +24,17 @@ export const UpgradeBlock: FC<UpgradeBlockProps> = ({ onNavigateToWhatsNew }) =>
         <ButtonTab active={activeTab === 'npm'} onClick={() => setActiveTab('npm')}>
           npm
         </ButtonTab>
+        <ButtonTab active={activeTab === 'yarn'} onClick={() => setActiveTab('yarn')}>
+          yarn
+        </ButtonTab>
         <ButtonTab active={activeTab === 'pnpm'} onClick={() => setActiveTab('pnpm')}>
           pnpm
         </ButtonTab>
       </Tabs>
       <Code>
-        {activeTab === 'npm' ? 'npx storybook@latest upgrade' : 'pnpm dlx storybook@latest upgrade'}
+        {activeTab === 'npm'
+          ? 'npx storybook@latest upgrade'
+          : `${activeTab} dlx storybook@latest upgrade`}
       </Code>
       {onNavigateToWhatsNew && (
         // eslint-disable-next-line jsx-a11y/anchor-is-valid

code/e2e-tests/addon-docs.spec.ts

@@ -189,6 +189,10 @@ test.describe('addon-docs', () => {
   });
 
   test('should resolve react to the correct version', async ({ page }) => {
+    test.skip(
+      templateName?.includes('nextjs'),
+      'TODO: remove this once sandboxes are synced (SOON!!)'
+    );
     // Arrange - Navigate to MDX docs
     const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'mdx', 'docs');
@@ -201,6 +205,7 @@ test.describe('addon-docs', () => {
     } else if (templateName.includes('react16')) {
       expectedReactVersionRange = /^16/;
     } else if (
+      templateName.includes('nextjs/default-ts') ||
       templateName.includes('nextjs/prerelease') ||
       templateName.includes('react-vite/prerelease') ||
       templateName.includes('react-webpack/prerelease')

code/e2e-tests/framework-nextjs.spec.ts

@@ -53,10 +53,7 @@ test.describe('Next.js', () => {
     test.beforeEach(async ({ page }) => {
       sbPage = new SbPage(page, expect);
 
-      await sbPage.navigateToStory(
-        'stories/frameworks/nextjs-nextjs-default-ts/Navigation',
-        'default'
-      );
+      await sbPage.navigateToStory('stories/frameworks/nextjs/Navigation', 'default');
       root = sbPage.previewRoot();
     });
 
@@ -88,7 +85,7 @@ test.describe('Next.js', () => {
     test.beforeEach(async ({ page }) => {
       sbPage = new SbPage(page, expect);
 
-      await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-ts/Router', 'default');
+      await sbPage.navigateToStory('stories/frameworks/nextjs/Router', 'default');
       root = sbPage.previewRoot();
     });
 

code/frameworks/nextjs/package.json

@@ -57,6 +57,11 @@
       "import": "./dist/compatibility/redirect-status-code.compat.mjs",
       "require": "./dist/compatibility/redirect-status-code.compat.js"
     },
+    "./dist/compatibility/draft-mode.compat": {
+      "types": "./dist/compatibility/draft-mode.compat.d.ts",
+      "import": "./dist/compatibility/draft-mode.compat.mjs",
+      "require": "./dist/compatibility/draft-mode.compat.js"
+    },
     "./export-mocks": {
       "types": "./dist/export-mocks/index.d.ts",
       "import": "./dist/export-mocks/index.mjs",
@@ -171,12 +176,12 @@
     "@types/babel__preset-env": "^7",
     "@types/loader-utils": "^2.0.5",
     "@types/react-refresh": "^0",
-    "next": "^14.1.0",
+    "next": "^15.0.3",
     "typescript": "^5.3.2",
     "webpack": "^5.65.0"
   },
   "peerDependencies": {
-    "next": "^13.5.0 || ^14.0.0",
+    "next": "^13.5.0 || ^14.0.0 || ^15.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
@@ -212,6 +217,7 @@
       "./src/export-mocks/navigation/index.ts",
       "./src/compatibility/segment.compat.ts",
       "./src/compatibility/redirect-status-code.compat.ts",
+      "./src/compatibility/draft-mode.compat.ts",
       "./src/next-image-loader-stub.ts",
       "./src/images/decorator.tsx",
       "./src/images/next-legacy-image.tsx",