Release: Prerelease 8.0.0-alpha.4

.circleci/config.yml

@@ -652,27 +652,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 20
+          parallelism: 19
           requires:
             - build
       - build-sandboxes:
-          parallelism: 20
+          parallelism: 19
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 17
+          parallelism: 16
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - bench:
@@ -706,30 +706,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 33
+          parallelism: 32
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 33
+          parallelism: 32
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 30
+          parallelism: 29
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 28
+          parallelism: 27
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 28
+          parallelism: 27
           requires:
             - build-sandboxes
 

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 7.6.5
+
+- Angular: Update Angular cli templates - [#25152](https://github.com/storybookjs/storybook/pull/25152), thanks [@Marklb](https://github.com/Marklb)!
+- Blocks: Fix Subtitle block for unattached docs pages - [#25157](https://github.com/storybookjs/storybook/pull/25157), thanks [@kripod](https://github.com/kripod)!
+- SvelteKit: Fix missing `$app` modules - [#25132](https://github.com/storybookjs/storybook/pull/25132), thanks [@paoloricciuti](https://github.com/paoloricciuti)!
+
 ## 7.6.4
 
 - Angular: Fix CSF Plugin - [#25098](https://github.com/storybookjs/storybook/pull/25098), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

CHANGELOG.prerelease.md

@@ -1,3 +1,18 @@
+## 8.0.0-alpha.4
+
+- API: Remove stories.json support - [#25236](https://github.com/storybookjs/storybook/pull/25236), thanks [@shilman](https://github.com/shilman)!
+- Addon Docs: Remove `react` peer dependency - [#24881](https://github.com/storybookjs/storybook/pull/24881), thanks [@JReinhold](https://github.com/JReinhold)!
+- Addon-docs: Support `<StrictMode />` and `<Suspense />` in source viewer - [#19785](https://github.com/storybookjs/storybook/pull/19785), thanks [@zhyd1997](https://github.com/zhyd1997)!
+- Angular: Add random attribute to bootstrapped selector - [#24972](https://github.com/storybookjs/storybook/pull/24972), thanks [@Marklb](https://github.com/Marklb)!
+- Angular: Reduce the warnings from `ts-loader` via stricter list of `includes` - [#24531](https://github.com/storybookjs/storybook/pull/24531), thanks [@ndelangen](https://github.com/ndelangen)!
+- Blocks: Render colors in the same order as provided - [#25001](https://github.com/storybookjs/storybook/pull/25001), thanks [@kaelig](https://github.com/kaelig)!
+- CLI: Add prompt-only automigrate asking for react-removal - [#25215](https://github.com/storybookjs/storybook/pull/25215), thanks [@ndelangen](https://github.com/ndelangen)!
+- CLI: No longer add react in init - [#25196](https://github.com/storybookjs/storybook/pull/25196), thanks [@ndelangen](https://github.com/ndelangen)!
+- Core: Set bundle target to `node18` - [#25239](https://github.com/storybookjs/storybook/pull/25239), thanks [@shilman](https://github.com/shilman)!
+- SvelteKit: Fix missing `$app` modules - [#25132](https://github.com/storybookjs/storybook/pull/25132), thanks [@paoloricciuti](https://github.com/paoloricciuti)!
+- SvelteKit: Support 2.0 modules with mocks - [#25244](https://github.com/storybookjs/storybook/pull/25244), thanks [@paoloricciuti](https://github.com/paoloricciuti)!
+- UI: Embed `react-textarea-autosize` types - [#25235](https://github.com/storybookjs/storybook/pull/25235), thanks [@ndelangen](https://github.com/ndelangen)!
+
 ## 8.0.0-alpha.3
 
 - Addon-docs: Fix storybook MDX check - [#24696](https://github.com/storybookjs/storybook/pull/24696), thanks [@shilman](https://github.com/shilman)!

CONTRIBUTING.md

@@ -25,6 +25,13 @@ If you run `yarn start` and encounter the following error, try rerunning `yarn s
 ```sh
 >  NX   ENOENT: no such file or directory, open 'storybook/code/node_modules/nx/package.json'
 ```
+If you are a Storybook contributor and still experience issues, it is recommended that you verify your local Storybook instance for any unintentional local changes. To do this, you can use the following command:
+
+```sh
+git clean -dx --dry-run
+```
+
+By executing this command, you will be able to see which untracked or ignored files and directories will be removed from your working directory if you run it with the `--force` flag. Before running the command with the `--force` flag, please commit any local changes that you want to keep. Otherwise they will be lost.
 
 ## Forked repos
 

MIGRATION.md

@@ -12,6 +12,7 @@
     - [Icons is deprecated](#icons-is-deprecated)
     - [React-docgen component analysis by default](#react-docgen-component-analysis-by-default)
     - [Removed postinstall](#removed-postinstall)
+    - [Removed stories.json](#removed-storiesjson)
   - [Framework-specific changes](#framework-specific-changes)
     - [Angular: Drop support for Angular \< 15](#angular-drop-support-for-angular--15)
     - [Next.js: Drop support for version \< 13.5](#nextjs-drop-support-for-version--135)
@@ -473,6 +474,12 @@ For more information see: https://storybook.js.org/docs/react/api/main-config-ty
 
 We removed the `@storybook/postinstall` package, which provided some utilities for addons to programmatically modify user configuration files on install. This package was years out of date, so this should be a non-disruptive change. If your addon used the package, you can view the old source code [here](https://github.com/storybookjs/storybook/tree/release-7-5/code/lib/postinstall) and adapt it into your addon.
 
+#### Removed stories.json
+
+In addition to the built storybook, `storybook build` generates two files, `index.json` and `stories.json`, that list out the contents of the Storybook. `stories.json` is a legacy format and we included it for backwards compatibility. As of 8.0 we no longer build `stories.json` by default, and we will remove it completely in 9.0.
+
+In the meantime if you have code that relies on `stories.json`, you can find code that transforms the "v4" `index.json` to the "v3" `stories.json` format (and their respective TS types): https://github.com/storybookjs/storybook/blob/release-7-5/code/lib/core-server/src/utils/stories-json.ts#L71-L91
+
 ### Framework-specific changes
 
 #### Angular: Drop support for Angular \< 15

code/addons/docs/package.json

@@ -112,21 +112,17 @@
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "fs-extra": "^11.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "remark-external-links": "^8.0.0",
     "remark-slug": "^6.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@rollup/pluginutils": "^5.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
   "publishConfig": {
     "access": "public"
   },

code/addons/docs/src/preset.ts

@@ -10,7 +10,26 @@ import type { JSXOptions, CompileOptions } from '@storybook/mdx2-csf';
 import { global } from '@storybook/global';
 import { loadCsf } from '@storybook/csf-tools';
 import { logger } from '@storybook/node-logger';
-import { ensureReactPeerDeps } from './ensure-react-peer-deps';
+
+/**
+ * Get the resolvedReact preset, which points either to
+ * the user's react dependencies or the react dependencies shipped with addon-docs
+ * if the user has not installed react explicitly.
+ */
+const getResolvedReact = async (options: Options) => {
+  const resolvedReact = (await options.presets.apply('resolvedReact', {})) as any;
+  // resolvedReact should always be set by the time we get here, but just in case, we'll default to addon-docs's react dependencies
+  return {
+    react: resolvedReact.react ?? dirname(require.resolve('react/package.json')),
+    reactDom: resolvedReact.reactDom ?? dirname(require.resolve('react-dom/package.json')),
+    // In Webpack, symlinked MDX files will cause @mdx-js/react to not be resolvable if it is not hoisted
+    // This happens for the SB monorepo's template stories when a sandbox has a different react version than
+    // addon-docs, causing addon-docs's dependencies not to be hoisted.
+    // This might also affect regular users who have a similar setup.
+    // Explicitly alias @mdx-js/react to avoid this issue.
+    mdx: resolvedReact.mdx ?? dirname(require.resolve('@mdx-js/react/package.json')),
+  };
+};
 
 async function webpack(
   webpackConfig: any = {},
@@ -90,6 +109,35 @@ async function webpack(
     ? require.resolve('@storybook/mdx1-csf/loader')
     : require.resolve('@storybook/mdx2-csf/loader');
 
+  // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
+  const { react, reactDom, mdx } = await getResolvedReact(options);
+
+  let alias;
+  if (Array.isArray(webpackConfig.resolve?.alias)) {
+    alias = [...webpackConfig.resolve?.alias];
+    alias.push(
+      {
+        name: 'react',
+        alias: react,
+      },
+      {
+        name: 'react-dom',
+        alias: reactDom,
+      },
+      {
+        name: '@mdx-js/react',
+        alias: mdx,
+      }
+    );
+  } else {
+    alias = {
+      ...webpackConfig.resolve?.alias,
+      react,
+      'react-dom': reactDom,
+      '@mdx-js/react': mdx,
+    };
+  }
+
   const result = {
     ...webpackConfig,
     plugins: [
@@ -99,7 +147,10 @@ async function webpack(
         ? [(await import('@storybook/csf-plugin')).webpack(csfPluginOptions)]
         : []),
     ],
-
+    resolve: {
+      ...webpackConfig.resolve,
+      alias,
+    },
     module: {
       ...module,
       rules: [
@@ -179,6 +230,25 @@ export const viteFinal = async (config: any, options: Options) => {
   const { plugins = [] } = config;
   const { mdxPlugin } = await import('./plugins/mdx-plugin');
 
+  // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
+  const { react, reactDom } = await getResolvedReact(options);
+
+  const reactAliasPlugin = {
+    name: 'storybook:react-alias',
+    enforce: 'pre',
+    config: () => ({
+      resolve: {
+        alias: {
+          react,
+          'react-dom': reactDom,
+        },
+      },
+    }),
+  };
+
+  // add alias plugin early to ensure any other plugins that also add the aliases will override this
+  // eg. the preact vite plugin adds its own aliases
+  plugins.unshift(reactAliasPlugin);
   plugins.push(mdxPlugin(options));
 
   return config;
@@ -192,7 +262,18 @@ const webpackX = webpack as any;
 const indexersX = indexers as any;
 const docsX = docs as any;
 
-ensureReactPeerDeps();
+/**
+ * If the user has not installed react explicitly in their project,
+ * the resolvedReact preset will not be set.
+ * We then set it here in addon-docs to use addon-docs's react version that always exists.
+ * This is just a fallback that never overrides the existing preset,
+ * but ensures that there is always a resolved react.
+ */
+export const resolvedReact = async (existing: any) => ({
+  react: existing?.react ?? dirname(require.resolve('react/package.json')),
+  reactDom: existing?.reactDom ?? dirname(require.resolve('react-dom/package.json')),
+  mdx: existing?.mdx ?? dirname(require.resolve('@mdx-js/react/package.json')),
+});
 
 const optimizeViteDeps = [
   '@mdx-js/react',

code/addons/docs/template/stories/docs2/ResolvedReact.mdx

@@ -0,0 +1,13 @@
+import { version as reactVersion } from 'react';
+import { version as reactDomVersion } from 'react-dom';
+import { ResolvedReactVersion } from './ResolvedReactVersion';
+
+## In MDX
+
+<code>react</code>: <code data-testid="mdx-react">{reactVersion}</code>
+
+<code>react-dom</code>: <code data-testid="mdx-react-dom">{reactDomVersion}</code>
+
+## In `ResolvedReactVersion` component
+
+<ResolvedReactVersion />

code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx

@@ -0,0 +1,15 @@
+import React, { version as reactVersion } from 'react';
+import { version as reactDomVersion } from 'react-dom';
+
+export const ResolvedReactVersion = () => {
+  return (
+    <>
+      <p>
+        <code>react</code>: <code data-testid="component-react">{reactVersion}</code>
+      </p>
+      <p>
+        <code>react-dom</code>: <code data-testid="component-react-dom">{reactDomVersion}</code>
+      </p>
+    </>
+  );
+};

code/addons/essentials/package.json

@@ -78,10 +78,6 @@
   "devDependencies": {
     "typescript": "^5.3.2"
   },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
   "publishConfig": {
     "access": "public"
   },

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

@@ -186,4 +186,31 @@ test.describe('addon-docs', () => {
     await expect(stories.nth(1)).toHaveText('Basic');
     await expect(stories.last()).toHaveText('Another');
   });
+
+  test('should resolve react to the correct version', async ({ page }) => {
+    const sbPage = new SbPage(page);
+    await sbPage.navigateToUnattachedDocs('addons/docs/docs2', 'ResolvedReact');
+    const root = sbPage.previewRoot();
+
+    let expectedReactVersion = /^18/;
+    if (
+      templateName.includes('preact') ||
+      templateName.includes('react-webpack/17') ||
+      templateName.includes('react-vite/17')
+    ) {
+      expectedReactVersion = /^17/;
+    } else if (templateName.includes('react16')) {
+      expectedReactVersion = /^16/;
+    }
+
+    const mdxReactVersion = await root.getByTestId('mdx-react');
+    const mdxReactDomVersion = await root.getByTestId('mdx-react-dom');
+    const componentReactVersion = await root.getByTestId('component-react');
+    const componentReactDomVersion = await root.getByTestId('component-react-dom');
+
+    await expect(mdxReactVersion).toHaveText(expectedReactVersion);
+    await expect(mdxReactDomVersion).toHaveText(expectedReactVersion);
+    await expect(componentReactVersion).toHaveText(expectedReactVersion);
+    await expect(componentReactDomVersion).toHaveText(expectedReactVersion);
+  });
 });