Merge branch 'latest-release'

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 8.0.5
+
+- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
+- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
+- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
+- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
+- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
+
 ## 8.0.4
 
 - Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

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,
           /**

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>
+    </>
+  );
+};

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 />

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);
+    });
+  },
+};

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "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.0.4",
+  "version": "8.0.5",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

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 }) => ({

code/builders/builder-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

code/builders/builder-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"