chore: Update Storybook bundler to webpack 5 (#56305)

* Update storybook builder to webpack 5 * Refactor storybook CI to avoid using NODE_ENV
Automattic · Sep 16, 2021 · 9f85848 · 9f85848
1 parent efb7d97
commit 9f85848
Show file tree

Hide file tree

Showing 5 changed files with 313 additions and 78 deletions.
diff --git a/.teamcity/_self/projects/WebApp.kt b/.teamcity/_self/projects/WebApp.kt
@@ -264,21 +264,13 @@ object RunAllUnitTests : BuildType({
 			"""
 		}
 		bashNodeScript {
-			name = "Build components storybook"
+			name = "Run storybook tests"
 			executionMode = BuildStep.ExecutionMode.RUN_ON_FAILURE
 			scriptContent = """
-				export NODE_ENV="production"
-
+				set -x
 				yarn components:storybook:start --ci --smoke-test
-			"""
-		}
-		bashNodeScript {
-			name = "Build search storybook"
-			executionMode = BuildStep.ExecutionMode.RUN_ON_FAILURE
-			scriptContent = """
-				export NODE_ENV="production"
-
 				yarn search:storybook:start --ci --smoke-test
+				yarn composite-checkout:storybook:start --ci --smoke-test
 			"""
 		}
 	}
@@ -807,4 +799,4 @@ object PreReleaseE2ETests : BuildType({
 	failureConditions {
 		executionTimeoutMin = 20
 	}
-})
+})
diff --git a/bin/storybook-default-config.js b/bin/storybook-default-config.js
@@ -5,8 +5,15 @@ const { dirname } = require( 'path' );
 // of the given module.
 const findModule = ( module ) => dirname( require.resolve( module + '/package.json' ) );
 
-module.exports = function storybookDefaultConfig( { stories, webpackAliases = {} } = {} ) {
+module.exports = function storybookDefaultConfig( {
+	stories,
+	plugins = [],
+	webpackAliases = {},
+} = {} ) {
 	return {
+		core: {
+			builder: 'webpack5',
+		},
 		stories: stories && stories.length ? stories : [ '../src/**/*.stories.{js,jsx,ts,tsx}' ],
 		addons: [ '@storybook/addon-actions', '@storybook/preset-scss' ],
 		typescript: {
@@ -39,6 +46,7 @@ module.exports = function storybookDefaultConfig( { stories, webpackAliases = {}
 				...webpackAliases,
 			};
 			config.resolve.mainFields = [ 'browser', 'calypso:src', 'module', 'main' ];
+			config.plugins.push( ...plugins );
 			return config;
 		},
 	};

diff --git a/packages/search/.storybook/main.js b/packages/search/.storybook/main.js
@@ -1,2 +1,10 @@
 const storybookDefaultConfig = require( '../../../bin/storybook-default-config' );
-module.exports = storybookDefaultConfig();
+const webpack = require('webpack');
+
+module.exports = storybookDefaultConfig({
+	plugins: [
+		new webpack.ProvidePlugin( {
+			process: 'process/browser.js',
+		} ),
+	]
+});
diff --git a/packages/search/package.json b/packages/search/package.json
@@ -46,6 +46,8 @@
 		"@babel/core": "^7.14.8",
 		"@babel/preset-env": "^7.14.8",
 		"@storybook/addon-actions": "^6.3.8",
+		"@storybook/builder-webpack5": "^6.3.8",
+		"@storybook/manager-webpack5": "^6.3.8",
 		"@storybook/preset-scss": "^1.0.3",
 		"@testing-library/dom": "^8.1.0",
 		"@testing-library/react": "^12.0.0",