Storybook: Add badges to private components (#58123)

* Storybook: Set up badges for private components

* Add badges

* Add badge for WIP

package.json

@@ -107,6 +107,7 @@
 		"@emotion/babel-plugin": "11.3.0",
 		"@emotion/jest": "11.7.1",
 		"@emotion/native": "11.0.0",
+		"@geometricpanda/storybook-addon-badges": "2.0.1",
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.6.0",

packages/components/src/custom-select-control-v2/stories/index.story.tsx

@@ -26,6 +26,7 @@ const meta: Meta< typeof CustomSelect > = {
 		value: { control: { type: null } },
 	},
 	parameters: {
+		badges: [ 'wip' ],
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: {

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

@@ -58,6 +58,7 @@ const meta: Meta< typeof DropdownMenu > = {
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
+		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: {
 			canvas: { sourceState: 'shown' },

packages/components/src/progress-bar/stories/index.story.tsx

@@ -15,6 +15,7 @@ const meta: Meta< typeof ProgressBar > = {
 		value: { control: { type: 'number', min: 0, max: 100, step: 1 } },
 	},
 	parameters: {
+		badges: [ 'private' ],
 		controls: {
 			expanded: true,
 		},

packages/components/src/tabs/stories/index.story.tsx

@@ -30,6 +30,7 @@ const meta: Meta< typeof Tabs > = {
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
+		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

packages/components/src/theme/stories/index.story.tsx

@@ -19,6 +19,7 @@ const meta: Meta< typeof Theme > = {
 		background: { control: { type: 'color' } },
 	},
 	parameters: {
+		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

storybook/main.js

@@ -52,6 +52,7 @@ module.exports = {
 		'@storybook/addon-toolbars',
 		'@storybook/addon-actions',
 		'storybook-source-link',
+		'@geometricpanda/storybook-addon-badges',
 	],
 	framework: {
 		name: '@storybook/react-webpack5',

storybook/preview.js

@@ -99,6 +99,30 @@ export const decorators = [
 ];
 
 export const parameters = {
+	// For @geometricpanda/storybook-addon-badges
+	badgesConfig: {
+		private: {
+			title: '🔒 Private',
+			tooltip: {
+				title: 'Component is locked as a private API',
+				desc: 'We do not yet recommend using this outside of the Gutenberg codebase.',
+				links: [
+					{
+						title: 'About @wordpress/private-apis',
+						href: 'https://developer.wordpress.org/block-editor/reference-guides/packages/packages-private-apis/',
+					},
+				],
+			},
+		},
+		wip: {
+			title: '🚧 WIP',
+			styles: { backgroundColor: '#FFF0BD' },
+			tooltip: {
+				title: 'Component is a work in progress',
+				desc: 'This component is not ready for use in production, including the Gutenberg codebase. DO NOT export outside of @wordpress/components.',
+			},
+		},
+	},
 	controls: {
 		sort: 'requiredFirst',
 	},