ComfyUI_frontend/docs/guidance/storybook.md

globs

globs
**/*.stories.ts

Storybook Conventions

File Placement

Place *.stories.ts files alongside their components:

src/components/MyComponent/
├── MyComponent.vue
└── MyComponent.stories.ts

Story Structure

import type { Meta, StoryObj } from '@storybook/vue3'
import ComponentName from './ComponentName.vue'

const meta: Meta<typeof ComponentName> = {
  title: 'Category/ComponentName',
  component: ComponentName,
  parameters: { layout: 'centered' }
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    /* props */
  }
}

Required Story Variants

Include when applicable:

• Default - Minimal props
• WithData - Realistic data
• Loading - Loading state
• Error - Error state
• Empty - No data

Mock Data

Use realistic ComfyUI schemas for mocks (node definitions, components).

Running Storybook

pnpm storybook        # Development server
pnpm build-storybook  # Production build