make all storybook configs TS

Author: sndrs

Diff for: configs/storybook/main.js renamed to 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 }) => {
+		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;

Diff for: configs/storybook/package.json

@@ -11,6 +11,7 @@
 		"@babel/preset-typescript": "7.24.1",
 		"@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",

Diff for: 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(() => {

Diff for: 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';
 

Diff for: 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: {

Diff for: configs/storybook/tsconfig.json

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

Diff for: libs/@guardian/source-development-kitchen/.storybook/main.js

@@ -0,0 +1,9 @@
+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)'],
+};
+
+export default config;

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

@@ -0,0 +1,9 @@
+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)'],
+};
+
+export default config;