wrap devtools stories in context providers (#82345)

Wraps stories in context providers, and replaces any old arguments that
were being passed before the props -> context refactor in devtools

Closes NEXT-4642

Author: RobPruzan

packages/next/.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react'
 import { useInsertionEffect } from 'react'
+import { withDevOverlayContexts } from '../src/next-devtools/dev-overlay/storybook/with-dev-overlay-contexts'
 
 function CreatePortalNode() {
   useInsertionEffect(() => {
@@ -63,6 +64,7 @@ const preview: Preview = {
     },
   },
   decorators: [
+    withDevOverlayContexts(),
     (Story) => (
       <>
         <CreatePortalNode />

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import type { OverlayState } from '../../shared'
 
 import { DevToolsIndicator } from './devtools-indicator'
-import { INITIAL_OVERLAY_STATE } from '../../shared'
 import { withShadowPortal } from '../../storybook/with-shadow-portal'
+import { withDevOverlayContexts } from '../../storybook/with-dev-overlay-contexts'
+import { INITIAL_OVERLAY_STATE, type OverlayState } from '../../shared'
 
 const meta: Meta<typeof DevToolsIndicator> = {
   component: DevToolsIndicator,
@@ -35,35 +35,31 @@ const meta: Meta<typeof DevToolsIndicator> = {
     ),
   ],
 }
-
-export default meta
-type Story = StoryObj<typeof DevToolsIndicator>
-
 const state: OverlayState = {
   ...INITIAL_OVERLAY_STATE,
   routerType: 'app',
   isErrorOverlayOpen: false,
 }
 
-export const Default: Story = {
-  args: {
-    state,
-    dispatch: () => {},
-  },
-}
+export default meta
+type Story = StoryObj<typeof DevToolsIndicator>
+
+export const Default: Story = {}
 
 export const SingleError: Story = {
-  args: {
-    errorCount: 1,
-    state,
-    dispatch: () => {},
-  },
+  decorators: [
+    withDevOverlayContexts({
+      state,
+      totalErrorCount: 1,
+    }),
+  ],
 }
 
 export const MultipleErrors: Story = {
-  args: {
-    errorCount: 3,
-    state,
-    dispatch: () => {},
-  },
+  decorators: [
+    withDevOverlayContexts({
+      state,
+      totalErrorCount: 3,
+    }),
+  ],
 }

packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.stories.tsx

@@ -1,19 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { NextLogo } from './next-logo'
 import { withShadowPortal } from '../../storybook/with-shadow-portal'
-// TODO: NEXT-4642
-const StoryBookNextLogo = (
-  _: {
-    issueCount: number
-    isDevBuilding: boolean
-    isDevRendering: boolean
-  } & Record<string, unknown>
-) => {
-  return <NextLogo onTriggerClick={() => {}} />
-}
+import { withDevOverlayContexts } from '../../storybook/with-dev-overlay-contexts'
 
-const meta: Meta<typeof StoryBookNextLogo> = {
-  component: StoryBookNextLogo,
+const meta: Meta<typeof NextLogo> = {
+  component: NextLogo,
   parameters: {
     layout: 'centered',
   },
@@ -24,68 +15,100 @@ const meta: Meta<typeof StoryBookNextLogo> = {
 }
 
 export default meta
-type Story = StoryObj<typeof StoryBookNextLogo>
+type Story = StoryObj<typeof NextLogo>
 
 export const NoIssues: Story = {
-  args: {
-    issueCount: 0,
-    isDevBuilding: false,
-    isDevRendering: false,
-  },
+  decorators: [
+    withDevOverlayContexts({
+      totalErrorCount: 0,
+      state: {
+        buildingIndicator: false,
+        renderingIndicator: false,
+      },
+    }),
+  ],
 }
 
 export const SingleIssue: Story = {
-  args: {
-    issueCount: 1,
-    isDevBuilding: false,
-    isDevRendering: false,
-  },
+  decorators: [
+    withDevOverlayContexts({
+      totalErrorCount: 1,
+      state: {
+        buildingIndicator: false,
+        renderingIndicator: false,
+      },
+    }),
+  ],
 }
 
 export const MultipleIssues: Story = {
-  args: {
-    issueCount: 5,
-    isDevBuilding: false,
-    isDevRendering: false,
-  },
+  decorators: [
+    withDevOverlayContexts({
+      totalErrorCount: 5,
+      state: {
+        buildingIndicator: false,
+        renderingIndicator: false,
+      },
+    }),
+  ],
 }
 
 export const ManyIssues: Story = {
-  args: {
-    issueCount: 99,
-    isDevBuilding: false,
-    isDevRendering: false,
-  },
+  decorators: [
+    withDevOverlayContexts({
+      totalErrorCount: 99,
+      state: {
+        buildingIndicator: false,
+        renderingIndicator: false,
+      },
+    }),
+  ],
 }
 
 export const Building: Story = {
-  args: {
-    issueCount: 0,
-    isDevBuilding: true,
-    isDevRendering: false,
-  },
+  decorators: [
+    withDevOverlayContexts({
+      totalErrorCount: 0,
+      state: {
+        buildingIndicator: true,
+        renderingIndicator: false,
+      },
+    }),
+  ],
 }
 
 export const BuildingWithError: Story = {
-  args: {
-    issueCount: 1,
-    isDevBuilding: true,
-    isDevRendering: false,
-  },
+  decorators: [
+    withDevOverlayContexts({
+      totalErrorCount: 1,
+      state: {
+        buildingIndicator: true,
+        renderingIndicator: false,
+      },
+    }),
+  ],
 }
 
 export const Rendering: Story = {
-  args: {
-    issueCount: 0,
-    isDevBuilding: false,
-    isDevRendering: true,
-  },
+  decorators: [
+    withDevOverlayContexts({
+      totalErrorCount: 0,
+      state: {
+        buildingIndicator: false,
+        renderingIndicator: true,
+      },
+    }),
+  ],
 }
 
 export const RenderingWithError: Story = {
-  args: {
-    issueCount: 1,
-    isDevBuilding: false,
-    isDevRendering: true,
-  },
+  decorators: [
+    withDevOverlayContexts({
+      totalErrorCount: 1,
+      state: {
+        buildingIndicator: false,
+        renderingIndicator: true,
+      },
+    }),
+  ],
 }

packages/next/src/next-devtools/dev-overlay/storybook/with-dev-overlay-contexts.tsx

@@ -0,0 +1,67 @@
+import { useRef, useState, type Dispatch, type SetStateAction } from 'react'
+import { DevOverlayContext } from '../../dev-overlay.browser'
+import { RenderErrorContext } from '../dev-overlay'
+import { PanelRouterContext, type PanelStateKind } from '../menu/context'
+import { INITIAL_OVERLAY_STATE } from '../shared'
+import type { OverlayState, DispatcherEvent } from '../shared'
+import type { ReadyRuntimeError } from '../utils/get-error-by-type'
+
+interface WithDevOverlayContextsProps {
+  state?: Partial<OverlayState>
+  dispatch?: (action: DispatcherEvent) => void
+  runtimeErrors?: ReadyRuntimeError[]
+  totalErrorCount?: number
+  panel?: PanelStateKind | null
+  setPanel?: Dispatch<SetStateAction<PanelStateKind | null>>
+  selectedIndex?: number
+  setSelectedIndex?: Dispatch<SetStateAction<number>>
+}
+
+export const withDevOverlayContexts =
+  (props?: WithDevOverlayContextsProps) => (Story: any) => {
+    const [panel, setPanel] = useState<PanelStateKind | null>(
+      props?.panel ?? null
+    )
+    const [selectedIndex, setSelectedIndex] = useState(
+      props?.selectedIndex ?? -1
+    )
+    const triggerRef = useRef<HTMLButtonElement>(null)
+
+    const defaultState: OverlayState = {
+      ...INITIAL_OVERLAY_STATE,
+      routerType: 'app',
+      isErrorOverlayOpen: false,
+      ...props?.state,
+    }
+
+    const defaultDispatch = props?.dispatch || (() => {})
+
+    return (
+      <DevOverlayContext.Provider
+        value={{
+          state: defaultState,
+          dispatch: defaultDispatch,
+          getSquashedHydrationErrorDetails: () => null,
+        }}
+      >
+        <RenderErrorContext.Provider
+          value={{
+            runtimeErrors: props?.runtimeErrors ?? [],
+            totalErrorCount: props?.totalErrorCount ?? 0,
+          }}
+        >
+          <PanelRouterContext.Provider
+            value={{
+              panel,
+              setPanel: props?.setPanel ?? setPanel,
+              triggerRef,
+              selectedIndex,
+              setSelectedIndex: props?.setSelectedIndex ?? setSelectedIndex,
+            }}
+          >
+            <Story />
+          </PanelRouterContext.Provider>
+        </RenderErrorContext.Provider>
+      </DevOverlayContext.Provider>
+    )
+  }