Merge branch 'next' into norbert/upgrade-auto-blockers

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 7.6.13
+
+- Next.js: Fix frameworkOptions resolution - [#25907](https://github.com/storybookjs/storybook/pull/25907), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- React Native: Fix init fails when package is already installed - [#25908](https://github.com/storybookjs/storybook/pull/25908), thanks [@dannyhw](https://github.com/dannyhw)!
+- React Native: Remove watcher from init - [#25895](https://github.com/storybookjs/storybook/pull/25895), thanks [@dannyhw](https://github.com/dannyhw)!
+- Webpack: Update StorybookConfig import in core-webpack types.ts - [#25740](https://github.com/storybookjs/storybook/pull/25740), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 7.6.12
 
 - CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)!

CHANGELOG.prerelease.md

@@ -1,3 +1,15 @@
+## 8.0.0-beta.1
+
+- Addon-docs: Fix MDX components not applied in Vite and theme loading twice - [#25925](https://github.com/storybookjs/storybook/pull/25925), thanks [@JReinhold](https://github.com/JReinhold)!
+- Core: Fix React peer dependency warnings - [#25926](https://github.com/storybookjs/storybook/pull/25926), thanks [@JReinhold](https://github.com/JReinhold)!
+- Core: Remove CSF batching, as it isn't required any more - [#25872](https://github.com/storybookjs/storybook/pull/25872), thanks [@tmeasday](https://github.com/tmeasday)!
+- Next.js: Fix frameworkOptions resolution - [#25907](https://github.com/storybookjs/storybook/pull/25907), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- React Native: Fix init fails when package is already installed - [#25908](https://github.com/storybookjs/storybook/pull/25908), thanks [@dannyhw](https://github.com/dannyhw)!
+- React Native: Remove watcher from init - [#25895](https://github.com/storybookjs/storybook/pull/25895), thanks [@dannyhw](https://github.com/dannyhw)!
+- Test: Fix jest-dom matcher type imports - [#25869](https://github.com/storybookjs/storybook/pull/25869), thanks [@alitas](https://github.com/alitas)!
+- UI: Fix overlapping on the ref button in the sidebar - [#25914](https://github.com/storybookjs/storybook/pull/25914), thanks [@cdedreuille](https://github.com/cdedreuille)!
+- UI: Remove keyboard shortcut hint in search bar on mobile viewports - [#25866](https://github.com/storybookjs/storybook/pull/25866), thanks [@tusharwebd](https://github.com/tusharwebd)!
+
 ## 8.0.0-beta.0
 
 - CLI: Add Visual Tests addon to `init` - [#25850](https://github.com/storybookjs/storybook/pull/25850), thanks [@shilman](https://github.com/shilman)!

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "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.0-beta.0",
+  "version": "8.0.0-beta.1",
   "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.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -53,13 +53,13 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
+    "@storybook/icons": "^1.2.3",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "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.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -111,9 +111,10 @@
     "@storybook/react-dom-shim": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "fs-extra": "^11.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "ts-dedent": "^2.0.0"
@@ -122,6 +123,8 @@
     "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/test": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },

code/addons/docs/src/preset.ts

@@ -138,24 +138,26 @@ export const viteFinal = async (config: any, options: Options) => {
   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 { react, reactDom, mdx } = await getResolvedReact(options);
 
-  const reactAliasPlugin = {
-    name: 'storybook:react-alias',
+  const packageDeduplicationPlugin = {
+    name: 'storybook:package-deduplication',
     enforce: 'pre',
     config: () => ({
       resolve: {
         alias: {
           react,
           'react-dom': reactDom,
+          '@mdx-js/react': mdx,
         },
+        dedupe: ['@storybook/theming', '@storybook/components', '@storybook/blocks'],
       },
     }),
   };
 
   // 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.unshift(packageDeduplicationPlugin);
   plugins.push(mdxPlugin(options));
 
   return config;

code/addons/essentials/package.json

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

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "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.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
@@ -50,7 +50,6 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
     "@storybook/types": "workspace:*",
     "jest-mock": "^27.0.6",
     "polished": "^4.2.2",
@@ -62,6 +61,7 @@
     "@storybook/components": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
+    "@storybook/icons": "^1.2.3",
     "@storybook/instrumenter": "workspace:*",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "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.0-beta.0",
+  "version": "8.0.0-beta.1",
   "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.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
@@ -65,13 +65,13 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
+    "@storybook/icons": "^1.2.3",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
@@ -55,13 +55,13 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.3",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
+    "@storybook/icons": "^1.2.3",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",

code/addons/storysource/package.json

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

code/builders/builder-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.1",
   "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-vite/src/build.ts

@@ -2,6 +2,15 @@ import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 
 import { sanitizeEnvVars } from './envs';
+import type { WebpackStatsPlugin } from './plugins';
+import type { InlineConfig } from 'vite';
+import { logger } from '@storybook/node-logger';
+import { hasVitePlugins } from './utils/has-vite-plugins';
+import { withoutVitePlugins } from './utils/without-vite-plugins';
+
+function findPlugin(config: InlineConfig, name: string) {
+  return config.plugins?.find((p) => p && 'name' in p && p.name === name);
+}
 
 export async function build(options: Options) {
   const { build: viteBuild, mergeConfig } = await import('vite');
@@ -28,5 +37,20 @@ export async function build(options: Options) {
   }).build;
 
   const finalConfig = await presets.apply('viteFinal', config, options);
+
+  const turbosnapPluginName = 'rollup-plugin-turbosnap';
+  const hasTurbosnapPlugin =
+    finalConfig.plugins && hasVitePlugins(finalConfig.plugins, [turbosnapPluginName]);
+  if (hasTurbosnapPlugin) {
+    logger.warn(`Found '${turbosnapPluginName}' which is now included by default in Storybook 8.`);
+    logger.warn(
+      `Removing from your plugins list. Ensure you pass \`--webpack-stats-json\` to generate stats.`
+    );
+    finalConfig.plugins = await withoutVitePlugins(finalConfig.plugins, [turbosnapPluginName]);
+  }
+
   await viteBuild(await sanitizeEnvVars(options, finalConfig));
+
+  const statsPlugin = findPlugin(finalConfig, 'rollup-plugin-webpack-stats') as WebpackStatsPlugin;
+  return statsPlugin?.storybookGetStats();
 }

code/builders/builder-vite/src/plugins/index.ts

@@ -3,3 +3,4 @@ export * from './strip-story-hmr-boundaries';
 export * from './code-generator-plugin';
 export * from './csf-plugin';
 export * from './external-globals-plugin';
+export * from './webpack-stats-plugin';