Merge pull request #26933 from storybookjs/version-patch-from-8.0.9

Release: Patch 8.0.10
storybookjs · May 5, 2024 · 7e4e211 · 7e4e211
2 parents 3c598bd + d61d3d6
commit 7e4e211
Show file tree

Hide file tree

Showing 23 changed files with 110 additions and 62 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 8.0.10
+
+- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
+- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
+- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
+
 ## 8.0.9
 
 - Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!

diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts
@@ -11,6 +11,7 @@ export default {
   },
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    chromatic: { disable: true },
   },
 };
 

diff --git a/code/builders/builder-vite/src/assetsInclude.ts b/code/builders/builder-vite/src/assetsInclude.ts
@@ -0,0 +1,15 @@
+import type { InlineConfig as ViteInlineConfig } from 'vite';
+
+export function getAssetsInclude(config: ViteInlineConfig, newPath: string[]): (string | RegExp)[] {
+  const { assetsInclude } = config;
+
+  if (!assetsInclude) {
+    return newPath;
+  }
+
+  if (Array.isArray(assetsInclude)) {
+    return [...assetsInclude, ...newPath];
+  } else {
+    return [assetsInclude, ...newPath];
+  }
+}
diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts
@@ -3,6 +3,7 @@ import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 import { getOptimizeDeps } from './optimizeDeps';
 import { sanitizeEnvVars } from './envs';
