Skip to content

Commit 8bd10e0

Browse files
CopilotCopilot
committed
docs: add documentation for 19 missing ObjectUI components
Created comprehensive MDX documentation files for: Basic Components (2): - div.mdx - General container element - span.mdx - Inline container element Form Components (3): - calendar.mdx - Date selection component (moved from data-display) - file-upload.mdx - File upload with drag-and-drop - toggle.mdx - Two-state toggle button (moved from disclosure) Data Display (2): - statistic.mdx - Statistical value display with trends - tree-view.mdx - Hierarchical tree structure Layout (2): - page.mdx - Full-page container with title/description - semantic.mdx - Semantic HTML5 elements (header, nav, main, etc.) Feedback (1): - toaster.mdx - Toast notification container Complex (8): - data-table.mdx - Enterprise data table with sorting/filtering - calendar-view.mdx - Full calendar view (moved from data-display) - timeline.mdx - Chronological timeline display (moved from data-display) - carousel.mdx - Slideshow component (moved from data-display) - scroll-area.mdx - Scrollable container (moved from layout) - resizable.mdx - Resizable panels (moved from layout) - filter-builder.mdx - Visual query builder - chatbot.mdx - Interactive chat interface Navigation (1): - header-bar.mdx - Application header with breadcrumbs Also updated all meta.json files to include new components in navigation and reorganized components into appropriate categories.
1 parent b482b81 commit 8bd10e0

34 files changed

Lines changed: 3768 additions & 504 deletions

‎docs/components/basic/div.mdx‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: "Div"
3+
description: "Generic container element for grouping and laying out content"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Div component is a versatile container element that wraps content and provides structure. It's the basic building block for creating layouts and organizing components.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'div',
15+
className: 'p-4 border rounded',
16+
children: [
17+
{ type: 'text', content: 'This is content inside a div' }
18+
]
19+
}}
20+
title="Simple Div"
21+
/>
22+
23+
## With Multiple Children
24+
25+
<ComponentDemo
26+
schema={{
27+
type: 'div',
28+
className: 'p-6 border rounded-lg bg-slate-50 space-y-3',
29+
children: [
30+
{ type: 'text', content: 'First child', className: 'font-semibold' },
31+
{ type: 'text', content: 'Second child', className: 'text-muted-foreground' },
32+
{ type: 'text', content: 'Third child', className: 'text-sm' }
33+
]
34+
}}
35+
title="Multiple Children"
36+
/>
37+
38+
## Layout Examples
39+
40+
<DemoGrid>
41+
<ComponentDemo
42+
schema={{
43+
type: 'div',
44+
className: 'flex gap-4 p-4 border rounded',
45+
children: [
46+
{ type: 'div', className: 'w-20 h-20 bg-blue-500 rounded' },
47+
{ type: 'div', className: 'w-20 h-20 bg-green-500 rounded' },
48+
{ type: 'div', className: 'w-20 h-20 bg-purple-500 rounded' }
49+
]
50+
}}
51+
title="Flex Container"
52+
/>
53+
<ComponentDemo
54+
schema={{
55+
type: 'div',
56+
className: 'grid grid-cols-2 gap-4 p-4 border rounded',
57+
children: [
58+
{ type: 'div', className: 'h-20 bg-red-500 rounded' },
59+
{ type: 'div', className: 'h-20 bg-yellow-500 rounded' },
60+
{ type: 'div', className: 'h-20 bg-pink-500 rounded' },
61+
{ type: 'div', className: 'h-20 bg-indigo-500 rounded' }
62+
]
63+
}}
64+
title="Grid Container"
65+
/>
66+
</DemoGrid>
67+
68+
## Schema
69+
70+
```typescript
71+
interface DivSchema {
72+
type: 'div';
73+
74+
// Content
75+
children?: SchemaNode | SchemaNode[]; // Child components
76+
body?: SchemaNode[]; // Alternative content prop
77+
78+
// Styling
79+
className?: string; // Tailwind CSS classes
80+
81+
// Base properties
82+
id?: string;
83+
visible?: boolean | string;
84+
testId?: string;
85+
}
86+
```
87+
88+
## Examples
89+
90+
### Card Layout
91+
92+
<ComponentDemo
93+
schema={{
94+
type: 'div',
95+
className: 'max-w-sm rounded-lg border bg-card text-card-foreground shadow-sm',
96+
children: [
97+
{
98+
type: 'div',
99+
className: 'p-6 space-y-2',
100+
children: [
101+
{ type: 'text', content: 'Card Title', className: 'text-2xl font-semibold' },
102+
{ type: 'text', content: 'Card description goes here. This is a basic card layout using div containers.', className: 'text-sm text-muted-foreground' }
103+
]
104+
}
105+
]
106+
}}
107+
title="Custom Card"
108+
/>
109+
110+
### Nested Containers
111+
112+
<ComponentDemo
113+
schema={{
114+
type: 'div',
115+
className: 'p-6 border-2 border-dashed border-blue-300 rounded-lg',
116+
children: [
117+
{
118+
type: 'div',
119+
className: 'p-4 border-2 border-dashed border-green-300 rounded',
120+
children: [
121+
{
122+
type: 'div',
123+
className: 'p-3 border-2 border-dashed border-purple-300 rounded text-center',
124+
children: [
125+
{ type: 'text', content: 'Nested Content', className: 'font-mono text-sm' }
126+
]
127+
}
128+
]
129+
}
130+
]
131+
}}
132+
title="Nested Divs"
133+
/>

