Skip to content

Commit e1961be

Browse files
hotlonghotlong
authored
Merge pull request #150 from objectstack-ai/copilot/update-ui-component-docs
2 parents 0e0a97e + af11036 commit e1961be

Some content is hidden

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

75 files changed

+4804
-71
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: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
"icon",
66
"image",
77
"separator",
8-
"html"
8+
"html",
9+
"button-group",
10+
"pagination",
11+
"navigation-menu",
12+
"sidebar"
913
]
1014
}

‎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/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+
/>

0 commit comments

Comments
 (0)