From f74ab9a552872cd082287541be3c7345ecddef35 Mon Sep 17 00:00:00 2001 From: Jamie B <53781962+JamieB-gu@users.noreply.github.com> Date: Wed, 26 Apr 2023 11:02:59 +0100 Subject: [PATCH] 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 | 7 +- apps-rendering/package.json | 21 +- .../CommentCount/CommentCount.stories.tsx | 2 +- .../src/components/Layout/Layout.stories.tsx | 18 +- .../Pagination/Pagination.stories.tsx | 14 +- apps-rendering/yarn.lock | 6466 ++++++----------- 6 files changed, 2382 insertions(+), 4146 deletions(-) diff --git a/apps-rendering/.storybook/main.js b/apps-rendering/.storybook/main.js index 94793882ba5..badd3d653e7 100644 --- a/apps-rendering/.storybook/main.js +++ b/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) => { diff --git a/apps-rendering/package.json b/apps-rendering/package.json index e26052c6834..b510b1b4d19 100644 --- a/apps-rendering/package.json +++ b/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", diff --git a/apps-rendering/src/components/CommentCount/CommentCount.stories.tsx b/apps-rendering/src/components/CommentCount/CommentCount.stories.tsx index a5e03acb527..7e40b3fb179 100644 --- a/apps-rendering/src/components/CommentCount/CommentCount.stories.tsx +++ b/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] }, diff --git a/apps-rendering/src/components/Layout/Layout.stories.tsx b/apps-rendering/src/components/Layout/Layout.stories.tsx index 59a0beba1e3..fe6be3138e8 100644 --- a/apps-rendering/src/components/Layout/Layout.stories.tsx +++ b/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 = (Layout: FC<{ item: Fixture }>) => - (fixture: Fixture): Story => { + (fixture: Fixture): StoryFn => { const story = (): ReactElement => ; - story.story = { name: formatToString(fixture) }; + story.storyName = formatToString(fixture); return story; }; @@ -103,7 +97,7 @@ const newsletterSignUpLayoutStory = createLayoutStory( ); const newsletterSignUpFallbackLayoutStory = ( fixture: NewsletterSignup, -): Story => { +): StoryFn => { const story = (): ReactElement => ( <>