Skip to content

Commit e4a7be7

Browse files
hotlonghotlong
committed
feat: add icons to layout and overlay JSON files; enhance sidebar with dynamic icons
- Added "icon" property to various layout and overlay JSON files for better representation. - Implemented dynamic icon rendering in the sidebar using Lucide icons. - Updated app generator to support new icon structure in the menu. - Created a script to sync icons from app.json to individual page JSON files.
1 parent d253e9f commit e4a7be7

Some content is hidden

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

67 files changed

+1001
-377
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,12 @@
66
(Repository: `github.com/objectql/objectui`)
77

88
**Your Product:**
9-
A Universal, **Schema-Driven UI Engine** built on React + Tailwind + Shadcn.
9+
A Universal, **Schema-Driven UI Engine** built on React + Tailwind + Shadcn + Lucide Icons.
1010
You empower developers to render complex enterprise interfaces (Forms, Grids, Dashboards, Kanbans) using pure JSON metadata, eliminating repetitive hand-coding.
1111

1212
**Strategic Positioning:**
1313

1414
* **The "Face" of ObjectStack:** You are the official renderer for the ObjectStack ecosystem, BUT you are designed to be completely decoupled.
15-
* **VS Amis:** You are lighter, **Tailwind-native**, and support Server Components (RSC) architecture better.
16-
* **VS Formily:** You handle **Full Pages & Layouts**, not just forms.
17-
* **For General Users:** You are the fastest way to build modern Admin Panels in Next.js/Vite, even without a backend.
1815

1916
---
2017

