mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-03 22:59:14 +00:00
aa5125cef6
## Summary Expanding the covered files to format. One-time formatting pass. To be added to the `.git-blame-ignore-revs` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8341-Chore-Oxfmt-formatting-pass-2f56d73d365081f2988fcb7570f9a2a1) by [Unito](https://www.unito.io)
60 lines
1.0 KiB
Markdown
60 lines
1.0 KiB
Markdown
---
|
|
globs:
|
|
- '**/*.stories.ts'
|
|
---
|
|
|
|
# Storybook Conventions
|
|
|
|
## File Placement
|
|
|
|
Place `*.stories.ts` files alongside their components:
|
|
|
|
```
|
|
src/components/MyComponent/
|
|
├── MyComponent.vue
|
|
└── MyComponent.stories.ts
|
|
```
|
|
|
|
## Story Structure
|
|
|
|
```typescript
|
|
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
|
|
|
|
```bash
|
|
pnpm storybook # Development server
|
|
pnpm build-storybook # Production build
|
|
```
|