Storybook 9

Author: DanielCliftonGuardian

dotcom-rendering/.eslintrc.js

@@ -63,10 +63,9 @@ module.exports = {
 		'eslint:recommended',
 		'@guardian/eslint-config-typescript',
 		'plugin:jsx-a11y/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',
+		'plugin:storybook/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)',
@@ -23,21 +29,7 @@ const config: StorybookConfig = {
 		{ from: '../src/static', to: '/static/frontend/' },
 	],
 
-	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',
-	],
+	addons: ['@storybook/addon-webpack5-compiler-swc', '@storybook/addon-docs'],
 
 	webpackFinal: async (config) => {
 		// Get project specific webpack options

dotcom-rendering/.storybook/preview.ts

@@ -12,7 +12,7 @@ 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,
@@ -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,8 @@
 		"@guardian/tsconfig": "0.2.0",
 		"@playwright/test": "1.52.0",
 		"@sentry/browser": "10.10.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-webpack5-compiler-swc": "4.0.1",
+		"@storybook/react-webpack5": "9.1.10",
 		"@svgr/webpack": "8.1.0",
 		"@swc/cli": "0.7.7",
 		"@swc/core": "1.11.31",
@@ -153,7 +144,7 @@
 		"screenfull": "6.0.2",
 		"semver": "7.5.4",
 		"source-map": "0.7.4",
-		"storybook": "8.6.14",
+		"storybook": "9.1.10",
 		"stylelint": "16.5.0",
 		"stylelint-config-recommended": "14.0.0",
 		"swc-loader": "0.2.6",
@@ -184,5 +175,9 @@
 		"webpack-node-externals": "3.0.0",
 		"webpack-sources": "3.2.3",
 		"zod": "3.22.4"
+	},
+	"devDependencies": {
+		"eslint-plugin-storybook": "9.1.10",
+		"@storybook/addon-docs": "9.1.10"
 	}
 }

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