[DevOverlay] Add Basic Stories for Error Containers (#74697)

This PR added stories for Error containers: `Errors`, `BuildError`, `RootLayoutMissingTagsError`.

Note: Filenames are Pascal for now to benefit the vscode file nesting. Will change all to kebab in once.

packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { BuildError } from './BuildError'
+import { withShadowPortal } from '../storybook/with-shadow-portal'
+
+const meta: Meta<typeof BuildError> = {
+  title: 'BuildError',
+  component: BuildError,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof BuildError>
+
+export const Default: Story = {
+  args: {
+    message: `./src/app/page.tsx:3:3
+Parsing ecmascript source code failed
+  1 | export default function Home() {
+  2 |   const
+> 3 |   return <div>Hello World</div>
+    |   ^^^^^^
+  4 | }
+  5 |
+
+Expected identError: Failed to resolve import "./missing-module"`,
+    versionInfo: {
+      installed: '15.0.0',
+      staleness: 'fresh',
+    },
+  },
+}

packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/Errors.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Errors } from './Errors'
 import { withShadowPortal } from '../storybook/with-shadow-portal'
+import { ACTION_UNHANDLED_ERROR } from '../../../shared'
 
 const meta: Meta<typeof Errors> = {
   title: 'Errors',
@@ -21,32 +22,109 @@ export const Default: Story = {
       {
         id: 1,
         event: {
-          type: 'unhandled-error',
-          reason: new Error('Failed to compile'),
+          type: ACTION_UNHANDLED_ERROR,
+          reason: new Error('First error message'),
+          componentStackFrames: [
+            {
+              file: 'app/page.tsx',
+              component: 'Home',
+              lineNumber: 10,
+              column: 5,
+              canOpenInEditor: true,
+            },
+          ],
+          frames: [
+            {
+              file: 'app/page.tsx',
+              methodName: 'Home',
+              arguments: [],
+              lineNumber: 10,
+              column: 5,
+            },
+          ],
+        },
+      },
+      {
+        id: 2,
+        event: {
+          type: ACTION_UNHANDLED_ERROR,
+          reason: new Error('Second error message'),
+          frames: [],
+        },
+      },
+      {
+        id: 3,
+        event: {
+          type: ACTION_UNHANDLED_ERROR,
+          reason: new Error('Third error message'),
+          frames: [],
+        },
+      },
+      {
+        id: 4,
+        event: {
+          type: ACTION_UNHANDLED_ERROR,
+          reason: new Error('Fourth error message'),
           frames: [],
         },
       },
     ],
-    initialDisplayState: 'fullscreen',
     versionInfo: {
       installed: '15.0.0',
       staleness: 'fresh',
     },
+    initialDisplayState: 'fullscreen',
     hasStaticIndicator: true,
     isTurbopackEnabled: true,
   },
 }
 
-export const NoErrors: Story = {
+export const Minimized: Story = {
   args: {
-    isAppDir: true,
-    errors: [],
+    ...Default.args,
     initialDisplayState: 'minimized',
-    versionInfo: {
-      installed: '15.0.0',
-      staleness: 'fresh',
-    },
-    hasStaticIndicator: true,
-    isTurbopackEnabled: true,
+  },
+}
+
+export const WithHydrationWarning: Story = {
+  args: {
+    isAppDir: true,
+    errors: [
+      {
+        id: 1,
+        event: {
+          type: ACTION_UNHANDLED_ERROR,
+          reason: Object.assign(new Error('Hydration error'), {
+            details: {
+              warning: [
+                'Text content does not match server-rendered HTML: "%s" !== "%s"',
+                'Server Content',
+                'Client Content',
+              ],
+              reactOutputComponentDiff: `<MyComponent>
+  <ParentComponent>
+    <div>
+-     <p> hello world </p>
++     <div> hello world </div>`,
+            },
+            componentStackFrames: [
+              {
+                component: 'MyComponent',
+                file: 'app/page.tsx',
+                lineNumber: 10,
+                columnNumber: 5,
+              },
+              {
+                component: 'ParentComponent',
+                file: 'app/layout.tsx',
+                lineNumber: 20,
+                columnNumber: 3,
+              },
+            ],
+          }),
+          frames: [],
+        },
+      },
+    ],
   },
 }

packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RootLayoutMissingTagsError.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { RootLayoutMissingTagsError } from './RootLayoutMissingTagsError'
+import { withShadowPortal } from '../storybook/with-shadow-portal'
+
+const meta: Meta<typeof RootLayoutMissingTagsError> = {
+  title: 'RootLayoutMissingTagsError',
+  component: RootLayoutMissingTagsError,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [withShadowPortal],
+}
+
+export default meta
+type Story = StoryObj<typeof RootLayoutMissingTagsError>
+
+export const Default: Story = {
+  args: {
+    missingTags: ['html', 'body'],
+    versionInfo: {
+      installed: '15.0.0',
+      staleness: 'fresh',
+    },
+  },
+}
+
+export const SingleTag: Story = {
+  args: {
+    missingTags: ['html'],
+    versionInfo: {
+      installed: '15.0.0',
+      staleness: 'fresh',
+    },
+  },
+}