Storybook: Add badges based on tags (#61111)

* Consolidate tags in stories

* DimensionControl: Standardize story meta format for easier parsing

* Storybook: Add badges based on `tags`

Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

packages/components/src/composite/current/stories/index.story.tsx

@@ -33,8 +33,8 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		CompositeItem,
 	},
+	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		docs: {
 			canvas: { sourceState: 'shown' },
 			source: { transform },

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

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

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

@@ -21,8 +21,8 @@ const meta: Meta< typeof CustomSelectControl > = {
 		onChange: { control: { type: null } },
 		value: { control: { type: null } },
 	},
+	tags: [ 'status-wip' ],
 	parameters: {
-		badges: [ 'wip' ],
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: {

packages/components/src/dimension-control/stories/index.story.tsx

@@ -13,7 +13,7 @@ import sizes from '../sizes';
  */
 import { desktop, tablet, mobile } from '@wordpress/icons';
 
-export default {
+const meta: Meta< typeof DimensionControl > = {
 	component: DimensionControl,
 	title: 'Components (Experimental)/DimensionControl',
 	argTypes: {
@@ -34,7 +34,8 @@ export default {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
-} as Meta< typeof DimensionControl >;
+};
+export default meta;
 
 const Template: StoryFn< typeof DimensionControl > = ( args ) => (
 	<DimensionControl { ...args } />

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

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

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

@@ -16,7 +16,6 @@ const meta: Meta< typeof ProgressBar > = {
 	},
 	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		controls: {
 			expanded: true,
 		},

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

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

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

@@ -20,7 +20,6 @@ const meta: Meta< typeof Theme > = {
 	},
 	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

storybook/badges.js

@@ -1,6 +1,12 @@
 /**
  * Provides badge configuration options.
- * See https://github.com/geometricpanda/storybook-addon-badges
+ *
+ * To apply a badge to a story, add a badge identifier prefixed by "status-" to
+ * the `tags` array in the story's metadata. For example, to apply the "private"
+ * badge, add "status-private" to the `tags` array.
+ *
+ * @see https://github.com/geometricpanda/storybook-addon-badges
+ * @see './webpack/copy-tags-to-badges.js' - Webpack loader that processes the tags
  */
 
 export default {

storybook/main.js

@@ -74,12 +74,23 @@ module.exports = {
 				rules: [
 					...config.module.rules,
 					{
-						// Adds a `sourceLink` parameter to the story metadata, based on the file path
 						test: /\/stories\/.+\.story\.(j|t)sx?$/,
-						loader: path.resolve(
-							__dirname,
-							'./webpack/source-link-loader.js'
-						),
+						use: [
+							{
+								// Adds a `sourceLink` parameter to the story metadata, based on the file path
+								loader: path.resolve(
+									__dirname,
+									'./webpack/source-link-loader.js'
+								),
+							},
+							{
+								// Reads `tags` from the story metadata and copies them to `badges`
+								loader: path.resolve(
+									__dirname,
+									'./webpack/copy-tags-to-badges.js'
+								),
+							},
+						],
 						enforce: 'post',
 					},
 					{

storybook/webpack/copy-tags-to-badges.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+const babel = require( '@babel/core' );
+
+/**
+ * Reads `tags` from the story metadata and copies them to `badges`.
+ *
+ * @see https://github.com/geometricpanda/storybook-addon-badges
+ * @see '../badges.js' - Badges config
+ */
+function copyTagsToBadgePlugin() {
+	return {
+		visitor: {
+			ExportDefaultDeclaration( visitorPath ) {
+				const properties =
+					// When default export is anonymous, the declaration is an object expression
+					visitorPath.node?.declaration.properties ??
+					// When default export is named, the declaration is an identifier, usually the previous node
+					visitorPath.getPrevSibling().node.declarations[ 0 ].init
+						.properties;
+
+				alterParameters( properties );
+			},
+		},
+	};
+}
+
+function alterParameters( properties ) {
+	const STATUS_PREFIX = 'status-';
+
+	const tags =
+		properties
+			.find( ( op ) => op.key.name === 'tags' )
+			?.value.elements.map( ( tag ) => tag.value ) ?? [];
+	const statusTags = tags.filter( ( tag ) =>
+		tag.startsWith( STATUS_PREFIX )
+	);
+
+	const badges = babel.types.objectProperty(
+		babel.types.identifier( 'badges' ),
+		babel.types.arrayExpression(
+			statusTags.map( ( tag ) =>
+				babel.types.stringLiteral(
+					tag.substring( STATUS_PREFIX.length )
+				)
+			)
+		)
+	);
+
+	let parameters = properties.find( ( op ) => op.key.name === 'parameters' );
+
+	if ( ! parameters ) {
+		parameters = babel.types.objectProperty(
+			babel.types.identifier( 'parameters' ),
+			babel.types.objectExpression( [] )
+		);
+		properties.push( parameters );
+	}
+
+	parameters.value.properties = [ badges, ...parameters.value.properties ];
+}
+
+module.exports = function ( source ) {
+	const output = babel.transform( source, {
+		plugins: [ copyTagsToBadgePlugin ],
+		filename: this.resourcePath,
+		sourceType: 'module',
+	} );
+	return output.code;
+};