Storybook 9

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';
 

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

@@ -11,7 +11,7 @@ import {
 	type Decorator,
 	type StoryContext,
 	type StrictArgs,
-} from '@storybook/react';
+} from '@storybook/react-webpack5';
 import { ArticleFormat } from '../../src/lib/articleFormat';
 import type { CSSProperties } from 'react';
 

dotcom-rendering/.storybook/main.ts

@@ -9,7 +9,13 @@ import { svgr } from '../webpack/svg.cjs';
 saveStories();
 
 const config: StorybookConfig = {
-	features: {},
+	features: {
+		actions: true,
+		backgrounds: true,
+		controls: true,
+		viewport: true,
+		toolbars: true,
+	},
 
 	stories: [
 		'../src/**/*.stories.@(tsx)',
@@ -24,19 +30,10 @@ const config: StorybookConfig = {
 	],
 
 	addons: [
-		{
-			name: '@storybook/addon-essentials',
-			options: {
-				actions: true,
-				backgrounds: true,
-				controls: true,
-				docs: true,
-				viewport: true,
-				toolbars: true,
-			},
-		},
-		'@storybook/addon-interactions',
 		'@storybook/addon-webpack5-compiler-swc',
+		'@storybook/addon-docs',
+		'@storybook/addon-a11y',
+		'@storybook/addon-backgrounds',
 	],
 
 	webpackFinal: async (config) => {
@@ -58,7 +55,9 @@ const config: StorybookConfig = {
 		// e.g process?.env?.SOME_VAR
 		config.plugins?.push(
 			new webpack.DefinePlugin({
-				process: '{}',
+				process: JSON.stringify({
+					env: { SDC_URL: process.env.SDC_URL },
+				}),
 			}),
 			// We rely on Buffer for our bridget thrift client
 			new webpack.ProvidePlugin({

dotcom-rendering/.storybook/preview.ts

@@ -4,15 +4,15 @@ import { AB } from '@guardian/ab-core';
 import isChromatic from 'chromatic/isChromatic';
 import MockDate from 'mockdate';
 
-import { fontsCss } from '../src/lib/fonts-css';
+import { rawFontsCss } from '../src/lib/fonts-css';
 import { resets } from '@guardian/source/foundations';
 
 import { Lazy } from '../src/components/Lazy';
 import { Picture } from '../src/components/Picture';
 import { mockFetch } from '../src/lib/mockRESTCalls';
 import { setABTests } from '../src/lib/useAB';
 import { ConfigContextDecorator } from './decorators/configContextDecorator';
-import { Preview } from '@storybook/react';
+import { Preview } from '@storybook/react-webpack5';
 import {
 	globalColourScheme,
 	globalColourSchemeDecorator,
@@ -42,7 +42,7 @@ setABTests({
 });
 
 // Add base css for the site
-let css = `${fontsCss}${resets.resetCSS}`;
+let css = `${rawFontsCss}${resets.resetCSS}`;
 let head = document.getElementsByTagName('head')[0];
 let style = document.createElement('style');
 head.appendChild(style);
@@ -162,9 +162,15 @@ export default {
 
 	parameters: {
 		viewport: {
-			viewports: guardianViewports,
-			defaultViewport: 'wide',
+			options: guardianViewports,
 		},
 		layout: 'fullscreen',
 	},
+
+	initialGlobals: {
+		viewport: {
+			value: 'wide',
+			isRotated: false,
+		},
+	},
 } satisfies Preview;

dotcom-rendering/.storybook/toolbar/globalColourScheme.ts

@@ -1,4 +1,4 @@
-import type { Decorator } from '@storybook/react';
+import type { Decorator } from '@storybook/react-webpack5';
 import { lightDecorator, darkDecorator } from '../decorators/themeDecorator';
 import { splitTheme } from '../decorators/splitThemeDecorator';
 import {

dotcom-rendering/package.json

@@ -47,17 +47,9 @@
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "10.20.0",
-		"@storybook/addon-essentials": "8.6.14",
-		"@storybook/addon-interactions": "8.6.14",
-		"@storybook/addon-webpack5-compiler-swc": "3.0.0",
-		"@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/test": "8.6.14",
-		"@storybook/theming": "8.6.14",
+		"@storybook/addon-docs": "9.1.13",
+		"@storybook/addon-webpack5-compiler-swc": "4.0.1",
+		"@storybook/react-webpack5": "9.1.13",
 		"@svgr/webpack": "8.1.0",
 		"@swc/cli": "0.7.8",
 		"@swc/core": "1.13.5",
@@ -122,6 +114,7 @@
 		"eslint-plugin-react": "7.33.2",
 		"eslint-plugin-react-hooks": "4.6.0",
 		"eslint-plugin-ssr-friendly": "1.3.0",
+		"eslint-plugin-storybook": "9.1.13",
 		"eslint-plugin-unicorn": "48.0.1",
 		"eslint-stats": "1.0.1",
 		"express": "5.1.0",
@@ -137,6 +130,7 @@
 		"lz-string": "1.5.0",
 		"mockdate": "3.0.5",
 		"node-fetch": "3.3.2",
+		"path-browserify": "1.0.1",
 		"postcss-styled-syntax": "0.6.3",
 		"preact": "10.15.1",
 		"preact-render-to-string": "6.0.2",
@@ -153,7 +147,7 @@
 		"screenfull": "6.0.2",
 		"semver": "7.5.4",
 		"source-map": "0.7.4",
-		"storybook": "8.6.14",
+		"storybook": "9.1.13",
 		"stylelint": "16.5.0",
 		"stylelint-config-recommended": "14.0.0",
 		"swc-loader": "0.2.6",

dotcom-rendering/src/components/Accessibility.importable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { Accessibility as AccessibilityComponent } from './Accessibility.importable';

dotcom-rendering/src/components/Accordion.stories.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import type { SerializedStyles } from '@emotion/react';
 import { article17, from, space } from '@guardian/source/foundations';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../.storybook/modes';
 import { Accordion as AccordionComponent } from './Accordion';
 

dotcom-rendering/src/components/AdSlot.apps.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { rightColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { allModes } from '../../.storybook/modes';
 import { AdSlot } from './AdSlot.apps';

dotcom-rendering/src/components/AdSlot.web.stories.tsx

@@ -1,9 +1,9 @@
 import type { SerializedStyles } from '@emotion/react';
 import { css } from '@emotion/react';
 import { remSpace, textSans14 } from '@guardian/source/foundations';
-import type { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { createRoot } from 'react-dom/client';
+import { within } from 'storybook/test';
 import {
 	centreColumnDecorator,
 	rightColumnDecorator,

dotcom-rendering/src/components/AgeWarning.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { AgeWarning } from './AgeWarning';
 
 const meta = {

dotcom-rendering/src/components/Answers.stories.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { Radio, RadioGroup } from '@guardian/source/react-components';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import {

dotcom-rendering/src/components/AppsEpic.importable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { AppsEpic as AppsEpicComponent } from './AppsEpic.importable';

dotcom-rendering/src/components/AppsFooter.importable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { AppsFooter as AppsFooterComponent } from './AppsFooter.importable';

dotcom-rendering/src/components/ArticleHeadline.stories.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { allModes } from '../../.storybook/modes';
 import {

dotcom-rendering/src/components/ArticleLastUpdated.stories.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { allModes } from '../../.storybook/modes';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
 import { palette } from '../palette';

dotcom-rendering/src/components/ArticleMeta.apps.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { leftColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { defaultFormats } from '../../.storybook/decorators/splitThemeDecorator';
 import { allModes } from '../../.storybook/modes';