catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-02 15:23:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add queue management and terminal dashboard documentation in Chinese

Browse Source 
- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure.
- Added terminal dashboard documentation, highlighting its layout, core features, and usage examples.
- Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.
This commit is contained in:
catlog22
2026-03-01 10:52:46 +08:00
parent a753327acc
commit 2fb93d20e0
34 changed files with 6908 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

600
docs/components/index.md Normal file
View File

@@ -0,0 +1,600 @@
# Component Library
## One-Liner
**A comprehensive collection of reusable UI components built with Radix UI primitives and Tailwind CSS, following shadcn/ui patterns for consistent, accessible, and customizable interfaces.**
---
## Overview
**Location**: `ccw/frontend/src/components/ui/`
**Purpose**: Provides a consistent set of UI components for building the CCW frontend application.
**Technology Stack**:
- **Radix UI**: Unstyled, accessible component primitives
- **Tailwind CSS**: Utility-first styling with custom theme
- **class-variance-authority (CVA)**: Type-safe variant prop management
- **Lucide React**: Consistent iconography
---
## Live Demo: Component Gallery
:::demo ComponentGallery
# component-gallery.tsx
/**
* Component Gallery Demo
* Interactive showcase of all UI components
*/
export function ComponentGallery() {
const [selectedCategory, setSelectedCategory] = React.useState('all')
const [buttonVariant, setButtonVariant] = React.useState('default')
const [switchState, setSwitchState] = React.useState(false)
const [checkboxState, setCheckboxState] = React.useState(false)
const [selectedTab, setSelectedTab] = React.useState('variants')
const categories = [
{ id: 'all', label: 'All Components' },
{ id: 'buttons', label: 'Buttons' },
{ id: 'forms', label: 'Forms' },
{ id: 'feedback', label: 'Feedback' },
{ id: 'navigation', label: 'Navigation' },
{ id: 'overlays', label: 'Overlays' },
]
const components = {
buttons: [
{ name: 'Button', variants: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link', 'gradient'] },
],
forms: [
{ name: 'Input', type: 'text' },
{ name: 'Textarea', type: 'textarea' },
{ name: 'Select', type: 'select' },
{ name: 'Checkbox', type: 'checkbox' },
{ name: 'Switch', type: 'switch' },
],
feedback: [
{ name: 'Badge', variants: ['default', 'secondary', 'success', 'warning', 'destructive'] },
{ name: 'Progress', type: 'progress' },
{ name: 'Alert', type: 'alert' },
],
navigation: [
{ name: 'Tabs', type: 'tabs' },
{ name: 'Breadcrumb', type: 'breadcrumb' },
],
overlays: [
{ name: 'Dialog', type: 'dialog' },
{ name: 'Drawer', type: 'drawer' },
{ name: 'Dropdown', type: 'dropdown' },
],
}
const buttonVariants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link']
return (
<div className="p-6 bg-background space-y-8">
{/* Header */}
<div>
<h1 className="text-2xl font-bold">UI Component Library</h1>
<p className="text-muted-foreground">Interactive showcase of all available UI components</p>
</div>
{/* Category Filter */}
<div className="flex flex-wrap gap-2">
{categories.map((cat) => (
<button
key={cat.id}
onClick={() => setSelectedCategory(cat.id)}
className={`px-4 py-2 rounded-md text-sm transition-colors ${
selectedCategory === cat.id
? 'bg-primary text-primary-foreground'
: 'border hover:bg-accent'
}`}
>
{cat.label}
</button>
))}
</div>
{/* Buttons Section */}
{(selectedCategory === 'all' || selectedCategory === 'buttons') && (
<section className="space-y-4">
<h2 className="text-lg font-semibold">Buttons</h2>
<div className="space-y-6">
{/* Variant Selector */}
<div className="space-y-3">
<label className="text-sm font-medium">Variant</label>
<div className="flex flex-wrap gap-2">
{buttonVariants.map((variant) => (
<button
key={variant}
onClick={() => setButtonVariant(variant)}
className={`px-4 py-2 rounded-md text-sm capitalize transition-colors ${
buttonVariant === variant
? 'bg-primary text-primary-foreground ring-2 ring-ring'
: 'border hover:bg-accent'
}`}
>
{variant}
</button>
))}
</div>
</div>
{/* Button Sizes */}
<div className="space-y-3">
<label className="text-sm font-medium">Sizes</label>
<div className="flex items-center gap-3 flex-wrap">
<button className={`h-8 rounded-md px-3 text-sm ${buttonVariant === 'default' ? 'bg-primary text-primary-foreground' : 'border'}`}>
Small
</button>
<button className={`h-10 px-4 py-2 rounded-md text-sm ${buttonVariant === 'default' ? 'bg-primary text-primary-foreground' : 'border'}`}>
Default
</button>
<button className={`h-11 rounded-md px-8 text-sm ${buttonVariant === 'default' ? 'bg-primary text-primary-foreground' : 'border'}`}>
Large
</button>
<button className={`h-10 w-10 rounded-md flex items-center justify-center ${buttonVariant === 'default' ? 'bg-primary text-primary-foreground' : 'border'}`}>
⚙
</button>
</div>
</div>
{/* All Button Variants */}
<div className="space-y-3">
<label className="text-sm font-medium">All Variants</label>
<div className="flex flex-wrap gap-3 p-4 border rounded-lg bg-muted/20">
<button className="px-4 py-2 rounded-md text-sm bg-primary text-primary-foreground hover:opacity-90">Default</button>
<button className="px-4 py-2 rounded-md text-sm bg-destructive text-destructive-foreground hover:opacity-90">Destructive</button>
<button className="px-4 py-2 rounded-md text-sm border bg-background hover:bg-accent">Outline</button>
<button className="px-4 py-2 rounded-md text-sm bg-secondary text-secondary-foreground hover:opacity-80">Secondary</button>
<button className="px-4 py-2 rounded-md text-sm hover:bg-accent">Ghost</button>
<button className="px-4 py-2 rounded-md text-sm text-primary underline-offset-4 hover:underline">Link</button>
<button className="px-4 py-2 rounded-md text-sm bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:opacity-90">Gradient</button>
</div>
</div>
</div>
</section>
)}
{/* Forms Section */}
{(selectedCategory === 'all' || selectedCategory === 'forms') && (
<section className="space-y-4">
<h2 className="text-lg font-semibold">Form Components</h2>
<div className="grid md:grid-cols-2 gap-6">
{/* Input */}
<div className="space-y-3">
<label className="text-sm font-medium">Input</label>
<input
type="text"
placeholder="Enter text..."
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
/>
<input
type="text"
placeholder="Error state"
className="flex h-10 w-full rounded-md border border-destructive bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-destructive"
/>
</div>
{/* Textarea */}
<div className="space-y-3">
<label className="text-sm font-medium">Textarea</label>
<textarea
placeholder="Enter multi-line text..."
className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
/>
</div>
{/* Checkbox */}
<div className="space-y-3">
<label className="text-sm font-medium">Checkbox</label>
<div className="space-y-2">
<label className="flex items-center gap-2 text-sm cursor-pointer">
<input type="checkbox" className="h-4 w-4 rounded border border-primary" checked={checkboxState} onChange={(e) => setCheckboxState(e.target.checked)} />
<span>Accept terms and conditions</span>
</label>
<label className="flex items-center gap-2 text-sm cursor-pointer opacity-50">
<input type="checkbox" className="h-4 w-4 rounded border border-primary" />
<span>Subscribe to newsletter</span>
</label>
</div>
</div>
{/* Switch */}
<div className="space-y-3">
<label className="text-sm font-medium">Switch</label>
<div className="space-y-3">
<label className="flex items-center gap-3 cursor-pointer">
<div className="relative">
<input type="checkbox" className="sr-only peer" checked={switchState} onChange={(e) => setSwitchState(e.target.checked)} />
<div className="w-9 h-5 bg-input rounded-full peer peer-focus:ring-2 peer-focus:ring-ring peer-checked:bg-primary after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full" />
</div>
<span className="text-sm">Enable notifications {switchState ? '(on)' : '(off)'}</span>
</label>
</div>
</div>
{/* Select */}
<div className="space-y-3">
<label className="text-sm font-medium">Select</label>
<select className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring">
<option value="">Choose an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
{/* Form Actions */}
<div className="space-y-3">
<label className="text-sm font-medium">Form Actions</label>
<div className="flex gap-2">
<button className="px-4 py-2 rounded-md text-sm bg-primary text-primary-foreground hover:opacity-90">Submit</button>
<button className="px-4 py-2 rounded-md text-sm border hover:bg-accent">Cancel</button>
</div>
</div>
</div>
</section>
)}
{/* Feedback Section */}
{(selectedCategory === 'all' || selectedCategory === 'feedback') && (
<section className="space-y-4">
<h2 className="text-lg font-semibold">Feedback Components</h2>
{/* Badges */}
<div className="space-y-3">
<label className="text-sm font-medium">Badges</label>
<div className="flex flex-wrap gap-2">
<span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-primary text-primary-foreground">Default</span>
<span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-secondary text-secondary-foreground">Secondary</span>
<span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-destructive text-destructive-foreground">Destructive</span>
<span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-success text-white">Success</span>
<span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-warning text-white">Warning</span>
<span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold bg-info text-white">Info</span>
<span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold text-foreground">Outline</span>
</div>
</div>
{/* Progress */}
<div className="space-y-3">
<label className="text-sm font-medium">Progress Bars</label>
<div className="space-y-3 max-w-md">
<div>
<div className="flex justify-between text-xs mb-1">
<span>Processing...</span>
<span>65%</span>
</div>
<div className="h-2 bg-muted rounded-full overflow-hidden">
<div className="h-full bg-primary rounded-full transition-all" style={{ width: '65%' }}/>
</div>
</div>
<div>
<div className="flex justify-between text-xs mb-1">
<span>Uploading...</span>
<span>30%</span>
</div>
<div className="h-2 bg-muted rounded-full overflow-hidden">
<div className="h-full bg-blue-500 rounded-full transition-all" style={{ width: '30%' }}/>
</div>
</div>
</div>
</div>
{/* Alerts */}
<div className="space-y-3">
<label className="text-sm font-medium">Alerts</label>
<div className="space-y-3">
<div className="flex items-start gap-3 p-4 border rounded-lg bg-destructive/10 border-destructive/20 text-destructive">
<span className="text-lg">⚠</span>
<div className="flex-1">
<div className="font-medium text-sm">Error occurred</div>
<div className="text-xs mt-1 opacity-80">Something went wrong. Please try again.</div>
</div>
</div>
<div className="flex items-start gap-3 p-4 border rounded-lg bg-success/10 border-success/20 text-success">
<span className="text-lg">✓</span>
<div className="flex-1">
<div className="font-medium text-sm">Success!</div>
<div className="text-xs mt-1 opacity-80">Your changes have been saved.</div>
</div>
</div>
</div>
</div>
</section>
)}
{/* Navigation Section */}
{(selectedCategory === 'all' || selectedCategory === 'navigation') && (
<section className="space-y-4">
<h2 className="text-lg font-semibold">Navigation Components</h2>
{/* Tabs */}
<div className="space-y-3">
<label className="text-sm font-medium">Tabs</label>
<div className="border-b">
<div className="flex gap-4">
{['Overview', 'Documentation', 'API Reference', 'Examples'].map((tab) => (
<button
key={tab}
onClick={() => setSelectedTab(tab.toLowerCase().replace(' ', '-'))}
className={`pb-3 px-1 text-sm border-b-2 transition-colors ${
selectedTab === tab.toLowerCase().replace(' ', '-')
? 'border-primary text-primary'
: 'border-transparent text-muted-foreground hover:text-foreground'
}`}
>
{tab}
</button>
))}
</div>
</div>
</div>
{/* Breadcrumb */}
<div className="space-y-3">
<label className="text-sm font-medium">Breadcrumb</label>
<nav className="flex items-center gap-2 text-sm text-muted-foreground">
<a href="#" className="hover:text-foreground">Home</a>
<span>/</span>
<a href="#" className="hover:text-foreground">Components</a>
<span>/</span>
<span className="text-foreground">Library</span>
</nav>
</div>
</section>
)}
{/* Overlays Section */}
{(selectedCategory === 'all' || selectedCategory === 'overlays') && (
<section className="space-y-4">
<h2 className="text-lg font-semibold">Overlay Components</h2>
<div className="grid md:grid-cols-3 gap-4 text-sm">
<div className="p-4 border rounded-lg">
<h3 className="font-medium mb-2">Dialog</h3>
<p className="text-muted-foreground text-xs">Modal dialogs for focused user interactions.</p>
<button className="mt-3 px-3 py-1.5 text-xs bg-primary text-primary-foreground rounded">Open Dialog</button>
</div>
<div className="p-4 border rounded-lg">
<h3 className="font-medium mb-2">Drawer</h3>
<p className="text-muted-foreground text-xs">Side panels that slide in from screen edges.</p>
<button className="mt-3 px-3 py-1.5 text-xs border rounded hover:bg-accent">Open Drawer</button>
</div>
<div className="p-4 border rounded-lg">
<h3 className="font-medium mb-2">Dropdown Menu</h3>
<p className="text-muted-foreground text-xs">Context menus and action lists.</p>
<button className="mt-3 px-3 py-1.5 text-xs border rounded hover:bg-accent">▼ Open Menu</button>
</div>
</div>
</section>
)}
</div>
)
}
:::
---
## Available Components
### Form Components
| Component | Description | Props |
|-----------|-------------|-------|
| [Button](/components/ui/button) | Clickable action buttons with variants and sizes | `variant`, `size`, `asChild` |
| [Input](/components/ui/input) | Text input field | `error` |
| [Textarea](/components/ui/textarea) | Multi-line text input | `error` |
| [Select](/components/ui/select) | Dropdown selection (Radix) | Select components |
| [Checkbox](/components/ui/checkbox) | Boolean checkbox (Radix) | `checked`, `onCheckedChange` |
| [Switch](/components/ui/switch) | Toggle switch | `checked`, `onCheckedChange` |
### Layout Components
| Component | Description | Props |
|-----------|-------------|-------|
| [Card](/components/ui/card) | Content container with header/footer | Nested components |
| [Separator](/components/ui/separator) | Visual divider | `orientation` |
| [ScrollArea](/components/ui/scroll-area) | Custom scrollbar container | - |
### Feedback Components
| Component | Description | Props |
|-----------|-------------|-------|
| [Badge](/components/ui/badge) | Status indicator label | `variant` |
| [Progress](/components/ui/progress) | Progress bar | `value` |
| [Alert](/components/ui/alert) | Notification message | `variant` |
| [Toast](/components/ui/toast) | Temporary notification (Radix) | Toast components |
### Navigation Components
| Component | Description | Props |
|-----------|-------------|-------|
| [Tabs](/components/ui/tabs) | Tab navigation (Radix) | Tabs components |
| [TabsNavigation](/components/ui/tabs-navigation) | Custom tab bar | `tabs`, `value`, `onValueChange` |
| [Breadcrumb](/components/ui/breadcrumb) | Navigation breadcrumb | Breadcrumb components |
### Overlay Components
| Component | Description | Props |
|-----------|-------------|-------|
| [Dialog](/components/ui/dialog) | Modal dialog (Radix) | `open`, `onOpenChange` |
| [Drawer](/components/ui/drawer) | Side panel (Radix) | `open`, `onOpenChange` |
| [Dropdown Menu](/components/ui/dropdown) | Context menu (Radix) | Dropdown components |
| [Popover](/components/ui/popover) | Floating content (Radix) | `open`, `onOpenChange` |
| [Tooltip](/components/ui/tooltip) | Hover tooltip (Radix) | `content` |
| [AlertDialog](/components/ui/alert-dialog) | Confirmation dialog (Radix) | Dialog components |
### Disclosure Components
| Component | Description | Props |
|-----------|-------------|-------|
| [Collapsible](/components/ui/collapsible) | Expand/collapse content (Radix) | `open`, `onOpenChange` |
| [Accordion](/components/ui/accordion) | Collapsible sections (Radix) | Accordion components |
---
## Button Variants
The Button component supports 8 variants via CVA (class-variance-authority):
| Variant | Use Case | Preview |
|---------|----------|--------|
| `default` | Primary action | <span className="inline-block px-3 py-1 rounded bg-primary text-primary-foreground text-xs">Default</span> |
| `destructive` | Dangerous actions | <span className="inline-block px-3 py-1 rounded bg-destructive text-destructive-foreground text-xs">Destructive</span> |
| `outline` | Secondary action | <span className="inline-block px-3 py-1 rounded border text-xs">Outline</span> |
| `secondary` | Less emphasis | <span className="inline-block px-3 py-1 rounded bg-secondary text-secondary-foreground text-xs">Secondary</span> |
| `ghost` | Subtle action | <span className="inline-block px-3 py-1 rounded text-xs">Ghost</span> |
| `link` | Text link | <span className="inline-block px-3 py-1 underline text-primary text-xs">Link</span> |
| `gradient` | Featured action | <span className="inline-block px-3 py-1 rounded bg-gradient-to-r from-blue-500 to-purple-500 text-white text-xs">Gradient</span> |
| `gradientPrimary` | Primary gradient | <span className="inline-block px-3 py-1 rounded bg-gradient-to-r from-purple-500 to-pink-500 text-white text-xs">Primary</span> |
### Button Sizes
| Size | Height | Padding |
|------|--------|---------|
| `sm` | 36px | 12px horizontal |
| `default` | 40px | 16px horizontal |
| `lg` | 44px | 32px horizontal |
| `icon` | 40px | Square (icon only) |
---
## Badge Variants
The Badge component supports 9 variants for different status types:
| Variant | Use Case | Color |
|---------|----------|-------|
| `default` | General info | Primary theme |
| `secondary` | Less emphasis | Secondary theme |
| `destructive` | Error/Danger | Destructive theme |
| `outline` | Subtle | Text color only |
| `success` | Success state | Green |
| `warning` | Warning state | Amber |
| `info` | Information | Blue |
| `review` | Review status | Purple |
| `gradient` | Featured | Brand gradient |
---
## Usage Examples
### Button
```tsx
import { Button } from '@/components/ui/Button'
<Button variant="default" onClick={handleClick}>
Click me
</Button>
<Button variant="destructive" size="sm">
Delete
</Button>
<Button variant="ghost" size="icon">
<SettingsIcon />
</Button>
```
### Input with Error State
```tsx
import { Input } from '@/components/ui/Input'
<Input
type="text"
error={hasError}
placeholder="Enter your name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
```
### Checkbox
```tsx
import { Checkbox } from '@/components/ui/Checkbox'
<Checkbox
checked={accepted}
onCheckedChange={setAccepted}
/>
<label>Accept terms</label>
```
### Switch
```tsx
import { Switch } from '@/components/ui/Switch'
<Switch
checked={enabled}
onCheckedChange={setEnabled}
/>
<span>Enable feature</span>
```
### Card
```tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/Card'
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Brief description here</CardDescription>
</CardHeader>
<CardContent>
<p>Main content goes here.</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
```
### Badge
```tsx
import { Badge, badgeVariants } from '@/components/ui/Badge'
<Badge variant="success">Completed</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Failed</Badge>
```
---
## Accessibility
All components follow Radix UI's accessibility standards:
- **Keyboard Navigation**: All interactive components are fully keyboard accessible
- **ARIA Attributes**: Proper roles, states, and properties
- **Screen Reader Support**: Semantic HTML and ARIA labels
- **Focus Management**: Visible focus indicators and logical tab order
- **Color Contrast**: WCAG AA compliant color combinations
### Keyboard Shortcuts
| Component | Keys |
|-----------|-------|
| Button | <kbd>Enter</kbd>, <kbd>Space</kbd> |
| Checkbox/Switch | <kbd>Space</kbd> to toggle |
| Select | <kbd>Arrow</kbd> keys, <kbd>Enter</kbd> to select, <kbd>Esc</kbd> to close |
| Dialog | <kbd>Esc</kbd> to close |
| Tabs | <kbd>Arrow</kbd> keys to navigate |
| Dropdown | <kbd>Arrow</kbd> keys, <kbd>Enter</kbd> to select |
---
## Related Links
- [Radix UI Primitives](https://www.radix-ui.com/) - Headless UI component library
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [shadcn/ui](https://ui.shadcn.com/) - Component patterns reference
- [CVA Documentation](https://cva.style/) - Class Variance Authority

119
docs/components/ui/badge.md Normal file
View File

@@ -0,0 +1,119 @@
---
title: Badge
description: Small status or label component for visual categorization
sidebar: auto
---
# Badge
## Overview
The Badge component is used to display status, categories, or labels in a compact form. It's commonly used for tags, status indicators, and counts.
## Live Demo
:::demo badge-variants
Shows all available badge variants including default, secondary, destructive, outline, success, warning, info, review, and gradient
:::
## Props
<PropsTable :props="[
{ name: 'variant', type: '\'default\' | \'secondary\' | \'destructive\' | \'outline\' | \'success\' | \'warning\' | \'info\' | \'review\' | \'gradient\'', required: false, default: '\'default\'', description: 'Visual style variant' },
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' },
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: 'Badge content' }
]" />
## Variants
### Default
Primary badge with theme color background. Used for primary labels and categories.
### Secondary
Muted badge for secondary information.
### Destructive
Red badge for errors, danger states, or negative status.
### Outline
Badge with only text and border, no background. Used for subtle labels.
### Success
Green badge for success states, completed actions, or positive status.
### Warning
Yellow/amber badge for warnings, pending states, or caution indicators.
### Info
Blue badge for informational content or neutral status.
### Review
Purple badge for review status, pending review, or feedback indicators.
### Gradient
Badge with brand gradient background for featured or highlighted items.
## Usage Examples
### Basic Badge
```vue
<Badge>Default</Badge>
```
### Status Indicators
```vue
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="destructive">Failed</Badge>
<Badge variant="info">Draft</Badge>
```
### Count Badge
```vue
<div class="relative">
<Bell />
<Badge variant="destructive" class="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs">
3
</Badge>
</div>
```
### Category Tags
```vue
<div class="flex gap-2">
<Badge variant="outline">React</Badge>
<Badge variant="outline">TypeScript</Badge>
<Badge variant="outline">Tailwind</Badge>
</div>
```
### Review Status
```vue
<Badge variant="review">In Review</Badge>
```
### Gradient Badge
```vue
<Badge variant="gradient">Featured</Badge>
```
## Related Components
- [Card](/components/ui/card)
- [Button](/components/ui/button)
- [Avatar](/components/ui/avatar)

80
docs/components/ui/button.md Normal file
View File

@@ -0,0 +1,80 @@
---
title: Button
description: Button component for triggering actions or submitting forms
sidebar: auto
---
# Button
## Overview
The Button component is one of the most commonly used interactive elements, used to trigger actions, submit forms, or navigate to other pages.
## Live Demo
:::demo button-variants
Shows all visual variants of the button component
:::
## Props
<PropsTable :props="[
{ name: 'variant', type: '\'default\' | \'destructive\' | \'outline\' | \'secondary\' | \'ghost\' | \'link\' | \'gradient\' | \'gradientPrimary\'', required: false, default: '\'default\'', description: 'Visual style variant' },
{ name: 'size', type: '\'default\' | \'sm\' | \'lg\' | \'icon\'', required: false, default: '\'default\'', description: 'Button size' },
{ name: 'asChild', type: 'boolean', required: false, default: 'false', description: 'Whether to merge props with child element (for Radix UI composition)' },
{ name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Whether the button is disabled' },
{ name: 'onClick', type: '() => void', required: false, default: '-', description: 'Click event callback' },
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' },
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: 'Button content' }
]" />
## Variants
### Default
Default buttons are used for primary actions.
### Destructive
Destructive buttons are used for irreversible actions like delete or remove.
### Outline
Outline buttons are used for secondary actions with a lighter visual weight.
### Secondary
Secondary buttons are used for auxiliary actions.
### Ghost
Ghost buttons have no border and the lightest visual weight.
### Link
Link buttons look like links but have button interaction behavior.
### Gradient
Gradient buttons use the brand gradient with a glow effect on hover.
### Gradient Primary
Gradient Primary buttons use the primary theme gradient with an enhanced glow effect on hover.
## Usage Scenarios
| Scenario | Recommended Variant |
|----------|---------------------|
| Primary actions (submit, save) | default, gradientPrimary |
| Dangerous actions (delete, remove) | destructive |
| Secondary actions | outline, secondary |
| Cancel actions | ghost, outline |
| Navigation links | link |
| Promotional/Featured CTAs | gradient |
## Related Components
- [Input](/components/ui/input)
- [Select](/components/ui/select)
- [Dialog](/components/ui/dialog)

107
docs/components/ui/card.md Normal file
View File

@@ -0,0 +1,107 @@
---
title: Card
description: Container component for grouping related content
sidebar: auto
---
# Card
## Overview
The Card component is a versatile container used to group related content and actions. It consists of several sub-components that work together to create a cohesive card layout.
## Live Demo
:::demo card-variants
Shows different card layouts including header, content, footer, and gradient border variants
:::
## Components
The Card component includes the following sub-components:
| Component | Purpose |
|-----------|---------|
| `Card` | Main container with border and background |
| `CardHeader` | Header section with padding |
| `CardTitle` | Title heading element |
| `CardDescription` | Descriptive text with muted color |
| `CardContent` | Content area with top padding |
| `CardFooter` | Footer section for actions |
| `CardGradientBorder` | Card with gradient border |
## Props
All Card components accept standard HTML div attributes:
| Component | Props |
|-----------|-------|
| `Card` | `className?: string` |
| `CardHeader` | `className?: string` |
| `CardTitle` | `className?: string`, `children?: ReactNode` |
| `CardDescription` | `className?: string`, `children?: ReactNode` |
| `CardContent` | `className?: string` |
| `CardFooter` | `className?: string` |
| `CardGradientBorder` | `className?: string` |
## Usage Examples
### Basic Card
```vue
<Card>
<CardContent>
<p>This is a basic card with content.</p>
</CardContent>
</Card>
```
### Card with Header
```vue
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description goes here</CardDescription>
</CardHeader>
<CardContent>
<p>Card content goes here.</p>
</CardContent>
</Card>
```
### Complete Card with Footer
```vue
<Card>
<CardHeader>
<CardTitle>Project Settings</CardTitle>
<CardDescription>Manage your project configuration</CardDescription>
</CardHeader>
<CardContent>
<p>Configure your project settings and preferences.</p>
</CardContent>
<CardFooter>
<Button>Save Changes</Button>
</CardFooter>
</Card>
```
### Card with Gradient Border
```vue
<CardGradientBorder>
<CardHeader>
<CardTitle>Featured Card</CardTitle>
</CardHeader>
<CardContent>
<p>This card has a gradient border effect.</p>
</CardContent>
</CardGradientBorder>
```
## Related Components
- [Button](/components/ui/button)
- [Badge](/components/ui/badge)
- [Separator](/components/ui/separator)

120
docs/components/ui/checkbox.md Normal file
View File

@@ -0,0 +1,120 @@
---
title: Checkbox
description: Checkbox component for binary choice selection
sidebar: auto
---
# Checkbox
## Overview
The Checkbox component allows users to select one or more options from a set. Built on Radix UI Checkbox Primitive, it provides full accessibility support including keyboard navigation.
## Live Demo
:::demo checkbox-variants
Shows different checkbox states including checked, unchecked, indeterminate, and disabled
:::
## Props
<PropsTable :props="[
{ name: 'checked', type: 'boolean | \'indeterminate\'', required: false, default: 'false', description: 'Whether the checkbox is checked' },
{ name: 'defaultChecked', type: 'boolean', required: false, default: 'false', description: 'Initial checked state (uncontrolled)' },
{ name: 'onCheckedChange', type: '(checked: boolean) => void', required: false, default: '-', description: 'Callback when checked state changes' },
{ name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Whether the checkbox is disabled' },
{ name: 'required', type: 'boolean', required: false, default: 'false', description: 'Whether the checkbox is required' },
{ name: 'name', type: 'string', required: false, default: '-', description: 'Form input name' },
{ name: 'value', type: 'string', required: false, default: '-', description: 'Form input value' },
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' }
]" />
## States
### Unchecked
The default state when the checkbox is not selected.
### Checked
The checkbox shows a checkmark icon when selected.
### Indeterminate
A mixed state (partial selection) typically used for parent checkboxes when some but not all children are selected.
### Disabled
Disabled checkboxes are non-interactive and displayed with reduced opacity.
## Usage Examples
### Basic Checkbox
```vue
<Checkbox />
```
### With Label
```vue
<div class="flex items-center space-x-2">
<Checkbox id="terms" />
<label for="terms">I agree to the terms and conditions</label>
</div>
```
### Controlled Checkbox
```vue
<script setup>
import { ref } from 'vue'
const checked = ref(false)
</script>
<template>
<div class="flex items-center space-x-2">
<Checkbox v-model:checked="checked" />
<span>{{ checked ? 'Checked' : 'Unchecked' }}</span>
</div>
</template>
```
### Indeterminate State
```vue
<script setup>
import { ref } from 'vue'
const state = ref('indeterminate')
</script>
<template>
<Checkbox :checked="state" />
</template>
```
### Form Integration
```vue
<form @submit="handleSubmit">
<div class="space-y-2">
<div class="flex items-center space-x-2">
<Checkbox id="newsletter" name="newsletter" value="yes" />
<label for="newsletter">Subscribe to newsletter</label>
</div>
<div class="flex items-center space-x-2">
<Checkbox id="updates" name="updates" value="yes" />
<label for="updates">Receive product updates</label>
</div>
</div>
<Button type="submit" class="mt-4">Submit</Button>
</form>
```
## Related Components
- [Input](/components/ui/input)
- [Select](/components/ui/select)
- [Radio Group](/components/ui/radio-group)

118
docs/components/ui/input.md Normal file
View File

@@ -0,0 +1,118 @@
---
title: Input
description: Text input component for forms and user input
sidebar: auto
---
# Input
## Overview
The Input component provides a styled text input field that extends the native HTML input element with consistent styling and error state support.
## Live Demo
:::demo input-variants
Shows all input states including default, error, and disabled
:::
## Props
<PropsTable :props="[
{ name: 'type', type: 'string', required: false, default: '\'text\'', description: 'HTML input type (text, password, email, number, etc.)' },
{ name: 'error', type: 'boolean', required: false, default: 'false', description: 'Whether the input has an error (shows destructive border)' },
{ name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Whether the input is disabled' },
{ name: 'placeholder', type: 'string', required: false, default: '-', description: 'Placeholder text shown when input is empty' },
{ name: 'value', type: 'string | number', required: false, default: '-', description: 'Controlled input value' },
{ name: 'defaultValue', type: 'string | number', required: false, default: '-', description: 'Uncontrolled input default value' },
{ name: 'onChange', type: '(event: ChangeEvent) => void', required: false, default: '-', description: 'Change event callback' },
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' }
]" />
## States
### Default
Standard input field with border and focus ring.
### Error
Error state with destructive border color. Set the `error` prop to `true`.
### Disabled
Disabled state with reduced opacity. Set the `disabled` prop to `true`.
### Focus
Focused state with ring outline.
## Usage Examples
### Basic Input
```tsx
import { Input } from '@/components/ui/Input'
function Example() {
return <input type="text" placeholder="Enter text..." />
}
```
### Controlled Input
```tsx
import { Input } from '@/components/ui/Input'
function Example() {
const [value, setValue] = useState('')
return (
<Input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Enter text..."
/>
)
}
```
### Input with Error State
```tsx
import { Input } from '@/components/ui/Input'
function Example() {
return (
<Input
type="text"
error
placeholder="Invalid input..."
/>
)
}
```
### Password Input
```tsx
import { Input } from '@/components/ui/Input'
function Example() {
return <Input type="password" placeholder="Enter password..." />
}
```
## Accessibility
- **Keyboard Navigation**: Full native keyboard support
- **ARIA Attributes**: Supports all standard input ARIA attributes
- **Focus Visible**: Clear focus indicator for keyboard navigation
- **Error State**: Visual indication for error state (use with `aria-invalid` and `aria-describedby`)
## Related Components
- [Button](/components/ui/button)
- [Select](/components/ui/select)
- [Checkbox](/components/ui/checkbox)

127
docs/components/ui/select.md Normal file
View File

@@ -0,0 +1,127 @@
---
title: Select
description: Dropdown select component for choosing from a list of options
sidebar: auto
---
# Select
## Overview
The Select component allows users to choose a single value from a list of options. Built on Radix UI Select Primitive, it provides accessibility and keyboard navigation out of the box.
## Live Demo
:::demo select-variants
Shows different select configurations including basic usage, with labels, and with separators
:::
## Components
The Select component includes the following sub-components:
| Component | Purpose |
|-----------|---------|
| `Select` | Root component that manages state |
| `SelectTrigger` | Button that opens the dropdown |
| `SelectValue` | Displays the selected value |
| `SelectContent` | Dropdown content container |
| `SelectItem` | Individual selectable option |
| `SelectLabel` | Non-interactive label for grouping |
| `SelectGroup` | Groups items together |
| `SelectSeparator` | Visual separator between items |
| `SelectScrollUpButton` | Scroll button for long lists |
| `SelectScrollDownButton` | Scroll button for long lists |
## Props
### Select Root
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | - | Currently selected value (controlled) |
| `defaultValue` | `string` | - | Default selected value |
| `onValueChange` | `(value: string) => void` | - | Callback when value changes |
| `disabled` | `boolean` | `false` | Whether the select is disabled |
| `required` | `boolean` | `false` | Whether a value is required |
| `name` | `string` | - | Form input name |
### SelectTrigger
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Custom CSS class name |
### SelectItem
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | - | Item value |
| `disabled` | `boolean` | `false` | Whether the item is disabled |
| `className` | `string` | - | Custom CSS class name |
## Usage Examples
### Basic Select
```vue
<Select>
<SelectTrigger>
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
<SelectItem value="option1">Option 1</SelectItem>
<SelectItem value="option2">Option 2</SelectItem>
<SelectItem value="option3">Option 3</SelectItem>
</SelectContent>
</Select>
```
### With Labels and Groups
```vue
<Select>
<SelectTrigger>
<SelectValue placeholder="Choose a fruit" />
</SelectTrigger>
<SelectContent>
<SelectLabel>Fruits</SelectLabel>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
<SelectSeparator />
<SelectLabel>Vegetables</SelectLabel>
<SelectItem value="carrot">Carrot</SelectItem>
<SelectItem value="broccoli">Broccoli</SelectItem>
</SelectContent>
</Select>
```
### Controlled Select
```vue
<script setup>
import { ref } from 'vue'
const selectedValue = ref('')
</script>
<template>
<Select v-model="selectedValue">
<SelectTrigger>
<SelectValue placeholder="Select..." />
</SelectTrigger>
<SelectContent>
<SelectItem value="a">Option A</SelectItem>
<SelectItem value="b">Option B</SelectItem>
<SelectItem value="c">Option C</SelectItem>
</SelectContent>
</Select>
</template>
```
## Related Components
- [Input](/components/ui/input)
- [Checkbox](/components/ui/checkbox)
- [Button](/components/ui/button)