move storybook configs to configs/storybook

apps/storybooks/.storybook/main.js

@@ -1,4 +1,4 @@
-const rootMain = require('../../../.storybook/main');
+const rootMain = require('../../../configs/storybook/main');
 
 module.exports = {
 	...rootMain,

apps/storybooks/package.json

@@ -7,6 +7,7 @@
 		"dev": "wireit"
 	},
 	"devDependencies": {
+		"storybook": "8.0.5",
 		"wireit": "0.14.4"
 	},
 	"wireit": {

.storybook/main.js → configs/storybook/main.js

@@ -1,8 +1,10 @@
-const path = require('path');
+const fs = require('node:fs');
+
 const nodeModulesExclude = {
 	and: [/node_modules/],
 	not: [/@guardian\//],
 };
+
 module.exports = {
 	stories: [],
 	addons: [
@@ -42,6 +44,11 @@ module.exports = {
 			],
 		});
 
+		config.module.rules.push({
+			test: /\.html$/i,
+			loader: 'html-loader',
+		});
+
 		// update storybook webpack config to transpile *all* JS
 		config.module.rules.find(
 			(rule) => String(rule.test) === String(/\.(cjs|mjs|tsx?|jsx?)$/),
@@ -57,4 +64,6 @@ module.exports = {
 	docs: {
 		autodocs: true,
 	},
+	previewHead: (head) =>
+		head + fs.readFileSync(require.resolve('./preview-head.html'), 'utf8'),
 };

configs/storybook/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@configs/storybook",
+	"version": "0.1.0",
+	"private": true,
+	"type": "module",
+	"dependencies": {
+		"@babel/core": "7.24.0",
+		"@babel/plugin-transform-typescript": "7.24.5",
+		"@babel/preset-env": "7.24.0",
+		"@babel/preset-react": "7.24.1",
+		"@babel/preset-typescript": "7.24.1",
+		"@emotion/babel-plugin": "11.11.0",
+		"@emotion/react": "11.11.1",
+		"@guardian/source-foundations": "workspace:*",
+		"@storybook/addon-a11y": "8.0.5",
+		"@storybook/addon-docs": "8.0.5",
+		"@storybook/addon-essentials": "8.0.5",
+		"@storybook/addon-links": "8.0.5",
+		"@storybook/addon-viewport": "8.0.5",
+		"@storybook/manager-api": "8.0.5",
+		"@storybook/react": "8.0.5",
+		"@storybook/react-webpack5": "8.0.5",
+		"@storybook/theming": "8.0.5",
+		"@types/babel__core": "7.20.5",
+		"@types/react": "18.2.11",
+		"babel-loader": "9.1.3",
+		"react": "18.2.0"
+	}
+}

libs/@guardian/source-react-components-development-kitchen/.storybook/preview/FocusManagerDecorator.tsx → configs/storybook/preview/FocusManagerDecorator.tsx

@@ -1,6 +1,6 @@
-import { FocusStyleManager } from '@guardian/source-foundations';
 import type { Decorator } from '@storybook/react';
 import { useEffect } from 'react';
+import { FocusStyleManager } from '@guardian/source-foundations';
 
 export const FocusManagerDecorator: Decorator = (storyFn) => {
 	useEffect(() => {

configs/storybook/theme.ts

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming';
+
+export const createTheme = (pkgName: string) =>
+	create({
+		base: 'light',
+		brandTitle: pkgName,
+		brandUrl: `https://www.npmjs.com/package/${pkgName}`,
+		brandImage:
+			'https://raw.githubusercontent.com/guardian/source/main/assets/logo.png',
+	});

libs/@guardian/source-foundations/.storybook/main.js

@@ -1,4 +1,4 @@
-const rootMain = require('../../../../.storybook/main');
+const rootMain = require('../../../../configs/storybook/main');
 
 // To customise your Storybook config for this project, update this file
 

libs/@guardian/source-foundations/package.json

@@ -36,6 +36,7 @@
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"rollup": "4.17.2",
+		"storybook": "8.0.5",
 		"tslib": "2.6.2",
 		"tsx": "4.7.1",
 		"typescript": "5.3.3",
@@ -79,6 +80,8 @@
 				"build"
 			],
 			"files": [
+				"../../../../configs/storybook/**",
+				"./.storybook/**",
 				"**/*.{ts,tsx,js,json,mdx,md}",
 				"!storybook-static/**",
 				"!(jest*)"

libs/@guardian/source-react-components-development-kitchen/.storybook/main.js

@@ -1,4 +1,4 @@
-const rootMain = require('../../../../.storybook/main');
+const rootMain = require('../../../../configs/storybook/main');
 
 // To customise your Storybook config for this project, update this file
 

libs/@guardian/source-react-components-development-kitchen/.storybook/manager.ts

@@ -1,6 +1,6 @@
 import { addons } from '@storybook/manager-api';
-import { theme } from './theme';
+import { createTheme } from '../../../../configs/storybook/theme';
 
 addons.setConfig({
-	theme,
+	theme: createTheme('@guardian/source-react-components-development-kitchen'),
 });

libs/@guardian/source-react-components-development-kitchen/.storybook/preview.ts

@@ -0,0 +1 @@
+export { decorators, parameters } from '../../../../configs/storybook/preview';

libs/@guardian/source-react-components-development-kitchen/package.json

@@ -29,9 +29,11 @@
 		"@guardian/libs": "16.0.0",
 		"@guardian/source-foundations": "16.0.0",
 		"@guardian/source-react-components": "25.0.0",
+		"@storybook/manager-api": "8.0.5",
 		"@types/react": "18.2.11",
 		"react": "18.2.0",
 		"rollup": "4.17.2",
+		"storybook": "8.0.5",
 		"tslib": "2.6.2",
 		"typescript": "5.3.3",
 		"wireit": "0.14.4"
@@ -83,6 +85,8 @@
 				"_deps"
 			],
 			"files": [
+				"../../../../configs/storybook/**",
+				"./.storybook/**",
 				"**/*.{ts,tsx,js,json,mdx,md}",
 				"!storybook-static/**",
 				"!(jest*)"

libs/@guardian/source-react-components/.storybook/main.js

@@ -1,4 +1,4 @@
-const rootMain = require('../../../../.storybook/main');
+const rootMain = require('../../../../configs/storybook/main');
 
 // To customise your Storybook config for this project, update this file
 

libs/@guardian/source-react-components/.storybook/manager.ts

@@ -1,6 +1,6 @@
 import { addons } from '@storybook/manager-api';
-import { theme } from './theme';
+import { createTheme } from '../../../../configs/storybook/theme';
 
 addons.setConfig({
-	theme,
+	theme: createTheme('@guardian/source-react-components'),
 });