Skip to content

Commit 84a8624

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Add documentation for button-group, sidebar, form, and empty components
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 261267b commit 84a8624

File tree

4 files changed

+478
-0
lines changed

4 files changed

+478
-0
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/sidebar.mdx‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: "Sidebar"
3+
description: "Collapsible navigation sidebar"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Sidebar component provides a collapsible navigation sidebar for applications.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'sidebar',
15+
items: [
16+
{ label: 'Dashboard', icon: 'home', href: '/' },
17+
{ label: 'Projects', icon: 'folder', href: '/projects' },
18+
{ label: 'Team', icon: 'users', href: '/team' },
19+
{ label: 'Settings', icon: 'settings', href: '/settings' }
20+
]
21+
}}
22+
title="Basic Sidebar"
23+
/>
24+
25+
## With Groups
26+
27+
<ComponentDemo
28+
schema={{
29+
type: 'sidebar',
30+
groups: [
31+
{
32+
title: 'Main',
33+
items: [
34+
{ label: 'Dashboard', icon: 'home', href: '/' },
35+
{ label: 'Analytics', icon: 'bar-chart', href: '/analytics' }
36+
]
37+
},
38+
{
39+
title: 'Management',
40+
items: [
41+
{ label: 'Projects', icon: 'folder', href: '/projects' },
42+
{ label: 'Team', icon: 'users', href: '/team' }
43+
]
44+
}
45+
]
46+
}}
47+
title="Grouped Sidebar"
48+
/>
49+
50+
## Collapsible
51+
52+
<ComponentDemo
53+
schema={{
54+
type: 'sidebar',
55+
collapsible: true,
56+
defaultCollapsed: false,
57+
items: [
58+
{ label: 'Home', icon: 'home', href: '/' },
59+
{ label: 'Files', icon: 'folder', href: '/files' },
60+
{ label: 'Settings', icon: 'settings', href: '/settings' }
61+
]
62+
}}
63+
title="Collapsible Sidebar"
64+
/>
65+
66+
## Schema
67+
68+
```typescript
69+
interface SidebarItem {
70+
label: string;
71+
icon?: string;
72+
href?: string;
73+
active?: boolean;
74+
badge?: string | number;
75+
}
76+
77+
interface SidebarGroup {
78+
title?: string;
79+
items: SidebarItem[];
80+
}
81+
82+
interface SidebarSchema {
83+
type: 'sidebar';
84+
items?: SidebarItem[]; // Flat list of items
85+
groups?: SidebarGroup[]; // Grouped items
86+
collapsible?: boolean; // Allow collapse
87+
defaultCollapsed?: boolean; // Initial state
88+
89+
// Styling
90+
className?: string;
91+
}
92+
```
93+
94+
## Examples
95+
96+
### With Badges
97+
98+
<ComponentDemo
99+
schema={{
100+
type: 'sidebar',
101+
items: [
102+
{ label: 'Inbox', icon: 'inbox', href: '/inbox', badge: 12 },
103+
{ label: 'Drafts', icon: 'file-text', href: '/drafts', badge: 3 },
104+
{ label: 'Sent', icon: 'send', href: '/sent' },
105+
{ label: 'Trash', icon: 'trash', href: '/trash' }
106+
]
107+
}}
108+
title="Sidebar with Badges"
109+
/>

‎docs/components/feedback/empty.mdx‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: "Empty"
3+
description: "Empty state placeholder with optional action"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Empty component displays a placeholder when there's no content to show.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'empty',
15+
title: 'No results found',
16+
description: 'Try adjusting your search or filters'
17+
}}
18+
title="Basic Empty State"
19+
/>
20+
21+
## With Icon
22+
23+
<ComponentDemo
24+
schema={{
25+
type: 'empty',
26+
icon: 'inbox',
27+
title: 'No messages',
28+
description: 'Your inbox is empty'
29+
}}
30+
title="With Icon"
31+
/>
32+
33+
## With Action
34+
35+
<ComponentDemo
36+
schema={{
37+
type: 'empty',
38+
icon: 'folder-plus',
39+
title: 'No projects yet',
40+
description: 'Get started by creating your first project',
41+
action: {
42+
type: 'button',
43+
label: 'Create Project',
44+
variant: 'default'
45+
}
46+
}}
47+
title="With Action Button"
48+
/>
49+
50+
## Schema
51+
52+
```typescript
53+
interface EmptySchema {
54+
type: 'empty';
55+
icon?: string; // Lucide icon name
56+
title?: string; // Main message
57+
description?: string; // Supporting text
58+
action?: ComponentSchema; // Call to action button
59+
className?: string;
60+
}
61+
```
62+
63+
## Examples
64+
65+
### Search Results
66+
67+
<ComponentDemo
68+
schema={{
69+
type: 'empty',
70+
icon: 'search',
71+
title: 'No results for "example"',
72+
description: 'Try searching with different keywords',
73+
action: {
74+
type: 'button',
75+
label: 'Clear Search',
76+
variant: 'outline'
77+
}
78+
}}
79+
title="Empty Search Results"
80+
/>
81+
82+
### Empty List
83+
84+
<ComponentDemo
85+
schema={{
86+
type: 'empty',
87+
icon: 'users',
88+
title: 'No team members',
89+
description: 'Invite people to join your team',
90+
action: {
91+
type: 'button',
92+
label: 'Invite Team Members',
93+
variant: 'default',
94+
icon: 'user-plus'
95+
}
96+
}}
97+
title="Empty Team List"
98+
/>

0 commit comments

Comments
 (0)