chore(storybook): upgrade storybook to 7.3 (#17078)

* feat(kea): typegen path cleanup and delete unused files * bump * 3.2.2 * typegen upgrade to 3.3.0 * storybook 7.3 * upgrade storybook to 7.3 * try using #storybook-root instead of #root * try using #storybook-root instead of #root (2) * try using #storybook-root instead of #root (3) * try using #storybook-root instead of #root (4) * switch out argTypes.defaultValue with args * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (1) --------- Co-authored-by: Thomas Obermüller <[email protected]> Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Aug 21, 2023 · 8075e42 · 8075e42
1 parent 64583fe
commit 8075e42
Show file tree

Hide file tree

Showing 136 changed files with 5,144 additions and 6,833 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,24 +1,20 @@
-import type { StorybookConfig } from '@storybook/react/types'
 import { createEntry } from '../webpack.config'
+import { StorybookConfig } from '@storybook/react-webpack5'
 
 const config: StorybookConfig = {
     stories: ['../frontend/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+
     addons: [
-        {
-            name: '@storybook/addon-docs',
-            options: {
-                sourceLoaderOptions: {
-                    injectStoryParameters: false,
-                },
-            },
-        },
+        '@storybook/addon-docs',
         '@storybook/addon-links',
         '@storybook/addon-essentials',
         '@storybook/addon-storysource',
         '@storybook/addon-a11y',
         'storybook-addon-pseudo-states',
     ],
+
     staticDirs: ['public'],
+
     webpackFinal: (config) => {
         const mainConfig = createEntry('main')
         return {
@@ -32,23 +28,21 @@ const config: StorybookConfig = {
                 ...config.module,
                 rules: [
                     ...mainConfig.module.rules,
-                    ...config.module!.rules.filter((rule) => rule.test!.toString().includes('.mdx')),
-                    {
-                        test: /\.stories\.tsx?$/,
-                        use: [
-                            {
-                                loader: require.resolve('@storybook/source-loader'),
-                                options: { parser: 'typescript' },
-                            },
-                        ],
-                        enforce: 'pre',
-                    },
+                    ...(config.module?.rules?.filter(
+                        (rule: any) => 'test' in rule && rule.test.toString().includes('.mdx')
+                    ) ?? []),
                 ],
             },
         }
     },
-    features: {
-        postcss: false,
+
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {},
+    },
+
+    docs: {
+        autodocs: 'tag',
     },
 }
 

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,6 +1,7 @@
 import '~/styles'
 import './storybook.scss'
-import type { Meta, Parameters } from '@storybook/react'
+import type { Meta, Parameters, Preview } from '@storybook/react'
+import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks'
 import { worker } from '~/mocks/browser'
 import { loadPostHogJS } from '~/loadPostHogJS'
 import { getStorybookAppContext } from './app-context'
@@ -75,3 +76,29 @@ export const decorators: Meta['decorators'] = [
     // Allow us to easily set feature flags in stories.
     withFeatureFlags,
 ]
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: '^on[A-Z].*' },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+        docs: {
+            page: () => (
+                <>
+                    <Title />
+                    <Subtitle />
+                    <Description />
+                    <Primary />
+                    <Controls />
+                    <Stories />
+                </>
+            ),
+        },
+    },
+}
+
+export default preview
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -1,17 +1,16 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot'
-import { OptionsParameter } from '@storybook/addons'
 import { getStoryContext, TestRunnerConfig, TestContext } from '@storybook/test-runner'
 import type { Locator, Page, LocatorScreenshotOptions } from 'playwright-core'
 import type { Mocks } from '~/mocks/utils'
-import { StoryContext } from '@storybook/react'
 
