Storybook: Enable theming toolbar for wp-components

storybook/addons/design-system-theme/manager.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { createElement, Fragment } from 'react';
 import { addons, types, useGlobals } from 'storybook/manager-api';
@@ -11,6 +8,7 @@ import {
 	TooltipMessage,
 	TooltipLinkList,
 } from 'storybook/internal/components';
+import { storyIdMatchesDesignSystemTheme } from '../../decorators/utils/design-system-theme-story-matchers';
 
 interface ThemeOption {
 	id: string;
@@ -106,7 +104,7 @@ addons.register( ADDON_ID, () => {
 		type: types.TOOL,
 		title: 'Design System Theme',
 		match: ( { storyId, viewMode } ) =>
-			!! storyId?.startsWith( 'design-system-components-' ) &&
+			storyIdMatchesDesignSystemTheme( storyId ) &&
 			( [ 'story', 'docs' ] as any[] ).includes( viewMode ),
 		render: ThemeTool,
 	} );

storybook/decorators/utils/design-system-theme-story-matchers.ts

@@ -0,0 +1,16 @@
+/**
+ * Story id prefixes for which the Design System theme toolbar and preview
+ * decorator apply.
+ */
+export const DESIGN_SYSTEM_THEME_STORY_ID_PREFIXES = [
+	'design-system-components-',
+	'components-',
+] as const;
+
+export function storyIdMatchesDesignSystemTheme(
+	storyId: string | undefined
+): boolean {
+	return DESIGN_SYSTEM_THEME_STORY_ID_PREFIXES.some(
+		( prefix ) => storyId?.startsWith( prefix )
+	);
+}

storybook/decorators/with-design-system-theme.tsx

@@ -1,13 +1,7 @@
-/**
- * External dependencies
- */
-import type { StoryContext } from 'storybook/internal/types';
-
-/**
- * WordPress dependencies
- */
 import { privateApis as themeApis } from '@wordpress/theme';
 import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+import type { StoryContext } from 'storybook/internal/types';
+import { storyIdMatchesDesignSystemTheme } from './utils/design-system-theme-story-matchers';
 
 const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
 	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
@@ -27,10 +21,10 @@ export function WithDesignSystemTheme(
 	Story: React.ComponentType< any >,
 	context: StoryContext
 ) {
-	const isDesignSystemComponentsStory = context.id?.startsWith(
-		'design-system-components-'
+	const shouldApplyDesignSystemTheme = storyIdMatchesDesignSystemTheme(
+		context.id
 	);
-	if ( ! isDesignSystemComponentsStory ) {
+	if ( ! shouldApplyDesignSystemTheme ) {
 		return <Story { ...context } />;
 	}