Skip to content

Commit 261267b

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Add comprehensive fumadocs documentation for 26+ components
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent c1dcf67 commit 261267b

27 files changed

Lines changed: 2391 additions & 0 deletions

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

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
title: "Calendar"
3+
description: "Display and select dates in a calendar view"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Calendar component displays a calendar for date selection.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'calendar',
15+
mode: 'single'
16+
}}
17+
title="Single Date Selection"
18+
/>
19+
20+
## Multiple Selection
21+
22+
<ComponentDemo
23+
schema={{
24+
type: 'calendar',
25+
mode: 'multiple'
26+
}}
27+
title="Multiple Date Selection"
28+
/>
29+
30+
## Date Range
31+
32+
<ComponentDemo
33+
schema={{
34+
type: 'calendar',
35+
mode: 'range'
36+
}}
37+
title="Date Range Selection"
38+
/>
39+
40+
## Schema
41+
42+
```typescript
43+
interface CalendarSchema {
44+
type: 'calendar';
45+
mode?: 'single' | 'multiple' | 'range';
46+
selected?: Date | Date[] | { from: Date; to: Date };
47+
48+
// Events
49+
onSelect?: string | ActionConfig;
50+
51+
// States
52+
disabled?: boolean | Date[]; // Disabled dates
53+
54+
// Styling
55+
className?: string;
56+
}
57+
```
58+
59+
## Examples
60+
61+
### With Disabled Dates
62+
63+
<ComponentDemo
64+
schema={{
65+
type: 'calendar',
66+
mode: 'single',
67+
disabled: ['2024-01-01', '2024-01-15']
68+
}}
69+
title="With Disabled Dates"
70+
/>

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: "Carousel"
3+
description: "Slideshow component for cycling through content"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Carousel component displays content in a slideshow format with navigation controls.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'carousel',
15+
items: [
16+
{
17+
type: 'card',
18+
content: 'Slide 1'
19+
},
20+
{
21+
type: 'card',
22+
content: 'Slide 2'
23+
},
24+
{
25+
type: 'card',
26+
content: 'Slide 3'
27+
}
28+
]
29+
}}
30+
title="Basic Carousel"
31+
/>
32+
33+
## Auto-play
34+
35+
<ComponentDemo
36+
schema={{
37+
type: 'carousel',
38+
autoPlay: true,
39+
interval: 3000,
40+
items: [
41+
{
42+
type: 'image',
43+
src: '/slide1.jpg',
44+
alt: 'Slide 1'
45+
},
46+
{
47+
type: 'image',
48+
src: '/slide2.jpg',
49+
alt: 'Slide 2'
50+
},
51+
{
52+
type: 'image',
53+
src: '/slide3.jpg',
54+
alt: 'Slide 3'
55+
}
56+
]
57+
}}
58+
title="Auto-play Carousel"
59+
/>
60+
61+
## Schema
62+
63+
```typescript
64+
interface CarouselSchema {
65+
type: 'carousel';
66+
items: ComponentSchema[]; // Carousel slides
67+
autoPlay?: boolean; // Auto-advance slides
68+
interval?: number; // Auto-play interval (ms)
69+
loop?: boolean; // Loop back to start
70+
showControls?: boolean; // Show prev/next buttons
71+
showIndicators?: boolean; // Show dot indicators
72+
className?: string;
73+
}
74+
```
75+
76+
## Examples
77+
78+
### Image Gallery
79+
80+
<ComponentDemo
81+
schema={{
82+
type: 'carousel',
83+
showControls: true,
84+
showIndicators: true,
85+
items: Array.from({ length: 5 }, (_, i) => ({
86+
type: 'aspect-ratio',
87+
ratio: 16/9,
88+
content: {
89+
type: 'image',
90+
src: `https://picsum.photos/800/450?random=${i}`,
91+
alt: `Image ${i + 1}`
92+
}
93+
}))
94+
}}
95+
title="Image Gallery"
96+
/>

0 commit comments

Comments
 (0)