Skip to content

Commit 19f7ad4

Browse files
hotlonghotlong
committed
Add and update showcase example pages
Introduces new example pages for HTML, table, filter builder, header bar, sidebar, and loading components. Updates existing showcase pages to provide real data and improved demos for calendar view, carousel, charts, chatbot, data table, kanban, resizable, scroll area, timeline, statistic, tree view, and collapsible components. Also updates navigation in app.json to include new examples.
1 parent ba73ff7 commit 19f7ad4

Some content is hidden

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

76 files changed

+3359
-696
lines changed

‎examples/showcase/app.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"children": [
1717
{ "label": "Div", "path": "/basic/div" },
1818
{ "label": "Text", "path": "/basic/text" },
19+
{ "label": "HTML", "path": "/basic/html" },
1920
{ "label": "Icon", "path": "/basic/icon" },
2021
{ "label": "Image", "path": "/basic/image" },
2122
{ "label": "Separator", "path": "/basic/separator" }
@@ -30,7 +31,9 @@
3031
{ "label": "Stack", "path": "/layout/stack" },
3132
{ "label": "Card", "path": "/layout/card" },
3233
{ "label": "Container", "path": "/layout/container" },
33-
{ "label": "Tabs", "path": "/layout/tabs" }
34+
{ "label": "Tabs", "path": "/layout/tabs" },
35+
{ "label": "Header Bar", "path": "/layout/header-bar" },
36+
{ "label": "Sidebar", "path": "/layout/sidebar" }
3437
]
3538
},
3639
{
@@ -57,6 +60,7 @@
5760
"icon": "Table",
5861
"children": [
5962
{ "label": "List", "path": "/data-display/list" },
63+
{ "label": "Table", "path": "/data-display/table" },
6064
{ "label": "Avatar", "path": "/data-display/avatar" },
6165
{ "label": "Badge", "path": "/data-display/badge" },
6266
{ "label": "Alert", "path": "/data-display/alert" },
@@ -70,6 +74,7 @@
7074
"children": [
7175
{ "label": "Toaster", "path": "/feedback/toaster" },
7276
{ "label": "Progress", "path": "/feedback/progress" },
77+
{ "label": "Loading", "path": "/feedback/loading" },
7378
{ "label": "Skeleton", "path": "/feedback/skeleton" }
7479
]
7580
},
@@ -102,6 +107,7 @@
102107
"children": [
103108
{ "label": "Data Table", "path": "/complex/data-table" },
104109
{ "label": "Kanban", "path": "/complex/kanban" },
110+
{ "label": "Filter Builder", "path": "/complex/filter-builder" },
105111
{ "label": "Calendar View", "path": "/complex/calendar-view" },
106112
{ "label": "Timeline", "path": "/complex/timeline" },
107113
{ "label": "Charts", "path": "/complex/charts" },

‎examples/showcase/pages/.json‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{
2+
"type": "page",
3+
"title": "Dashboard - Object UI",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6 container mx-auto py-6 max-w-4xl",
8+
"children": [
9+
{
10+
"type": "div",
11+
"className": "space-y-2",
12+
"children": [
13+
{
14+
"type": "text",
15+
"value": "Dashboard",
16+
"className": "text-3xl font-bold tracking-tight"
17+
},
18+
{
19+
"type": "text",
20+
"value": "Examples of the Dashboard component.",
21+
"className": "text-lg text-muted-foreground"
22+
}
23+
]
24+
},
25+
{
26+
"type": "separator",
27+
"className": "my-6"
28+
},
29+
{
30+
"type": "div",
31+
"className": "grid gap-4",
32+
"children": [
33+
{
34+
"type": "text",
35+
"value": "Default",
36+
"className": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
37+
},
38+
{
39+
"type": "card",
40+
"className": "p-6 flex items-center justify-center min-h-[150px] bg-background/50 border shadow-sm",
41+
"children": {
42+
"type": "card",
43+
"className": "p-6",
44+
"children": [
45+
{
46+
"type": "text",
47+
"value": "TODO: Implement Dashboard examples"
48+
}
49+
]
50+
}
51+
}
52+
]
53+
}
54+
]
55+
}
56+
]
57+
}

‎examples/showcase/pages/basic/html.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"type": "page",
3+
"title": "HTML - Object UI",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "space-y-6 container mx-auto py-6 max-w-4xl",
8+
"children": [
9+
{
10+
"type": "div",
11+
"className": "space-y-2",
12+
"children": [
13+
{
14+
"type": "text",
15+
"value": "HTML",
16+
"className": "text-3xl font-bold tracking-tight"
17+
},
18+
{
19+
"type": "text",
20+
"value": "Render raw HTML safely.",
21+
"className": "text-lg text-muted-foreground"
22+
}
23+
]
24+
},
25+
{
26+
"type": "separator",
27+
"className": "my-6"
28+
},
29+
{
30+
"type": "div",
31+
"className": "grid gap-4",
32+
"children": [
33+
{
34+
"type": "text",
35+
"value": "Rich Text",
36+
"className": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
37+
},
38+
{
39+
"type": "card",
40+
"className": "p-6 flex items-center justify-center min-h-[150px] bg-background/50 border shadow-sm",
41+
"children": {
42+
"type": "html",
43+
"html": "<p>This is <strong>bold</strong> and <em>italic</em> text rendered via HTML.</p><ul><li>List Item 1</li><li>List Item 2</li></ul>",
44+
"className": "p-4 border rounded-md"
45+
}
46+
}
47+
]
48+
}
49+
]
50+
}
51+
]
52+
}

