59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
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 }
|