feat(storybook): add theme toggle to storybook

.storybook/decorators/withFeatureFlags.tsx

@@ -1,5 +1,5 @@
-import { useFeatureFlags } from '~/mocks/browser'
-import type { DecoratorFn } from '@storybook/react'
+import { setFeatureFlags } from '~/mocks/browser'
+import type { Decorator } from '@storybook/react'
 
 /** Global story decorator that allows setting feature flags.
  *
@@ -13,9 +13,9 @@ import type { DecoratorFn } from '@storybook/react'
  * } as ComponentMeta<typeof MyComponent>
  * ```
  */
-export const withFeatureFlags: DecoratorFn = (Story, { parameters }) => {
+export const withFeatureFlags: Decorator = (Story, { parameters }) => {
     if (parameters.featureFlags) {
-        useFeatureFlags(parameters.featureFlags)
+        setFeatureFlags(parameters.featureFlags)
     }
 
     return <Story />

.storybook/decorators/withKea/withKea.tsx

@@ -1,9 +1,9 @@
-import type { DecoratorFn } from '@storybook/react'
+import type { Decorator } from '@storybook/react'
 import { useAvailableFeatures } from '~/mocks/features'
 
 import { KeaStory } from './kea-story'
 
-export const withKea: DecoratorFn = (Story) => {
+export const withKea: Decorator = (Story) => {
     // Reset enabled enterprise features. Overwrite this line within your stories.
     useAvailableFeatures([])
     return (

.storybook/decorators/withMockDate.tsx

@@ -1,4 +1,4 @@
-import type { DecoratorFn } from '@storybook/react'
+import type { Decorator } from '@storybook/react'
 import MockDate from 'mockdate'
 
 /** Global story decorator that allows mocking of dates.
@@ -13,7 +13,7 @@ import MockDate from 'mockdate'
  * } as ComponentMeta<typeof MyComponent>
  * ```
  */
-export const withMockDate: DecoratorFn = (Story, { parameters }) => {
+export const withMockDate: Decorator = (Story, { parameters }) => {
     if (parameters.mockDate) {
         MockDate.set(parameters.mockDate)
     } else {

.storybook/decorators/withSnapshotsDisabled.tsx

@@ -1,9 +1,9 @@
-import { DecoratorFn } from '@storybook/react'
+import { Decorator } from '@storybook/react'
 import { inStorybookTestRunner } from 'lib/utils'
 
 /** Workaround for https://github.com/storybookjs/test-runner/issues/74 */
 // TODO: Smoke-test all the stories by removing this decorator, once all the stories pass
-export const withSnapshotsDisabled: DecoratorFn = (Story, { parameters }) => {
+export const withSnapshotsDisabled: Decorator = (Story, { parameters }) => {
     if (parameters?.testOptions?.skip && inStorybookTestRunner()) {
         return <>Disabled for Test Runner</>
     }

.storybook/decorators/withTheme.tsx

@@ -0,0 +1,44 @@
+import type { Decorator } from '@storybook/react'
+
+import { FEATURE_FLAGS } from 'lib/constants'
+
+/** Global story decorator that is used by the theming control to
+ * switch between themes.
+ */
+export const withTheme: Decorator = (Story, context) => {
+    const theme = context.globals.theme
+
+    // set the body class
+    const actualClassState = document.body.classList.contains('posthog-3000')
+    const desiredClassState = theme !== 'legacy'
+
+    if (actualClassState !== desiredClassState) {
+        if (desiredClassState) {
+            document.body.classList.add('posthog-3000')
+        } else {
+            document.body.classList.remove('posthog-3000')
+        }
+    }
+
+    // set the feature flag
+    const actualFeatureFlagState = window.POSTHOG_APP_CONTEXT!.persisted_feature_flags?.includes(
+        FEATURE_FLAGS.POSTHOG_3000
+    )
+    const desiredFeatureFlagState = theme !== 'legacy'
+
+    if (actualFeatureFlagState !== desiredFeatureFlagState) {
+        const currentFlags = window.POSTHOG_APP_CONTEXT!.persisted_feature_flags || []
+        if (desiredFeatureFlagState) {
+            window.POSTHOG_APP_CONTEXT!.persisted_feature_flags = [...currentFlags, FEATURE_FLAGS.POSTHOG_3000]
+        } else {
+            window.POSTHOG_APP_CONTEXT!.persisted_feature_flags = currentFlags.filter(
+                (f) => f !== FEATURE_FLAGS.POSTHOG_3000
+            )
+        }
+    }
+
+    // set the theme
+    document.body.setAttribute('theme', theme === 'dark' ? 'dark' : 'light')
+
+    return <Story />
+}

.storybook/preview.tsx

@@ -10,6 +10,7 @@ import { withMockDate } from './decorators/withMockDate'
 import { defaultMocks } from '~/mocks/handlers'
 import { withSnapshotsDisabled } from './decorators/withSnapshotsDisabled'
 import { withFeatureFlags } from './decorators/withFeatureFlags'
+import { withTheme } from './decorators/withTheme'
 
 const setupMsw = () => {
     // Make sure the msw worker is started
@@ -86,6 +87,8 @@ export const decorators: Meta['decorators'] = [
     withMockDate,
     // Allow us to easily set feature flags in stories.
     withFeatureFlags,
+    // Set theme from global context
+    withTheme,
 ]
 
 const preview: Preview = {
@@ -110,6 +113,22 @@ const preview: Preview = {
             ),
         },
     },
+    globalTypes: {
+        theme: {
+            description: '',
+            defaultValue: 'legacy',
+            toolbar: {
+                title: 'Theme',
+                items: [
+                    { value: 'legacy', icon: 'faceneutral', title: 'Legacy' },
+                    { value: 'light', icon: 'sun', title: 'Light' },
+                    { value: 'dark', icon: 'moon', title: 'Dark' },
+                ],
+                // change the title based on the selected value
+                dynamicTitle: true,
+            },
+        },
+    },
 }
 
 export default preview

frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react'
 import { FeaturePreviewsModal as FeaturePreviewsModalComponent } from './FeaturePreviewsModal'
-import { useFeatureFlags, useStorybookMocks } from '~/mocks/browser'
+import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
 import { EarlyAccessFeature } from 'posthog-js'
 import { CONSTRAINED_PREVIEWS } from './featurePreviewsLogic'
 import { FeatureFlagKey } from 'lib/constants'
@@ -28,7 +28,7 @@ const Template: StoryFn<StoryProps> = ({ earlyAccessFeatures, enabledFeatureFlag
             'https://app.posthog.com/api/early_access_features/': { earlyAccessFeatures },
         },
     })
-    useFeatureFlags(enabledFeatureFlags)
+    setFeatureFlags(enabledFeatureFlags)
 
     return (
         <div className="bg-default p-2">

frontend/src/layout/navigation-3000/Navigation.stories.tsx

@@ -5,9 +5,6 @@ import { router } from 'kea-router'
 import { urls } from 'scenes/urls'
 import { App } from 'scenes/App'
 import { EMPTY_PAGINATED_RESPONSE } from '~/mocks/handlers'
-import { useActions } from 'kea'
-import { themeLogic } from './themeLogic'
-import { with3000 } from 'storybook/decorators/with3000'
 
 const meta: Meta = {
     title: 'PostHog 3000/Navigation',
@@ -21,7 +18,6 @@ const meta: Meta = {
                 '/api/projects/:team_id/session_recordings/': EMPTY_PAGINATED_RESPONSE,
             },
         }),
-        with3000,
     ],
     parameters: {
         layout: 'fullscreen',
@@ -30,21 +26,9 @@ const meta: Meta = {
     },
 }
 export default meta
-export function LightMode(): JSX.Element {
-    const { overrideTheme } = useActions(themeLogic)
+export function Navigation(): JSX.Element {
     useEffect(() => {
         router.actions.push(urls.projectHomepage())
-        overrideTheme(false)
-    }, [])
-
-    return <App />
-}
-
-export function DarkMode(): JSX.Element {
-    const { overrideTheme } = useActions(themeLogic)
-    useEffect(() => {
-        router.actions.push(urls.projectHomepage())
-        overrideTheme(true)
     }, [])
 
     return <App />

frontend/src/layout/navigation-3000/components/Sidebar.stories.tsx

@@ -7,7 +7,6 @@ import { navigation3000Logic } from '../navigationLogic'
 import { Sidebar } from './Sidebar'
 import featureFlagsJson from '../../../scenes/feature-flags/__mocks__/feature_flags.json'
 import dashboardsJson from '../../../scenes/dashboard/__mocks__/dashboards.json'
-import { with3000 } from 'storybook/decorators/with3000'
 import { SidebarNavbarItem } from '../types'
 
 const meta: Meta = {
@@ -17,7 +16,6 @@ const meta: Meta = {
         layout: 'fullscreen',
         viewMode: 'story',
     },
-    decorators: [with3000],
 }
 export default meta
 /** featureFlagsJson * 6 to fill the sidebar up more. */

frontend/src/mocks/browser.tsx

@@ -30,6 +30,6 @@ export const mswDecorator = (mocks: Mocks): DecoratorFunction<any> => {
     }
 }
 
-export const useFeatureFlags = (featureFlags: string[]): void => {
+export const setFeatureFlags = (featureFlags: string[]): void => {
     ;(window as any).POSTHOG_APP_CONTEXT.persisted_feature_flags = featureFlags
 }

frontend/src/scenes/insights/__mocks__/createInsightScene.tsx

@@ -1,5 +1,5 @@
 import { InsightModel } from '~/types'
-import { useFeatureFlags, useStorybookMocks } from '~/mocks/browser'
+import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
 import { useEffect } from 'react'
 import { router } from 'kea-router'
 import { App } from 'scenes/App'
@@ -27,7 +27,7 @@ export function createInsightStory(
                 ],
             },
         })
-        useFeatureFlags([FEATURE_FLAGS.RETENTION_BREAKDOWN])
+        setFeatureFlags([FEATURE_FLAGS.RETENTION_BREAKDOWN])
 
         useEffect(() => {
             router.actions.push(`/insights/${insight.short_id}${count}${mode === 'edit' ? '/edit' : ''}`)

frontend/src/scenes/notebooks/NotebookSelectButton/NotebookSelectButton.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react'
 import { NotebookSelectButton } from 'scenes/notebooks/NotebookSelectButton/NotebookSelectButton'
-import { useFeatureFlags, useStorybookMocks } from '~/mocks/browser'
+import { setFeatureFlags, useStorybookMocks } from '~/mocks/browser'
 import { NotebookNodeType } from '~/types'
 import { FEATURE_FLAGS } from 'lib/constants'
 
@@ -37,7 +37,7 @@ const allNotebooks = [
 ]
 
 const Template: StoryFn<typeof NotebookSelectButton> = (props) => {
-    useFeatureFlags([FEATURE_FLAGS.NOTEBOOKS])
+    setFeatureFlags([FEATURE_FLAGS.NOTEBOOKS])
     useStorybookMocks({
         get: {
             '/api/projects/:team_id/notebooks/': (req, res, ctx) => {