Step 1: Validate Project Setup
Execute: vr_setup_validator.py
Check:
- Framework (React/Vue/Svelte) from package.json
- Existing Storybook config (.storybook/ directory)
- Existing VR tool (chromatic, percy, backstopjs in dependencies)
- CI platform (.github/, .gitlab-ci.yml, .circleci/)
- Component file exists and is valid
Output:
```json
{
"framework": "react",
"storybook_version": "7.6.0",
"vr_tool": "chromatic",
"ci_platform": "github",
"component": {
"path": "src/components/ProfileCard.tsx",
"name": "ProfileCard",
"props": [...],
"valid": true
},
"dependencies": {
"installed": ["@storybook/react", "@storybook/addon-essentials"],
"missing": ["chromatic", "@chromatic-com/storybook"]
}
}
```
If Storybook not found: Ask user if they want to install Storybook first, provide setup instructions.
If multiple VR tools found: Ask user which to use (Chromatic recommended).
---
Step 2: Generate Storybook Stories
Execute: story_generator.py
Process:
- Parse component file (TypeScript/JSX/Vue SFC)
- Extract props, prop types, default values
- Identify variants (size, variant, disabled, etc.)
- Generate story file from template
- Add accessibility tests (@storybook/addon-a11y)
- Add interaction tests (if @storybook/test available)
Template: templates/story-template.tsx.j2
Example output (ProfileCard.stories.tsx):
```typescript
import type { Meta, StoryObj } from '@storybook/react';
import { ProfileCard } from './ProfileCard';
const meta = {
title: 'Components/ProfileCard',
component: ProfileCard,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
size: { control: 'select', options: ['sm', 'md', 'lg'] },
variant: { control: 'select', options: ['default', 'compact'] },
},
} satisfies Meta;
export default meta;
type Story = StoryObj;
export const Default: Story = {
args: {
name: 'John Doe',
avatar: 'https://example.com/avatar.jpg',
bio: 'Software Engineer',
size: 'md',
variant: 'default',
},
};
export const Small: Story = {
args: {
...Default.args,
size: 'sm',
},
};
export const Large: Story = {
args: {
...Default.args,
size: 'lg',
},
};
export const Compact: Story = {
args: {
...Default.args,
variant: 'compact',
},
};
// Accessibility test
Default.parameters = {
a11y: {
config: {
rules: [
{ id: 'color-contrast', enabled: true },
{ id: 'label', enabled: true },
],
},
},
};
```
Write to: {component_directory}/{ComponentName}.stories.tsx
---
Step 3: Generate Configuration Files
Execute: chromatic_config_generator.py (or percy/backstop equivalent)
#### For Chromatic:
Generate 3 files:
- chromatic.config.json:
```json
{
"projectId": "",
"buildScriptName": "build-storybook",
"exitZeroOnChanges": true,
"exitOnceUploaded": true,
"onlyChanged": true,
"externals": ["public/**"],
"skip": "dependabot/**",
"ignoreLastBuildOnBranch": "main"
}
```
- Update .storybook/main.js (add addon):
```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: {},
},
};
```
- Update package.json (add scripts):
```json
{
"scripts": {
"chromatic": "npx chromatic",
"chromatic:ci": "npx chromatic --exit-zero-on-changes"
}
}
```
For Percy: Generate .percy.yml instead
For BackstopJS: Generate backstop.config.js instead
---
Step 4: Generate CI/CD Workflow
Execute: ci_workflow_generator.py
Detect CI platform from existing files:
.github/workflows/ β GitHub Actions.gitlab-ci.yml β GitLab CI.circleci/config.yml β CircleCI- None β Ask user, default to GitHub Actions
#### GitHub Actions Example:
Generate: .github/workflows/chromatic.yml
```yaml
name: Visual Regression Tests
on:
push:
branches: [main, develop]
pull_request:
branches: [main]
jobs:
chromatic:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
with:
fetch-depth: 0 # Required for Chromatic
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run Chromatic
uses: chromaui/action@latest
with:
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
exitZeroOnChanges: true
onlyChanged: true
```
For GitLab CI: Add job to .gitlab-ci.yml
For CircleCI: Add job to .circleci/config.yml
---
Step 5: Provide Setup Instructions
Output to user:
````markdown
β
Visual regression testing setup complete!
|