File size: 2,640 Bytes
b91e262 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | import type { Meta, StoryObj } from '@storybook/react'
import { Errors } from './errors'
import { withShadowPortal } from '../storybook/with-shadow-portal'
import { lorem } from '../utils/lorem'
import { runtimeErrors } from '../storybook/errors'
const meta: Meta<typeof Errors> = {
component: Errors,
parameters: {
layout: 'fullscreen',
},
decorators: [withShadowPortal],
}
export default meta
type Story = StoryObj<typeof Errors>
// todo: update the stories to be wrapped in context providers necessary, instead of passing props directly, before they expected props
export const Default: Story = {
args: {
getSquashedHydrationErrorDetails: () => null,
runtimeErrors,
versionInfo: {
installed: '15.0.0',
staleness: 'fresh',
},
debugInfo: { devtoolsFrontendUrl: undefined },
isTurbopack: false,
onClose: () => {},
},
}
export const Turbopack: Story = {
args: {
...Default.args,
isTurbopack: true,
},
}
export const VeryLongErrorMessage: Story = {
args: {
...Default.args,
runtimeErrors: [
{
...runtimeErrors[0],
error: Object.assign(new Error(lorem)),
},
],
},
}
export const WithHydrationWarning: Story = {
args: {
...Default.args,
runtimeErrors: [
{
id: 1,
runtime: true,
error: 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 and welcome to my amazing website with lots of content hello world and welcome to my amazing website with lots of content </p>
+ <div> hello world and welcome to my amazing website with lots of content hello world and welcome to my amazing website with lots of content </div>`,
},
}),
frames: () =>
Promise.resolve([
{
error: true,
reason: 'First error message',
external: false,
ignored: false,
originalStackFrame: null,
originalCodeFrame: null,
sourceStackFrame: {
file: 'app/page.tsx',
methodName: 'Home',
arguments: [],
line1: 10,
column1: 5,
},
},
]),
type: 'runtime',
},
],
debugInfo: { devtoolsFrontendUrl: undefined },
onClose: () => {},
},
}
|