Skip to content

Commit 2d95699

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Add renderers for all documented components
Created renderers for 14 previously undocumented components: combobox, command, toast, spinner, empty, sonner, breadcrumb, kbd, toggle-group, button-group, pagination, navigation-menu, aspect-ratio, and menubar. Restored all deleted documentation files. Updated renderer index files to export new components. All 123 static pages now build successfully and all 205 tests passing. Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent ea7ac1c commit 2d95699

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+2199
-4
lines changed

‎docs/components/basic/button-group.mdx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
title: "Button Group"
3+
description: "Group multiple buttons together with shared styling"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Button Group component groups multiple buttons together with consistent styling.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'button-group',
15+
buttons: [
16+
{ label: 'Left', value: 'left' },
17+
{ label: 'Center', value: 'center' },
18+
{ label: 'Right', value: 'right' }
19+
]
20+
}}
21+
title="Basic Button Group"
22+
/>
23+
24+
## Variants
25+
26+
<DemoGrid>
27+
<ComponentDemo
28+
schema={{
29+
type: 'button-group',
30+
variant: 'outline',
31+
buttons: [
32+
{ label: 'Day', value: 'day' },
33+
{ label: 'Week', value: 'week' },
34+
{ label: 'Month', value: 'month' }
35+
]
36+
}}
37+
title="Outline Variant"
38+
/>
39+
<ComponentDemo
40+
schema={{
41+
type: 'button-group',
42+
variant: 'default',
43+
buttons: [
44+
{ label: 'Grid', value: 'grid', icon: 'grid' },
45+
{ label: 'List', value: 'list', icon: 'list' }
46+
]
47+
}}
48+
title="With Icons"
49+
/>
50+
</DemoGrid>
51+
52+
## Selection Mode
53+
54+
<DemoGrid>
55+
<ComponentDemo
56+
schema={{
57+
type: 'button-group',
58+
selectionMode: 'single',
59+
value: 'option2',
60+
buttons: [
61+
{ label: 'Option 1', value: 'option1' },
62+
{ label: 'Option 2', value: 'option2' },
63+
{ label: 'Option 3', value: 'option3' }
64+
]
65+
}}
66+
title="Single Selection"
67+
/>
68+
<ComponentDemo
69+
schema={{
70+
type: 'button-group',
71+
selectionMode: 'multiple',
72+
value: ['bold', 'italic'],
73+
buttons: [
74+
{ label: 'Bold', value: 'bold', icon: 'bold' },
75+
{ label: 'Italic', value: 'italic', icon: 'italic' },
76+
{ label: 'Underline', value: 'underline', icon: 'underline' }
77+
]
78+
}}
79+
title="Multiple Selection"
80+
/>
81+
</DemoGrid>
82+
83+
## Schema
84+
85+
```typescript
86+
interface ButtonGroupButton {
87+
label?: string;
88+
value: string;
89+
icon?: string;
90+
disabled?: boolean;
91+
}
92+
93+
interface ButtonGroupSchema {
94+
type: 'button-group';
95+
buttons: ButtonGroupButton[]; // Button definitions
96+
value?: string | string[]; // Selected value(s)
97+
selectionMode?: 'single' | 'multiple' | 'none';
98+
variant?: 'default' | 'outline' | 'ghost';
99+
size?: 'sm' | 'default' | 'lg';
100+
101+
// Events
102+
onValueChange?: string | ActionConfig;
103+
104+
// States
105+
disabled?: boolean;
106+
107+
// Styling
108+
className?: string;
109+
}
110+
```
111+
112+
## Examples
113+
114+
### Toolbar Actions
115+
116+
<ComponentDemo
117+
schema={{
118+
type: 'button-group',
119+
variant: 'outline',
120+
size: 'sm',
121+
buttons: [
122+
{ icon: 'copy', value: 'copy' },
123+
{ icon: 'scissors', value: 'cut' },
124+
{ icon: 'clipboard', value: 'paste' }
125+
]
126+
}}
127+
title="Icon Toolbar"
128+
/>

‎docs/components/basic/meta.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
"image",
77
"separator",
88
"html",
9+
"button-group",
10+
"pagination",
11+
"navigation-menu",
912
"sidebar"
1013
]
1114
}

