add story

Author: devjiwonchoi

packages/next/src/next-devtools/dev-overlay/components/devtools-panel/devtools-panel.tsx

@@ -5,7 +5,7 @@ import { Dialog, DialogContent, DialogHeader, DialogBody } from '../dialog'
 import { Overlay } from '../overlay/overlay'
 import { useFocusTrap } from '../errors/dev-tools-indicator/utils'
 import { useDelayedRender } from '../../hooks/use-delayed-render'
-import { ACTION_DEV_TOOLS_PANEL_TOGGLE } from '../../shared'
+import { ACTION_DEVTOOLS_PANEL_TOGGLE } from '../../shared'
 
 export function DevToolsPanel({
   state,
@@ -28,7 +28,7 @@ export function DevToolsPanel({
   }
 
   const onClose = () => {
-    dispatch({ type: ACTION_DEV_TOOLS_PANEL_TOGGLE })
+    dispatch({ type: ACTION_DEVTOOLS_PANEL_TOGGLE })
   }
 
   return (

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

@@ -7,6 +7,7 @@ import imgApp from './app.png'
 import { useReducer } from 'react'
 import { DevOverlay } from './dev-overlay'
 import {
+  ACTION_DEVTOOLS_PANEL_TOGGLE,
   ACTION_ERROR_OVERLAY_CLOSE,
   ACTION_ERROR_OVERLAY_OPEN,
   ACTION_ERROR_OVERLAY_TOGGLE,
@@ -93,7 +94,8 @@ const initialState: OverlayState = {
     installed: '15.2.0',
     staleness: 'fresh',
   },
-  isErrorOverlayOpen: true,
+  isErrorOverlayOpen: false,
+  isDevToolsPanelOpen: false,
 }
 
 function useOverlayReducer() {
@@ -109,6 +111,9 @@ function useOverlayReducer() {
         case ACTION_ERROR_OVERLAY_TOGGLE: {
           return { ...state, isErrorOverlayOpen: !state.isErrorOverlayOpen }
         }
+        case ACTION_DEVTOOLS_PANEL_TOGGLE: {
+          return { ...state, isDevToolsPanelOpen: !state.isDevToolsPanelOpen }
+        }
         default: {
           return state
         }
@@ -148,3 +153,37 @@ export const Default: Story = {
     )
   },
 }
+
+export const WithPanel: Story = {
+  beforeEach: () => {
+    process.env.__NEXT_DEVTOOL_NEW_PANEL_UI = 'true'
+
+    // clean up callback function
+    return () => {
+      delete process.env.__NEXT_DEVTOOL_NEW_PANEL_UI
+    }
+  },
+  render: function DevOverlayStory() {
+    const [state, dispatch] = useOverlayReducer()
+    return (
+      <>
+        <img
+          src={imgApp}
+          style={{
+            width: '100%',
+            height: '100vh',
+            objectFit: 'contain',
+          }}
+        />
+        <DevOverlay
+          state={state}
+          dispatch={dispatch}
+          getSquashedHydrationErrorDetails={
+            // Testing like App Router where we no longer quash hydration errors
+            getNoSquashedHydrationErrorDetails
+          }
+        />
+      </>
+    )
+  },
+}