‎docs/components/basic/meta.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
"button-group",
1010
"pagination",
1111
"navigation-menu",
12-
"sidebar"
12+
"sidebar",
13+
"div",
14+
"span"
1315
]
1416
}

‎docs/components/basic/span.mdx‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
---
2+
title: "Span"
3+
description: "Inline container for styling and wrapping inline text content"
4+
---
5+
6+
import { ComponentDemo, DemoGrid } from '@/app/components/ComponentDemo';
7+
8+
The Span component is an inline container used for wrapping and styling portions of text without breaking the flow of content.
9+
10+
## Basic Usage
11+
12+
<ComponentDemo
13+
schema={{
14+
type: 'text',
15+
content: 'This is regular text with ',
16+
children: [
17+
{ type: 'span', className: 'font-bold text-blue-600', body: [{ type: 'text', content: 'highlighted' }] },
18+
{ type: 'text', content: ' content inside.' }
19+
]
20+
}}
21+
title="Simple Span"
22+
/>
23+
24+
## Text Styling
25+
26+
<DemoGrid>
27+
<ComponentDemo
28+
schema={{
29+
type: 'div',
30+
children: [
31+
{
32+
type: 'span',
33+
className: 'px-2 py-1 bg-blue-100 text-blue-800 rounded font-semibold',
34+
body: [{ type: 'text', content: 'Badge Style' }]
35+
}
36+
]
37+
}}
38+
title="Badge"
39+
/>
40+
<ComponentDemo
41+
schema={{
42+
type: 'div',
43+
children: [
44+
{
45+
type: 'span',
46+
className: 'px-3 py-1 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-full text-sm font-medium',
47+
body: [{ type: 'text', content: 'Gradient Tag' }]
48+
}
49+
]
50+
}}
51+
title="Gradient"
52+
/>
53+
</DemoGrid>
54+
55+
## Inline Elements
56+
57+
<ComponentDemo
58+
schema={{
59+
type: 'div',
60+
className: 'p-4 border rounded',
61+
children: [
62+
{ type: 'text', content: 'Price: ' },
63+
{
64+
type: 'span',
65+
className: 'text-2xl font-bold text-green-600',
66+
body: [{ type: 'text', content: '$99.99' }]
67+
},
68+
{ type: 'text', content: ' ' },
69+
{
70+
type: 'span',
71+
className: 'text-sm line-through text-muted-foreground',
72+
body: [{ type: 'text', content: '$149.99' }]
73+
}
74+
]
75+
}}
76+
title="Price Display"
77+
/>
78+
79+
## Schema
80+
81+
```typescript
82+
interface SpanSchema {
83+
type: 'span';
84+
85+
// Content
86+
value?: string; // Text content
87+
children?: SchemaNode | SchemaNode[]; // Child components
88+
body?: SchemaNode | SchemaNode[]; // Alternative content prop
89+
90+
// Styling
91+
className?: string; // Tailwind CSS classes
92+
93+
// Base properties
94+
id?: string;
95+
visible?: boolean | string;
96+
testId?: string;
97+
}
98+
```
99+
100+
## Examples
101+
102+
### Status Indicators
103+
104+
<ComponentDemo
105+
schema={{
106+
type: 'flex',
107+
gap: 2,
108+
children: [
109+
{
110+
type: 'span',
111+
className: 'px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full',
112+
body: [{ type: 'text', content: '● Active' }]
113+
},
114+
{
115+
type: 'span',
116+
className: 'px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full',
117+
body: [{ type: 'text', content: '● Pending' }]
118+
},
119+
{
120+
type: 'span',
121+
className: 'px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full',
122+
body: [{ type: 'text', content: '● Inactive' }]
123+
}
124+
]
125+
}}
126+
title="Status Tags"
127+
/>
128+
129+
### Text Emphasis
130+
131+
<ComponentDemo
132+
schema={{
133+
type: 'div',
134+
className: 'p-4 border rounded',
135+
children: [
136+
{ type: 'text', content: 'The ' },
137+
{ type: 'span', className: 'font-bold', body: [{ type: 'text', content: 'quick' }] },
138+
{ type: 'text', content: ' brown fox ' },
139+
{ type: 'span', className: 'italic text-purple-600', body: [{ type: 'text', content: 'jumps' }] },
140+
{ type: 'text', content: ' over the ' },
141+
{ type: 'span', className: 'underline decoration-wavy', body: [{ type: 'text', content: 'lazy' }] },
142+
{ type: 'text', content: ' dog.' }
143+
]
144+
}}
145+
title="Mixed Styling"
146+
/>

0 commit comments

Comments
 (0)