+import { getAssetsInclude } from './assetsInclude';
 
 export async function createViteServer(options: Options, devServer: Server) {
   const { presets } = options;
@@ -12,7 +13,7 @@ export async function createViteServer(options: Options, devServer: Server) {
   const config = {
     ...commonCfg,
     // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256
-    assetsInclude: ['/sb-preview/**'],
+    assetsInclude: getAssetsInclude(commonCfg, ['/sb-preview/**']),
     // Set up dev server
     server: {
       middlewareMode: true,

diff --git a/code/lib/react-dom-shim/src/preset.ts b/code/lib/react-dom-shim/src/preset.ts
@@ -6,7 +6,7 @@ import { readFile } from 'fs/promises';
  * Get react-dom version from the resolvedReact preset, which points to either
  * a root react-dom dependency or the react-dom dependency shipped with addon-docs
  */
-const getIsReactVersion18 = async (options: Options) => {
+const getIsReactVersion18or19 = async (options: Options) => {
   const { legacyRootApi } =
     (await options.presets.apply<{ legacyRootApi?: boolean } | null>('frameworkOptions')) || {};
 
@@ -24,11 +24,11 @@ const getIsReactVersion18 = async (options: Options) => {
   }
 
   const { version } = JSON.parse(await readFile(join(reactDom, 'package.json'), 'utf-8'));
-  return version.startsWith('18') || version.startsWith('0.0.0');
+  return version.startsWith('18') || version.startsWith('19') || version.startsWith('0.0.0');
 };
 
 export const webpackFinal = async (config: any, options: Options) => {
-  const isReactVersion18 = await getIsReactVersion18(options);
+  const isReactVersion18 = await getIsReactVersion18or19(options);
   if (isReactVersion18) {
     return config;
   }
@@ -46,7 +46,7 @@ export const webpackFinal = async (config: any, options: Options) => {
 };
 
 export const viteFinal = async (config: any, options: Options) => {
-  const isReactVersion18 = await getIsReactVersion18(options);
+  const isReactVersion18 = await getIsReactVersion18or19(options);
   if (isReactVersion18) {
     return config;
   }

diff --git a/code/package.json b/code/package.json
@@ -295,5 +295,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.0.10"
 }
diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx
@@ -96,45 +96,43 @@ export const AnchorMdx: FC<PropsWithChildren<AnchorMdxProps>> = (props) => {
   const { href, target, children, ...rest } = props;
   const context = useContext(DocsContext);
 
-  if (href) {
-    // Enable scrolling for in-page anchors.
-    if (href.startsWith('#')) {
-      return <AnchorInPage hash={href}>{children}</AnchorInPage>;
-    }
-
-    // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
-    if (target !== '_blank' && !href.startsWith('https://')) {
-      return (
-        <A
-          href={href}
-          onClick={(event: MouseEvent<HTMLAnchorElement>) => {
-            // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
-            const LEFT_BUTTON = 0;
-            const isLeftClick =
-              event.button === LEFT_BUTTON &&
-              !event.altKey &&
-              !event.ctrlKey &&
-              !event.metaKey &&
-              !event.shiftKey;
-
-            if (isLeftClick) {
-              event.preventDefault();
-              // use the A element's href, which has been modified for
-              // local paths without a `?path=` query param prefix
-              navigate(context, event.currentTarget.getAttribute('href'));
-            }
-          }}
-          target={target}
-          {...rest}
-        >
-          {children}
-        </A>
-      );
-    }
+  // links to external locations don't need any modifications.
+  if (!href || target === '_blank' || /^https?:\/\//.test(href)) {
+    return <A {...props} />;
   }
 
-  // External URL dont need any modification.
-  return <A {...props} />;
+  // Enable scrolling for in-page anchors.
+  if (href.startsWith('#')) {
+    return <AnchorInPage hash={href}>{children}</AnchorInPage>;
+  }
+
+  // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
+  return (
+    <A
+      href={href}
+      onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+        // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
+        const LEFT_BUTTON = 0;
+        const isLeftClick =
+          event.button === LEFT_BUTTON &&
+          !event.altKey &&
+          !event.ctrlKey &&
+          !event.metaKey &&
+          !event.shiftKey;
+
+        if (isLeftClick) {
+          event.preventDefault();
+          // use the A element's href, which has been modified for
+          // local paths without a `?path=` query param prefix
+          navigate(context, event.currentTarget.getAttribute('href'));
+        }
+      }}
+      target={target}
+      {...rest}
+    >
+      {children}
+    </A>
+  );
 };
 
 const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;

diff --git a/docs/get-started/vue3-webpack5.md b/docs/get-started/vue3-webpack5.md
@@ -74,9 +74,9 @@ First, install the framework:
 
 <CodeSnippets
   paths={[
-    'vue/vue-webpack5-install.npm.js.mdx',
-    'vue/vue-webpack5-install.pnpm.js.mdx',
-    'vue/vue-webpack5-install.yarn.js.mdx'
+    'vue/vue3-webpack5-install.npm.js.mdx',
+    'vue/vue3-webpack5-install.pnpm.js.mdx',
+    'vue/vue3-webpack5-install.yarn.js.mdx'
   ]}
 />
 
@@ -118,8 +118,8 @@ Finally, update your `.storybook/main.js|ts` to change the framework property:
 
 <CodeSnippets
   paths={[
-    'vue/vue-webpack5-add-framework.js.mdx',
-    'vue/vue-webpack5-add-framework.ts.mdx'
+    'vue/vue3-webpack5-add-framework.js.mdx',
+    'vue/vue3-webpack5-add-framework.ts.mdx'
   ]}
 />
 

diff --git a/docs/snippets/angular/angular-install.pnpm.js.mdx b/docs/snippets/angular/angular-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/angular
+pnpm add --save-dev @storybook/angular
 ```
diff --git a/docs/snippets/react/nextjs-install.pnpm.js.mdx b/docs/snippets/react/nextjs-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/nextjs
+pnpm add --save-dev @storybook/nextjs
 ```
diff --git a/docs/snippets/react/react-vite-install.pnpm.js.mdx b/docs/snippets/react/react-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/react-vite
+pnpm add --save-dev @storybook/react-vite
 ```
diff --git a/docs/snippets/react/react-webpack5-install.pnpm.js.mdx b/docs/snippets/react/react-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/react-webpack5
+pnpm add --save-dev @storybook/react-webpack5
 ```
diff --git a/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/svelte-vite
+pnpm add --save-dev @storybook/svelte-vite
 ```
diff --git a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/svelte-webpack5
+pnpm add --save-dev @storybook/svelte-webpack5
 ```
diff --git a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/sveltekit
+pnpm add --save-dev @storybook/sveltekit
 ```
diff --git a/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx b/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/vue3-vite
+pnpm add --save-dev @storybook/vue3-vite
 ```
diff --git a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/vue3-webpack5
+pnpm add --save-dev @storybook/vue3-webpack5
 ```
diff --git a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/web-components-vite
+pnpm add --save-dev @storybook/web-components-vite
 ```
diff --git a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/web-components-webpack5
+pnpm add --save-dev @storybook/web-components-webpack5
 ```
diff --git a/docs/versions/latest.json b/docs/versions/latest.json
@@ -1 +1 @@
-{"version":"8.0.9","info":{"plain":"- Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!\n- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!\n- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!\n- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!\n- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!\n- Nextjs: Support next 14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!\n- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!\n- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!"}}
+{"version":"8.0.10","info":{"plain":"- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!\n- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!\n- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!"}}
diff --git a/docs/versions/next.json b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.1.0-alpha.7","info":{"plain":"- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!\n- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!\n- Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!\n- Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!\n- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!\n- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!"}}
+{"version":"8.1.0-alpha.8","info":{"plain":"- Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!\n- Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!\n- Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!\n- Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!\n- Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!\n- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!\n- Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!\n- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!\n- Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!\n- Core: Ensure that simultaneous onStoriesChanged don't clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!\n- Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!\n- Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!\n- Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!\n- Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!\n- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!\n- Docs: Fix providerImportSource extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!\n- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!\n- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!\n- Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!\n- Nextjs: Implement next redirect and the RedirectBoundary - [#26886](https://github.com/storybookjs/storybook/pull/26886), thanks @kasperpeulen!\n- Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!\n- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!\n- Revert \\\"Nextjs: Implement next redirect and the RedirectBoundary\\\" - [#27025](https://github.com/storybookjs/storybook/pull/27025), thanks @JReinhold!\n- SfC: Implement new feature to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!\n- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!\n- Test: Support module mocking with conditional subpath imports in `package.json`  - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!\n- UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!\n- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!\n- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!"}}
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
@@ -533,6 +533,32 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl
 
   Object.entries(configToAdd).forEach(([field, value]) => mainConfig.setFieldValue([field], value));
 
+  const previewHeadCode = `
+    (head) => \`
+      \${head}
+      ${templateConfig.previewHead || ''}
+      <style>
+        /* explicitly set monospace font stack to workaround inconsistent fonts in Chromatic */
+        pre, code, kbd, samp {
+          font-family:
+            ui-monospace,
+            Menlo,
+            Monaco,
+            "Cascadia Mono",
+            "Segoe UI Mono",
+            "Roboto Mono",
+            "Oxygen Mono",
+            "Ubuntu Monospace",
+            "Source Code Pro",
+            "Fira Mono",
+            "Droid Sans Mono",
+            "Courier New",
+            monospace;
+        }
+      </style>
+    \``;
+  mainConfig.setFieldNode(['previewHead'], babelParse(previewHeadCode).program.body[0].expression);
+
   // Simulate Storybook Lite
   if (disableDocs) {
     const addons = mainConfig.getFieldValue(['addons']);

diff --git a/scripts/tasks/test-runner-build.ts b/scripts/tasks/test-runner-build.ts
@@ -13,7 +13,7 @@ export const testRunnerBuild: Task & { port: number } = {
   async run({ sandboxDir, junitFilename }, { dryRun, debug }) {
     const execOptions = { cwd: sandboxDir };
     const flags = [
-      `--url http://localhost:${this.port}`,
+      `--url http://127.0.0.1:${this.port}`,
       '--junit',
       '--maxWorkers=2',
       '--failOnConsole',