55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import type { AppStory, AppStoryMeta } from './csf.types'
|
|
import { UserCard, type User } from './UserCard'
|
|
import { stubQuery } from './fixtures/stubQuery'
|
|
|
|
// App-level widget: composed from library primitives (Avatar + Badge + Card) and
|
|
// driven by a query, so it's previewed across its named data-state scenarios in
|
|
// the Design tab's App lens — not as simple variants.
|
|
const meta: AppStoryMeta = {
|
|
title: 'UserCard',
|
|
component: UserCard,
|
|
group: 'Account',
|
|
description: 'Shows the current user, composed from the library Avatar + Badge.',
|
|
tags: ['app'],
|
|
inputs: [
|
|
{
|
|
name: 'query',
|
|
kind: 'query',
|
|
type: 'UseQueryResult<User | null>',
|
|
description: 'Fetches the user to display.',
|
|
},
|
|
],
|
|
argTypes: {
|
|
query: { description: 'User query result (loading / error / empty / success).', control: false },
|
|
},
|
|
}
|
|
export default meta
|
|
|
|
const sampleUser: User = {
|
|
id: 'u_1',
|
|
name: 'Ada Lovelace',
|
|
email: 'ada@example.com',
|
|
role: 'Principal Engineer',
|
|
status: 'active',
|
|
}
|
|
|
|
function LoadingScenario() {
|
|
return <UserCard query={stubQuery.loading<User | null>()} />
|
|
}
|
|
export const Loading: AppStory = { tag: 'query: pending', render: LoadingScenario }
|
|
|
|
function ErrorScenario() {
|
|
return <UserCard query={stubQuery.error<User | null>(new Error('Request failed'))} />
|
|
}
|
|
export const Errored: AppStory = { name: 'Error', tag: 'query: error', render: ErrorScenario }
|
|
|
|
function EmptyScenario() {
|
|
return <UserCard query={stubQuery.empty<User | null>()} />
|
|
}
|
|
export const Empty: AppStory = { tag: 'query: no data', render: EmptyScenario }
|
|
|
|
function ActiveScenario() {
|
|
return <UserCard query={stubQuery.success<User | null>(sampleUser)} />
|
|
}
|
|
export const Active: AppStory = { name: 'Active user', tag: 'query: success', render: ActiveScenario }
|