Storybook 9 (#14688)

* Storybook 9

* Import path

* Fix chai ambient type error

* Fix AR storybook error CleanCSS

* Remove deprecated addon-essentials and add addon-docs

* Add comments

* Update

* Update pnpm-lock.yaml

* Types chai resolution

* stop bundling clean-css

Move font CSS minification to the server template so Storybook imports only the raw font-face rules, fixing the iframe HTTP_PROXY error

* Fix TypeError: Cannot read properties of undefined (reading 'HOSTNAME')

Replace direct process.env.HOSTNAME usage with a runtimeHostname() fallback to prevent TypeError in build

* Fix TypeError

: Cannot read properties of undefined (reading 'HOSTNAME')

* Update forceBrazeMessage.ts

* Fix undefined error SCR_URL

* Fix backgrounds

* Fixes and improvements

* Fix backgrounds in chromatic

* Update preview.ts

* Remove localhost fallback

Author: DanielCliftonGuardian

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/package.json

@@ -52,15 +52,9 @@
 		"@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",
@@ -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 '.';
 

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

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 = {

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { Decorator } from '@storybook/react';
+import type { Decorator } from '@storybook/react-webpack5';
 import { grid } from '../../src/grid';
 import { from } from '@guardian/source/foundations';
 

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

@@ -13,7 +13,7 @@ import {
 	textSans17,
 	textSansBold20,
 } from '@guardian/source/foundations';
-import { Decorator } from '@storybook/react';
+import { Decorator } from '@storybook/react-webpack5';
 import { storybookPaletteDeclarations as paletteDeclarations } from '../mocks/paletteDeclarations';
 import type { ReactNode } from 'react';