110 lines
2.0 KiB
Markdown
110 lines
2.0 KiB
Markdown
# Example: Add Chromatic to Existing Storybook
|
|
|
|
Add visual regression to project that already has Storybook configured.
|
|
|
|
---
|
|
|
|
## Scenario
|
|
|
|
- Storybook 7.x already installed and configured
|
|
- Existing `.stories.tsx` files for components
|
|
- Want to add Chromatic without breaking existing setup
|
|
|
|
---
|
|
|
|
## Usage
|
|
|
|
```
|
|
"Add Chromatic to existing Storybook"
|
|
```
|
|
|
|
---
|
|
|
|
## What Skill Does
|
|
|
|
1. **Detects existing setup**: Reads `.storybook/main.js`, existing stories
|
|
2. **Non-destructive update**: Only adds Chromatic addon
|
|
3. **Preserves config**: Keeps existing addons, framework, settings
|
|
4. **CI integration**: Generates workflow
|
|
|
|
---
|
|
|
|
## Changes Made
|
|
|
|
### Before
|
|
|
|
**.storybook/main.js**:
|
|
```javascript
|
|
module.exports = {
|
|
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
|
addons: [
|
|
'@storybook/addon-links',
|
|
'@storybook/addon-essentials',
|
|
'@storybook/addon-interactions',
|
|
],
|
|
framework: {
|
|
name: '@storybook/react-vite',
|
|
options: {},
|
|
},
|
|
};
|
|
```
|
|
|
|
### After
|
|
|
|
```javascript
|
|
module.exports = {
|
|
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
|
addons: [
|
|
'@storybook/addon-links',
|
|
'@storybook/addon-essentials',
|
|
'@chromatic-com/storybook', // ← Added
|
|
'@storybook/addon-interactions',
|
|
],
|
|
framework: {
|
|
name: '@storybook/react-vite',
|
|
options: {},
|
|
},
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Additional Files
|
|
|
|
- `chromatic.config.json` (new)
|
|
- `.github/workflows/chromatic.yml` (new)
|
|
- `package.json` scripts updated
|
|
|
|
---
|
|
|
|
## No Stories Generated
|
|
|
|
Skill detects existing stories and **skips generation**:
|
|
|
|
```
|
|
✅ Existing Storybook detected
|
|
✅ Found 23 existing story files
|
|
✅ Skipping story generation
|
|
✅ Adding Chromatic configuration only
|
|
```
|
|
|
|
---
|
|
|
|
## Next Steps
|
|
|
|
```bash
|
|
# Install Chromatic
|
|
npm install --save-dev chromatic @chromatic-com/storybook
|
|
|
|
# Run on existing stories
|
|
npm run chromatic
|
|
```
|
|
|
|
All existing stories are captured as baseline automatically.
|
|
|
|
---
|
|
|
|
**Time saved**: 1-2 hours → 3 minutes
|
|
**Stories affected**: 0 (uses existing)
|
|
**Breaking changes**: None
|