Storybook: Upgrade to v8.0.x (WordPress#67574)

* Bump dependencies * Patch storybook-source-link to import from @storybook/manager-api * Add webpack5 compiler babel addon and enable react-docgen-typescript * Use @storybook/icons in introduction docs * Update storybook-source-link patch to use @storybook/icons * Fix status icons * Fix status icon styles * Preview: ArgsTable => Controls * Add explicit action spies Co-authored-by: tyxla <[email protected]> Co-authored-by: ciampo <[email protected]>
yogeshbhutkar · Dec 18, 2024 · 0d5ce66 · 0d5ce66
1 parent 6ce7ec6
commit 0d5ce66
Show file tree

Hide file tree

Showing 11 changed files with 1,279 additions and 1,627 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
 		"@emotion/babel-plugin": "11.11.0",
 		"@emotion/jest": "11.7.1",
 		"@emotion/native": "11.0.0",
-		"@geometricpanda/storybook-addon-badges": "2.0.1",
+		"@geometricpanda/storybook-addon-badges": "2.0.5",
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.8.0",
@@ -42,16 +42,18 @@
 		"@react-native/babel-preset": "0.73.10",
 		"@react-native/metro-babel-transformer": "0.73.10",
 		"@react-native/metro-config": "0.73.4",
-		"@storybook/addon-a11y": "7.6.15",
-		"@storybook/addon-actions": "7.6.15",
-		"@storybook/addon-controls": "7.6.15",
-		"@storybook/addon-docs": "7.6.15",
-		"@storybook/addon-toolbars": "7.6.15",
-		"@storybook/addon-viewport": "7.6.15",
-		"@storybook/react": "7.6.15",
-		"@storybook/react-webpack5": "7.6.15",
-		"@storybook/source-loader": "7.6.15",
-		"@storybook/theming": "7.6.15",
+		"@storybook/addon-a11y": "8.0.10",
+		"@storybook/addon-actions": "8.0.10",
+		"@storybook/addon-controls": "8.0.10",
+		"@storybook/addon-docs": "8.0.10",
+		"@storybook/addon-toolbars": "8.0.10",
+		"@storybook/addon-viewport": "8.0.10",
+		"@storybook/addon-webpack5-compiler-babel": "3.0.3",
+		"@storybook/react": "8.0.10",
+		"@storybook/react-webpack5": "8.0.10",
+		"@storybook/source-loader": "8.0.10",
+		"@storybook/test": "8.0.10",
+		"@storybook/theming": "8.0.10",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "14.3.0",
 		"@testing-library/react-native": "12.4.3",
@@ -156,7 +158,7 @@
 		"snapshot-diff": "0.10.0",
 		"source-map-loader": "3.0.0",
 		"sprintf-js": "1.1.1",
-		"storybook": "7.6.15",
+		"storybook": "8.0.10",
 		"storybook-source-link": "2.0.9",
 		"strip-json-comments": "5.0.0",
 		"style-loader": "3.2.1",

diff --git a/packages/components/src/custom-select-control-v2/stories/index.story.tsx b/packages/components/src/custom-select-control-v2/stories/index.story.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -44,6 +45,9 @@ const meta: Meta< typeof CustomSelectControlV2 > = {
 			</div>
 		),
 	],
+	args: {
+		onChange: fn(),
+	},
 };
 export default meta;
 

diff --git a/packages/components/src/tab-panel/stories/index.story.tsx b/packages/components/src/tab-panel/stories/index.story.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -22,6 +23,9 @@ const meta: Meta< typeof TabPanel > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
+	args: {
+		onSelect: fn(),
+	},
 };
 export default meta;
 

