Skip to content

Commit f41f6d5

Browse files
hotlonghotlong
committed
Add showcase example with schema-driven UI pages
Introduces a new 'showcase' example app with JSON schema files for dashboard, basic/layout, forms, data display, feedback, overlays, and complex components. Also adds a dev:showcase script to package.json for running the new example.
1 parent c2f5503 commit f41f6d5

File tree

9 files changed

+976
-0
lines changed

9 files changed

+976
-0
lines changed

‎examples/showcase/app.json‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"type": "app",
3+
"name": "ObjectShowcase",
4+
"title": "Component Showcase",
5+
"logo": "Component",
6+
"layout": "sidebar",
7+
"menu": [
8+
{
9+
"label": "Dashboard",
10+
"path": "/",
11+
"icon": "LayoutDashboard"
12+
},
13+
{
14+
"label": "Basic & Layout",
15+
"path": "/basic",
16+
"icon": "Box"
17+
},
18+
{
19+
"label": "Forms",
20+
"path": "/forms",
21+
"icon": "FormInput"
22+
},
23+
{
24+
"label": "Data Display",
25+
"path": "/data",
26+
"icon": "Table"
27+
},
28+
{
29+
"label": "Feedback",
30+
"path": "/feedback",
31+
"icon": "Bell"
32+
},
33+
{
34+
"label": "Overlays",
35+
"path": "/overlays",
36+
"icon": "Layers"
37+
},
38+
{
39+
"label": "Complex",
40+
"path": "/complex",
41+
"icon": "Cpu"
42+
}
43+
],
44+
"actions": [
45+
{
46+
"type": "button",
47+
"variant": "ghost",
48+
"size": "icon",
49+
"icon": "Bell"
50+
},
51+
{
52+
"type": "user",
53+
"label": "Developer",
54+
"description": "dev@objectui.org",
55+
"avatar": "https://ui.shadcn.com/avatars/04.png",
56+
"items": [
57+
{ "type": "item", "label": "Profile", "shortcut": "⇧⌘P" },
58+
{ "type": "item", "label": "Settings", "shortcut": "⌘S" },
59+
{ "type": "separator" },
60+
{ "type": "item", "label": "Log out" }
61+
]
62+
}
63+
]
64+
}