‎examples/showcase/pages/complex/calendar-view.json‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
},
1818
{
1919
"type": "text",
20-
"value": "Examples of the Calendar View component.",
20+
"value": "Full sized calendar.",
2121
"className": "text-lg text-muted-foreground"
2222
}
2323
]
@@ -32,21 +32,15 @@
3232
"children": [
3333
{
3434
"type": "text",
35-
"value": "Default",
36-
"className": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
35+
"value": "Schedule",
36+
"className": "text-sm font-medium leading-none"
3737
},
3838
{
3939
"type": "card",
40-
"className": "p-6 flex items-center justify-center min-h-[150px] bg-background/50 border shadow-sm",
40+
"className": "p-0 overflow-hidden border shadow-sm",
4141
"children": {
42-
"type": "card",
43-
"className": "p-6",
44-
"children": [
45-
{
46-
"type": "text",
47-
"value": "TODO: Implement Calendar View examples"
48-
}
49-
]
42+
"type": "calendar-view",
43+
"className": "h-[600px] border rounded-md"
5044
}
5145
}
5246
]

‎examples/showcase/pages/complex/carousel.json‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
},
1818
{
1919
"type": "text",
20-
"value": "Examples of the Carousel component.",
20+
"value": "Slideshow.",
2121
"className": "text-lg text-muted-foreground"
2222
}
2323
]
@@ -32,19 +32,48 @@
3232
"children": [
3333
{
3434
"type": "text",
35-
"value": "Default",
35+
"value": "Images",
3636
"className": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
3737
},
3838
{
3939
"type": "card",
4040
"className": "p-6 flex items-center justify-center min-h-[150px] bg-background/50 border shadow-sm",
4141
"children": {
42-
"type": "card",
43-
"className": "p-6",
42+
"type": "carousel",
43+
"className": "w-full max-w-xs",
4444
"children": [
4545
{
46-
"type": "text",
47-
"value": "TODO: Implement Carousel examples"
46+
"type": "card",
47+
"className": "p-6 flex items-center justify-center aspect-square",
48+
"children": [
49+
{
50+
"type": "text",
51+
"value": "1",
52+
"className": "text-4xl"
53+
}
54+
]
55+
},
56+
{
57+
"type": "card",
58+
"className": "p-6 flex items-center justify-center aspect-square",
59+
"children": [
60+
{
61+
"type": "text",
62+
"value": "2",
63+
"className": "text-4xl"
64+
}
65+
]
66+
},
67+
{
68+
"type": "card",
69+
"className": "p-6 flex items-center justify-center aspect-square",
70+
"children": [
71+
{
72+
"type": "text",
73+
"value": "3",
74+
"className": "text-4xl"
75+
}
76+
]
4877
}
4978
]
5079
}

‎examples/showcase/pages/complex/charts.json‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,14 @@
3333
{
3434
"type": "text",
3535
"value": "Bar Chart",
36-
"className": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
36+
"className": "text-sm font-medium leading-none"
3737
},
3838
{
3939
"type": "card",
40-
"className": "p-6 flex items-center justify-center min-h-[150px] bg-background/50 border shadow-sm",
40+
"className": "p-0 overflow-hidden border shadow-sm",
4141
"children": {
4242
"type": "bar-chart",
43-
"className": "h-[300px]",
43+
"className": "h-[350px] w-full",
4444
"data": [
4545
{
4646
"name": "Jan",
@@ -69,6 +69,47 @@
6969
}
7070
}
7171
]
72+
},
73+
{
74+
"type": "div",
75+
"className": "grid gap-4",
76+
"children": [
77+
{
78+
"type": "text",
79+
"value": "Line Chart",
80+
"className": "text-sm font-medium leading-none"
81+
},
82+
{
83+
"type": "card",
84+
"className": "p-0 overflow-hidden border shadow-sm",
85+
"children": {
86+
"type": "line-chart",
87+
"className": "h-[350px] w-full",
88+
"data": [
89+
{
90+
"2023": 100,
91+
"2024": 120,
92+
"name": "Jan"
93+
},
94+
{
95+
"2023": 130,
96+
"2024": 140,
97+
"name": "Feb"
98+
},
99+
{
100+
"2023": 150,
101+
"2024": 180,
102+
"name": "Mar"
103+
}
104+
],
105+
"index": "name",
106+
"categories": [
107+
"2023",
108+
"2024"
109+
]
110+
}
111+
}
112+
]
72113
}
73114
]
74115
}

‎examples/showcase/pages/complex/chatbot.json‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
},
1818
{
1919
"type": "text",
20-
"value": "Examples of the Chatbot component.",
20+
"value": "Conversational interface.",
2121
"className": "text-lg text-muted-foreground"
2222
}
2323
]
@@ -32,21 +32,15 @@
3232
"children": [
3333
{
3434
"type": "text",
35-
"value": "Default",
36-
"className": "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
35+
"value": "Assistant",
36+
"className": "text-sm font-medium leading-none"
3737
},
3838
{
3939
"type": "card",
40-
"className": "p-6 flex items-center justify-center min-h-[150px] bg-background/50 border shadow-sm",
40+
"className": "p-0 overflow-hidden border shadow-sm",
4141
"children": {
42-
"type": "card",
43-
"className": "p-6",
44-
"children": [
45-
{
46-
"type": "text",
47-
"value": "TODO: Implement Chatbot examples"
48-
}
49-
]
42+
"type": "chatbot",
43+
"className": "h-[500px] border rounded-md"
5044
}
5145
}
5246
]

0 commit comments

Comments
 (0)