Merge branch 'main' into ab/personalise-highlights

Author: abeddow91

apps-rendering/.storybook/fonts-css.ts

@@ -1,5 +1,3 @@
-import CleanCSS from 'clean-css';
-
 type FontFamily =
 	| 'GH Guardian Headline'
 	| 'Guardian Egyptian Web' // Legacy of GH Guardian Headline
@@ -278,5 +276,4 @@ const getStyleString: () => string = () => {
 	);
 };
 
-export const getFontsCss = (): string =>
-	new CleanCSS().minify(getStyleString()).styles;
+export const getFontsCss = (): string => getStyleString();

apps-rendering/.storybook/main.js

@@ -16,11 +16,6 @@ module.exports = {
 		// Global options for webpack
 		config.resolve.extensions?.push('.ts', '.tsx');
 
-		config.resolve.fallback ??= {};
-		// clean-css will try to import these packages
-		config.resolve.fallback['http'] = false;
-		config.resolve.fallback['https'] = false;
-
 		// Required as otherwise 'process' will not be defined when included on its own (without .env)
 		// e.g process?.env?.SOME_VAR
 		config.plugins.push(

apps-rendering/.storybook/preview.js

@@ -82,8 +82,14 @@ export const viewports = [320, 375, 480, 660, 740, 980, 1140, 1300];
 
 export const parameters = {
 	viewport: {
-		viewports: guardianViewports,
-		defaultViewport: 'wide',
+		options: guardianViewports,
 	},
 	layout: 'fullscreen',
 };
+
+export const initialGlobals = {
+	viewport: {
+		value: 'wide',
+		isRotated: false,
+	},
+};

apps-rendering/config/.eslintrc.js

@@ -118,7 +118,7 @@ module.exports = {
 		{
 			files: ['**/*.tsx'],
 			rules: {
-				'@typescript-eslint/ban-types': [
+				'@typescript-eslint/no-restricted-types': [
 					'error',
 					{
 						types: {
@@ -132,7 +132,6 @@ module.exports = {
 							'React.FC':
 								'Please use const MyThing = ({foo, bar}: Props) instead',
 						},
-						extendDefaults: true,
 					},
 				],
 			},

apps-rendering/package.json

@@ -46,21 +46,15 @@
 		"@guardian/cdk": "62.0.1",
 		"@guardian/content-api-models": "31.0.0",
 		"@guardian/content-atom-model": "6.1.0",
-		"@guardian/eslint-config-typescript": "11.0.0",
+		"@guardian/eslint-config-typescript": "12.0.0",
 		"@guardian/libs": "22.0.0",
 		"@guardian/renditions": "0.2.0",
 		"@guardian/source": "9.0.0",
 		"@guardian/source-development-kitchen": "17.0.0",
 		"@smithy/property-provider": "2.0.16",
-		"@storybook/addon-essentials": "8.6.14",
+		"@storybook/addon-docs": "9.1.13",
 		"@storybook/addon-webpack5-compiler-babel": "3.0.6",
-		"@storybook/components": "8.6.14",
-		"@storybook/core-events": "8.6.14",
-		"@storybook/manager-api": "8.6.14",
-		"@storybook/preview-api": "8.6.14",
-		"@storybook/react": "8.6.14",
-		"@storybook/react-webpack5": "8.6.14",
-		"@storybook/theming": "8.6.14",
+		"@storybook/react-webpack5": "9.1.13",
 		"@types/clean-css": "4.2.11",
 		"@types/compression": "1.8.1",
 		"@types/express": "5.0.1",
@@ -81,7 +75,7 @@
 		"compression": "1.8.0",
 		"constructs": "10.4.2",
 		"core-js": "3.33.3",
-		"eslint": "8.56.0",
+		"eslint": "8.57.1",
 		"eslint-plugin-jsx-a11y": "6.7.1",
 		"eslint-plugin-react": "7.33.2",
 		"express": "5.1.0",
@@ -95,7 +89,7 @@
 		"react-dom": "18.3.1",
 		"react-test-renderer": "18.3.1",
 		"require-from-string": "2.0.2",
-		"storybook": "8.6.14",
+		"storybook": "9.1.13",
 		"thrift": "0.20.0",
 		"ts-jest": "29.1.2",
 		"ts-loader": "9.5.4",

apps-rendering/src/components/Layout/Layout.stories.tsx

@@ -3,7 +3,7 @@
 import { Edition } from '@guardian/apps-rendering-api-models/edition';
 import { ArticleSpecial, formatToString } from '../../articleFormat';
 import { breakpoints } from '@guardian/source/foundations';
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react-webpack5';
 import {
 	analysis,
 	article,

apps-rendering/src/components/Pagination/Pagination.stories.tsx

@@ -4,7 +4,7 @@ import {
 	formatToString,
 } from '../../articleFormat';
 import { breakpoints } from '@guardian/source/foundations';
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn } from '@storybook/react-webpack5';
 import { getAllThemes } from 'fixtures/article';
 import { Pagination } from '.';
 

apps-rendering/src/server/decoders.ts

@@ -33,6 +33,8 @@ const decodeContent =
 
 			return decoder.read(protocol);
 		} else {
+			/* eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors --
+			 * Part of an upgrade to get this rule enabled. */
 			return Promise.reject('Invalid request');
 		}
 	};

dotcom-rendering/.eslintrc.js

@@ -63,10 +63,11 @@ module.exports = {
 		'eslint:recommended',
 		'@guardian/eslint-config-typescript',
 		'plugin:jsx-a11y/recommended',
+		'plugin:ssr-friendly/recommended',
+		'plugin:storybook/recommended',
 		// eslint-config-prettier disables formatting rules that conflict with prettier
 		// needs to go last so it can override other configuration. See https://github.com/prettier/eslint-config-prettier#installation
 		'prettier',
-		'plugin:ssr-friendly/recommended',
 	],
 	parser: '@typescript-eslint/parser',
 	parserOptions: {
@@ -211,7 +212,7 @@ module.exports = {
 			files: ['**/**.js'],
 			rules: {
 				'global-require': 'off',
-				'@typescript-eslint/no-var-requires': 'off',
+				'@typescript-eslint/no-require-imports': 'off',
 				'@typescript-eslint/no-unsafe-member-access': 'off',
 				'@typescript-eslint/no-misused-promises': 'off',
 			},
@@ -244,7 +245,7 @@ module.exports = {
 		{
 			files: ['**/**.tsx'],
 			rules: {
-				'@typescript-eslint/ban-types': [
+				'@typescript-eslint/no-restricted-types': [
 					'warn',
 					{
 						types: {
@@ -258,7 +259,7 @@ module.exports = {
 						},
 					},
 				],
-				'@typescript-eslint/ban-types': [
+				'@typescript-eslint/no-restricted-types': [
 					'error',
 					{
 						types: {
@@ -273,7 +274,6 @@ module.exports = {
 							'React.FC':
 								'Please use const MyThing = ({foo, bar}: Props) instead',
 						},
-						extendDefaults: true,
 					},
 				],
 			},

dotcom-rendering/.storybook/decorators/configContextDecorator.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ConfigProvider } from '../../src/components/ConfigContext';
-import type { Decorator } from '@storybook/react';
+import type { Decorator } from '@storybook/react-webpack5';
 import { Config } from '../../src/types/configContext';
 
 const defaultConfig = {