diff --git a/packages/components/src/tabs/stories/index.story.tsx b/packages/components/src/tabs/stories/index.story.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 /**
  * WordPress dependencies
@@ -39,6 +40,10 @@ const meta: Meta< typeof Tabs > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
+	args: {
+		onActiveTabIdChange: fn(),
+		onSelect: fn(),
+	},
 };
 export default meta;
 

diff --git a/patches/storybook-source-link+2.0.9.patch b/patches/storybook-source-link+2.0.9.patch
@@ -0,0 +1,55 @@
+diff --git a/node_modules/storybook-source-link/dist/esm/Tool.js b/node_modules/storybook-source-link/dist/esm/Tool.js
+index 100099e..53d37c4 100644
+--- a/node_modules/storybook-source-link/dist/esm/Tool.js
++++ b/node_modules/storybook-source-link/dist/esm/Tool.js
+@@ -1,7 +1,8 @@
+ import React from "react";
+-import { Icons, IconButton, TooltipMessage, WithTooltip } from "@storybook/components";
+-import { PARAM_KEY, PREFIX_PARAM_KEY, ICON_PARAM_KEY, INFO_LINK, TOOL_ID } from "./constants";
+-import { useParameter } from '@storybook/api';
++import { IconButton, TooltipMessage, WithTooltip } from "@storybook/components";
++import { RepoIcon } from '@storybook/icons';
++import { PARAM_KEY, PREFIX_PARAM_KEY, INFO_LINK, TOOL_ID } from "./constants";
++import { useParameter } from '@storybook/manager-api';
+
+ var Tooltip = function Tooltip() {
+   return /*#__PURE__*/React.createElement(TooltipMessage, {
+@@ -24,7 +25,6 @@ export var getLink = function getLink(prefix, link) {
+ export var Tool = function Tool() {
+   var param_link = useParameter(PARAM_KEY, null);
+   var param_prefix = useParameter(PREFIX_PARAM_KEY, null);
+-  var param_icon = useParameter(ICON_PARAM_KEY, "repository");
+   var link = getLink(param_prefix, param_link);
+   return link ? /*#__PURE__*/React.createElement(IconButton, {
+     key: TOOL_ID,
+@@ -35,9 +35,7 @@ export var Tool = function Tool() {
+         window.open(link);
+       }
+     }
+-  }, /*#__PURE__*/React.createElement(Icons, {
+-    icon: param_icon
+-  })) : /*#__PURE__*/React.createElement(WithTooltip, {
++  }, /*#__PURE__*/React.createElement(RepoIcon)) : /*#__PURE__*/React.createElement(WithTooltip, {
+     placement: "top",
+     trigger: "click",
+     tooltip: /*#__PURE__*/React.createElement(Tooltip, null)
+@@ -45,7 +43,5 @@ export var Tool = function Tool() {
+     key: TOOL_ID,
+     title: "View Source Repository",
+     active: false
+-  }, /*#__PURE__*/React.createElement(Icons, {
+-    icon: param_icon
+-  })));
++  }, /*#__PURE__*/React.createElement(RepoIcon)));
+ };
+\ No newline at end of file
+diff --git a/node_modules/storybook-source-link/dist/esm/preset/manager.js b/node_modules/storybook-source-link/dist/esm/preset/manager.js
+index 845f81d..ca1d066 100644
+--- a/node_modules/storybook-source-link/dist/esm/preset/manager.js
++++ b/node_modules/storybook-source-link/dist/esm/preset/manager.js
+@@ -1,4 +1,4 @@
+-import { addons, types } from "@storybook/addons";
++import { addons, types } from "@storybook/manager-api";
+ import { ADDON_ID, TOOL_ID } from "../constants";
+ import { Tool } from "../Tool"; // Register the addon
+
diff --git a/storybook/main.js b/storybook/main.js
@@ -54,6 +54,7 @@ module.exports = {
 		'@storybook/addon-a11y',
 		'@storybook/addon-toolbars',
 		'@storybook/addon-actions',
+		'@storybook/addon-webpack5-compiler-babel',
 		'storybook-source-link',
 		'@geometricpanda/storybook-addon-badges',
 	],
@@ -64,6 +65,9 @@ module.exports = {
 	docs: {
 		autodocs: true,
 	},
+	typescript: {
+		reactDocgen: 'react-docgen-typescript',
+	},
 	webpackFinal: async ( config ) => {
 		return {
 			...config,

diff --git a/storybook/preview.js b/storybook/preview.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import {
-	ArgsTable,
+	Controls,
 	Description,
 	Primary,
 	Stories,
@@ -114,8 +114,7 @@ export const parameters = {
 				<Subtitle />
 				<Primary />
 				<Description />
-				{ /* `story="^"` enables Controls for the primary props table */ }
-				<ArgsTable story="^" />
+				<Controls />
 				<Stories includePrimary={ false } />
 			</>
 		),

diff --git a/storybook/sidebar.js b/storybook/sidebar.js
@@ -28,7 +28,9 @@ const Title = styled.span( {
 
 const Icons = styled.span( {} );
 
-const Icon = styled.span( {} );
+const Icon = styled.span( {
+	lineHeight: 1,
+} );
 
 /**
  * Fetches tags from the Storybook API, and returns Icon
@@ -41,7 +43,7 @@ function useIcons( item ) {
 	return useMemo( () => {
 		let data = {};
 
-		if ( item.isComponent && item.children?.length ) {
+		if ( item.type === 'component' && item.children?.length ) {
 			data = api.getData( item.children[ 0 ] ) ?? {};
 		}
 

diff --git a/storybook/stories/docs/inline-icon.js b/storybook/stories/docs/inline-icon.js
@@ -2,11 +2,13 @@
  * External dependencies
  */
 import styled from '@emotion/styled';
-import { Icons } from '@storybook/components';
 
-const StyledIcons = styled( Icons )`
+const IconWrapper = ( { icon, ...props } ) => {
+	const IconComponent = icon;
+	return <IconComponent aria-hidden { ...props } />;
+};
+
+export const InlineIcon = styled( IconWrapper )`
 	display: inline-block !important;
 	width: 14px;
 `;
-
-export const InlineIcon = ( props ) => <StyledIcons aria-hidden { ...props } />;
diff --git a/storybook/stories/docs/introduction.mdx b/storybook/stories/docs/introduction.mdx
@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/blocks';
+import { RepoIcon } from '@storybook/icons';
 import { InlineIcon } from './inline-icon';
 
 <Meta title="Docs/Introduction" name="page" />
@@ -28,7 +29,7 @@ The site shows the individual components in the sidebar and the Canvas on the ri
 
 To view the documentation for each component use the **Docs** menu item in the top toolbar.
 
-To view the source code for the component and its stories on GitHub, click the <InlineIcon icon="repository" /> View Source Repository button in the top right corner.
+To view the source code for the component and its stories on GitHub, click the <InlineIcon icon={ RepoIcon } /> View Source Repository button in the top right corner.
 
 To use it in your local development environment run the following command in the top level Gutenberg directory: