@uicopilot/storybook-addon 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +147 -0
- package/dist/manager.mjs +182 -0
- package/dist/preset.d.mts +40 -0
- package/dist/preset.d.ts +40 -0
- package/dist/preset.js +3 -0
- package/dist/preset.mjs +3 -0
- package/dist/preview.mjs +1 -0
- package/package.json +114 -0
package/README.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# @uicopilot/storybook-addon
|
|
2
|
+
|
|
3
|
+
AI-powered Figma comparison for Storybook components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @uicopilot/storybook-addon
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
Add the addon to your `.storybook/main.js` or `.storybook/main.ts`:
|
|
14
|
+
|
|
15
|
+
```javascript
|
|
16
|
+
module.exports = {
|
|
17
|
+
addons: [
|
|
18
|
+
// ... other addons
|
|
19
|
+
'@uicopilot/storybook-addon',
|
|
20
|
+
],
|
|
21
|
+
};
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
Add Figma URLs to your story parameters:
|
|
27
|
+
|
|
28
|
+
```typescript
|
|
29
|
+
export const Primary = {
|
|
30
|
+
args: {
|
|
31
|
+
label: 'Button',
|
|
32
|
+
},
|
|
33
|
+
parameters: {
|
|
34
|
+
uiCopilot: {
|
|
35
|
+
figmaUrl: 'https://www.figma.com/file/xxx/design?node-id=123',
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Then open the "UI Copilot" panel in Storybook to review your component against the Figma design.
|
|
42
|
+
|
|
43
|
+
## Architecture
|
|
44
|
+
|
|
45
|
+
This addon follows a **modular architecture** with strict separation of concerns:
|
|
46
|
+
|
|
47
|
+
### Project Structure
|
|
48
|
+
|
|
49
|
+
```
|
|
50
|
+
src/
|
|
51
|
+
├── manager.tsx # Storybook addon registration
|
|
52
|
+
├── Panel.tsx # Main panel orchestrator (65 lines)
|
|
53
|
+
├── hooks/ # Custom hooks (business logic)
|
|
54
|
+
│ ├── useAuth.ts # OAuth + Device Code authentication
|
|
55
|
+
│ ├── useProjects.ts # Project CRUD operations
|
|
56
|
+
│ ├── useComponentMapping.ts # Figma component mapping
|
|
57
|
+
│ ├── useAIReview.ts # AI review & streaming
|
|
58
|
+
│ ├── usePromptGeneration.ts # Prompt generation
|
|
59
|
+
│ ├── useCurrentStory.ts # Story tracking
|
|
60
|
+
│ └── useFigma.ts # Figma state management
|
|
61
|
+
├── store/ # Zustand state management
|
|
62
|
+
│ ├── index.ts # Main store (slices pattern)
|
|
63
|
+
│ ├── authSlice.ts # Auth state
|
|
64
|
+
│ ├── projectSlice.ts # Project state
|
|
65
|
+
│ ├── figmaSlice.ts # Figma state
|
|
66
|
+
│ ├── reviewSlice.ts # Review state
|
|
67
|
+
│ └── promptSlice.ts # Prompt state
|
|
68
|
+
├── components/ # UI components
|
|
69
|
+
│ ├── auth/ # Auth-related components
|
|
70
|
+
│ ├── projects/ # Project-related components
|
|
71
|
+
│ └── layout/ # Layout components
|
|
72
|
+
├── types/ # TypeScript type definitions
|
|
73
|
+
└── styles/ # Styled components
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Design Principles
|
|
77
|
+
|
|
78
|
+
1. **File Size Limits**
|
|
79
|
+
- Maximum 300 lines per file
|
|
80
|
+
- Components: < 200 lines
|
|
81
|
+
- Hooks: < 150 lines
|
|
82
|
+
- Utilities: < 100 lines
|
|
83
|
+
|
|
84
|
+
2. **State Management**
|
|
85
|
+
- Zustand with slices pattern
|
|
86
|
+
- Each domain has its own slice
|
|
87
|
+
- No prop drilling
|
|
88
|
+
|
|
89
|
+
3. **Business Logic**
|
|
90
|
+
- Extracted to custom hooks
|
|
91
|
+
- Hooks consume store slices
|
|
92
|
+
- UI components stay presentational
|
|
93
|
+
|
|
94
|
+
4. **Single Responsibility**
|
|
95
|
+
- One concern per file
|
|
96
|
+
- Clear, focused modules
|
|
97
|
+
- Easy to test and maintain
|
|
98
|
+
|
|
99
|
+
### Refactoring History
|
|
100
|
+
|
|
101
|
+
The main `Panel.tsx` was refactored from **2,458 lines** to **65 lines** by:
|
|
102
|
+
- Extracting state to Zustand slices
|
|
103
|
+
- Creating 7 custom hooks for business logic
|
|
104
|
+
- Breaking UI into focused components
|
|
105
|
+
- See `Panel-legacy.tsx` for original implementation
|
|
106
|
+
|
|
107
|
+
## Development Status
|
|
108
|
+
|
|
109
|
+
**Week 1-2:** ✅ Complete
|
|
110
|
+
- Addon panel with tabs (Settings, Review, Issues, Prompt)
|
|
111
|
+
- OAuth and Device Code authentication
|
|
112
|
+
- Project management
|
|
113
|
+
- Figma integration
|
|
114
|
+
- Component mapping
|
|
115
|
+
- AI review with streaming
|
|
116
|
+
- Issue management
|
|
117
|
+
|
|
118
|
+
**Week 3 (Next):** Apply fixes locally
|
|
119
|
+
**Week 4:** Create PRs
|
|
120
|
+
|
|
121
|
+
## Requirements
|
|
122
|
+
|
|
123
|
+
- Storybook 7.0+
|
|
124
|
+
- React 16.8+
|
|
125
|
+
- Anthropic API key (for AI comparison)
|
|
126
|
+
- Figma access token
|
|
127
|
+
|
|
128
|
+
## Feature Compatibility by Storybook Version
|
|
129
|
+
|
|
130
|
+
| Feature | Storybook 7/8 | Storybook 9+ |
|
|
131
|
+
|---------|---------------|--------------|
|
|
132
|
+
| Detect design issues | Yes | Yes |
|
|
133
|
+
| AI review with streaming | Yes | Yes |
|
|
134
|
+
| Generate fixes | Yes | Yes |
|
|
135
|
+
| **Auto-apply fixes** | No (manual copy) | Yes |
|
|
136
|
+
|
|
137
|
+
### Why Auto-Apply Requires Storybook 9+
|
|
138
|
+
|
|
139
|
+
The "Apply Fix" feature uses Storybook's `experimental_serverChannel` API to write files directly to disk from the browser. This API was introduced in Storybook 9 and is not available in earlier versions.
|
|
140
|
+
|
|
141
|
+
**Storybook 7/8 users:** You can still detect issues and generate fixes. Copy the generated code manually to apply fixes.
|
|
142
|
+
|
|
143
|
+
**Storybook 9+ users:** Full auto-apply support. Click "Apply" to write fixes directly to your source files.
|
|
144
|
+
|
|
145
|
+
## License
|
|
146
|
+
|
|
147
|
+
MIT
|