[devtools] add dialog behavior to panel ui

Author: devjiwonchoi

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { OverlayState } from '../../shared'
+
+import { DevToolsPanel } from './dev-tools-panel'
+import { INITIAL_OVERLAY_STATE } from '../../shared'
+import { withShadowPortal } from '../../storybook/with-shadow-portal'
+
+const meta: Meta<typeof DevToolsPanel> = {
+  component: DevToolsPanel,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof DevToolsPanel>
+
+const state: OverlayState = {
+  ...INITIAL_OVERLAY_STATE,
+  routerType: 'app',
+  isErrorOverlayOpen: false,
+  isDevToolsPanelOpen: true,
+}
+
+export const Default: Story = {
+  args: {
+    state,
+    dispatch: () => {},
+  },
+}

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

@@ -1,4 +1,56 @@
-export function DevToolsPanel() {
-  // TODO: Remove style; It is to indicate faster in the browser.
-  return <div className="text-black">DevToolsPanel</div>
+import type { OverlayDispatch, OverlayState } from '../../shared'
+
+import { Suspense, useRef } from 'react'
+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'
+
+export function DevToolsPanel({
+  state,
+  dispatch,
+}: {
+  state: OverlayState
+  dispatch: OverlayDispatch
+}) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+
+  // This hook lets us do an exit animation before unmounting the component
+  const { mounted, rendered } = useDelayedRender(state.isDevToolsPanelOpen)
+
+  useFocusTrap(dialogRef, null, rendered)
+
+  if (!mounted) {
+    // Workaround React quirk that triggers "Switch to client-side rendering" if
+    // we return no Suspense boundary here.
+    return <Suspense />
+  }
+
+  const onClose = () => {
+    dispatch({ type: ACTION_DEV_TOOLS_PANEL_TOGGLE })
+  }
+
+  return (
+    <Overlay className="p-0 top-[10vh]">
+      <div
+        className="dev-tools-panel-dialog-container antialiased flex flex-col bg-[var(--color-background-100)] bg-clip-padding border-solid border-[var(--color-gray-400)] rounded-b-[var(--next-dialog-radius)] shadow-[var(--shadow-menu)] relative overflow-hidden min-w-[800px] min-h-[500px]"
+        ref={dialogRef}
+      >
+        <Dialog
+          aria-labelledby="nextjs__container_dev_tools_panel_label"
+          aria-describedby="nextjs__container_dev_tools_panel_desc"
+          className="dev-tools-panel-dialog-scroll overflow-y-auto h-full"
+          onClose={onClose}
+        >
+          <DialogContent>
+            <DialogHeader></DialogHeader>
+            <DialogBody>
+              <div>DevToolsPanel</div>
+            </DialogBody>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </Overlay>
+  )
 }

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

@@ -58,7 +58,9 @@ export function DevOverlay({
                 ))}
 
               {process.env.__NEXT_DEVTOOL_NEW_PANEL_UI &&
-                state.isDevToolsPanelOpen && <DevToolsPanel />}
+                state.isDevToolsPanelOpen && (
+                  <DevToolsPanel state={state} dispatch={dispatch} />
+                )}
 
               <ErrorOverlay
                 state={state}