@@ -26,7 +23,7 @@ You empower developers to render complex enterprise interfaces (Forms, Grids, Da
2623
* ✅ **REQUIRED:** `className` merging via `cn()` (clsx + tailwind-merge).
2724

2825

29-
* **UI Base:** **Shadcn UI** (Radix UI primitives).
26+
* **UI Base:** **Shadcn UI** (Radix UI primitives) Lucide Icons.
3027
* **State:** React Context / Zustand (Headless state management).
3128
* **Bundler:** Vite (Library Mode).
3229

‎examples/showcase/app.json‎

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -14,107 +14,107 @@
1414
"label": "Basic",
1515
"icon": "Box",
1616
"children": [
17-
{ "label": "Div", "path": "/basic/div" },
18-
{ "label": "Text", "path": "/basic/text" },
19-
{ "label": "HTML", "path": "/basic/html" },
20-
{ "label": "Icon", "path": "/basic/icon" },
21-
{ "label": "Image", "path": "/basic/image" },
22-
{ "label": "Separator", "path": "/basic/separator" }
17+
{ "label": "Div", "path": "/basic/div", "icon": "Square" },
18+
{ "label": "Text", "path": "/basic/text", "icon": "Type" },
19+
{ "label": "HTML", "path": "/basic/html", "icon": "Code" },
20+
{ "label": "Icon", "path": "/basic/icon", "icon": "Stars" },
21+
{ "label": "Image", "path": "/basic/image", "icon": "Image" },
22+
{ "label": "Separator", "path": "/basic/separator", "icon": "Minus" }
2323
]
2424
},
2525
{
2626
"label": "Layout",
2727
"icon": "Layout",
2828
"children": [
29-
{ "label": "Flex", "path": "/layout/flex" },
30-
{ "label": "Grid", "path": "/layout/grid" },
31-
{ "label": "Stack", "path": "/layout/stack" },
32-
{ "label": "Card", "path": "/layout/card" },
33-
{ "label": "Container", "path": "/layout/container" },
34-
{ "label": "Tabs", "path": "/layout/tabs" },
35-
{ "label": "Header Bar", "path": "/layout/header-bar" },
36-
{ "label": "Sidebar", "path": "/layout/sidebar" }
29+
{ "label": "Flex", "path": "/layout/flex", "icon": "StretchHorizontal" },
30+
{ "label": "Grid", "path": "/layout/grid", "icon": "Grid" },
31+
{ "label": "Stack", "path": "/layout/stack", "icon": "Layers" },
32+
{ "label": "Card", "path": "/layout/card", "icon": "PanelTop" },
33+
{ "label": "Container", "path": "/layout/container", "icon": "Box" },
34+
{ "label": "Tabs", "path": "/layout/tabs", "icon": "GalleryHorizontal" },
35+
{ "label": "Header Bar", "path": "/layout/header-bar", "icon": "PanelTop" },
36+
{ "label": "Sidebar", "path": "/layout/sidebar", "icon": "PanelLeft" }
3737
]
3838
},
3939
{
4040
"label": "Form",
4141
"icon": "FormInput",
4242
"children": [
43-
{ "label": "Button", "path": "/form/button" },
44-
{ "label": "Input", "path": "/form/input" },
45-
{ "label": "Textarea", "path": "/form/textarea" },
46-
{ "label": "Select", "path": "/form/select" },
47-
{ "label": "Checkbox", "path": "/form/checkbox" },
48-
{ "label": "Radio Group", "path": "/form/radio-group" },
49-
{ "label": "Switch", "path": "/form/switch" },
50-
{ "label": "Slider", "path": "/form/slider" },
51-
{ "label": "Date Picker", "path": "/form/date-picker" },
52-
{ "label": "Calendar", "path": "/form/calendar" },
53-
{ "label": "Input OTP", "path": "/form/input-otp" },
54-
{ "label": "Toggle", "path": "/form/toggle" },
55-
{ "label": "File Upload", "path": "/form/file-upload" }
43+
{ "label": "Button", "path": "/form/button", "icon": "MousePointerClick" },
44+
{ "label": "Input", "path": "/form/input", "icon": "TextCursor" },
45+
{ "label": "Textarea", "path": "/form/textarea", "icon": "FileText" },
46+
{ "label": "Select", "path": "/form/select", "icon": "List" },
47+
{ "label": "Checkbox", "path": "/form/checkbox", "icon": "CheckSquare" },
48+
{ "label": "Radio Group", "path": "/form/radio-group", "icon": "CircleDot" },
49+
{ "label": "Switch", "path": "/form/switch", "icon": "ToggleLeft" },
50+
{ "label": "Slider", "path": "/form/slider", "icon": "SlidersHorizontal" },
51+
{ "label": "Date Picker", "path": "/form/date-picker", "icon": "Calendar" },
52+
{ "label": "Calendar", "path": "/form/calendar", "icon": "CalendarDays" },
53+
{ "label": "Input OTP", "path": "/form/input-otp", "icon": "Hash" },
54+
{ "label": "Toggle", "path": "/form/toggle", "icon": "ToggleLeft" },
55+
{ "label": "File Upload", "path": "/form/file-upload", "icon": "UploadCloud" }
5656
]
5757
},
5858
{
5959
"label": "Data Display",
6060
"icon": "Table",
6161
"children": [
62-
{ "label": "List", "path": "/data-display/list" },
63-
{ "label": "Table", "path": "/data-display/table" },
64-
{ "label": "Avatar", "path": "/data-display/avatar" },
65-
{ "label": "Badge", "path": "/data-display/badge" },
66-
{ "label": "Alert", "path": "/data-display/alert" },
67-
{ "label": "Statistic", "path": "/data-display/statistic" },
68-
{ "label": "Tree View", "path": "/data-display/tree-view" }
62+
{ "label": "List", "path": "/data-display/list", "icon": "List" },
63+
{ "label": "Table", "path": "/data-display/table", "icon": "Table" },
64+
{ "label": "Avatar", "path": "/data-display/avatar", "icon": "User" },
65+
{ "label": "Badge", "path": "/data-display/badge", "icon": "Tag" },
66+
{ "label": "Alert", "path": "/data-display/alert", "icon": "AlertCircle" },
67+
{ "label": "Statistic", "path": "/data-display/statistic", "icon": "TrendingUp" },
68+
{ "label": "Tree View", "path": "/data-display/tree-view", "icon": "Network" }
6969
]
7070
},
7171
{
7272
"label": "Feedback",
7373
"icon": "Bell",
7474
"children": [
75-
{ "label": "Toaster", "path": "/feedback/toaster" },
76-
{ "label": "Progress", "path": "/feedback/progress" },
77-
{ "label": "Loading", "path": "/feedback/loading" },
78-
{ "label": "Skeleton", "path": "/feedback/skeleton" }
75+
{ "label": "Toaster", "path": "/feedback/toaster", "icon": "MessageSquare" },
76+
{ "label": "Progress", "path": "/feedback/progress", "icon": "Loader2" },
77+
{ "label": "Loading", "path": "/feedback/loading", "icon": "Loader" },
78+
{ "label": "Skeleton", "path": "/feedback/skeleton", "icon": "Ghost" }
7979
]
8080
},
8181
{
8282
"label": "Overlay",
8383
"icon": "Layers",
8484
"children": [
85-
{ "label": "Dialog", "path": "/overlay/dialog" },
86-
{ "label": "Sheet", "path": "/overlay/sheet" },
87-
{ "label": "Drawer", "path": "/overlay/drawer" },
88-
{ "label": "Popover", "path": "/overlay/popover" },
89-
{ "label": "Tooltip", "path": "/overlay/tooltip" },
90-
{ "label": "Hover Card", "path": "/overlay/hover-card" },
91-
{ "label": "Alert Dialog", "path": "/overlay/alert-dialog" },
92-
{ "label": "Dropdown Menu", "path": "/overlay/dropdown-menu" },
93-
{ "label": "Context Menu", "path": "/overlay/context-menu" }
85+
{ "label": "Dialog", "path": "/overlay/dialog", "icon": "MessageSquare" },
86+
{ "label": "Sheet", "path": "/overlay/sheet", "icon": "Sidebar" },
87+
{ "label": "Drawer", "path": "/overlay/drawer", "icon": "PanelBottom" },
88+
{ "label": "Popover", "path": "/overlay/popover", "icon": "MessageCircle" },
89+
{ "label": "Tooltip", "path": "/overlay/tooltip", "icon": "MessageSquare" },
90+
{ "label": "Hover Card", "path": "/overlay/hover-card", "icon": "CreditCard" },
91+
{ "label": "Alert Dialog", "path": "/overlay/alert-dialog", "icon": "AlertTriangle" },
92+
{ "label": "Dropdown Menu", "path": "/overlay/dropdown-menu", "icon": "Menu" },
93+
{ "label": "Context Menu", "path": "/overlay/context-menu", "icon": "MousePointer" }
9494
]
9595
},
9696
{
9797
"label": "Disclosure",
9898
"icon": "ChevronRight",
9999
"children": [
100-
{ "label": "Accordion", "path": "/disclosure/accordion" },
101-
{ "label": "Collapsible", "path": "/disclosure/collapsible" }
100+
{ "label": "Accordion", "path": "/disclosure/accordion", "icon": "ListCollapse" },
101+
{ "label": "Collapsible", "path": "/disclosure/collapsible", "icon": "ChevronsUpDown" }
102102
]
103103
},
104104
{
105105
"label": "Complex",
106106
"icon": "Cpu",
107107
"children": [
108-
{ "label": "Data Table", "path": "/complex/data-table" },
109-
{ "label": "Kanban", "path": "/complex/kanban" },
110-
{ "label": "Filter Builder", "path": "/complex/filter-builder" },
111-
{ "label": "Calendar View", "path": "/complex/calendar-view" },
112-
{ "label": "Timeline", "path": "/complex/timeline" },
113-
{ "label": "Charts", "path": "/complex/charts" },
114-
{ "label": "Carousel", "path": "/complex/carousel" },
115-
{ "label": "Resizable", "path": "/complex/resizable" },
116-
{ "label": "Scroll Area", "path": "/complex/scroll-area" },
117-
{ "label": "Chatbot", "path": "/complex/chatbot" }
108+
{ "label": "Data Table", "path": "/complex/data-table", "icon": "Table" },
109+
{ "label": "Kanban", "path": "/complex/kanban", "icon": "Kanban" },
110+
{ "label": "Filter Builder", "path": "/complex/filter-builder", "icon": "Filter" },
111+
{ "label": "Calendar View", "path": "/complex/calendar-view", "icon": "Calendar" },
112+
{ "label": "Timeline", "path": "/complex/timeline", "icon": "GitCommit" },
113+
{ "label": "Charts", "path": "/complex/charts", "icon": "BarChart" },
114+
{ "label": "Carousel", "path": "/complex/carousel", "icon": "GalleryHorizontal" },
115+
{ "label": "Resizable", "path": "/complex/resizable", "icon": "MoveHorizontal" },
116+
{ "label": "Scroll Area", "path": "/complex/scroll-area", "icon": "Scroll" },
117+
{ "label": "Chatbot", "path": "/complex/chatbot", "icon": "Bot" }
118118
]
119119
}
120120
],

‎examples/showcase/pages/.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,6 @@
5353
}
5454
]
5555
}
56-
]
57-
}
56+
],
57+
"icon": "LayoutDashboard"
58+
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,5 +78,6 @@
7878
}
7979
]
8080
}
81-
]
82-
}
81+
],
82+
"icon": "Square"
83+
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,5 +48,6 @@
4848
}
4949
]
5050
}
51-
]
52-
}
51+
],
52+
"icon": "Code"
53+
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,5 +69,6 @@
6969
}
7070
]
7171
}
72-
]
73-
}
72+
],
73+
"icon": "Stars"
74+
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,5 +69,6 @@
6969
}
7070
]
7171
}
72-
]
73-
}
72+
],
73+
"icon": "Image"
74+
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,5 +95,6 @@
9595
}
9696
]
9797
}
98-
]
99-
}
98+
],
99+
"icon": "Minus"
100+
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,5 +110,6 @@
110110
}
111111
]
112112
}
113-
]
114-
}
113+
],
114+
"icon": "Type"
115+
}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,5 +47,6 @@
4747
}
4848
]
4949
}
50-
]
51-
}
50+
],
51+
"icon": "Calendar"
52+
}

0 commit comments

Comments
 (0)