Upgrade Storybook to v8 (#501)

Upgrade Storybook to v8. This major version bump removes the other path which was bringing in the vulnerable ip package (the first use was removed in #500). I ran: $ npx storybook@latest upgrade And fixed a few remaining issues following: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800. There were some issues with the Grid add on which needed to be resolved through trial and error.
guardian · Jun 17, 2024 · cdb6944 · cdb6944
1 parent 207399f
commit cdb6944
Show file tree

Hide file tree

Showing 10 changed files with 1,680 additions and 1,714 deletions.
diff --git a/.storybook/article-context/register.js b/.storybook/article-context/register.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 import { ArticleContextPanel } from './ArticleContextPanel';
 
 const ARTICLE_CONTEXT_ADDON_ID = 'articleContextAddon';
@@ -9,7 +9,7 @@ addons.register(ARTICLE_CONTEXT_ADDON_ID, (api) => {
     addons.add(ARTICLE_CONTEXT_PANEL_ID, {
         title: 'Article Context Filters',
         type: types.PANEL,
-        render: ({ active, key }) => <ArticleContextPanel api={api} active={active} key={key} />,
+        render: ({ active }) => <ArticleContextPanel api={api} active={active} />,
         paramKey: 'articleContext', // This is the key under which parameters are expected in the addon config
     });
 });
diff --git a/.storybook/grid/GridPanel.tsx b/.storybook/grid/GridPanel.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { AddonPanel } from '@storybook/components';
-import { useChannel } from '@storybook/api';
+import { API, addons } from '@storybook/manager-api';
 import { STORY_CHANGED } from '@storybook/core-events';
-import { API } from '@storybook/api';
 import type { IframePostMessage, Asset } from '@guardian/grid-client';
 import { nonEmotionStyles } from './gridStyles';
 import { INITIAL_IMAGE_EVENT, IMAGE_SELECTED_EVENT } from './withGrid';
@@ -47,7 +46,6 @@ const signImageUrl = (unsignedImageUrl: URL): Promise<string> =>
         });
 
 export const GridPanel = ({ api, active }: Props) => {
-    const emit = useChannel({});
     const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
     const [selectedImage, setSelectedImage] = useState<string | undefined>();
     const activeButton = useRef(null);
@@ -79,7 +77,7 @@ export const GridPanel = ({ api, active }: Props) => {
         signImageUrl(cropUrl)
             .then((signedCropUrl) => {
                 setSelectedImage(signedCropUrl);
-                emit(IMAGE_SELECTED_EVENT, signedCropUrl);
+                addons.getChannel().emit(IMAGE_SELECTED_EVENT, signedCropUrl);
             })
             .finally(() => {
                 setIsModalOpen(false);

diff --git a/.storybook/grid/register.js b/.storybook/grid/register.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 import { GridPanel } from './GridPanel';
 
 const GRID_ADDON_ID = 'gridAddon';
@@ -9,7 +9,7 @@ addons.register(GRID_ADDON_ID, (api) => {
     addons.add(GRID_PANEL_ID, {
         title: 'Grid Image Picker',
         type: types.PANEL,
-        render: ({ active, key }) => <GridPanel api={api} active={active} key={key} />,
+        render: ({ active }) => <GridPanel api={api} active={active} />,
         paramKey: 'grid', // This is the key under which parameters are expected in the addon config
     });
 });
diff --git a/.storybook/grid/withGrid.tsx b/.storybook/grid/withGrid.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { addons } from '@storybook/addons';
-import { makeDecorator } from '@storybook/preview-api';
+import { addons, makeDecorator } from '@storybook/preview-api';
 import { STORY_CHANGED, FORCE_RE_RENDER } from '@storybook/core-events';
 
 let gridValue;

diff --git a/.storybook/gu-auth/register.js b/.storybook/gu-auth/register.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 
 import { GuAuth } from './GuAuth';
 

diff --git a/.storybook/gu-preview/register.js b/.storybook/gu-preview/register.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { addons, types } from '@storybook/addons';
+import { addons, types } from '@storybook/manager-api';
 import { GuPreview } from './GuPreview';
 
 const ADDON_ID = 'gupreview'

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,12 +1,25 @@
 const path = require('path');
 module.exports = {
   stories: ['../src/**/*.stories.tsx'],
-  addons: ['@storybook/addon-docs', '@storybook/addon-controls', '@storybook/addon-viewport', './gu-auth/register.js', './gu-preview/register.js', './grid/register.js', './article-context/register.js'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-controls',
+    '@storybook/addon-viewport',
+    './gu-auth/register.js',
+    './gu-preview/register.js',
+    './grid/register.js',
+    './article-context/register.js',
+    '@storybook/addon-webpack5-compiler-babel'
+  ],
+
   framework: {
     name: '@storybook/react-webpack5',
     options: {}
   },
-  docs: {
-    autodocs: true
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
   }
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -59,3 +59,4 @@ export const parameters = {
         disable: true,
     },
 };
+export const tags = ['autodocs'];
diff --git a/package.json b/package.json
@@ -51,13 +51,14 @@
     "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-replace": "^2.3.3",
-    "@storybook/addon-controls": "^7.6.17",
-    "@storybook/addon-docs": "^7.6.17",
-    "@storybook/addon-toolbars": "^7.6.17",
-    "@storybook/addon-viewport": "^7.6.17",
-    "@storybook/components": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/addon-controls": "^8.1.9",
+    "@storybook/addon-docs": "^8.1.9",
+    "@storybook/addon-toolbars": "^8.1.9",
+    "@storybook/addon-viewport": "^8.1.9",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/components": "^8.1.9",
+    "@storybook/react": "^8.1.9",
+    "@storybook/react-webpack5": "^8.1.9",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.2",
@@ -72,7 +73,7 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.8.0",
     "fast-check": "^3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -86,7 +87,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.3",
     "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-visualizer": "^4.1.1",
-    "storybook": "^7.6.17",
+    "storybook": "^8.1.9",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.0",
     "typescript": "~5.1.3",
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,3 +59,4 @@ export const parameters = { @@
             disable: true,
         },
     };
+    export const tags = ['autodocs'];