chore: server-and-serverless template

packages/components/src/EmptyState.stories.tsx

@@ -0,0 +1,58 @@
+import { AlertCircle, Boxes, FolderOpen } from 'lucide-react'
+import type { Story, StoryMeta } from './csf.types'
+import { EmptyState } from './EmptyState'
+
+const meta: StoryMeta = {
+  title: 'EmptyState',
+  component: EmptyState,
+  tags: ['feedback'],
+  argTypes: {
+    icon: { description: 'Lucide icon component displayed above the title', control: false },
+    title: { description: 'Primary heading text', control: 'text' },
+    description: { description: 'Supporting text below the title', control: 'text' },
+    action: { description: 'Label for the primary action button', control: 'text' },
+    onAction: { description: 'Callback fired when the action button is clicked', control: false },
+    compact: {
+      description: 'Reduces padding and icon size for inline contexts',
+      control: 'boolean',
+    },
+    docsHref: { description: 'Optional link shown as a Docs button', control: 'text' },
+  },
+}
+export default meta
+
+function DefaultStory() {
+  return (
+    <EmptyState
+      icon={Boxes}
+      title="No items yet"
+      description="Create your first item to get started."
+    />
+  )
+}
+export const Default: Story = { render: DefaultStory }
+
+function WithActionStory() {
+  return (
+    <EmptyState
+      icon={FolderOpen}
+      title="No projects"
+      description="You don't have any projects yet."
+      action="New project"
+      onAction={() => {}}
+    />
+  )
+}
+export const WithAction: Story = { render: WithActionStory }
+
+function CompactStory() {
+  return (
+    <EmptyState
+      icon={AlertCircle}
+      title="Nothing here"
+      description="This section is currently empty."
+      compact
+    />
+  )
+}
+export const Compact: Story = { render: CompactStory }