‎examples/showcase/pages/basic.json‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
{
2+
"type": "page",
3+
"title": "Basic & Layout Components",
4+
"body": [
5+
{
6+
"type": "text",
7+
"value": "Basic & Layout Components",
8+
"className": "text-3xl font-bold tracking-tight mb-6"
9+
},
10+
{
11+
"type": "tabs",
12+
"defaultValue": "basic",
13+
"items": [
14+
{
15+
"label": "Basic Elements",
16+
"value": "basic",
17+
"body": [
18+
{
19+
"type": "grid",
20+
"columns": 1,
21+
"mdColumns": 2,
22+
"gap": 6,
23+
"children": [
24+
{
25+
"type": "card",
26+
"title": "Typography & Text",
27+
"children": [
28+
{ "type": "div", "className": "space-y-4", "children": [
29+
{ "type": "text", "value": "This is a standard text component." },
30+
{ "type": "text", "value": "This is bold text.", "className": "font-bold" },
31+
{ "type": "text", "value": "This is red text.", "className": "text-red-500" },
32+
{ "type": "text", "value": "This is a large heading.", "className": "text-2xl" },
33+
{ "type": "separator" },
34+
{ "type": "html", "html": "<p>This is <strong>HTML</strong> content rendered safely.</p>" }
35+
]}
36+
]
37+
},
38+
{
39+
"type": "card",
40+
"title": "Icons & Images",
41+
"children": [
42+
{ "type": "div", "className": "space-y-4", "children": [
43+
{ "type": "flex", "align": "center", "gap": 4, "children": [
44+
{ "type": "icon", "name": "User", "className": "h-6 w-6" },
45+
{ "type": "icon", "name": "Settings", "className": "h-6 w-6 text-blue-500" },
46+
{ "type": "icon", "name": "Bell", "className": "h-6 w-6 text-red-500" },
47+
{ "type": "icon", "name": "CheckCircle", "className": "h-6 w-6 text-green-500" }
48+
]},
49+
{ "type": "separator" },
50+
{ "type": "image", "src": "https://ui.shadcn.com/avatars/03.png", "className": "h-16 w-16 rounded-full border", "alt": "Avatar Example" },
51+
{ "type": "badge", "label": "Badge Component" }
52+
]}
53+
]
54+
}
55+
]
56+
}
57+
]
58+
},
59+
{
60+
"label": "Layout Containers",
61+
"value": "layout",
62+
"body": [
63+
{
64+
"type": "stack",
65+
"gap": 6,
66+
"children": [
67+
{
68+
"type": "card",
69+
"title": "Grid Layout (4 columns)",
70+
"children": [
71+
{
72+
"type": "grid",
73+
"columns": 4,
74+
"gap": 4,
75+
"children": [
76+
{ "type": "div", "className": "p-4 bg-muted text-center rounded", "body": "Col 1" },
77+
{ "type": "div", "className": "p-4 bg-muted text-center rounded", "body": "Col 2" },
78+
{ "type": "div", "className": "p-4 bg-muted text-center rounded", "body": "Col 3" },
79+
{ "type": "div", "className": "p-4 bg-muted text-center rounded", "body": "Col 4" }
80+
]
81+
}
82+
]
83+
},
84+
{
85+
"type": "card",
86+
"title": "Flex Layout",
87+
"children": [
88+
{
89+
"type": "flex",
90+
"justify": "between",
91+
"align": "center",
92+
"className": "bg-muted/20 p-4 rounded border",
93+
"children": [
94+
{ "type": "text", "value": "Flex Item Left" },
95+
{ "type": "button", "label": "Flex Item This Right" }
96+
]
97+
}
98+
]
99+
},
100+
{
101+
"type": "card",
102+
"title": "Container",
103+
"children": [
104+
{
105+
"type": "container",
106+
"maxWidth": "sm",
107+
"className": "bg-muted/50 py-4 border border-dashed text-center",
108+
"children": [
109+
{ "type": "text", "value": "This is a centered 'sm' container." }
110+
]
111+
}
112+
]
113+
}
114+
]
115+
}
116+
]
117+
}
118+
]
119+
}
120+
]
121+
}

‎examples/showcase/pages/complex.json‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{
2+
"type": "page",
3+
"title": "Complex Components",
4+
"body": [
5+
{
6+
"type": "text",
7+
"value": "Complex Components",
8+
"className": "text-3xl font-bold tracking-tight mb-6"
9+
},
10+
{
11+
"type": "grid",
12+
"columns": 1,
13+
"lgColumns": 2,
14+
"gap": 6,
15+
"children": [
16+
{
17+
"type": "card",
18+
"title": "Carousel",
19+
"children": [
20+
{
21+
"type": "carousel",
22+
"className": "w-full max-w-xs mx-auto",
23+
"items": [
24+
{ "type": "div", "className": "p-6 bg-slate-100 rounded flex items-center justify-center font-bold h-32", "body": "Slide 1" },
25+
{ "type": "div", "className": "p-6 bg-slate-200 rounded flex items-center justify-center font-bold h-32", "body": "Slide 2" },
26+
{ "type": "div", "className": "p-6 bg-slate-300 rounded flex items-center justify-center font-bold h-32", "body": "Slide 3" }
27+
]
28+
}
29+
]
30+
},
31+
{
32+
"type": "card",
33+
"title": "Filter Builder",
34+
"children": [
35+
{
36+
"type": "filter-builder",
37+
"name": "my_filter",
38+
"fields": [
39+
{ "label": "Name", "value": "name", "type": "text" },
40+
{ "label": "Status", "value": "status", "type": "select", "options": [{"label":"Active","value":"active"}] }
41+
]
42+
}
43+
]
44+
}
45+
]
46+
},
47+
{
48+
"type": "div",
49+
"className": "mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6",
50+
"children": [
51+
{
52+
"type": "card",
53+
"title": "Chatbot",
54+
"children": [
55+
{
56+
"type": "chatbot",
57+
"maxHeight": "300px",
58+
"messages": [
59+
{ "role": "assistant", "content": "Hello! I am a schema-driven chatbot." }
60+
]
61+
}
62+
]
63+
},
64+
{
65+
"type": "card",
66+
"title": "Resizable Panels",
67+
"children": [
68+
{
69+
"type": "resizable",
70+
"direction": "horizontal",
71+
"className": "min-h-[300px] border rounded",
72+
"panels": [
73+
{ "defaultSize": 30, "content": [{ "type": "div", "className": "h-full bg-muted/20 p-4 font-semibold", "body": "Sidebar" }] },
74+
{ "defaultSize": 70, "content": [{ "type": "div", "className": "h-full p-4", "body": "Main Content" }] }
75+
]
76+
}
77+
]
78+
}
79+
]
80+
}
81+
]
82+
}

‎examples/showcase/pages/data.json‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
{
2+
"type": "page",
3+
"title": "Data Display",
4+
"body": [
5+
{
6+
"type": "text",
7+
"value": "Data Components",
8+
"className": "text-3xl font-bold tracking-tight mb-6"
9+
},
10+
{
11+
"type": "tabs",
12+
"defaultValue": "table",
13+
"items": [
14+
{
15+
"label": "Tables & Lists",
16+
"value": "table",
17+
"body": [
18+
{
19+
"type": "card",
20+
"title": "Data Table",
21+
"className": "mb-6",
22+
"children": [
23+
{
24+
"type": "table",
25+
"caption": "A list of recent invoices.",
26+
"columns": [
27+
{ "header": "Invoice", "accessorKey": "invoice" },
28+
{ "header": "Status", "accessorKey": "status" },
29+
{ "header": "Method", "accessorKey": "method" },
30+
{ "header": "Amount", "accessorKey": "amount", "className": "text-right" }
31+
],
32+
"data": [
33+
{ "invoice": "INV001", "status": "Paid", "method": "Credit Card", "amount": "$250.00" },
34+
{ "invoice": "INV002", "status": "Pending", "method": "PayPal", "amount": "$150.00" },
35+
{ "invoice": "INV003", "status": "Unpaid", "method": "Bank Transfer", "amount": "$350.00" }
36+
]
37+
}
38+
]
39+
},
40+
{
41+
"type": "grid",
42+
"columns": 1,
43+
"mdColumns": 2,
44+
"gap": 6,
45+
"children": [
46+
{
47+
"type": "card",
48+
"title": "List Component",
49+
"children": [
50+
{
51+
"type": "list",
52+
"className": "space-y-2",
53+
"items": [
54+
"Implement authentication",
55+
"Design database schema",
56+
"Build API endpoints"
57+
]
58+
}
59+
]
60+
},
61+
{
62+
"type": "card",
63+
"title": "Tree View",
64+
"children": [
65+
{
66+
"type": "tree-view",
67+
"nodes": [
68+
{ "id": "1", "label": "src", "icon": "folder", "children": [
69+
{ "id": "1-1", "label": "components", "icon": "folder" },
70+
{ "id": "1-2", "label": "App.tsx", "icon": "file" }
71+
]},
72+
{ "id": "2", "label": "package.json", "icon": "file" }
73+
]
74+
}
75+
]
76+
}
77+
]
78+
}
79+
]
80+
},
81+
{
82+
"label": "Visualizations",
83+
"value": "vis",
84+
"body": [
85+
{
86+
"type": "card",
87+
"title": "Calendar View",
88+
"className": "mb-6",
89+
"children": [
90+
{
91+
"type": "calendar-view",
92+
"view": "month",
93+
"className": "border rounded-md p-4 min-h-[500px]",
94+
"data": [
95+
{ "id": 1, "title": "Launch", "start": "2023-10-01", "color": "blue" }
96+
]
97+
}
98+
]
99+
},
100+
{
101+
"type": "card",
102+
"title": "Timeline",
103+
"children": [
104+
{ "type": "text", "value": "Timeline component placeholder" }
105+
]
106+
}
107+
]
108+
}
109+
]
110+
}
111+
]
112+
}

0 commit comments

Comments
 (0)