Storybook 7 Upgrade - AR (#7622)

- Updated all storybook dependencies to v7
- Added storybook package and new CLI commands
- Updated `main.js` to use framework instead of builders
- Added `addon-essentials` dependency to AR
- Used `StoryFn` type for stories with type errors
- Used `.storyName` instead of `.story.name`

apps-rendering/.storybook/main.js

@@ -3,9 +3,6 @@ const webpack = require('webpack');
 
 /** @type {import("@storybook/react/types").StorybookConfig} */
 module.exports = {
-	core: {
-		builder: 'webpack5',
-	},
 	stories: ['../src/**/*.stories.@(js|mdx|ts|tsx)'],
 	addons: [
 		'@storybook/addon-essentials',
@@ -53,6 +50,10 @@ module.exports = {
 		// See: https://storybook.js.org/docs/react/configure/environment-variables
 		CI: 'true',
 	}),
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {}
+	}
 };
 
 const webpackConfig = (config) => {

apps-rendering/package.json

@@ -27,8 +27,8 @@
 		"build:client:prod": "webpack --config webpack.config.ts --config-name clientProduction",
 		"synth": "cdk synth --path-metadata false --version-reporting false",
 		"diff": "cdk diff --path-metadata false --version-reporting false",
-		"storybook": "start-storybook -p 4003",
-		"build-storybook": "node --max-old-space-size=4096 $(yarn bin)/build-storybook"
+		"storybook": "storybook dev -p 4003",
+		"build-storybook": "node --max-old-space-size=4096 $(yarn bin)/storybook build"
 	},
 	"author": "",
 	"license": "ISC",
@@ -56,14 +56,14 @@
 		"@guardian/source-react-components": "^11.4.0",
 		"@guardian/source-react-components-development-kitchen": "10.0.1",
 		"@guardian/types": "^9.0.1",
-		"@storybook/addons": "^6.4.0",
-		"@storybook/api": "^6.4.0",
-		"@storybook/builder-webpack5": "^6.4.0",
-		"@storybook/components": "^6.5.15",
-		"@storybook/core-events": "^6.4.0",
-		"@storybook/manager-webpack5": "^6.4.0",
-		"@storybook/react": "^6.4.0",
-		"@storybook/theming": "^6.5.15",
+		"@storybook/addon-essentials": "^7.0.7",
+		"@storybook/addons": "^7.0.7",
+		"@storybook/api": "^7.0.7",
+		"@storybook/components": "^7.0.7",
+		"@storybook/core-events": "^7.0.7",
+		"@storybook/react": "^7.0.7",
+		"@storybook/react-webpack5": "^7.0.7",
+		"@storybook/theming": "^7.0.7",
 		"@types/clean-css": "^4.2.5",
 		"@types/compression": "^1.7.2",
 		"@types/express": "^4.17.13",
@@ -107,6 +107,7 @@
 		"react-test-renderer": "^17.0.2",
 		"require-from-string": "^2.0.2",
 		"source-map-support": "^0.5.21",
+		"storybook": "^7.0.7",
 		"thrift": "^0.16.0",
 		"ts-jest": "^28.0.7",
 		"ts-loader": "^9.4.1",

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

@@ -42,8 +42,8 @@ const Deadblogs = (): ReactElement => {
 	);
 };
 
+Deadblogs.storyName = 'Deadblogs comment count below desktop';
 Deadblogs.story = {
-	name: 'Deadblogs comment count below desktop',
 	parameters: {
 		viewport: { defaultViewport: 'tablet' },
 		chromatic: { viewports: [breakpoints.tablet] },

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

@@ -3,6 +3,7 @@
 import { Edition } from '@guardian/apps-rendering-api-models/edition';
 import { ArticleSpecial } from '@guardian/libs';
 import { breakpoints } from '@guardian/source-foundations';
+import type { StoryFn } from '@storybook/react';
 import { formatToString } from 'articleFormat';
 import {
 	analysis,
@@ -40,13 +41,6 @@ import LiveLayout from './LiveLayout';
 import NewsletterSignUpLayout from './NewsletterSignUpLayout';
 import StandardLayout from './StandardLayout';
 
-// ----- Types ----- //
-
-/**
- * A storybook story with a name.
- */
-type Story = { (): ReactElement; story: { name: string } };
-
 // ----- Helpers ----- //
 
 /**
@@ -64,9 +58,9 @@ const setSpecialReportAlt = setTheme(ArticleSpecial.SpecialReportAlt);
  */
 const createLayoutStory =
 	<Fixture extends Item>(Layout: FC<{ item: Fixture }>) =>
-	(fixture: Fixture): Story => {
+	(fixture: Fixture): StoryFn<typeof Layout> => {
 		const story = (): ReactElement => <Layout item={fixture} />;
-		story.story = { name: formatToString(fixture) };
+		story.storyName = formatToString(fixture);
 
 		return story;
 	};
@@ -103,7 +97,7 @@ const newsletterSignUpLayoutStory = createLayoutStory(
 );
 const newsletterSignUpFallbackLayoutStory = (
 	fixture: NewsletterSignup,
-): Story => {
+): StoryFn<typeof NewsletterSignUpLayout> => {
 	const story = (): ReactElement => (
 		<>
 			<style>
@@ -114,9 +108,7 @@ const newsletterSignUpFallbackLayoutStory = (
 			<NewsletterSignUpLayout item={fixture} />
 		</>
 	);
-	story.story = {
-		name: `${formatToString(fixture)} (form component not supported)`,
-	};
+	story.storyName = `${formatToString(fixture)} (form component not supported)`;
 
 	return story;
 };

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

@@ -1,8 +1,8 @@
 import { ArticleDesign, ArticleDisplay } from '@guardian/libs';
 import { breakpoints } from '@guardian/source-foundations';
+import type { StoryFn } from '@storybook/react';
 import { formatToString } from 'articleFormat';
 import { getAllThemes } from 'fixtures/article';
-import type { ReactElement } from 'react';
 import { Pagination } from '.';
 
 export default {
@@ -19,7 +19,7 @@ const formats = getAllThemes({
 	design: ArticleDesign.Standard,
 });
 
-export const notFirstPage = (): ReactElement => {
+export const notFirstPage: StoryFn<typeof Pagination> = () => {
 	return (
 		<>
 			{formats.map((format) => (
@@ -33,11 +33,9 @@ export const notFirstPage = (): ReactElement => {
 		</>
 	);
 };
-notFirstPage.story = {
-	name: 'Not first page',
-};
+notFirstPage.storyName = 'Not first page';
 
-export const firstPageStory = (): ReactElement => {
+export const firstPageStory: StoryFn<typeof Pagination> = () => {
 	return (
 		<>
 			{formats.map((format) => (
@@ -51,6 +49,4 @@ export const firstPageStory = (): ReactElement => {
 		</>
 	);
 };
-firstPageStory.story = {
-	name: 'First page',
-};
+firstPageStory.storyName = 'First page';