+type StoryContext = ReturnType<typeof getStoryContext> extends Promise<infer T> ? T : never
 // 'firefox' is technically supported too, but as of June 2023 it has memory usage issues that make is unusable
 type SupportedBrowserName = 'chromium' | 'webkit'
 
 // Extend Storybook interface `Parameters` with Chromatic parameters
 declare module '@storybook/react' {
     interface Parameters {
-        options?: OptionsParameter
+        options?: any
         layout?: 'padded' | 'fullscreen' | 'centered'
         testOptions?: {
             /**
@@ -146,10 +145,10 @@ async function expectStoryToMatchComponentSnapshot(
     page: Page,
     context: TestContext,
     browser: SupportedBrowserName,
-    targetSelector: string = '#root'
+    targetSelector: string = '#storybook-root'
 ): Promise<void> {
     await page.evaluate(() => {
-        const rootEl = document.getElementById('root')
+        const rootEl = document.getElementById('storybook-root')
         if (!rootEl) {
             throw new Error('Could not find root element')
         }

diff --git a/frontend/__snapshots__/components-cards-insight-card--insight-card.png b/frontend/__snapshots__/components-cards-insight-card--insight-card.png
diff --git a/frontend/src/exporter/Exporter.stories.tsx b/frontend/src/exporter/Exporter.stories.tsx
@@ -1,13 +1,15 @@
 import { useEffect } from 'react'
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
 import { Exporter } from './Exporter'
 import { dashboard } from '~/exporter/__mocks__/Exporter.mocks'
+import { ExportType } from '~/exporter/types'
 
-export default {
+type Story = StoryObj<typeof Exporter>
+const meta: Meta<typeof Exporter> = {
     title: 'Exporter/Exporter',
     component: Exporter,
     args: {
-        type: 'embed',
+        type: ExportType.Embed,
         whitelabel: false,
         noHeader: false,
         legend: false,
@@ -19,9 +21,11 @@ export default {
         mockDate: '2023-02-01',
         viewMode: 'story',
     },
-} as ComponentMeta<typeof Exporter>
+}
+
+export default meta
 
-const Template: ComponentStory<typeof Exporter> = (props) => {
+const Template: StoryFn<typeof Exporter> = (props) => {
     useEffect(() => {
         document.body.className = ''
         document.documentElement.className = `export-type-${props.type}`
@@ -33,84 +37,84 @@ const Template: ComponentStory<typeof Exporter> = (props) => {
     )
 }
 
-export const TrendsLineInsight = Template.bind({})
+export const TrendsLineInsight: Story = Template.bind({})
 TrendsLineInsight.args = { insight: require('../scenes/insights/__mocks__/trendsLine.json') }
 
-export const TrendsLineBreakdownInsight = Template.bind({})
+export const TrendsLineBreakdownInsight: Story = Template.bind({})
 TrendsLineBreakdownInsight.args = { insight: require('../scenes/insights/__mocks__/trendsLineBreakdown.json') }
 
-export const TrendsBarInsight = Template.bind({})
+export const TrendsBarInsight: Story = Template.bind({})
 TrendsBarInsight.args = { insight: require('../scenes/insights/__mocks__/trendsBar.json') }
 
-export const TrendsBarBreakdownInsight = Template.bind({})
+export const TrendsBarBreakdownInsight: Story = Template.bind({})
 TrendsBarBreakdownInsight.args = { insight: require('../scenes/insights/__mocks__/trendsBarBreakdown.json') }
 
-export const TrendsValueInsight = Template.bind({})
+export const TrendsValueInsight: Story = Template.bind({})
 TrendsValueInsight.args = { insight: require('../scenes/insights/__mocks__/trendsValue.json') }
 
-export const TrendsValueBreakdownInsight = Template.bind({})
+export const TrendsValueBreakdownInsight: Story = Template.bind({})
 TrendsValueBreakdownInsight.args = { insight: require('../scenes/insights/__mocks__/trendsValueBreakdown.json') }
 
-export const TrendsAreaInsight = Template.bind({})
+export const TrendsAreaInsight: Story = Template.bind({})
 TrendsAreaInsight.args = { insight: require('../scenes/insights/__mocks__/trendsArea.json') }
 
-export const TrendsAreaBreakdownInsight = Template.bind({})
+export const TrendsAreaBreakdownInsight: Story = Template.bind({})
 TrendsAreaBreakdownInsight.args = { insight: require('../scenes/insights/__mocks__/trendsAreaBreakdown.json') }
 
-export const TrendsNumberInsight = Template.bind({})
+export const TrendsNumberInsight: Story = Template.bind({})
 TrendsNumberInsight.args = { insight: require('../scenes/insights/__mocks__/trendsNumber.json') }
 
-export const TrendsTableInsight = Template.bind({})
+export const TrendsTableInsight: Story = Template.bind({})
 TrendsTableInsight.args = { insight: require('../scenes/insights/__mocks__/trendsTable.json') }
 
-export const TrendsTableBreakdownInsight = Template.bind({})
+export const TrendsTableBreakdownInsight: Story = Template.bind({})
 TrendsTableBreakdownInsight.args = { insight: require('../scenes/insights/__mocks__/trendsTableBreakdown.json') }
 
-export const TrendsPieInsight = Template.bind({})
+export const TrendsPieInsight: Story = Template.bind({})
 TrendsPieInsight.args = { insight: require('../scenes/insights/__mocks__/trendsPie.json') }
 
-export const TrendsPieBreakdownInsight = Template.bind({})
+export const TrendsPieBreakdownInsight: Story = Template.bind({})
 TrendsPieBreakdownInsight.args = { insight: require('../scenes/insights/__mocks__/trendsPieBreakdown.json') }
 
-export const TrendsWorldMapInsight = Template.bind({})
+export const TrendsWorldMapInsight: Story = Template.bind({})
 TrendsWorldMapInsight.args = { insight: require('../scenes/insights/__mocks__/trendsWorldMap.json') }
 
-export const FunnelLeftToRightInsight = Template.bind({})
+export const FunnelLeftToRightInsight: Story = Template.bind({})
 FunnelLeftToRightInsight.args = { insight: require('../scenes/insights/__mocks__/funnelLeftToRight.json') }
 
-export const FunnelLeftToRightBreakdownInsight = Template.bind({})
+export const FunnelLeftToRightBreakdownInsight: Story = Template.bind({})
 FunnelLeftToRightBreakdownInsight.args = {
     insight: require('../scenes/insights/__mocks__/funnelLeftToRightBreakdown.json'),
 }
 
-export const FunnelTopToBottomInsight = Template.bind({})
+export const FunnelTopToBottomInsight: Story = Template.bind({})
 FunnelTopToBottomInsight.args = { insight: require('../scenes/insights/__mocks__/funnelTopToBottom.json') }
 
-export const FunnelTopToBottomBreakdownInsight = Template.bind({})
+export const FunnelTopToBottomBreakdownInsight: Story = Template.bind({})
 FunnelTopToBottomBreakdownInsight.args = {
     insight: require('../scenes/insights/__mocks__/funnelTopToBottomBreakdown.json'),
 }
 
-export const FunnelHistoricalTrendsInsight = Template.bind({})
+export const FunnelHistoricalTrendsInsight: Story = Template.bind({})
 FunnelHistoricalTrendsInsight.args = { insight: require('../scenes/insights/__mocks__/funnelHistoricalTrends.json') }
 
-export const FunnelTimeToConvertInsight = Template.bind({})
+export const FunnelTimeToConvertInsight: Story = Template.bind({})
 FunnelTimeToConvertInsight.args = { insight: require('../scenes/insights/__mocks__/funnelTimeToConvert.json') }
 
-export const RetentionInsight = Template.bind({})
+export const RetentionInsight: Story = Template.bind({})
 RetentionInsight.args = { insight: require('../scenes/insights/__mocks__/retention.json') }
 
-export const RetentionBreakdownInsight = Template.bind({})
+export const RetentionBreakdownInsight: Story = Template.bind({})
 RetentionBreakdownInsight.args = { insight: require('../scenes/insights/__mocks__/retentionBreakdown.json') }
 
-export const LifecycleInsight = Template.bind({})
+export const LifecycleInsight: Story = Template.bind({})
 LifecycleInsight.args = { insight: require('../scenes/insights/__mocks__/lifecycle.json') }
 
-export const StickinessInsight = Template.bind({})
+export const StickinessInsight: Story = Template.bind({})
 StickinessInsight.args = { insight: require('../scenes/insights/__mocks__/stickiness.json') }
 
-export const UserPathsInsight = Template.bind({})
+export const UserPathsInsight: Story = Template.bind({})
 UserPathsInsight.args = { insight: require('../scenes/insights/__mocks__/userPaths.json') }
 
-export const Dashboard = Template.bind({})
+export const Dashboard: Story = Template.bind({})
 Dashboard.args = { dashboard }
diff --git a/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.stories.tsx b/frontend/src/layout/FeaturePreviews/FeaturePreviewsModal.stories.tsx
@@ -1,26 +1,28 @@
-import { Meta, StoryFn } from '@storybook/react'
+import { Meta, StoryFn, StoryObj } from '@storybook/react'
 import { FeaturePreviewsModal as FeaturePreviewsModalComponent } from './FeaturePreviewsModal'
 import { useFeatureFlags, useStorybookMocks } from '~/mocks/browser'
 import { EarlyAccessFeature } from 'posthog-js'
 import { CONSTRAINED_PREVIEWS } from './featurePreviewsLogic'
 import { FeatureFlagKey } from 'lib/constants'
 
-export default {
+interface StoryProps {
+    earlyAccessFeatures: EarlyAccessFeature[]
+    enabledFeatureFlags: string[]
+}
+
+type Story = StoryObj<(props: StoryProps) => JSX.Element>
+const meta: Meta<(props: StoryProps) => JSX.Element> = {
     title: 'Layout/Feature Previews Modal',
     parameters: {
         layout: 'fullscreen',
-        options: { showPanel: false },
         viewMode: 'story',
     },
-} as Meta
-
+}
+export default meta
 CONSTRAINED_PREVIEWS.add('constrained-test-1' as FeatureFlagKey)
 CONSTRAINED_PREVIEWS.add('constrained-test-2' as FeatureFlagKey)
 
-const Template: StoryFn<{ earlyAccessFeatures: EarlyAccessFeature[]; enabledFeatureFlags: string[] }> = ({
-    earlyAccessFeatures,
-    enabledFeatureFlags,
-}) => {
+const Template: StoryFn<StoryProps> = ({ earlyAccessFeatures, enabledFeatureFlags }) => {
     useStorybookMocks({
         get: {
             'https://app.posthog.com/api/early_access_features/': { earlyAccessFeatures },
@@ -35,7 +37,7 @@ const Template: StoryFn<{ earlyAccessFeatures: EarlyAccessFeature[]; enabledFeat
     )
 }
 
-export const Basic = Template.bind({})
+export const Basic: Story = Template.bind({})
 Basic.args = {
     earlyAccessFeatures: [
         {
@@ -50,7 +52,7 @@ Basic.args = {
     enabledFeatureFlags: ['data-warehouse'],
 }
 
-export const WithConstrainedFeature = Template.bind({})
+export const WithConstrainedFeature: Story = Template.bind({})
 WithConstrainedFeature.args = {
     earlyAccessFeatures: [
         {
@@ -79,7 +81,7 @@ WithConstrainedFeature.args = {
     enabledFeatureFlags: ['constrained-test-1-preview', 'constrained-test-1', 'constrained-test-2'],
 }
 
-export const Empty = Template.bind({})
+export const Empty: Story = Template.bind({})
 Empty.args = {
     earlyAccessFeatures: [],
     enabledFeatureFlags: [],

diff --git a/frontend/src/layout/navigation-3000/Navigation.stories.tsx b/frontend/src/layout/navigation-3000/Navigation.stories.tsx
@@ -9,7 +9,7 @@ import { useActions } from 'kea'
 import { themeLogic } from './themeLogic'
 import { with3000 } from 'storybook/decorators/with3000'
 
-export default {
+const meta: Meta = {
     title: 'PostHog 3000/Navigation',
     decorators: [
         mswDecorator({
@@ -25,12 +25,11 @@ export default {
     ],
     parameters: {
         layout: 'fullscreen',
-        options: { showPanel: false },
         viewMode: 'story',
         mockDate: '2023-02-01',
     },
-} as Meta
-
+}
+export default meta
 export function LightMode(): JSX.Element {
     const { overrideTheme } = useActions(themeLogic)
     useEffect(() => {