Bruno Sarlo
4de266de61
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
This reverts commit 72cb7319f5.
148 lines
2.6 KiB
Markdown
148 lines
2.6 KiB
Markdown
---
|
|
name: dss-storybook
|
|
description: Set up and configure Storybook for design system components
|
|
arguments:
|
|
- name: action
|
|
description: "Action to perform: scan, generate, or configure"
|
|
required: true
|
|
- name: path
|
|
description: Path to project directory
|
|
required: false
|
|
---
|
|
|
|
# DSS Storybook Command
|
|
|
|
Set up, configure, and generate Storybook stories for design system documentation.
|
|
|
|
## Usage
|
|
|
|
```
|
|
/dss-storybook <action> [path]
|
|
```
|
|
|
|
Examples:
|
|
```
|
|
/dss-storybook scan
|
|
/dss-storybook generate ./src/components
|
|
/dss-storybook configure
|
|
```
|
|
|
|
## Actions
|
|
|
|
| Action | Description |
|
|
|--------|-------------|
|
|
| scan | Scan for existing Storybook setup and components |
|
|
| generate | Generate stories for components |
|
|
| configure | Configure Storybook theme with design tokens |
|
|
|
|
## What This Does
|
|
|
|
### Scan
|
|
- Checks for existing Storybook installation
|
|
- Finds components without stories
|
|
- Reports Storybook configuration status
|
|
|
|
### Generate
|
|
- Creates story files for components
|
|
- Generates prop documentation
|
|
- Creates variant stories
|
|
|
|
### Configure
|
|
- Sets up Storybook theme
|
|
- Integrates design tokens
|
|
- Configures addons
|
|
|
|
## Instructions for Claude
|
|
|
|
When the user runs this command:
|
|
|
|
1. Validate action is valid (scan, generate, configure)
|
|
2. Use `dss_setup_storybook` tool with action and path
|
|
3. Present results based on action:
|
|
|
|
**For scan:**
|
|
- Show Storybook status
|
|
- List components with/without stories
|
|
- Recommend next steps
|
|
|
|
**For generate:**
|
|
- Show generated story files
|
|
- Display story code
|
|
- Provide usage instructions
|
|
|
|
**For configure:**
|
|
- Show configuration changes
|
|
- Display theme setup
|
|
- Provide run instructions
|
|
|
|
## Example Output
|
|
|
|
### Scan
|
|
```
|
|
Storybook Scan: /path/to/project
|
|
|
|
STATUS
|
|
- Storybook installed: Yes (v7.6.0)
|
|
- Stories found: 12
|
|
- Components without stories: 8
|
|
|
|
MISSING STORIES
|
|
- Accordion.tsx
|
|
- Avatar.tsx
|
|
- Badge.tsx
|
|
- Dropdown.tsx
|
|
- Pagination.tsx
|
|
- Progress.tsx
|
|
- Tabs.tsx
|
|
- Toast.tsx
|
|
|
|
Run /dss-storybook generate to create stories
|
|
```
|
|
|
|
### Generate
|
|
```
|
|
Storybook Story Generation
|
|
|
|
GENERATED STORIES
|
|
|
|
Button.stories.tsx:
|
|
- Primary variant
|
|
- Secondary variant
|
|
- Disabled state
|
|
- Loading state
|
|
- With icon
|
|
|
|
Card.stories.tsx:
|
|
- Default
|
|
- With image
|
|
- Interactive
|
|
|
|
Input.stories.tsx:
|
|
- Default
|
|
- With label
|
|
- With error
|
|
- Disabled
|
|
|
|
Run: npm run storybook
|
|
```
|
|
|
|
### Configure
|
|
```
|
|
Storybook Configuration
|
|
|
|
CONFIGURATION CREATED
|
|
|
|
.storybook/theme.js:
|
|
- Brand colors from tokens
|
|
- Typography from tokens
|
|
- Custom logo support
|
|
|
|
.storybook/preview.js:
|
|
- Token CSS imported
|
|
- Global decorators added
|
|
- Controls configured
|
|
|
|
Run: npm run storybook
|
|
Access: http://localhost:6006
|
|
```
|