Add feature flags Storybook addon.

storybook/addons/sitekit-toolbar/ToolbarAddon.js

@@ -0,0 +1,97 @@
+/**
+ * Toolbar addon component.
+ *
+ * Site Kit by Google, Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import React, { useState, useEffect } from 'react';
+import {
+	IconButton,
+	TooltipLinkList,
+	WithTooltip,
+} from '@storybook/components';
+import { FlagIcon } from '@storybook/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ADDON_ID, EVENTS } from './constants';
+
+const AVAILABLE_FEATURES = [
+	'adsPax',
+	'googleTagGateway',
+	'gtagUserData',
+	'privacySandboxModule',
+	'proactiveUserEngagement',
+	'setupFlowRefresh',
+	'conversionReporting',
+];
+
+export function ToolbarAddon( { api } ) {
+	const [ isActive, setIsActive ] = useState( false );
+	const [ enabledFeatures, setEnabledFeatures ] = useState( new Set() );
+
+	useEffect( () => {
+		function handleFeaturesUpdated( { features } ) {
+			setEnabledFeatures( new Set( features ) );
+		}
+
+		api.on( EVENTS.FEATURES_UPDATED, handleFeaturesUpdated );
+
+		return () => {
+			api.off( EVENTS.FEATURES_UPDATED, handleFeaturesUpdated );
+		};
+	}, [ api ] );
+
+	function toggleFeature( feature ) {
+		const newFeatures = new Set( enabledFeatures );
+		if ( newFeatures.has( feature ) ) {
+			newFeatures.delete( feature );
+		} else {
+			newFeatures.add( feature );
+		}
+
+		const featuresArray = Array.from( newFeatures );
+
+		api.emit( EVENTS.TOGGLE_FEATURE, { features: featuresArray } );
+	}
+
+	const links = AVAILABLE_FEATURES.map( ( feature ) => ( {
+		id: feature,
+		title: feature,
+		active: enabledFeatures.has( feature ),
+		onClick: () => toggleFeature( feature ),
+	} ) );
+	return (
+		<WithTooltip
+			placement="bottom"
+			trigger="click"
+			tooltip={ <TooltipLinkList links={ links } /> }
+			onVisibilityChange={ setIsActive }
+			closeOnOutsideClick
+		>
+			<IconButton
+				key={ ADDON_ID }
+				active={ isActive }
+				title="Site Kit Feature Flags"
+			>
+				<FlagIcon />
+			</IconButton>
+		</WithTooltip>
+	);
+}

storybook/addons/sitekit-toolbar/constants.js

@@ -0,0 +1,27 @@
+/**
+ * Addon constants.
+ *
+ * Site Kit by Google, Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const ADDON_ID = 'storybook/sitekit-toolbar';
+export const PARAM_KEY = 'siteKitToolbar';
+
+// Events
+export const EVENTS = {
+	TOGGLE_FEATURE: `${ ADDON_ID }/toggle-feature`,
+	UPDATE_GLOBALS: `${ ADDON_ID }/update-globals`,
+	FEATURES_UPDATED: `${ ADDON_ID }/features-updated`,
+};

storybook/addons/sitekit-toolbar/manager.js

@@ -0,0 +1,40 @@
+/**
+ * Storybook addon manager registration.
+ *
+ * Site Kit by Google, Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { addons, types } from '@storybook/manager-api';
+
+/**
+ * Internal dependencies
+ */
+import { ADDON_ID } from './constants';
+import { ToolbarAddon } from './ToolbarAddon';
+
+addons.register( ADDON_ID, ( api ) => {
+	const title = 'Site Kit Toolbar';
+
+	addons.add( ADDON_ID, {
+		title,
+		type: types.TOOL,
+		match: ( { viewMode } ) => [ 'story', 'docs' ].includes( viewMode ),
+		render: () => <ToolbarAddon api={ api } />,
+	} );
+} );

storybook/addons/sitekit-toolbar/preset.js

