chore: kanban template

packages/components/src/UserCard.app.stories.tsx

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