storybookjs · shilman · Mar 27, 2024 · Jun 21, 2023 · Jun 22, 2023 · Sep 4, 2023
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -17,7 +17,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:18.18.0
+      - image: cimg/node:18.19.1
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -30,7 +30,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:18.18.0-browsers
+      - image: cimg/node:18.19.1-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -66,6 +66,7 @@ orbs:
   browser-tools: circleci/browser-tools@1.4.1
   discord: antonioned/discord@0.1.0
   codecov: codecov/codecov@3.2.4
+  nx: nrwl/nx@1.6.2
 
 commands:
   cancel-workflow-on-failure:
@@ -190,6 +191,9 @@ jobs:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - nx/set-shas:
+          main-branch-name: "next"
+          workflow-name: << pipeline.parameters.workflow >>
       - run:
           name: Check
           command: |

diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.18.2
+18.19.1
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+## 8.0.4
+
+- Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!
+- CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!
+- CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!
+
+## 8.0.3
+
+- Bug: Remove redundant component check, as we auto-generate titles from the file system - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!
+- UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!
+
 ## 8.0.2
 
 - Addon Docs: Fix [Object object] displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,20 @@
+## 8.1.0-alpha.5
+
+- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
+- Args: Add possibility to mark controls as read-only - [#26577](https://github.com/storybookjs/storybook/pull/26577), thanks @valentinpalkovic!
+- Automigrations: Add migration note about new react-docgen default - [#26620](https://github.com/storybookjs/storybook/pull/26620), thanks @valentinpalkovic!
+- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
+- CLI: Automigrations copy edits - [#26342](https://github.com/storybookjs/storybook/pull/26342), thanks @joevaugh4n!
+- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
+- Codemods: Escape filename given as argument - [#26430](https://github.com/storybookjs/storybook/pull/26430), thanks @YukiKitagata!
+- NextJS: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!
+- Node: Safe use of `document` for preview - [#24248](https://github.com/storybookjs/storybook/pull/24248), thanks @DylanPiercey!
+- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
+- Test: Add @storybook/test as dev dependency - [#26458](https://github.com/storybookjs/storybook/pull/26458), thanks @arnabsen!
+- Theming: Update emotion dependencies - [#26623](https://github.com/storybookjs/storybook/pull/26623), thanks @SimenB!
+- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
+- Webpack: Hide runtime errors - [#23175](https://github.com/storybookjs/storybook/pull/23175), thanks @donaldpipowitch!
+
 ## 8.1.0-alpha.4
 
 - Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!

diff --git a/CHANGELOG.v1-5.md b/CHANGELOG.v1-5.md
@@ -3527,7 +3527,7 @@ See [the RC announcement](https://gist.github.com/shilman/0332090b63f1798a58ed8d
 - UI: Fix ie 11 ([#5599](https://github.com/storybookjs/storybook/pull/5599))
 - CLI: Fix for when outputDir is an absolute path ([#5573](https://github.com/storybookjs/storybook/pull/5573))
 - CLI: Avoid false-negative checks for port ([#5565](https://github.com/storybookjs/storybook/pull/5565))
-- Core: Prioritise programatic configuration ([#5564](https://github.com/storybookjs/storybook/pull/5564))
+- Core: Prioritise programmatic configuration ([#5564](https://github.com/storybookjs/storybook/pull/5564))
 - UI: FIX clear search ([#5550](https://github.com/storybookjs/storybook/pull/5550))
 - Core: Transpile safe-eval package ([#5498](https://github.com/storybookjs/storybook/pull/5498))
 - UI: Add default backgrounds to official example ([#5585](https://github.com/storybookjs/storybook/pull/5585))
@@ -5258,7 +5258,7 @@ NOTE: As part of the generic addon decorators, we've reversed the order of addon
 #### Features
 
 - Storybook for Marko [#3504](https://github.com/storybookjs/storybook/pull/3504)
-- Storybook addon Jest angular suport [#3532](https://github.com/storybookjs/storybook/pull/3532)
+- Storybook addon Jest angular support [#3532](https://github.com/storybookjs/storybook/pull/3532)
 - Storybook for HTML snippets [#3475](https://github.com/storybookjs/storybook/pull/3475)
 - Feature/config custom chrome executable path [#3518](https://github.com/storybookjs/storybook/pull/3518)
 - Channel-postmessage: handle events from the same window [#3519](https://github.com/storybookjs/storybook/pull/3519)
@@ -9224,7 +9224,7 @@ Minor features including a new "events" addon, as well as the usual bugfixes, cl
 
 - Fixed knobs addon editing bug [#1233](https://github.com/storybookjs/storybook/pull/1233)
 - Fix bug in addons/graphql in reIndentQuery [#1207](https://github.com/storybookjs/storybook/pull/1207)
-- Marksy initialized with mtrcConf intead of marksyConf [#1205](https://github.com/storybookjs/storybook/pull/1205)
+- Marksy initialized with mtrcConf instead of marksyConf [#1205](https://github.com/storybookjs/storybook/pull/1205)
 
 #### Documentation
 

diff --git a/CHANGELOG.v6.md b/CHANGELOG.v6.md
@@ -1950,7 +1950,7 @@ Fix bad publish of `6.4.0-alpha.27` to the `latest` tag
 ### Bug Fixes
 
 - Controls: Don't set arg in validateOptions if it would be `undefined` ([#15654](https://github.com/storybookjs/storybook/pull/15654))
-- Trailing comma handling for "-s" command line paramenter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
+- Trailing comma handling for "-s" command line parameter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
 - Controls: Fix color matching behavior for non-string types ([#15549](https://github.com/storybookjs/storybook/pull/15549))
 - Composition: Fix refs ordering ([#15527](https://github.com/storybookjs/storybook/pull/15527))
 
@@ -1963,7 +1963,7 @@ Fix bad publish of `6.4.0-alpha.27` to the `latest` tag
 
 ### Bug Fixes
 
-- CLI: Fix trailing comma handling for "-s" command line paramenter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
+- CLI: Fix trailing comma handling for "-s" command line parameter ([#15615](https://github.com/storybookjs/storybook/pull/15615))
 - Components: Lazy-load syntax highlighter ([#15607](https://github.com/storybookjs/storybook/pull/15607))
 
 ### Maintenance

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -4177,7 +4177,7 @@ For more information, [see the documentation](https://github.com/storybookjs/sto
 
 Storybook has built-in Typescript support in 6.0. That means you should remove your complex Typescript configurations from your `.storybook` config. We've tried to pick sensible defaults that work out of the box, especially for nice prop table generation in `@storybook/addon-docs`.
 
-To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. You should also remove `@storybook/preset-typescript`, which is superceded by the built-in configuration.
+To migrate from an old setup, we recommend deleting any typescript-specific webpack/babel configurations in your project. You should also remove `@storybook/preset-typescript`, which is superseded by the built-in configuration.
 
 If you want to override the defaults, see the [typescript configuration docs](https://storybook.js.org/docs/react/configure/typescript).
 
@@ -5570,7 +5570,7 @@ The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-li
 
 1. `imageSnapshot` test function was extracted from `addon-storyshots`
    and moved to a new package - `addon-storyshots-puppeteer` that now will
-   be dependant on puppeteer. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
+   be dependent on puppeteer. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
 2. `getSnapshotFileName` export was replaced with the `Stories2SnapsConverter`
    class that now can be overridden for a custom implementation of the
    snapshot-name generation. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter)

diff --git a/code/addons/actions/src/models/ActionOptions.ts b/code/addons/actions/src/models/ActionOptions.ts
@@ -1,7 +1,7 @@
 import type { Options as TelejsonOptions } from 'telejson';
 
 interface Options {
-  depth: number; // backards compatibility, remove in 7.0
+  depth: number; // backwards compatibility, remove in 7.0
   clearOnStoryChange: boolean;
   limit: number;
   implicit: boolean;

diff --git a/code/addons/actions/src/runtime/action.ts b/code/addons/actions/src/runtime/action.ts
@@ -83,7 +83,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
     }
 
     const channel = addons.getChannel();
-    // this makes sure that in js enviroments like react native you can still get an id
+    // this makes sure that in js environments like react native you can still get an id
     const id = generateId();
     const minDepth = 5; // anything less is really just storybook internals
     const serializedArgs = args.map(serializeArg);

diff --git a/code/addons/docs/ember/README.md b/code/addons/docs/ember/README.md
@@ -55,7 +55,7 @@ import docJson from '../dist/storybook-docgen/index.json';
 setJSONDoc(docJson);
 ```
 
-Finally, be sure to fill in the `component` field in your story metadata. This should be a string that matches the name of the `@class` used in your souce comments:
+Finally, be sure to fill in the `component` field in your story metadata. This should be a string that matches the name of the `@class` used in your source comments:
 
 ```ts
 export default {

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
@@ -1,4 +1,4 @@
-import { dirname, join } from 'path';
+import { dirname, join, isAbsolute } from 'path';
 import rehypeSlug from 'rehype-slug';
 import rehypeExternalLinks from 'rehype-external-links';
 
@@ -147,6 +147,8 @@ export const viteFinal = async (config: any, options: Options) => {
       resolve: {
         alias: {
           react,
+          // Vite doesn't respect export maps when resolving an absolute path, so we need to do that manually here
+          ...(isAbsolute(reactDom) && { 'react-dom/server': `${reactDom}/server.browser.js` }),
           'react-dom': reactDom,
           '@mdx-js/react': mdx,
           /**

diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.jsx b/code/addons/docs/template/stories/docs2/ResolvedReact.jsx
@@ -0,0 +1,28 @@
+import React, * as ReactExport from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactDomServer from 'react-dom/server';
+
+export const ResolvedReact = () => {
+  return (
+    <>
+      <p>
+        <code>react</code>:{' '}
+        <code data-testid="component-react">
+          {ReactExport.version ?? 'no version export found'}
+        </code>
+      </p>
+      <p>
+        <code>react-dom</code>:{' '}
+        <code data-testid="component-react-dom">
+          {ReactDom.version ?? 'no version export found'}
+        </code>
+      </p>
+      <p>
+        <code>react-dom/server</code>:{' '}
+        <code data-testid="component-react-dom-server">
+          {ReactDomServer.version ?? 'no version export found'}
+        </code>
+      </p>
+    </>
+  );
+};
diff --git a/code/addons/docs/template/stories/docs2/ResolvedReact.mdx b/code/addons/docs/template/stories/docs2/ResolvedReact.mdx
@@ -1,13 +1,29 @@
-import { version as reactVersion } from 'react';
-import { version as reactDomVersion } from 'react-dom';
-import { ResolvedReactVersion } from './ResolvedReactVersion';
+import { Meta } from '@storybook/blocks';
+import * as ReactExport from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactDomServer from 'react-dom/server';
+import { ResolvedReact } from './ResolvedReact';
+
+<Meta title="docs2/ResolvedReact" name="MDX"/>
+
+This doc is used to display the resolved version of React and its related packages.
+As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version.
+
+The MDX here ensures that it works in an MDX file.
+
+- See the [autodocs](/docs/addons-docs-docs2-resolvedreact--docs) for how it resolves in autodocs.
+- See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
+
+**Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.**
 
 ## In MDX
 
-<code>react</code>: <code data-testid="mdx-react">{reactVersion}</code>
+<code>react</code>: <code data-testid="mdx-react">{ReactExport.version ?? 'no version export found'}</code>
+
+<code>react-dom</code>: <code data-testid="mdx-react-dom">{ReactDom.version ?? 'no version export found'}</code>
 
-<code>react-dom</code>: <code data-testid="mdx-react-dom">{reactDomVersion}</code>
+<code>react-dom/server</code>: <code data-testid="mdx-react-dom-server">{ReactDomServer.version ?? 'no version export found'}</code>
 
-## In `ResolvedReactVersion` component
+## In `ResolvedReact` component
 
-<ResolvedReactVersion />
+<ResolvedReact />
diff --git a/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx b/code/addons/docs/template/stories/docs2/ResolvedReactVersion.jsx
diff --git a/code/addons/docs/template/stories/docs2/resolved-react.stories.ts b/code/addons/docs/template/stories/docs2/resolved-react.stories.ts
@@ -0,0 +1,70 @@
+import { within, expect } from '@storybook/test';
+import * as ReactExport from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactDomServer from 'react-dom/server';
+
+/**
+ * This component is used to display the resolved version of React and its related packages.
+ * As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version.
+ *
+ * The autodocs here ensures that it also works in the generated documentation.
+ *
+ * - See the [MDX docs](/docs/addons-docs-docs2-resolvedreact--mdx) for how it resolves in MDX.
+ * - See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
+ *
+ * **Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.**
+ */
+export default {
+  title: 'Docs2/ResolvedReact',
+  component: globalThis.Components.Html,
+  tags: ['autodocs'],
+  argTypes: {
+    content: { table: { disable: true } },
+  },
+  args: {
+    content: `
+      <p>
+        <code>react</code>: <code data-testid="react">${
+          ReactExport.version ?? 'no version export found'
+        }</code>
+      </p>
+      <p>
+        <code>react-dom</code>: <code data-testid="react-dom">${
+          ReactDom.version ?? 'no version export found'
+        }</code>
+      </p>
+      <p>
+        <code>react-dom/server</code>: <code data-testid="react-dom-server">${
+          ReactDomServer.version ?? 'no version export found'
+        }</code>
+      </p>
+  `,
+  },
+  parameters: {
+    docs: {
+      name: 'ResolvedReact',
+    },
+  },
+};
+
+export const Story = {
+  // This test is more or less the same as the E2E test we have for MDX and autodocs entries in addon-docs.spec.ts
+  play: async ({ canvasElement, step, parameters }: any) => {
+    const canvas = await within(canvasElement);
+
+    const actualReactVersion = (await canvas.findByTestId('react')).textContent;
+    const actualReactDomVersion = (await canvas.findByTestId('react-dom')).textContent;
+    const actualReactDomServerVersion = (await canvas.findByTestId('react-dom-server')).textContent;
+
+    step('Expect React packages to all resolve to the same version', () => {
+      // react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed.
+      expect(actualReactDomVersion!.startsWith(actualReactVersion!)).toBeTruthy();
+
+      if (parameters.renderer === 'preact') {
+        // the preact/compat alias doesn't have a version export in react-dom/server
+        return;
+      }
+      expect(actualReactDomServerVersion).toBe(actualReactVersion);
+    });
+  },
+};
diff --git a/code/addons/docs/web-components/README.md b/code/addons/docs/web-components/README.md
@@ -31,7 +31,7 @@
 
 In order to get [Props tables](..docs/../../docs/props-tables.md) documentation for web-components you will need to have a [custom-elements.json](https://github.com/webcomponents/custom-elements-json) file.
 
-You can hand write it or better generate it. Depending on the web components sugar you are choosing your milage may vary.
+You can hand write it or better generate it. Depending on the web components sugar you are choosing your mileage may vary.
 
 Known analyzers that output `custom-elements.json` v1.0.0:
 

diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx
@@ -74,6 +74,7 @@ const flip = ({ width, height, ...styles }: ViewportStyles) => ({
 
 const ActiveViewportSize = styled.div(() => ({
   display: 'inline-flex',
+  alignItems: 'center',
 }));
 
 const ActiveViewportLabel = styled.div(({ theme }) => ({

diff --git a/code/builders/builder-webpack5/src/presets/preview-preset.ts b/code/builders/builder-webpack5/src/presets/preview-preset.ts
@@ -9,9 +9,13 @@ export const entries = async (_: unknown, options: any) => {
     // Suppress informational messages when --quiet is specified. webpack-hot-middleware's quiet
     // parameter would also suppress warnings.
     result = result.concat(
-      `${require.resolve('webpack-hot-middleware/client')}?reload=true&quiet=false&noInfo=${
-        options.quiet
-      }`
+      `${require.resolve(
+        'webpack-hot-middleware/client'
+      )}?reload=true&quiet=false&overlay=${JSON.stringify({
+        errors: true,
+        warnings: false,
+        runtimeErrors: false,
+      })}&noInfo=${options.quiet}`
     );
   }