@uicopilot/storybook-addon 0.5.20 → 0.5.21

package/README.md

@@ -1,147 +1,17 @@
-# @uicopilot/storybook-addon
+# UI Parity — Design System Compliance for Storybook
 
-AI-powered Figma comparison for Storybook components.
+> Your design system is the contract. UI Parity proves your code honors it.
 
-## Installation
+AI-powered Figma comparison inside your existing Storybook. Get a compliance score per component — not a pixel diff.
 
-```bash
-npm install @uicopilot/storybook-addon
-```
+## Early access
 
-## Setup
+UI Parity is in **closed beta**, opening gradually to design and engineering teams.
 
-Add the addon to your `.storybook/main.js` or `.storybook/main.ts`:
-
-```javascript
-module.exports = {
-  addons: [
-    // ... other addons
-    '@uicopilot/storybook-addon',
-  ],
-};
-```
-
-## Usage
-
-Add Figma URLs to your story parameters:
-
-```typescript
-export const Primary = {
-  args: {
-    label: 'Button',
-  },
-  parameters: {
-    uiCopilot: {
-      figmaUrl: 'https://www.figma.com/file/xxx/design?node-id=123',
-    },
-  },
-};
-```
-
-Then open the "UI Parity" panel in Storybook to review your component against the Figma design.
-
-## Architecture
-
-This addon follows a **modular architecture** with strict separation of concerns:
-
-### Project Structure
-
-```
-src/
-├── manager.tsx              # Storybook addon registration
-├── Panel.tsx                # Main panel orchestrator (65 lines)
-├── hooks/                   # Custom hooks (business logic)
-│   ├── useAuth.ts          # OAuth + Device Code authentication
-│   ├── useProjects.ts      # Project CRUD operations
-│   ├── useComponentMapping.ts  # Figma component mapping
-│   ├── useAIReview.ts      # AI review & streaming
-│   ├── usePromptGeneration.ts  # Prompt generation
-│   ├── useCurrentStory.ts  # Story tracking
-│   └── useFigma.ts         # Figma state management
-├── store/                   # Zustand state management
-│   ├── index.ts            # Main store (slices pattern)
-│   ├── authSlice.ts        # Auth state
-│   ├── projectSlice.ts     # Project state
-│   ├── figmaSlice.ts       # Figma state
-│   ├── reviewSlice.ts      # Review state
-│   └── promptSlice.ts      # Prompt state
-├── components/              # UI components
-│   ├── auth/               # Auth-related components
-│   ├── projects/           # Project-related components
-│   └── layout/             # Layout components
-├── types/                   # TypeScript type definitions
-└── styles/                  # Styled components
-```
-
-### Design Principles
-
-1. **File Size Limits**
-   - Maximum 300 lines per file
-   - Components: < 200 lines
-   - Hooks: < 150 lines
-   - Utilities: < 100 lines
-
-2. **State Management**
-   - Zustand with slices pattern
-   - Each domain has its own slice
-   - No prop drilling
-
-3. **Business Logic**
-   - Extracted to custom hooks
-   - Hooks consume store slices
-   - UI components stay presentational
-
-4. **Single Responsibility**
-   - One concern per file
-   - Clear, focused modules
-   - Easy to test and maintain
-
-### Refactoring History
-
-The main `Panel.tsx` was refactored from **2,458 lines** to **65 lines** by:
-- Extracting state to Zustand slices
-- Creating 7 custom hooks for business logic
-- Breaking UI into focused components
-- See `Panel-legacy.tsx` for original implementation
-
-## Development Status
-
-**Week 1-2:** ✅ Complete
-- Addon panel with tabs (Settings, Review, Issues, Prompt)
-- OAuth and Device Code authentication
-- Project management
-- Figma integration
-- Component mapping
-- AI review with streaming
-- Issue management
-
-**Week 3 (Next):** Apply fixes locally
-**Week 4:** Create PRs
+Submit your request at **[uiparity.com](https://uiparity.com)** — we'll reach out when your spot is ready. Use your work email when requesting access.
 
 ## Requirements
 
-- Storybook 7.0+
-- React 16.8+
-- Anthropic API key (for AI comparison)
-- Figma access token
-
-## Feature Compatibility by Storybook Version
-
-| Feature | Storybook 7/8 | Storybook 9+ |
-|---------|---------------|--------------|
-| Detect design issues | Yes | Yes |
-| AI review with streaming | Yes | Yes |
-| Generate fixes | Yes | Yes |
-| **Auto-apply fixes** | No (manual copy) | Yes |
-
-### Why Auto-Apply Requires Storybook 9+
-
-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.
-
-**Storybook 7/8 users:** You can still detect issues and generate fixes. Copy the generated code manually to apply fixes.
-
-**Storybook 9+ users:** Full auto-apply support. Click "Apply" to write fixes directly to your source files.
-
-## License
-
-MIT
+- Storybook 7+
+- Figma account
+- UI Parity account — [uiparity.com](https://uiparity.com)