Make all storybook configs TS (#1671)

apps/storybooks/package.json

@@ -7,7 +7,7 @@
 		"dev": "wireit"
 	},
 	"devDependencies": {
-		"storybook": "8.2.7",
+		"storybook": "8.2.9",
 		"wireit": "0.14.4"
 	},
 	"wireit": {

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

@@ -1,22 +1,25 @@
-const fs = require('node:fs');
+import { readFileSync } from 'node:fs';
+import { isObject } from '@guardian/libs';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+export type { StorybookConfig };
 
 const nodeModulesExclude = {
 	and: [/node_modules/],
 	not: [/@guardian\//],
 };
 
-module.exports = {
+const config: StorybookConfig = {
 	stories: [],
 	addons: [
 		'@storybook/addon-a11y',
 		'@storybook/addon-essentials',
 		'@storybook/addon-links',
 	],
-	features: {
-		// used in composition
-		buildStoriesJson: true,
-	},
-	webpackFinal: async (config, { configType }) => {
+	webpackFinal: async (config /*, { configType } */) => {
+		config.module ??= { rules: [] };
+		config.module.rules ??= [];
+
 		config.module.rules.push({
 			test: /\.(ts|tsx)$/,
 			exclude: nodeModulesExclude,
@@ -45,11 +48,23 @@ module.exports = {
 		});
 
 		// update storybook webpack config to transpile *all* JS
-		config.module.rules.find(
-			(rule) => String(rule.test) === String(/\.(cjs|mjs|tsx?|jsx?)$/),
-		).exclude = nodeModulesExclude;
+		for (const rule of config.module.rules) {
+			if (isObject(rule) && rule.test instanceof RegExp) {
+				if (
+					rule.test.test('file.js') ||
+					rule.test.test('file.cjs') ||
+					rule.test.test('file.mjs') ||
+					rule.test.test('file.jsx') ||
+					rule.test.test('file.ts') ||
+					rule.test.test('file.cts') ||
+					rule.test.test('file.mts') ||
+					rule.test.test('file.tsx')
+				) {
+					rule.exclude = nodeModulesExclude;
+				}
+			}
+		}
 
-		config.resolve.plugins ||= [];
 		return config;
 	},
 	framework: {
@@ -60,5 +75,7 @@ module.exports = {
 		autodocs: true,
 	},
 	previewHead: (head) =>
-		head + fs.readFileSync(require.resolve('./preview-head.html'), 'utf8'),
+		head + readFileSync(require.resolve('./preview-head.html'), 'utf8'),
 };
+
+export default config;

configs/storybook/package.json

@@ -2,25 +2,25 @@
 	"name": "@configs/storybook",
 	"version": "0.1.0",
 	"private": true,
-	"type": "module",
 	"dependencies": {
 		"@babel/core": "7.25.2",
-		"@babel/plugin-transform-typescript": "7.25.0",
-		"@babel/preset-env": "7.25.0",
-		"@babel/preset-react": "7.24.1",
-		"@babel/preset-typescript": "7.24.1",
+		"@babel/plugin-transform-typescript": "7.25.2",
+		"@babel/preset-env": "7.25.4",
+		"@babel/preset-react": "7.24.7",
+		"@babel/preset-typescript": "7.24.7",
 		"@emotion/babel-plugin": "11.12.0",
 		"@emotion/react": "11.11.3",
+		"@guardian/libs": "workspace:*",
 		"@guardian/source": "workspace:*",
-		"@storybook/addon-a11y": "8.2.7",
-		"@storybook/addon-docs": "8.2.7",
-		"@storybook/addon-essentials": "8.2.7",
-		"@storybook/addon-links": "8.2.7",
-		"@storybook/addon-viewport": "8.2.7",
-		"@storybook/manager-api": "8.2.7",
-		"@storybook/react": "8.2.7",
-		"@storybook/react-webpack5": "8.2.7",
-		"@storybook/theming": "8.2.7",
+		"@storybook/addon-a11y": "8.2.9",
+		"@storybook/addon-docs": "8.2.9",
+		"@storybook/addon-essentials": "8.2.9",
+		"@storybook/addon-links": "8.2.9",
+		"@storybook/addon-viewport": "8.2.9",
+		"@storybook/manager-api": "8.2.9",
+		"@storybook/react": "8.2.9",
+		"@storybook/react-webpack5": "8.2.9",
+		"@storybook/theming": "8.2.9",
 		"@types/babel__core": "7.20.5",
 		"@types/react": "18.2.11",
 		"babel-loader": "9.1.3",

configs/storybook/preview/FocusManagerDecorator.tsx

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

configs/storybook/preview/ThemeProviderDecorator.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment -- storybook type contains `any`s */
-
 import { ThemeProvider } from '@emotion/react';
 import type { Decorator } from '@storybook/react';
 

configs/storybook/preview/viewport.ts

@@ -1,5 +1,5 @@
-import type { Breakpoint } from '@guardian/source/foundations';
 import { breakpoints } from '@guardian/source/foundations';
+import type { Breakpoint } from '@guardian/source/foundations';
 
 type ViewportMeta = {
 	[key in Breakpoint]: {
@@ -66,7 +66,7 @@ const viewportEntries = Object.entries(breakpoints).map(([name, width]) => {
 	];
 });
 
-const viewportEntriesObject = Object.fromEntries(viewportEntries) as Viewports;
+const viewportEntriesObject: Viewports = Object.fromEntries(viewportEntries);
 
 export const viewport = {
 	viewports: {

configs/storybook/tsconfig.json

@@ -0,0 +1,4 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"include": ["**/*"]
+}

libs/@guardian/source-development-kitchen/.storybook/main.ts

@@ -0,0 +1,10 @@
+import base from '../../../../configs/storybook/main';
+import type { StorybookConfig } from '../../../../configs/storybook/main';
+
+const config: StorybookConfig = {
+	...base,
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+};
+
+/* eslint-disable-next-line import/no-default-export -- it's the storybook way */
+export default config;

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

@@ -30,14 +30,14 @@
 		"@emotion/react": "11.11.3",
 		"@guardian/libs": "18.0.1",
 		"@guardian/source": "7.0.1",
-		"@storybook/manager-api": "8.2.7",
-		"@storybook/react": "8.2.7",
+		"@storybook/manager-api": "8.2.9",
+		"@storybook/react": "8.2.9",
 		"@types/jest": "29.5.8",
 		"@types/react": "18.2.11",
 		"jest": "29.7.0",
 		"react": "18.2.0",
 		"rollup": "4.21.0",
-		"storybook": "8.2.7",
+		"storybook": "8.2.9",
 		"ts-jest": "29.2.3",
 		"tslib": "2.6.2",
 		"typescript": "5.5.2",

libs/@guardian/source/.storybook/main.ts

@@ -0,0 +1,10 @@
+import base from '../../../../configs/storybook/main';
+import type { StorybookConfig } from '../../../../configs/storybook/main';
+
+const config: StorybookConfig = {
+	...base,
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+};
+
+/* eslint-disable-next-line import/no-default-export -- it's the storybook way */
+export default config;

libs/@guardian/source/package.json

@@ -46,8 +46,8 @@
 		"@cobalt-ui/utils": "1.2.2",
 		"@emotion/react": "11.11.3",
 		"@guardian/libs": "18.0.1",
-		"@storybook/manager-api": "8.2.7",
-		"@storybook/react": "8.2.7",
+		"@storybook/manager-api": "8.2.9",
+		"@storybook/react": "8.2.9",
 		"@svgr/babel-preset": "8.1.0",
 		"@svgr/core": "8.1.0",
 		"@svgr/plugin-jsx": "8.1.0",
@@ -65,7 +65,7 @@
 		"prettier": "3.3.3",
 		"react": "18.2.0",
 		"rollup": "4.21.0",
-		"storybook": "8.2.7",
+		"storybook": "8.2.9",
 		"ts-jest": "29.2.3",
 		"tslib": "2.6.2",
 		"tsx": "4.17.0",