Storybook: Fix CSF parsing error (#98231)

* Storybook: Fix CSF parsing error

* Update readme

.storybook/main.js

@@ -20,4 +20,4 @@ storybookConfig.previewHead = ( head ) => `
 	</script>
 `;
 
-module.exports = storybookConfig;
+module.exports = { ...storybookConfig };

packages/calypso-storybook/README.md

@@ -4,9 +4,16 @@ Default config for Storybook
 
 ## Usage
 
-Create a file `./.storybook/main.js` in your package with this content
+Create a file `./.storybook/main.js` in your package with this content:
 
-```
+```js
 const storybookDefaultConfig = require( '@automattic/calypso-storybook' );
+module.exports = { ...storybookDefaultConfig() };
+```
+
+Note that the default export must be statically analyzable as an object expression, in order to avoid a [CSF parsing error](https://github.com/storybookjs/storybook/issues/26778) from Storybook.
+
+```js
+// ❌ This will cause a CSF parsing error
 module.exports = storybookDefaultConfig();
 ```

packages/components/.storybook/main.js

@@ -1 +1,2 @@
-module.exports = require( '@automattic/calypso-storybook' )();
+const storybookDefaultConfig = require( '@automattic/calypso-storybook' );
+module.exports = { ...storybookDefaultConfig() };

packages/composite-checkout/.storybook/main.js

@@ -1,9 +1,11 @@
 const { join } = require( 'path' );
 const storybookDefaultConfig = require( '@automattic/calypso-storybook' );
 
-module.exports = storybookDefaultConfig( {
-	stories: [ '../demo' ],
-	webpackAliases: {
-		'@automattic/composite-checkout': join( __dirname, '../src/public-api.ts' ),
-	},
-} );
+module.exports = {
+	...storybookDefaultConfig( {
+		stories: [ '../demo' ],
+		webpackAliases: {
+			'@automattic/composite-checkout': join( __dirname, '../src/public-api.ts' ),
+		},
+	} ),
+};

packages/plans-grid-next/.storybook/main.js

@@ -1,11 +1,13 @@
 const storybookDefaultConfig = require( '@automattic/calypso-storybook' );
 
-module.exports = storybookDefaultConfig( {
-	staticDirs: [ '../static' ],
-	webpackAliases: {
-		// We are mocking wpcom-proxy-request because calls to wpcomRequest() (eg. inside the
-		// usePlans hook) are not working with MSW. This is a temporary workaround until we can
-		// figure out why.
-		[ 'wpcom-proxy-request' ]: require.resolve( '../src/__mocks__/wpcom-proxy-request.js' ),
-	},
-} );
+module.exports = {
+	...storybookDefaultConfig( {
+		staticDirs: [ '../static' ],
+		webpackAliases: {
+			// We are mocking wpcom-proxy-request because calls to wpcomRequest() (eg. inside the
+			// usePlans hook) are not working with MSW. This is a temporary workaround until we can
+			// figure out why.
+			[ 'wpcom-proxy-request' ]: require.resolve( '../src/__mocks__/wpcom-proxy-request.js' ),
+		},
+	} ),
+};

packages/privacy-toolset/.storybook/main.js

@@ -1,3 +1,3 @@
 const storybookDefaultConfig = require( '@automattic/calypso-storybook' );
 
-module.exports = storybookDefaultConfig();
+module.exports = { ...storybookDefaultConfig() };

packages/search/.storybook/main.js

@@ -2,10 +2,12 @@ const webpack = require( 'webpack' );
 const path = require( 'path' );
 const storybookDefaultConfig = require( '@automattic/calypso-storybook' );
 
-module.exports = storybookDefaultConfig( {
-	plugins: [
-		new webpack.ProvidePlugin( {
-			process: 'process/browser.js',
-		} ),
-	],
-} );
+module.exports = {
+	...storybookDefaultConfig( {
+		plugins: [
+			new webpack.ProvidePlugin( {
+				process: 'process/browser.js',
+			} ),
+		],
+	} ),
+};