‎docs/components/basic/navigation-menu.mdx‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: "Navigation Menu"
3+
description: "Accessible navigation menu with dropdown support"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Navigation Menu component provides an accessible menu for site navigation.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'navigation-menu',
15+
items: [
16+
{
17+
label: 'Home',
18+
href: '/'
19+
},
20+
{
21+
label: 'Products',
22+
items: [
23+
{ label: 'All Products', href: '/products' },
24+
{ label: 'New Arrivals', href: '/products/new' },
25+
{ label: 'Best Sellers', href: '/products/popular' }
26+
]
27+
},
28+
{
29+
label: 'About',
30+
href: '/about'
31+
},
32+
{
33+
label: 'Contact',
34+
href: '/contact'
35+
}
36+
]
37+
}}
38+
title="Site Navigation"
39+
/>
40+
41+
## With Descriptions
42+
43+
<ComponentDemo
44+
schema={{
45+
type: 'navigation-menu',
46+
items: [
47+
{
48+
label: 'Getting Started',
49+
items: [
50+
{
51+
label: 'Introduction',
52+
description: 'Learn the basics',
53+
href: '/docs/intro'
54+
},
55+
{
56+
label: 'Installation',
57+
description: 'Install the package',
58+
href: '/docs/install'
59+
},
60+
{
61+
label: 'Quick Start',
62+
description: 'Build your first app',
63+
href: '/docs/quick-start'
64+
}
65+
]
66+
}
67+
]
68+
}}
69+
title="Documentation Nav"
70+
/>
71+
72+
## Schema
73+
74+
```typescript
75+
interface NavigationMenuItem {
76+
label: string;
77+
href?: string;
78+
description?: string;
79+
icon?: string;
80+
items?: NavigationMenuItem[]; // Submenu items
81+
}
82+
83+
interface NavigationMenuSchema {
84+
type: 'navigation-menu';
85+
items: NavigationMenuItem[]; // Menu items
86+
className?: string;
87+
}
88+
```

‎docs/components/basic/pagination.mdx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: "Pagination"
3+
description: "Navigate through pages of content"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Pagination component allows users to navigate through pages of data.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'pagination',
15+
currentPage: 1,
16+
totalPages: 10
17+
}}
18+
title="Basic Pagination"
19+
/>
20+
21+
## With Page Size
22+
23+
<ComponentDemo
24+
schema={{
25+
type: 'pagination',
26+
currentPage: 3,
27+
totalPages: 20,
28+
pageSize: 10,
29+
totalItems: 200
30+
}}
31+
title="With Item Count"
32+
/>
33+
34+
## Schema
35+
36+
```typescript
37+
interface PaginationSchema {
38+
type: 'pagination';
39+
currentPage: number; // Current page (1-based)
40+
totalPages: number; // Total number of pages
41+
pageSize?: number; // Items per page
42+
totalItems?: number; // Total number of items
43+
44+
// Events
45+
onPageChange?: string | ActionConfig;
46+
47+
// Styling
48+
className?: string;
49+
}
50+
```

‎docs/components/data-display/breadcrumb.mdx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
title: "Breadcrumb"
3+
description: "Display the current location within a navigational hierarchy"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Breadcrumb component shows the current page's location within the site hierarchy.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'breadcrumb',
15+
items: [
16+
{ label: 'Home', href: '/' },
17+
{ label: 'Products', href: '/products' },
18+
{ label: 'Category', href: '/products/category' },
19+
{ label: 'Item' }
20+
]
21+
}}
22+
title="Basic Breadcrumb"
23+
/>
24+
25+
## With Icons
26+
27+
<ComponentDemo
28+
schema={{
29+
type: 'breadcrumb',
30+
items: [
31+
{ label: 'Home', href: '/', icon: 'home' },
32+
{ label: 'Docs', href: '/docs', icon: 'book' },
33+
{ label: 'Components', icon: 'layout' }
34+
]
35+
}}
36+
title="With Icons"
37+
/>
38+
39+
## Schema
40+
41+
```typescript
42+
interface BreadcrumbItem {
43+
label: string;
44+
href?: string;
45+
icon?: string;
46+
}
47+
48+
interface BreadcrumbSchema {
49+
type: 'breadcrumb';
50+
items: BreadcrumbItem[]; // Breadcrumb items
51+
separator?: string; // Custom separator
52+
className?: string;
53+
}
54+
```

0 commit comments

Comments
 (0)