chore: server-and-serverless template

packages/components/src/ServerErrorState.stories.tsx

@@ -0,0 +1,47 @@
+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 }