@@ -0,0 +1,25 @@
+/**
+ * Storybook addon preset.
+ *
+ * Site Kit by Google, Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function managerEntries( entry = [] ) {
+	return [ ...entry, require.resolve( './manager' ) ];
+}
+
+export function previewAnnotations( entry = [] ) {
+	return [ ...entry, require.resolve( './preview' ) ];
+}

storybook/addons/sitekit-toolbar/preview.js

@@ -0,0 +1,30 @@
+/**
+ * Addon preview configuration.
+ *
+ * Site Kit by Google, Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export function withSiteKitToolbar( StoryFn ) {
+	return StoryFn();
+}
+
+export const decorators = [ withSiteKitToolbar ];
+
+export const globalTypes = {
+	siteKitFeatures: {
+		description: 'Site Kit feature flags',
+		defaultValue: [],
+	},
+};

storybook/main.js

@@ -81,6 +81,7 @@ module.exports = {
 	addons: [
 		getModuleAbsolutePath( '@storybook/addon-webpack5-compiler-babel' ),
 		getModuleAbsolutePath( '@storybook/addon-viewport' ),
+		'./addons/sitekit-toolbar/preset.js',
 	],
 	previewHead( head ) {
 		if ( process.env.VRT === '1' ) {

storybook/package.json

@@ -19,6 +19,7 @@
 		"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
 		"@storybook/react-webpack5": "^8.6.12",
 		"@storybook/test": "^8.6.12",
+		"@storybook/icons": "^2.0.1",
 		"css-loader": "^7.1.2",
 		"fetch-mock": "^9.11.0",
 		"mini-css-extract-plugin": "^2.9.2",

storybook/preview.js

@@ -43,7 +43,7 @@ import { enabledFeatures } from '../assets/js/features';
 import { Cell, Grid, Row } from '../assets/js/material-components';
 import { createTestRegistry, provideUserInfo } from '../tests/js/test-utils';
 import InViewProvider from '../assets/js/components/InViewProvider';
-import FeaturesProvider from '../assets/js/components/FeaturesProvider';
+import StorybookFeaturesProvider from './utils/StorybookFeaturesProvider';
 
 setUsingCache( false );
 
@@ -113,11 +113,11 @@ export const decorators = [
 		return (
 			<InViewProvider value={ inViewState }>
 				<RegistryProvider value={ registry }>
-					<FeaturesProvider value={ featuresToEnable }>
+					<StorybookFeaturesProvider features={ featuresToEnable }>
 						<Router history={ history }>
 							<Story />
 						</Router>
-					</FeaturesProvider>
+					</StorybookFeaturesProvider>
 				</RegistryProvider>
 			</InViewProvider>
 		);

storybook/utils/StorybookFeaturesProvider.js

@@ -0,0 +1,69 @@
+/**
+ * Storybook-specific FeaturesProvider with state management.
+ *
+ * Site Kit by Google, Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import React, { useState, useEffect } from 'react';
+import { addons } from '@storybook/preview-api';
+
+/**
+ * Internal dependencies
+ */
+import FeaturesContext from '../../assets/js/components/FeaturesProvider/FeaturesContext';
+
+export default function StorybookFeaturesProvider( {
+	children,
+	features: initialFeatures = [],
+} ) {
+	const [ enabledFeatures, setEnabledFeatures ] = useState(
+		() => new Set( initialFeatures )
+	);
+	const channel = addons.getChannel();
+
+	useEffect( () => {
+		function handleToggleFeature( { features } ) {
+			setEnabledFeatures( new Set( features ) );
+		}
+
+		channel.on(
+			'storybook/sitekit-toolbar/toggle-feature',
+			handleToggleFeature
+		);
+
+		return () => {
+			channel.off(
+				'storybook/sitekit-toolbar/toggle-feature',
+				handleToggleFeature
+			);
+		};
+	}, [ channel ] );
+
+	useEffect( () => {
+		const featuresArray = Array.from( enabledFeatures );
+		channel.emit( 'storybook/sitekit-toolbar/features-updated', {
+			features: featuresArray,
+		} );
+	}, [ enabledFeatures, channel ] );
+
+	return (
+		<FeaturesContext.Provider value={ enabledFeatures }>
+			{ children }
+		</FeaturesContext.Provider>
+	);
+}