Skip to content

Commit d12559c

Browse files
docs(ui): add stories for Error page (#2601)
Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>
1 parent 8b5edf2 commit d12559c

File tree

1 file changed

+79
-0
lines changed

1 file changed

+79
-0
lines changed

app/error.stories.ts

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import Error from './error.vue'
2+
import type { Meta, StoryObj } from '@storybook-vue/nuxt'
3+
import type { NuxtError } from '#app'
4+
5+
const meta = {
6+
title: 'pages/error',
7+
component: Error,
8+
parameters: {
9+
layout: 'fullscreen',
10+
},
11+
} satisfies Meta<typeof Error>
12+
13+
export default meta
14+
type Story = StoryObj<typeof meta>
15+
16+
/** Package, org, or page not found. */
17+
export const NotFound: Story = {
18+
args: {
19+
error: {
20+
status: 404,
21+
} as NuxtError,
22+
},
23+
}
24+
25+
/** Unauthorized access - shown when authentication is required. */
26+
export const Unauthorized: Story = {
27+
args: {
28+
error: {
29+
status: 401,
30+
} as NuxtError,
31+
},
32+
}
33+
34+
/** Generic server error with default message. */
35+
export const ServerError: Story = {
36+
args: {
37+
error: {
38+
status: 500,
39+
} as NuxtError,
40+
},
41+
}
42+
43+
/** Service unavailable - occurs when external services (jsDelivr, npm registry) fail. */
44+
export const ServiceUnavailable: Story = {
45+
args: {
46+
error: {
47+
status: 503,
48+
} as NuxtError,
49+
},
50+
}
51+
52+
export const Teapot: Story = {
53+
args: {
54+
error: {
55+
status: 418,
56+
} as NuxtError,
57+
},
58+
}
59+
60+
/** Error with a message. */
61+
export const WithMessage: Story = {
62+
args: {
63+
error: {
64+
status: 404,
65+
message: 'The page you are looking for does not exist.',
66+
} as NuxtError,
67+
},
68+
}
69+
70+
/** Error with a detailed message to test text wrapping and layout. */
71+
export const LongMessage: Story = {
72+
args: {
73+
error: {
74+
status: 500,
75+
message:
76+
'Internal server error. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique ex ac nisi dapibus maximus. Curabitur feugiat lorem eros, sed eleifend purus facilisis at.',
77+
} as NuxtError,
78+
},
79+
}

0 commit comments

Comments
 (0)