feat(storybook): add support for feature flag toggle in toolbar

packages/react/.storybook/manager.js

@@ -1,4 +1,8 @@
 import {addons, types} from '@storybook/addons'
+import {useGlobals} from '@storybook/manager-api'
+import {IconButton, WithTooltip, TooltipLinkList} from '@storybook/components'
+import {BeakerIcon} from '@primer/octicons-react'
+import React from 'react'
 import {Tool, TOOL_ID, ADDON_ID} from './src/accessibility-tool'
 import theme from './theme'
 
@@ -15,3 +19,54 @@ addons.register(ADDON_ID, () => {
     render: Tool,
   })
 })
+
+const featureFlagList = ['primer_react_action_list_item_as_button', 'primer_react_css_modules']
+
+addons.register('FEATURE_FLAG_ADDON', () => {
+  addons.add('FEATURE_FLAG_ADDON/toolbar', {
+    type: types.TOOL,
+    match: ({tabId, viewMode}) => {
+      return !tabId && viewMode === 'story'
+    },
+    render: () => {
+      const [{featureFlags}, updateGlobals] = useGlobals()
+      const hasFeatureEnabled = Object.values(featureFlags ?? {}).find(value => {
+        return value
+      })
+      return (
+        <WithTooltip
+          placement="top"
+          trigger="click"
+          closeOnOutsideClick
+          tooltip={({onHide}) => {
+            return (
+              <TooltipLinkList
+                links={featureFlagList.map(featureFlag => {
+                  const active = featureFlags?.[featureFlag]
+                  return {
+                    id: featureFlag,
+                    title: active ? `✅ ${featureFlag}` : featureFlag,
+                    active,
+                    onClick: () => {
+                      updateGlobals({
+                        featureFlags: {
+                          ...featureFlags,
+                          [featureFlag]: !active,
+                        },
+                      })
+                      onHide()
+                    },
+                  }
+                })}
+              />
+            )
+          }}
+        >
+          <IconButton active={hasFeatureEnabled} title="Toggle feature flags">
+            <BeakerIcon size={14} />
+          </IconButton>
+        </WithTooltip>
+      )
+    },
+  })
+})

packages/react/.storybook/preview.js

@@ -183,9 +183,22 @@ export const globalTypes = {
     },
     showSurroundingElements: {},
   },
+  featureFlags: {
+    name: 'Feature flags',
+    description: 'Toggle feature flags',
+    defaultValue: {},
+  },
 }
 
 export const decorators = [
+  (Story, context) => {
+    const {featureFlags} = context.globals
+    return (
+      <FeatureFlags flags={featureFlags}>
+        <Story {...context} />
+      </FeatureFlags>
+    )
+  },
   (Story, context) => {
     const {colorScheme} = context.globals