Skip to content

Commit 6b24660

Browse files
Copilothuangyiirene
Copilot
and
huangyiirene
committed
Generate individual component documentation pages with live demos
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
1 parent dff0a48 commit 6b24660

39 files changed

Lines changed: 1629 additions & 12 deletions

‎docs/reference/components/basic/html.mdx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: "HTML"
3+
description: "Render raw HTML content safely"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# HTML
9+
10+
Render raw HTML content safely
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "html",
17+
html: "<p>This is <strong>HTML</strong> content</p>"
18+
}}
19+
title="Basic HTML"
20+
/>
21+
22+
## Schema
23+
24+
```typescript
25+
interface HtmlSchema {
26+
type: 'html';
27+
html: string;
28+
}
29+
```

‎docs/reference/components/basic/icon.mdx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: "Icon"
3+
description: "Display icons from the Lucide icon library"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Icon
9+
10+
Display icons from the Lucide icon library
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "icon",
17+
name: "home"
18+
}}
19+
title="Basic Icon"
20+
/>
21+
22+
<ComponentDemo
23+
schema={{
24+
type: "flex",
25+
gap: 4,
26+
align: "center",
27+
children: [
28+
{
29+
type: "icon",
30+
name: "star",
31+
size: "sm"
32+
},
33+
{
34+
type: "icon",
35+
name: "star",
36+
size: "md"
37+
},
38+
{
39+
type: "icon",
40+
name: "star",
41+
size: "lg"
42+
},
43+
{
44+
type: "icon",
45+
name: "star",
46+
size: "xl"
47+
}
48+
]
49+
}}
50+
title="Icon Sizes"
51+
/>
52+
53+
<ComponentDemo
54+
schema={{
55+
type: "flex",
56+
gap: 4,
57+
children: [
58+
{
59+
type: "icon",
60+
name: "heart",
61+
color: "text-red-500"
62+
},
63+
{
64+
type: "icon",
65+
name: "star",
66+
color: "text-yellow-500"
67+
},
68+
{
69+
type: "icon",
70+
name: "check",
71+
color: "text-green-500"
72+
}
73+
]
74+
}}
75+
title="Colored Icons"
76+
/>
77+
78+
## Schema
79+
80+
```typescript
81+
interface IconSchema {
82+
type: 'icon';
83+
name: string; // Lucide icon name (kebab-case)
84+
size?: number | 'sm' | 'md' | 'lg' | 'xl';
85+
color?: string; // Tailwind color class
86+
className?: string;
87+
}
88+
```

‎docs/reference/components/basic/image.mdx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: "Image"
3+
description: "Display images with optional fallback"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Image
9+
10+
Display images with optional fallback
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "image",
17+
src: "https://via.placeholder.com/300x200",
18+
alt: "Placeholder"
19+
}}
20+
title="Basic Image"
21+
/>
22+
23+
<ComponentDemo
24+
schema={{
25+
type: "image",
26+
src: "https://via.placeholder.com/400x300",
27+
width: 200,
28+
height: 150,
29+
alt: "Sized Image"
30+
}}
31+
title="With Sizing"
32+
/>
33+
34+
## Schema
35+
36+
```typescript
37+
interface ImageSchema {
38+
type: 'image';
39+
src: string;
40+
alt?: string;
41+
width?: number | string;
42+
height?: number | string;
43+
fallback?: string;
44+
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
45+
}
46+
```

‎docs/reference/components/basic/meta.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"title": "Basic",
3+
"pages": [
4+
"text",
5+
"icon",
6+
"image",
7+
"separator",
8+
"html"
9+
]
10+
}

‎docs/reference/components/basic/separator.mdx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: "Separator"
3+
description: "Visual divider between content sections"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Separator
9+
10+
Visual divider between content sections
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "stack",
17+
gap: 4,
18+
children: [
19+
{
20+
type: "text",
21+
content: "Content Above"
22+
},
23+
{
24+
type: "separator"
25+
},
26+
{
27+
type: "text",
28+
content: "Content Below"
29+
}
30+
]
31+
}}
32+
title="Horizontal"
33+
/>
34+
35+
<ComponentDemo
36+
schema={{
37+
type: "flex",
38+
gap: 4,
39+
children: [
40+
{
41+
type: "text",
42+
content: "Left"
43+
},
44+
{
45+
type: "separator",
46+
orientation: "vertical"
47+
},
48+
{
49+
type: "text",
50+
content: "Right"
51+
}
52+
]
53+
}}
54+
title="Vertical"
55+
/>
56+
57+
## Schema
58+
59+
```typescript
60+
interface SeparatorSchema {
61+
type: 'separator';
62+
orientation?: 'horizontal' | 'vertical';
63+
className?: string;
64+
}
65+
```

‎docs/reference/components/complex/meta.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"title": "Complex",
3+
"pages": [
4+
"table"
5+
]
6+
}

‎docs/reference/components/complex/table.mdx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: "Table"
3+
description: "Display data in tabular format"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Table
9+
10+
Display data in tabular format
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "table",
17+
columns: [
18+
{
19+
key: "name",
20+
title: "Name"
21+
},
22+
{
23+
key: "email",
24+
title: "Email"
25+
}
26+
],
27+
data: [
28+
{
29+
name: "John Doe",
30+
email: "john@example.com"
31+
},
32+
{
33+
name: "Jane Smith",
34+
email: "jane@example.com"
35+
}
36+
]
37+
}}
38+
title="Basic Table"
39+
/>
40+
41+
## Schema
42+
43+
```typescript
44+
interface TableSchema {
45+
type: 'table';
46+
columns: Array<{ key: string; title: string }>;
47+
data: Record<string, any>[];
48+
}
49+
```

‎docs/reference/components/data-display/alert.mdx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
title: "Alert"
3+
description: "Display important messages and notifications"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Alert
9+
10+
Display important messages and notifications
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "alert",
17+
title: "Info",
18+
description: "This is an informational message"
19+
}}
20+
title="Info Alert"
21+
/>
22+
23+
<ComponentDemo
24+
schema={{
25+
type: "alert",
26+
title: "Error",
27+
description: "Something went wrong",
28+
variant: "destructive"
29+
}}
30+
title="Destructive Alert"
31+
/>
32+
33+
## Schema
34+
35+
```typescript
36+
interface AlertSchema {
37+
type: 'alert';
38+
title?: string;
39+
description?: string;
40+
variant?: 'default' | 'destructive';
41+
icon?: string;
42+
className?: string;
43+
}
44+
```

‎docs/reference/components/data-display/avatar.mdx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: "Avatar"
3+
description: "User profile image or fallback initials"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
# Avatar
9+
10+
User profile image or fallback initials
11+
12+
## Examples
13+
14+
<ComponentDemo
15+
schema={{
16+
type: "avatar",
17+
src: "https://github.com/shadcn.png",
18+
alt: "User"
19+
}}
20+
title="Avatar with Image"
21+
/>
22+
23+
<ComponentDemo
24+
schema={{
25+
type: "avatar",
26+
fallback: "JD"
27+
}}
28+
title="Avatar with Fallback"
29+
/>
30+
31+
## Schema
32+
33+
```typescript
34+
interface AvatarSchema {
35+
type: 'avatar';
36+
src?: string;
37+
alt?: string;
38+
fallback?: string;
39+
size?: 'sm' | 'md' | 'lg';
40+
className?: string;
41+
}
42+
```

0 commit comments

Comments
 (0)