Upgrade Storybook to V7 (WordPress#53520)

Co-authored-by: Lena Morita <[email protected]>

.eslintrc.js

@@ -87,6 +87,7 @@ module.exports = {
 	extends: [
 		'plugin:@wordpress/eslint-plugin/recommended',
 		'plugin:eslint-comments/recommended',
+		'plugin:storybook/recommended',
 	],
 	globals: {
 		wp: 'off',

package.json

@@ -96,6 +96,7 @@
 		"@actions/core": "1.9.1",
 		"@actions/github": "5.0.0",
 		"@babel/core": "7.16.0",
+		"@babel/plugin-proposal-export-namespace-from": "7.18.9",
 		"@babel/plugin-syntax-jsx": "7.16.0",
 		"@babel/runtime-corejs3": "7.16.0",
 		"@babel/traverse": "7.16.0",
@@ -107,15 +108,16 @@
 		"@octokit/webhooks-types": "5.6.0",
 		"@playwright/test": "1.32.0",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.2",
-		"@storybook/addon-a11y": "6.5.7",
-		"@storybook/addon-actions": "6.5.7",
-		"@storybook/addon-controls": "6.5.7",
-		"@storybook/addon-docs": "6.5.7",
-		"@storybook/addon-toolbars": "6.5.7",
-		"@storybook/addon-viewport": "6.5.7",
-		"@storybook/builder-webpack5": "6.5.7",
-		"@storybook/manager-webpack5": "6.5.7",
-		"@storybook/react": "6.5.7",
+		"@storybook/addon-a11y": "7.2.2",
+		"@storybook/addon-actions": "7.2.2",
+		"@storybook/addon-controls": "7.2.2",
+		"@storybook/addon-docs": "7.2.2",
+		"@storybook/addon-toolbars": "7.2.2",
+		"@storybook/addon-viewport": "7.2.2",
+		"@storybook/react": "7.2.2",
+		"@storybook/react-webpack5": "7.2.2",
+		"@storybook/source-loader": "7.2.2",
+		"@storybook/theming": "7.2.2",
 		"@testing-library/jest-dom": "5.16.5",
 		"@testing-library/react": "13.4.0",
 		"@testing-library/react-native": "12.1.2",
@@ -193,6 +195,7 @@
 		"eslint-plugin-jest-dom": "4.0.2",
 		"eslint-plugin-playwright": "0.8.0",
 		"eslint-plugin-ssr-friendly": "1.0.6",
+		"eslint-plugin-storybook": "0.6.13",
 		"eslint-plugin-testing-library": "5.7.2",
 		"execa": "4.0.2",
 		"fast-glob": "3.2.7",
@@ -223,7 +226,6 @@
 		"prettier": "npm:[email protected]",
 		"progress": "2.0.3",
 		"react": "18.2.0",
-		"react-docgen-typescript-plugin": "1.0.5",
 		"react-dom": "18.2.0",
 		"react-native": "0.71.11",
 		"react-native-url-polyfill": "1.1.2",
@@ -241,7 +243,8 @@
 		"snapshot-diff": "0.10.0",
 		"source-map-loader": "3.0.0",
 		"sprintf-js": "1.1.1",
-		"storybook-source-link": "2.0.4",
+		"storybook": "7.2.2",
+		"storybook-source-link": "2.0.9",
 		"strip-json-comments": "5.0.0",
 		"style-loader": "3.2.1",
 		"terser-webpack-plugin": "5.3.9",
@@ -301,10 +304,10 @@
 		"publish:patch": "lerna publish patch --no-private --dist-tag patch",
 		"start": "npm run dev",
 		"prestorybook:build": "npm run build:packages",
-		"storybook:build": "build-storybook -c ./storybook -o ./storybook/build",
+		"storybook:build": "storybook build -c ./storybook -o ./storybook/build",
 		"prestorybook:dev": "npm run build:packages",
-		"storybook:dev": "concurrently \"npm run dev:packages\" \"start-storybook -c ./storybook -p 50240\"",
-		"storybook:e2e:dev": "concurrently \"npm run dev:packages\" \"start-storybook -c test/storybook-playwright/storybook -p 50241\"",
+		"storybook:dev": "concurrently \"npm run dev:packages\" \"storybook dev -c ./storybook -p 50240\"",
+		"storybook:e2e:dev": "concurrently \"npm run dev:packages\" \"storybook dev -c test/storybook-playwright/storybook -p 50241\"",
 		"test": "npm-run-all lint test:unit",
 		"test:create-block": "bash ./bin/test-create-block.sh",
 		"test:e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",

packages/components/src/alignment-matrix-control/stories/index.tsx → packages/components/src/alignment-matrix-control/stories/index.story.tsx

@@ -19,9 +19,6 @@ import type { AlignmentMatrixControlProps } from '../types';
 const meta: ComponentMeta< typeof AlignmentMatrixControl > = {
 	title: 'Components (Experimental)/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
-	subcomponents: {
-		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
-	},
 	argTypes: {
 		onChange: { action: 'onChange', control: { type: null } },
 		value: { control: { type: null } },

packages/components/src/animate/stories/index.tsx → packages/components/src/animate/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -19,11 +19,9 @@ const meta: ComponentMeta< typeof Animate > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Animate > = ( props ) => (
-	<Animate { ...props } />
-);
+const Template: Story< typeof Animate > = ( props ) => <Animate { ...props } />;
 
-export const Default: ComponentStory< typeof Animate > = Template.bind( {} );
+export const Default: Story< typeof Animate > = Template.bind( {} );
 Default.args = {
 	children: ( { className } ) => (
 		<Notice className={ className } status="success">
@@ -32,9 +30,7 @@ Default.args = {
 	),
 };
 
-export const AppearTopLeft: ComponentStory< typeof Animate > = Template.bind(
-	{}
-);
+export const AppearTopLeft: Story< typeof Animate > = Template.bind( {} );
 AppearTopLeft.args = {
 	type: 'appear',
 	options: { origin: 'top left' },
@@ -44,9 +40,7 @@ AppearTopLeft.args = {
 		</Notice>
 	),
 };
-export const AppearTopRight: ComponentStory< typeof Animate > = Template.bind(
-	{}
-);
+export const AppearTopRight: Story< typeof Animate > = Template.bind( {} );
 AppearTopRight.args = {
 	type: 'appear',
 	options: { origin: 'top right' },
@@ -56,9 +50,7 @@ AppearTopRight.args = {
 		</Notice>
 	),
 };
-export const AppearBottomLeft: ComponentStory< typeof Animate > = Template.bind(
-	{}
-);
+export const AppearBottomLeft: Story< typeof Animate > = Template.bind( {} );
 AppearBottomLeft.args = {
 	type: 'appear',
 	options: { origin: 'bottom left' },
@@ -68,8 +60,7 @@ AppearBottomLeft.args = {
 		</Notice>
 	),
 };
-export const AppearBottomRight: ComponentStory< typeof Animate > =
-	Template.bind( {} );
+export const AppearBottomRight: Story< typeof Animate > = Template.bind( {} );
 AppearBottomRight.args = {
 	type: 'appear',
 	options: { origin: 'bottom right' },
@@ -80,7 +71,7 @@ AppearBottomRight.args = {
 	),
 };
 
-export const Loading: ComponentStory< typeof Animate > = Template.bind( {} );
+export const Loading: Story< typeof Animate > = Template.bind( {} );
 Loading.args = {
 	type: 'loading',
 	children: ( { className } ) => (
@@ -90,7 +81,7 @@ Loading.args = {
 	),
 };
 
-export const SlideIn: ComponentStory< typeof Animate > = Template.bind( {} );
+export const SlideIn: Story< typeof Animate > = Template.bind( {} );
 SlideIn.args = {
 	type: 'slide-in',
 	options: { origin: 'left' },

packages/components/src/button/stories/e2e/index.tsx → packages/components/src/button/stories/e2e/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Story, Meta } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -14,13 +14,13 @@ import { wordpress } from '@wordpress/icons';
 import { Button } from '../..';
 import type { ButtonAsButtonProps } from '../../types';
 
-const meta: ComponentMeta< typeof Button > = {
+const meta: Meta< typeof Button > = {
 	component: Button,
 	title: 'Components/Button',
 };
 export default meta;
 
-export const VariantStates: ComponentStory< typeof Button > = (
+export const VariantStates: Story< typeof Button > = (
 	props: ButtonAsButtonProps
 ) => {
 	const variants: ( typeof props.variant )[] = [
@@ -57,7 +57,7 @@ Icon.args = {
 	icon: wordpress,
 };
 
-export const Dashicons: ComponentStory< typeof Button > = ( props ) => {
+export const Dashicons: Story< typeof Button > = ( props ) => {
 	return (
 		<div style={ { display: 'flex', gap: 8 } }>
 			<Button { ...props } />

packages/components/src/button/stories/index.tsx → packages/components/src/button/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import type { ReactNode } from 'react';
 
 /**
@@ -21,7 +21,7 @@ import {
 import './style.css';
 import Button from '..';
 
-const meta: ComponentMeta< typeof Button > = {
+const meta: Meta< typeof Button > = {
 	title: 'Components/Button',
 	component: Button,
 	argTypes: {
@@ -44,54 +44,52 @@ const meta: ComponentMeta< typeof Button > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof Button > = ( props ) => {
+const Template: Story< typeof Button > = ( props ) => {
 	return <Button { ...props }></Button>;
 };
 
-export const Default: ComponentStory< typeof Button > = Template.bind( {} );
+export const Default: Story< typeof Button > = Template.bind( {} );
 Default.args = {
 	children: 'Code is poetry',
 };
 
-export const Primary: ComponentStory< typeof Button > = Template.bind( {} );
+export const Primary: Story< typeof Button > = Template.bind( {} );
 Primary.args = {
 	...Default.args,
 	variant: 'primary',
 };
 
-export const Secondary: ComponentStory< typeof Button > = Template.bind( {} );
+export const Secondary: Story< typeof Button > = Template.bind( {} );
 Secondary.args = {
 	...Default.args,
 	variant: 'secondary',
 };
 
-export const Tertiary: ComponentStory< typeof Button > = Template.bind( {} );
+export const Tertiary: Story< typeof Button > = Template.bind( {} );
 Tertiary.args = {
 	...Default.args,
 	variant: 'tertiary',
 };
 
-export const Link: ComponentStory< typeof Button > = Template.bind( {} );
+export const Link: Story< typeof Button > = Template.bind( {} );
 Link.args = {
 	...Default.args,
 	variant: 'link',
 };
 
-export const IsDestructive: ComponentStory< typeof Button > = Template.bind(
-	{}
-);
+export const IsDestructive: Story< typeof Button > = Template.bind( {} );
 IsDestructive.args = {
 	...Default.args,
 	isDestructive: true,
 };
 
-export const Icon: ComponentStory< typeof Button > = Template.bind( {} );
+export const Icon: Story< typeof Button > = Template.bind( {} );
 Icon.args = {
 	label: 'Code is poetry',
 	icon: 'wordpress',
 };
 
-export const GroupedIcons: ComponentStory< typeof Button > = () => {
+export const GroupedIcons: Story< typeof Button > = () => {
 	const GroupContainer = ( { children }: { children: ReactNode } ) => (
 		<div style={ { display: 'inline-flex' } }>{ children }</div>
 	);

packages/components/src/card/stories/index.tsx → packages/components/src/card/stories/index.story.tsx

@@ -21,7 +21,6 @@ import Button from '../../button';
 const meta: ComponentMeta< typeof Card > = {
 	component: Card,
 	title: 'Components/Card',
-	subcomponents: { CardHeader, CardBody, CardDivider, CardMedia, CardFooter },
 	argTypes: {
 		as: {
 			control: { type: null },

packages/components/src/circular-option-picker/stories/index.tsx → packages/components/src/circular-option-picker/stories/index.story.tsx

@@ -9,12 +9,7 @@ import { useState, createContext, useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import {
-	default as CircularOptionPicker,
-	ButtonAction,
-	DropdownLinkAction,
-	Option,
-} from '..';
+import { default as CircularOptionPicker } from '..';
 
 const CircularOptionPickerStoryContext = createContext< {
 	currentColor?: string;
@@ -24,11 +19,6 @@ const CircularOptionPickerStoryContext = createContext< {
 const meta: ComponentMeta< typeof CircularOptionPicker > = {
 	title: 'Components/CircularOptionPicker',
 	component: CircularOptionPicker,
-	subcomponents: {
-		'CircularOptionPicker.Option': Option,
-		'CircularOptionPicker.ButtonAction': ButtonAction,
-		'CircularOptionPicker.DropdownLinkAction': DropdownLinkAction,
-	},
 	argTypes: {
 		actions: { control: { type: null } },
 		options: { control: { type: null } },

packages/components/src/color-picker/stories/index.tsx → packages/components/src/color-picker/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, Story } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -30,10 +30,7 @@ const meta: ComponentMeta< typeof ColorPicker > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof ColorPicker > = ( {
-	onChange,
-	...props
-} ) => {
+const Template: Story< typeof ColorPicker > = ( { onChange, ...props } ) => {
 	const [ color, setColor ] = useState< string | undefined >();
 
 	return (

packages/components/src/dropdown-menu-v2/stories/index.tsx → packages/components/src/dropdown-menu-v2/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, Story } from '@storybook/react';
 import styled from '@emotion/styled';
 
 /**
@@ -36,20 +36,9 @@ import { menu, wordpress } from '@wordpress/icons';
 import Icon from '../../icon';
 import { ContextSystemProvider } from '../../ui/context';
 
-const meta: ComponentMeta< typeof DropdownMenu > = {
+const meta: Meta< typeof DropdownMenu > = {
 	title: 'Components (Experimental)/DropdownMenu v2',
 	component: DropdownMenu,
-	subcomponents: {
-		DropdownMenuItem,
-		DropdownSubMenu,
-		DropdownSubMenuTrigger,
-		DropdownMenuSeparator,
-		DropdownMenuCheckboxItem,
-		DropdownMenuGroup,
-		DropdownMenuLabel,
-		DropdownMenuRadioGroup,
-		DropdownMenuRadioItem,
-	},
 	argTypes: {
 		children: { control: { type: null } },
 		trigger: { control: { type: null } },
@@ -130,7 +119,7 @@ const RadioItemsGroup = () => {
 	);
 };
 
-const Template: ComponentStory< typeof DropdownMenu > = ( props ) => (
+const Template: Story< typeof DropdownMenu > = ( props ) => (
 	<SlotFillProvider>
 		<DropdownMenu { ...props } />
 		{ /* @ts-expect-error Slot is not currently typed on Popover */ }
@@ -205,9 +194,7 @@ const toolbarVariantContextValue = {
 		variant: 'toolbar',
 	},
 };
-export const ToolbarVariant: ComponentStory< typeof DropdownMenu > = (
-	props
-) => (
+export const ToolbarVariant: Story< typeof DropdownMenu > = ( props ) => (
 	<ContextSystemProvider value={ toolbarVariantContextValue }>
 		<DropdownMenu { ...props } />
 	</ContextSystemProvider>