Upgrade to storybook 8 (#11608)

Co-authored-by: Max Duval <[email protected]>

apps-rendering/.storybook/main.js

@@ -4,29 +4,9 @@ const webpack = require('webpack');
 /** @type {import("@storybook/react/types").StorybookConfig} */
 module.exports = {
 	stories: ['../src/**/*.stories.@(js|mdx|ts|tsx)'],
-	addons: [
-		'@storybook/addon-essentials',
-		'storybook-addon-turbo-build',
-		{
-			name: 'storybook-addon-turbo-build',
-			options: {
-				optimizationLevel: 1,
-				// We're explicitly setting the minification options below because
-				// we want to turn off `minifyIdentifiers`. Why? Because it breaks
-				// Islands hydration. When you minify the component filenames
-				// the dynamic imports fail to find them.
-				// See: https://github.com/privatenumber/esbuild-loader#minify
-				//    & https://esbuild.github.io/api/#minify
-				esbuildMinifyOptions: {
-					target: 'es2015',
-					minify: false,
-					minifyWhitespace: true,
-					minifyIdentifiers: false,
-					minifySyntax: true,
-				},
-			},
-		},
-	],
+
+	addons: ['@storybook/addon-webpack5-compiler-babel'],
+
 	webpackFinal: async (config) => {
 		// Get project specific webpack options
 		config = webpackConfig(config);
@@ -51,16 +31,20 @@ module.exports = {
 
 		return config;
 	},
+
 	env: (config) => ({
 		...config,
 		// Github sets a CI env var for all actions but this isn't being picked up by Storybook
 		// See: https://storybook.js.org/docs/react/configure/environment-variables
 		CI: 'true',
 	}),
+
 	framework: {
 		name: '@storybook/react-webpack5',
 		options: {},
 	},
+
+	docs: {},
 };
 
 const webpackConfig = (config) => {

apps-rendering/package.json

@@ -53,14 +53,15 @@
 		"@guardian/source": "workspace:*",
 		"@guardian/source-development-kitchen": "workspace:*",
 		"@smithy/property-provider": "2.0.16",
-		"@storybook/addon-essentials": "7.6.18",
-		"@storybook/addons": "7.6.18",
-		"@storybook/api": "7.6.18",
-		"@storybook/components": "7.6.18",
-		"@storybook/core-events": "7.6.18",
-		"@storybook/react": "7.6.18",
-		"@storybook/react-webpack5": "7.6.18",
-		"@storybook/theming": "7.6.18",
+		"@storybook/addon-essentials": "8.1.6",
+		"@storybook/addon-webpack5-compiler-babel": "3.0.3",
+		"@storybook/components": "8.1.6",
+		"@storybook/core-events": "8.1.6",
+		"@storybook/manager-api": "8.1.6",
+		"@storybook/preview-api": "8.1.6",
+		"@storybook/react": "8.1.6",
+		"@storybook/react-webpack5": "8.1.6",
+		"@storybook/theming": "8.1.6",
 		"@types/clean-css": "4.2.11",
 		"@types/compression": "1.7.2",
 		"@types/express": "4.17.21",
@@ -96,7 +97,7 @@
 		"react-dom": "18.3.1",
 		"react-test-renderer": "18.3.1",
 		"require-from-string": "2.0.2",
-		"storybook": "7.6.17",
+		"storybook": "8.1.6",
 		"thrift": "0.19.0",
 		"ts-jest": "29.1.2",
 		"ts-loader": "9.5.1",

dotcom-rendering/.storybook/main.ts

@@ -9,20 +9,35 @@ import { svgr } from '../webpack/svg.cjs';
 saveStories();
 
 const config: StorybookConfig = {
-	features: {
-		// used in composition
-		buildStoriesJson: true,
-	},
+	features: {},
+
 	stories: [
 		'../src/**/*.stories.@(tsx)',
 		'../stories/**/*.stories.@(tsx)',
 		'../stories/**/*.stories.@(jsx)',
 	],
+
 	staticDirs: [
 		'../src/static',
 		{ from: '../src/static', to: '/static/frontend/' },
 	],
-	addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+
+	addons: [
+		{
+			name: '@storybook/addon-essentials',
+			options: {
+				actions: true,
+				backgrounds: true,
+				controls: true,
+				docs: false,
+				viewport: true,
+				toolbars: true,
+			},
+		},
+		'@storybook/addon-interactions',
+		'@storybook/addon-webpack5-compiler-swc',
+	],
+
 	webpackFinal: async (config) => {
 		// Get project specific webpack options
 		config = webpackConfig(config);
@@ -50,15 +65,21 @@ const config: StorybookConfig = {
 		);
 		return config;
 	},
+
 	env: (config) => ({
 		...config,
 		// Github sets a CI env var for all actions but this isn't being picked up by Storybook
 		// See: https://storybook.js.org/docs/react/configure/environment-variables
 		CI: 'true',
 	}),
+
 	framework: {
 		name: '@storybook/react-webpack5',
-		options: { fastRefresh: true },
+		options: {},
+	},
+
+	typescript: {
+		reactDocgen: 'react-docgen',
 	},
 };
 
@@ -106,12 +127,12 @@ const webpackConfig = (config: Configuration) => {
 	});
 
 	// modify storybook's file-loader rule to avoid conflicts with our svg
-	// https://stackoverflow.com/questions/54292667/react-storybook-svg-failed-to-execute-createelement-on-document
-	const fileLoaderRule = rules.find((rule) => rule.test.test('.svg'));
+	const fileLoaderRule = rules.find((rule) => {
+		return String(rule?.test).includes('svg');
+	});
 	fileLoaderRule &&
 		typeof fileLoaderRule !== 'string' &&
 		(fileLoaderRule.exclude = /\.svg$/);
-
 	rules.push(svgr);
 	config.resolve.modules = [
 		...((config && config.resolve && config.resolve.modules) || []),

dotcom-rendering/.storybook/preview.ts

@@ -145,9 +145,11 @@ export default {
 	args: {
 		config: { renderingTarget: 'Web', darkModeAvailable: false },
 	},
+
 	globalTypes: {
 		globalColourScheme,
 	},
+
 	decorators: [
 		// @ts-expect-error -- this global decorator takes an option parameter
 		ConfigContextDecorator,
@@ -157,6 +159,7 @@ export default {
 			return Story();
 		},
 	],
+
 	parameters: {
 		viewport: {
 			viewports: guardianViewports,

dotcom-rendering/package.json

@@ -57,16 +57,17 @@
 		"@playwright/test": "1.40.1",
 		"@sentry/browser": "7.75.1",
 		"@sentry/integrations": "7.75.1",
-		"@storybook/addon-essentials": "7.6.18",
-		"@storybook/addon-interactions": "7.6.18",
-		"@storybook/addons": "7.6.18",
-		"@storybook/api": "7.6.18",
-		"@storybook/components": "7.6.18",
-		"@storybook/core-events": "7.6.18",
-		"@storybook/react": "7.6.18",
-		"@storybook/react-webpack5": "7.6.18",
-		"@storybook/test": "7.6.19",
-		"@storybook/theming": "7.6.18",
+		"@storybook/addon-essentials": "8.1.6",
+		"@storybook/addon-interactions": "8.1.6",
+		"@storybook/addon-webpack5-compiler-swc": "1.0.3",
+		"@storybook/components": "8.1.6",
+		"@storybook/core-events": "8.1.6",
+		"@storybook/manager-api": "8.1.6",
+		"@storybook/preview-api": "8.1.6",
+		"@storybook/react": "8.1.6",
+		"@storybook/react-webpack5": "8.1.6",
+		"@storybook/test": "8.1.6",
+		"@storybook/theming": "8.1.6",
 		"@svgr/webpack": "8.1.0",
 		"@swc/cli": "0.3.12",
 		"@swc/core": "1.5.3",
@@ -185,7 +186,7 @@
 		"serve-static": "1.15.0",
 		"simple-progress-webpack-plugin": "2.0.0",
 		"source-map": "0.7.4",
-		"storybook": "7.6.17",
+		"storybook": "8.1.6",
 		"stylelint": "16.5.0",
 		"stylelint-config-recommended": "14.0.0",
 		"svg-loader": "0.0.2",

dotcom-rendering/src/components/FormatBoundary.tsx

@@ -23,7 +23,7 @@ export const FormatBoundary = ({ format, children }: Props) => {
 
 	const [isStorybook, setIsStorybook] = useState(false);
 	useEffect(() => {
-		if (!('__STORYBOOK_CLIENT_API__' in window)) return;
+		if (!('STORIES' in window)) return;
 		setIsStorybook(true);
 	}, []);
 

package.json

@@ -30,5 +30,10 @@
 		"prettier": "3.0.3",
 		"tslib": "2.6.2"
 	},
-	"packageManager": "[email protected]"
+	"packageManager": "[email protected]",
+	"pnpm": {
+		"patchedDependencies": {
+			"[email protected]": "patches/[email protected]"
+		}
+	}
 }

patches/webpack-manifest-plugin@5.0.0.patch

@@ -0,0 +1,32 @@
+diff --git a/dist/index.js b/dist/index.js
+index c6cd171258b3d1ac0d58f70c4b0fa65458969b3d..6e516c19a4fbf9687b59219f205553e14b0ac187 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
+ Object.defineProperty(exports, "__esModule", { value: true });
+ exports.WebpackManifestPlugin = exports.getCompilerHooks = void 0;
+ const path_1 = require("path");
+-const NormalModule_1 = __importDefault(require("webpack/lib/NormalModule"));
+ const hooks_1 = require("./hooks");
+ Object.defineProperty(exports, "getCompilerHooks", { enumerable: true, get: function () { return hooks_1.getCompilerHooks; } });
+ const emitCountMap = new Map();
+@@ -33,6 +32,7 @@ class WebpackManifestPlugin {
+         this.options = Object.assign({}, defaults, opts);
+     }
+     apply(compiler) {
++        const { NormalModule } = compiler.webpack;
+         var _a, _b;
+         const moduleAssets = {};
+         const manifestFileName = path_1.resolve(((_a = compiler.options.output) === null || _a === void 0 ? void 0 : _a.path) || './', this.options.fileName);
+@@ -52,9 +52,9 @@ class WebpackManifestPlugin {
+             stage: this.options.assetHookStage
+         };
+         compiler.hooks.compilation.tap(hookOptions, (compilation) => {
+-            const hook = !NormalModule_1.default.getCompilationHooks
++            const hook = !NormalModule.getCompilationHooks
+                 ? compilation.hooks.normalModuleLoader
+-                : NormalModule_1.default.getCompilationHooks(compilation).loader;
++                : NormalModule.getCompilationHooks(compilation).loader;
+             hook.tap(hookOptions, normalModuleLoader);
+         });
+         if (this.options.useLegacyEmit === true) {