48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { useState } from 'react'
|
||
import type { Story, StoryMeta } from './csf.types'
|
||
import { ServerErrorState } from './ServerErrorState'
|
||
|
||
const meta: StoryMeta = {
|
||
title: 'ServerErrorState',
|
||
component: ServerErrorState,
|
||
tags: ['feedback'],
|
||
argTypes: {
|
||
title: { description: 'Override the "Something went wrong" heading', control: 'text' },
|
||
description: { description: 'Override the default error description', control: 'text' },
|
||
onRetry: { description: 'Callback fired when the retry button is clicked', control: false },
|
||
retrying: {
|
||
description: 'Shows a loading spinner on the retry button',
|
||
control: 'boolean',
|
||
},
|
||
retryLabel: { description: 'Label for the retry button', control: 'text' },
|
||
glyph: {
|
||
description: 'Custom element displayed above the title instead of "500"',
|
||
control: false,
|
||
},
|
||
},
|
||
}
|
||
export default meta
|
||
|
||
export const Default: Story = {}
|
||
|
||
function WithRetryStory() {
|
||
const [retrying, setRetrying] = useState(false)
|
||
const handleRetry = () => {
|
||
setRetrying(true)
|
||
setTimeout(() => setRetrying(false), 1500)
|
||
}
|
||
return <ServerErrorState onRetry={handleRetry} retrying={retrying} />
|
||
}
|
||
export const WithRetry: Story = { render: WithRetryStory }
|
||
|
||
function CustomGlyphStory() {
|
||
return (
|
||
<ServerErrorState
|
||
glyph={<span style={{ fontSize: 64, lineHeight: 1 }}>⚠️</span>}
|
||
title="Unexpected error"
|
||
description="Please try again or contact support if the problem persists."
|
||
/>
|
||
)
|
||
}
|
||
export const CustomGlyph: Story = { render: CustomGlyphStory }
|