From eb03b06f0e2f295d6232975c19ef3bdfb2de095f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 14 Jan 2026 12:41:59 +0000 Subject: [PATCH 1/6] Initial plan From 143d6b79d182668c4462e014e706a2e49b583789 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 14 Jan 2026 12:55:09 +0000 Subject: [PATCH 2/6] Enhance visual appeal of dashboards, forms, and basic examples Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com> --- .../data/examples/basic/image-gallery.json | 243 ++++++++------- .../data/examples/basic/text-typography.json | 281 ++++++++++-------- .../dashboards/analytics-dashboard.json | 226 ++++++++------ .../src/data/examples/forms/form-demo.json | 128 ++++---- 4 files changed, 502 insertions(+), 376 deletions(-) diff --git a/apps/playground/src/data/examples/basic/image-gallery.json b/apps/playground/src/data/examples/basic/image-gallery.json index 52b791725..1ededdca1 100644 --- a/apps/playground/src/data/examples/basic/image-gallery.json +++ b/apps/playground/src/data/examples/basic/image-gallery.json @@ -1,130 +1,169 @@ { "type": "div", - "className": "space-y-6 max-w-6xl", + "className": "min-h-screen bg-gradient-to-br from-rose-50 via-pink-50 to-fuchsia-100 p-6 md:p-8", "body": [ { "type": "div", - "className": "space-y-2", + "className": "max-w-6xl mx-auto space-y-8", "body": [ { - "type": "text", - "content": "Image Component Gallery", - "className": "text-3xl font-bold" + "type": "div", + "className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl text-center", + "body": [ + { + "type": "text", + "content": "๐Ÿ–ผ๏ธ Image Component Gallery", + "className": "text-4xl font-black bg-gradient-to-r from-rose-600 via-pink-600 to-fuchsia-600 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "Various image layouts and styles using Tailwind CSS", + "className": "text-gray-600 font-medium text-lg" + } + ] }, { - "type": "text", - "content": "Various image layouts and styles using Tailwind classes", - "className": "text-muted-foreground" - } - ] - }, - { - "type": "div", - "className": "space-y-6", - "body": [ - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-4", - "body": [ - { - "type": "text", - "content": "Standard Image", - "className": "text-lg font-semibold" - }, - { - "type": "image", - "src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba", - "alt": "Mountain landscape", - "className": "w-full h-64 object-cover rounded-lg" - } - ] - } - }, - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-4", - "body": [ - { - "type": "text", - "content": "Image Grid", - "className": "text-lg font-semibold" - }, - { - "type": "grid", - "columns": 3, - "gap": 4, - "children": [ + "type": "div", + "className": "space-y-8", + "body": [ + { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { + "type": "div", + "className": "space-y-6", + "body": [ { - "type": "image", - "src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba", - "alt": "Image 1", - "className": "w-full h-40 object-cover rounded-md" + "type": "text", + "content": "๐ŸŒ„ Hero Image", + "className": "text-2xl font-bold text-gray-900" }, { "type": "image", - "src": "https://images.unsplash.com/photo-1682687221038-404cb8830901", - "alt": "Image 2", - "className": "w-full h-40 object-cover rounded-md" - }, - { - "type": "image", - "src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538", - "alt": "Image 3", - "className": "w-full h-40 object-cover rounded-md" + "src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba", + "alt": "Mountain landscape", + "className": "w-full h-80 object-cover rounded-2xl shadow-2xl hover:shadow-3xl transition-all hover:scale-[1.02] duration-300 ring-4 ring-white" } ] } - ] - } - }, - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-4", - "body": [ - { - "type": "text", - "content": "Rounded & Styled Images", - "className": "text-lg font-semibold" - }, - { - "type": "flex", - "direction": "row", - "gap": 4, - "className": "flex-wrap", - "children": [ + }, + { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { + "type": "div", + "className": "space-y-6", + "body": [ { - "type": "image", - "src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba", - "alt": "Rounded", - "className": "w-32 h-32 object-cover rounded-full border-4 border-blue-200" + "type": "text", + "content": "๐ŸŽจ Image Grid", + "className": "text-2xl font-bold text-gray-900" }, { - "type": "image", - "src": "https://images.unsplash.com/photo-1682687221038-404cb8830901", - "alt": "Square", - "className": "w-32 h-32 object-cover rounded-xl shadow-lg" + "type": "grid", + "columns": 3, + "gap": 6, + "children": [ + { + "type": "image", + "src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba", + "alt": "Image 1", + "className": "w-full h-48 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105 duration-300 ring-2 ring-white" + }, + { + "type": "image", + "src": "https://images.unsplash.com/photo-1682687221038-404cb8830901", + "alt": "Image 2", + "className": "w-full h-48 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105 duration-300 ring-2 ring-white" + }, + { + "type": "image", + "src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538", + "alt": "Image 3", + "className": "w-full h-48 object-cover rounded-xl shadow-lg hover:shadow-2xl transition-all hover:scale-105 duration-300 ring-2 ring-white" + } + ] + } + ] + } + }, + { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { + "type": "div", + "className": "space-y-6", + "body": [ + { + "type": "text", + "content": "โœจ Styled Images", + "className": "text-2xl font-bold text-gray-900" }, { - "type": "image", - "src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538", - "alt": "Styled", - "className": "w-32 h-32 object-cover rounded-lg ring-2 ring-purple-500 ring-offset-2" + "type": "flex", + "direction": "row", + "gap": 8, + "className": "flex-wrap justify-center", + "children": [ + { + "type": "div", + "className": "text-center space-y-3", + "body": [ + { + "type": "image", + "src": "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba", + "alt": "Rounded", + "className": "w-40 h-40 object-cover rounded-full border-8 border-rose-200 shadow-2xl hover:border-rose-400 transition-all hover:scale-110 duration-300" + }, + { + "type": "text", + "content": "Circular", + "className": "text-sm font-semibold text-gray-600" + } + ] + }, + { + "type": "div", + "className": "text-center space-y-3", + "body": [ + { + "type": "image", + "src": "https://images.unsplash.com/photo-1682687221038-404cb8830901", + "alt": "Square", + "className": "w-40 h-40 object-cover rounded-2xl shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-2 duration-300 ring-4 ring-pink-300" + }, + { + "type": "text", + "content": "Rounded Square", + "className": "text-sm font-semibold text-gray-600" + } + ] + }, + { + "type": "div", + "className": "text-center space-y-3", + "body": [ + { + "type": "image", + "src": "https://images.unsplash.com/photo-1682687220063-4742bd7fd538", + "alt": "Styled", + "className": "w-40 h-40 object-cover rounded-xl ring-4 ring-fuchsia-500 ring-offset-4 shadow-2xl hover:ring-offset-8 transition-all hover:rotate-3 duration-300" + }, + { + "type": "text", + "content": "Ring Style", + "className": "text-sm font-semibold text-gray-600" + } + ] + } + ] } ] } - ] - } + } + ] } ] } ] -} +} \ No newline at end of file diff --git a/apps/playground/src/data/examples/basic/text-typography.json b/apps/playground/src/data/examples/basic/text-typography.json index c86733c4c..a2506553e 100644 --- a/apps/playground/src/data/examples/basic/text-typography.json +++ b/apps/playground/src/data/examples/basic/text-typography.json @@ -1,150 +1,177 @@ { "type": "div", - "className": "space-y-8 max-w-4xl", + "className": "min-h-screen bg-gradient-to-br from-gray-50 via-slate-50 to-zinc-100 p-6 md:p-8", "body": [ { "type": "div", - "className": "space-y-2", + "className": "max-w-4xl mx-auto space-y-8", "body": [ { - "type": "text", - "content": "Typography Showcase", - "className": "text-3xl font-bold" + "type": "div", + "className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl", + "body": [ + { + "type": "text", + "content": "๐ŸŽจ Typography Showcase", + "className": "text-4xl font-black bg-gradient-to-r from-gray-900 to-gray-600 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "Demonstrating text components with various styles using Tailwind CSS classes", + "className": "text-gray-600 font-medium text-lg" + } + ] }, { - "type": "text", - "content": "Demonstrating text component with various styles using Tailwind classes", - "className": "text-muted-foreground" - } - ] - }, - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-6", - "body": [ - { - "type": "div", - "className": "space-y-3", - "body": [ - { - "type": "text", - "content": "Headings", - "className": "text-sm font-semibold text-muted-foreground uppercase tracking-wide" - }, - { - "type": "text", - "content": "Heading 1 - Extra Large", - "className": "text-4xl font-extrabold tracking-tight" - }, - { - "type": "text", - "content": "Heading 2 - Large", - "className": "text-3xl font-bold" - }, - { - "type": "text", - "content": "Heading 3 - Medium", - "className": "text-2xl font-semibold" - }, - { - "type": "text", - "content": "Heading 4 - Small", - "className": "text-xl font-medium" - } - ] - }, - { - "type": "separator" - }, - { - "type": "div", - "className": "space-y-3", - "body": [ - { - "type": "text", - "content": "Body Text", - "className": "text-sm font-semibold text-muted-foreground uppercase tracking-wide" - }, - { - "type": "text", - "content": "This is a regular paragraph with default styling. Perfect for body content and general text.", - "className": "text-base" - }, - { - "type": "text", - "content": "This is emphasized text with bold styling for important information.", - "className": "text-base font-semibold" - }, - { - "type": "text", - "content": "This is muted text, typically used for secondary information or captions.", - "className": "text-sm text-muted-foreground" - } - ] - }, - { - "type": "separator" - }, - { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { "type": "div", - "className": "space-y-3", + "className": "space-y-10", "body": [ { - "type": "text", - "content": "Specialized Styles", - "className": "text-sm font-semibold text-muted-foreground uppercase tracking-wide" - }, - { - "type": "text", - "content": "Success message in green", - "className": "text-green-600 font-medium" - }, - { - "type": "text", - "content": "Warning message in amber", - "className": "text-amber-600 font-medium" - }, - { - "type": "text", - "content": "Error message in red", - "className": "text-red-600 font-medium" + "type": "div", + "className": "space-y-6 p-6 bg-gradient-to-br from-slate-50 to-gray-100 rounded-xl", + "body": [ + { + "type": "text", + "content": "HEADINGS", + "className": "text-xs font-black text-gray-500 uppercase tracking-widest" + }, + { + "type": "text", + "content": "Heading 1 - Extra Large", + "className": "text-5xl font-extrabold tracking-tight bg-gradient-to-r from-gray-900 to-gray-700 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "Heading 2 - Large", + "className": "text-4xl font-bold text-gray-800" + }, + { + "type": "text", + "content": "Heading 3 - Medium", + "className": "text-3xl font-semibold text-gray-800" + }, + { + "type": "text", + "content": "Heading 4 - Small", + "className": "text-2xl font-medium text-gray-700" + } + ] }, { - "type": "text", - "content": "Information message in blue", - "className": "text-blue-600 font-medium" - } - ] - }, - { - "type": "separator" - }, - { - "type": "div", - "className": "space-y-3", - "body": [ - { - "type": "text", - "content": "Code & Technical", - "className": "text-sm font-semibold text-muted-foreground uppercase tracking-wide" + "type": "div", + "className": "space-y-5 p-6 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-xl", + "body": [ + { + "type": "text", + "content": "BODY TEXT", + "className": "text-xs font-black text-blue-700 uppercase tracking-widest" + }, + { + "type": "text", + "content": "This is a regular paragraph with default styling. Perfect for body content and general text. It provides a clean, readable foundation for your content.", + "className": "text-base text-gray-800 leading-relaxed" + }, + { + "type": "text", + "content": "This is emphasized text with bold styling for important information that needs to stand out.", + "className": "text-base font-bold text-gray-900" + }, + { + "type": "text", + "content": "This is muted text, typically used for secondary information or captions that support the main content.", + "className": "text-sm text-gray-500 italic" + } + ] }, { - "type": "text", - "content": "const greeting = 'Hello, Object UI!';", - "className": "font-mono text-sm bg-slate-100 p-2 rounded" + "type": "div", + "className": "space-y-4 p-6 bg-gradient-to-br from-purple-50 to-pink-100 rounded-xl", + "body": [ + { + "type": "text", + "content": "SPECIALIZED STYLES", + "className": "text-xs font-black text-purple-700 uppercase tracking-widest" + }, + { + "type": "div", + "className": "space-y-3", + "body": [ + { + "type": "div", + "className": "p-4 bg-green-100 border-l-4 border-green-600 rounded-r-lg shadow-md", + "body": [ + { + "type": "text", + "content": "โœ“ Success message in green - Operation completed successfully!", + "className": "text-green-800 font-bold" + } + ] + }, + { + "type": "div", + "className": "p-4 bg-amber-100 border-l-4 border-amber-600 rounded-r-lg shadow-md", + "body": [ + { + "type": "text", + "content": "โš  Warning message in amber - Please review this action.", + "className": "text-amber-800 font-bold" + } + ] + }, + { + "type": "div", + "className": "p-4 bg-red-100 border-l-4 border-red-600 rounded-r-lg shadow-md", + "body": [ + { + "type": "text", + "content": "โœ— Error message in red - An error has occurred.", + "className": "text-red-800 font-bold" + } + ] + }, + { + "type": "div", + "className": "p-4 bg-blue-100 border-l-4 border-blue-600 rounded-r-lg shadow-md", + "body": [ + { + "type": "text", + "content": "โ„น Information message in blue - Here's something you should know.", + "className": "text-blue-800 font-bold" + } + ] + } + ] + } + ] }, { - "type": "text", - "content": "API Endpoint: /api/v1/users", - "className": "font-mono text-xs text-slate-600" + "type": "div", + "className": "space-y-4 p-6 bg-gradient-to-br from-gray-100 to-slate-200 rounded-xl", + "body": [ + { + "type": "text", + "content": "CODE & TECHNICAL", + "className": "text-xs font-black text-gray-700 uppercase tracking-widest" + }, + { + "type": "text", + "content": "const greeting = 'Hello, Object UI!';", + "className": "font-mono text-sm bg-gray-900 text-green-400 p-4 rounded-lg shadow-lg border border-gray-700" + }, + { + "type": "text", + "content": "API Endpoint: /api/v1/users", + "className": "font-mono text-sm text-indigo-700 bg-indigo-50 px-3 py-2 rounded-md inline-block border border-indigo-200" + } + ] } ] } - ] - } + } + ] } ] -} +} \ No newline at end of file diff --git a/apps/playground/src/data/examples/dashboards/analytics-dashboard.json b/apps/playground/src/data/examples/dashboards/analytics-dashboard.json index cab34fcc1..382b7d285 100644 --- a/apps/playground/src/data/examples/dashboards/analytics-dashboard.json +++ b/apps/playground/src/data/examples/dashboards/analytics-dashboard.json @@ -1,45 +1,46 @@ { "type": "div", - "className": "min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 p-6", + "className": "min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-6 md:p-8", "body": [ { "type": "div", - "className": "max-w-7xl mx-auto space-y-6", + "className": "max-w-7xl mx-auto space-y-8", "body": [ { "type": "div", - "className": "flex justify-between items-center", + "className": "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-lg", "body": [ { "type": "div", - "className": "space-y-1", + "className": "space-y-2", "body": [ { "type": "text", - "content": "Analytics Dashboard", - "className": "text-3xl font-bold text-gray-900" + "content": "๐Ÿ“Š Analytics Dashboard", + "className": "text-4xl font-extrabold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent" }, { "type": "text", "content": "Real-time performance metrics and insights", - "className": "text-gray-500" + "className": "text-gray-600 font-medium" } ] }, { "type": "flex", "direction": "row", - "gap": 2, + "gap": 3, "children": [ { "type": "button", - "label": "Export", - "variant": "outline" + "label": "๐Ÿ“ฅ Export", + "variant": "outline", + "className": "shadow-sm hover:shadow-md transition-all" }, { "type": "button", - "label": "Refresh", - "className": "bg-blue-600 hover:bg-blue-700 text-white" + "label": "๐Ÿ”„ Refresh", + "className": "bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg hover:shadow-xl transition-all" } ] } @@ -52,10 +53,10 @@ "children": [ { "type": "card", - "className": "bg-white p-6 border border-gray-200 shadow-sm hover:shadow-md transition-shadow", + "className": "bg-gradient-to-br from-green-50 to-emerald-100 p-6 border-0 shadow-xl hover:shadow-2xl transition-all hover:-translate-y-1 duration-300 relative overflow-hidden", "body": { "type": "div", - "className": "space-y-2", + "className": "space-y-3 relative z-10", "body": [ { "type": "flex", @@ -66,19 +67,25 @@ { "type": "text", "content": "Total Revenue", - "className": "text-sm font-medium text-gray-600" + "className": "text-sm font-semibold text-green-900 uppercase tracking-wide" }, { - "type": "icon", - "name": "DollarSign", - "className": "w-4 h-4 text-green-600" + "type": "div", + "className": "p-2 bg-green-200/50 rounded-full backdrop-blur", + "body": [ + { + "type": "icon", + "name": "DollarSign", + "className": "w-5 h-5 text-green-700" + } + ] } ] }, { "type": "text", "content": "$45,231.89", - "className": "text-3xl font-bold text-gray-900" + "className": "text-4xl font-black text-green-900 tracking-tight" }, { "type": "flex", @@ -87,14 +94,20 @@ "align": "center", "children": [ { - "type": "text", - "content": "โ†— 20.1%", - "className": "text-sm font-medium text-green-600" + "type": "div", + "className": "px-2 py-1 bg-green-600 text-white rounded-full text-xs font-bold", + "body": [ + { + "type": "text", + "content": "โ†— 20.1%", + "className": "text-xs" + } + ] }, { "type": "text", "content": "from last month", - "className": "text-sm text-gray-500" + "className": "text-sm text-green-700 font-medium" } ] } @@ -103,10 +116,10 @@ }, { "type": "card", - "className": "bg-white p-6 border border-gray-200 shadow-sm hover:shadow-md transition-shadow", + "className": "bg-gradient-to-br from-blue-50 to-cyan-100 p-6 border-0 shadow-xl hover:shadow-2xl transition-all hover:-translate-y-1 duration-300 relative overflow-hidden", "body": { "type": "div", - "className": "space-y-2", + "className": "space-y-3 relative z-10", "body": [ { "type": "flex", @@ -117,19 +130,25 @@ { "type": "text", "content": "Active Users", - "className": "text-sm font-medium text-gray-600" + "className": "text-sm font-semibold text-blue-900 uppercase tracking-wide" }, { - "type": "icon", - "name": "Users", - "className": "w-4 h-4 text-blue-600" + "type": "div", + "className": "p-2 bg-blue-200/50 rounded-full backdrop-blur", + "body": [ + { + "type": "icon", + "name": "Users", + "className": "w-5 h-5 text-blue-700" + } + ] } ] }, { "type": "text", "content": "+2,350", - "className": "text-3xl font-bold text-gray-900" + "className": "text-4xl font-black text-blue-900 tracking-tight" }, { "type": "flex", @@ -138,14 +157,20 @@ "align": "center", "children": [ { - "type": "text", - "content": "โ†— 180.1%", - "className": "text-sm font-medium text-green-600" + "type": "div", + "className": "px-2 py-1 bg-blue-600 text-white rounded-full text-xs font-bold", + "body": [ + { + "type": "text", + "content": "โ†— 180.1%", + "className": "text-xs" + } + ] }, { "type": "text", "content": "from last month", - "className": "text-sm text-gray-500" + "className": "text-sm text-blue-700 font-medium" } ] } @@ -154,10 +179,10 @@ }, { "type": "card", - "className": "bg-white p-6 border border-gray-200 shadow-sm hover:shadow-md transition-shadow", + "className": "bg-gradient-to-br from-purple-50 to-fuchsia-100 p-6 border-0 shadow-xl hover:shadow-2xl transition-all hover:-translate-y-1 duration-300 relative overflow-hidden", "body": { "type": "div", - "className": "space-y-2", + "className": "space-y-3 relative z-10", "body": [ { "type": "flex", @@ -168,19 +193,25 @@ { "type": "text", "content": "Total Orders", - "className": "text-sm font-medium text-gray-600" + "className": "text-sm font-semibold text-purple-900 uppercase tracking-wide" }, { - "type": "icon", - "name": "ShoppingCart", - "className": "w-4 h-4 text-purple-600" + "type": "div", + "className": "p-2 bg-purple-200/50 rounded-full backdrop-blur", + "body": [ + { + "type": "icon", + "name": "ShoppingCart", + "className": "w-5 h-5 text-purple-700" + } + ] } ] }, { "type": "text", "content": "+12,234", - "className": "text-3xl font-bold text-gray-900" + "className": "text-4xl font-black text-purple-900 tracking-tight" }, { "type": "flex", @@ -189,14 +220,20 @@ "align": "center", "children": [ { - "type": "text", - "content": "โ†— 19%", - "className": "text-sm font-medium text-green-600" + "type": "div", + "className": "px-2 py-1 bg-purple-600 text-white rounded-full text-xs font-bold", + "body": [ + { + "type": "text", + "content": "โ†— 19%", + "className": "text-xs" + } + ] }, { "type": "text", "content": "from last month", - "className": "text-sm text-gray-500" + "className": "text-sm text-purple-700 font-medium" } ] } @@ -205,10 +242,10 @@ }, { "type": "card", - "className": "bg-white p-6 border border-gray-200 shadow-sm hover:shadow-md transition-shadow", + "className": "bg-gradient-to-br from-amber-50 to-orange-100 p-6 border-0 shadow-xl hover:shadow-2xl transition-all hover:-translate-y-1 duration-300 relative overflow-hidden", "body": { "type": "div", - "className": "space-y-2", + "className": "space-y-3 relative z-10", "body": [ { "type": "flex", @@ -219,19 +256,25 @@ { "type": "text", "content": "Conversion Rate", - "className": "text-sm font-medium text-gray-600" + "className": "text-sm font-semibold text-orange-900 uppercase tracking-wide" }, { - "type": "icon", - "name": "TrendingUp", - "className": "w-4 h-4 text-orange-600" + "type": "div", + "className": "p-2 bg-orange-200/50 rounded-full backdrop-blur", + "body": [ + { + "type": "icon", + "name": "TrendingUp", + "className": "w-5 h-5 text-orange-700" + } + ] } ] }, { "type": "text", "content": "3.24%", - "className": "text-3xl font-bold text-gray-900" + "className": "text-4xl font-black text-orange-900 tracking-tight" }, { "type": "flex", @@ -240,14 +283,20 @@ "align": "center", "children": [ { - "type": "text", - "content": "โ†˜ 4.3%", - "className": "text-sm font-medium text-red-600" + "type": "div", + "className": "px-2 py-1 bg-red-600 text-white rounded-full text-xs font-bold", + "body": [ + { + "type": "text", + "content": "โ†˜ 4.3%", + "className": "text-xs" + } + ] }, { "type": "text", "content": "from last month", - "className": "text-sm text-gray-500" + "className": "text-sm text-orange-700 font-medium" } ] } @@ -263,10 +312,10 @@ "children": [ { "type": "card", - "className": "col-span-2 bg-white p-6 border border-gray-200 shadow-sm", + "className": "col-span-2 bg-white/80 backdrop-blur-lg p-6 border-0 shadow-xl rounded-2xl", "body": { "type": "div", - "className": "space-y-4", + "className": "space-y-6", "body": [ { "type": "div", @@ -274,8 +323,8 @@ "body": [ { "type": "text", - "content": "Revenue Overview", - "className": "text-lg font-semibold text-gray-900" + "content": "๐Ÿ“ˆ Revenue Overview", + "className": "text-xl font-bold text-gray-900" }, { "type": "select", @@ -292,12 +341,12 @@ }, { "type": "div", - "className": "h-80 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg flex items-center justify-center", + "className": "h-80 bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 rounded-xl flex items-center justify-center border-2 border-dashed border-indigo-200", "body": [ { "type": "text", "content": "๐Ÿ“Š Chart Visualization Area", - "className": "text-gray-400 text-lg" + "className": "text-indigo-400 text-xl font-semibold" } ] } @@ -306,15 +355,15 @@ }, { "type": "card", - "className": "bg-white p-6 border border-gray-200 shadow-sm", + "className": "bg-white/80 backdrop-blur-lg p-6 border-0 shadow-xl rounded-2xl", "body": { "type": "div", - "className": "space-y-4", + "className": "space-y-6", "body": [ { "type": "text", - "content": "Recent Activity", - "className": "text-lg font-semibold text-gray-900" + "content": "โšก Recent Activity", + "className": "text-xl font-bold text-gray-900" }, { "type": "div", @@ -325,11 +374,12 @@ "direction": "row", "gap": 3, "align": "center", + "className": "p-3 rounded-xl bg-gradient-to-r from-blue-50 to-blue-100/50 hover:shadow-md transition-shadow", "children": [ { "type": "avatar", "fallback": "JD", - "className": "w-10 h-10 bg-blue-100 text-blue-600" + "className": "w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 text-white font-bold shadow-md" }, { "type": "div", @@ -338,30 +388,28 @@ { "type": "text", "content": "New order placed", - "className": "text-sm font-medium text-gray-900" + "className": "text-sm font-bold text-gray-900" }, { "type": "text", "content": "2 minutes ago", - "className": "text-xs text-gray-500" + "className": "text-xs text-blue-600 font-medium" } ] } ] }, - { - "type": "separator" - }, { "type": "flex", "direction": "row", "gap": 3, "align": "center", + "className": "p-3 rounded-xl bg-gradient-to-r from-green-50 to-green-100/50 hover:shadow-md transition-shadow", "children": [ { "type": "avatar", "fallback": "AB", - "className": "w-10 h-10 bg-green-100 text-green-600" + "className": "w-12 h-12 bg-gradient-to-br from-green-400 to-green-600 text-white font-bold shadow-md" }, { "type": "div", @@ -370,30 +418,28 @@ { "type": "text", "content": "Payment received", - "className": "text-sm font-medium text-gray-900" + "className": "text-sm font-bold text-gray-900" }, { "type": "text", "content": "15 minutes ago", - "className": "text-xs text-gray-500" + "className": "text-xs text-green-600 font-medium" } ] } ] }, - { - "type": "separator" - }, { "type": "flex", "direction": "row", "gap": 3, "align": "center", + "className": "p-3 rounded-xl bg-gradient-to-r from-purple-50 to-purple-100/50 hover:shadow-md transition-shadow", "children": [ { "type": "avatar", "fallback": "MK", - "className": "w-10 h-10 bg-purple-100 text-purple-600" + "className": "w-12 h-12 bg-gradient-to-br from-purple-400 to-purple-600 text-white font-bold shadow-md" }, { "type": "div", @@ -402,30 +448,28 @@ { "type": "text", "content": "New user signed up", - "className": "text-sm font-medium text-gray-900" + "className": "text-sm font-bold text-gray-900" }, { "type": "text", "content": "1 hour ago", - "className": "text-xs text-gray-500" + "className": "text-xs text-purple-600 font-medium" } ] } ] }, - { - "type": "separator" - }, { "type": "flex", "direction": "row", "gap": 3, "align": "center", + "className": "p-3 rounded-xl bg-gradient-to-r from-orange-50 to-orange-100/50 hover:shadow-md transition-shadow", "children": [ { "type": "avatar", "fallback": "SW", - "className": "w-10 h-10 bg-orange-100 text-orange-600" + "className": "w-12 h-12 bg-gradient-to-br from-orange-400 to-orange-600 text-white font-bold shadow-md" }, { "type": "div", @@ -434,12 +478,12 @@ { "type": "text", "content": "Product review posted", - "className": "text-sm font-medium text-gray-900" + "className": "text-sm font-bold text-gray-900" }, { "type": "text", "content": "3 hours ago", - "className": "text-xs text-gray-500" + "className": "text-xs text-orange-600 font-medium" } ] } @@ -454,15 +498,15 @@ }, { "type": "card", - "className": "bg-white p-6 border border-gray-200 shadow-sm", + "className": "bg-white/80 backdrop-blur-lg p-6 border-0 shadow-xl rounded-2xl", "body": { "type": "div", - "className": "space-y-4", + "className": "space-y-6", "body": [ { "type": "text", - "content": "Top Performing Products", - "className": "text-lg font-semibold text-gray-900" + "content": "๐Ÿ† Top Performing Products", + "className": "text-xl font-bold text-gray-900" }, { "type": "table", diff --git a/apps/playground/src/data/examples/forms/form-demo.json b/apps/playground/src/data/examples/forms/form-demo.json index 65fb8369e..3ae434f1a 100644 --- a/apps/playground/src/data/examples/forms/form-demo.json +++ b/apps/playground/src/data/examples/forms/form-demo.json @@ -1,83 +1,99 @@ { "type": "div", - "className": "max-w-2xl space-y-6", + "className": "min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-6 md:p-8", "body": [ { "type": "div", - "className": "space-y-2", + "className": "max-w-2xl mx-auto space-y-8", "body": [ { - "type": "text", - "content": "User Registration Form", - "className": "text-2xl font-bold" + "type": "div", + "className": "space-y-3 text-center", + "body": [ + { + "type": "text", + "content": "โœจ User Registration Form", + "className": "text-4xl font-extrabold bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "A comprehensive form demonstrating various input types with modern styling", + "className": "text-gray-600 font-medium text-lg" + } + ] }, { - "type": "text", - "content": "A comprehensive form demonstrating various input types", - "className": "text-muted-foreground" - } - ] - }, - { - "type": "card", - "className": "shadow-sm", - "body": { - "type": "div", - "className": "p-6 space-y-6", - "body": [ - { + "type": "card", + "className": "shadow-2xl border-0 bg-white/80 backdrop-blur-lg rounded-2xl overflow-hidden", + "body": { "type": "div", - "className": "grid gap-4 md:grid-cols-2", + "className": "p-8 space-y-8", "body": [ + { + "type": "div", + "className": "grid gap-6 md:grid-cols-2", + "body": [ + { + "type": "input", + "label": "First Name", + "id": "firstName", + "required": true, + "placeholder": "John", + "className": "transition-all focus:ring-2 focus:ring-indigo-500" + }, + { + "type": "input", + "label": "Last Name", + "id": "lastName", + "required": true, + "placeholder": "Doe", + "className": "transition-all focus:ring-2 focus:ring-indigo-500" + } + ] + }, { "type": "input", - "label": "First Name", - "id": "firstName", + "label": "๐Ÿ“ง Email Address", + "id": "email", + "inputType": "email", "required": true, - "placeholder": "John" + "placeholder": "john.doe@example.com", + "className": "transition-all focus:ring-2 focus:ring-purple-500" }, { "type": "input", - "label": "Last Name", - "id": "lastName", + "label": "๐Ÿ”’ Password", + "id": "password", + "inputType": "password", "required": true, - "placeholder": "Doe" - } - ] - }, - { - "type": "input", - "label": "Email Address", - "id": "email", - "inputType": "email", - "required": true, - "placeholder": "john.doe@example.com" - }, - { - "type": "input", - "label": "Password", - "id": "password", - "inputType": "password", - "required": true, - "placeholder": "โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข" - }, - { - "type": "div", - "className": "flex items-center justify-end gap-2", - "body": [ + "placeholder": "โ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ขโ€ข", + "className": "transition-all focus:ring-2 focus:ring-pink-500" + }, { - "type": "button", - "label": "Cancel", - "variant": "outline" + "type": "separator", + "className": "my-6" }, { - "type": "button", - "label": "Create Account" + "type": "div", + "className": "flex items-center justify-end gap-3", + "body": [ + { + "type": "button", + "label": "Cancel", + "variant": "outline", + "className": "px-6 py-2.5 hover:bg-gray-100 transition-colors" + }, + { + "type": "button", + "label": "โœ“ Create Account", + "className": "px-6 py-2.5 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 hover:from-indigo-700 hover:via-purple-700 hover:to-pink-700 text-white shadow-lg hover:shadow-xl transition-all" + } + ] } ] } - ] - } + } + ] } ] } \ No newline at end of file From 835184cba7d4655abeb4c995efd2e7a2d6eb6baa Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 14 Jan 2026 13:30:24 +0000 Subject: [PATCH 3/6] Changes before error encountered Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com> --- .../dashboards/ecommerce-dashboard.json | 168 +++++++++++++----- 1 file changed, 128 insertions(+), 40 deletions(-) diff --git a/apps/playground/src/data/examples/dashboards/ecommerce-dashboard.json b/apps/playground/src/data/examples/dashboards/ecommerce-dashboard.json index 7b11593a0..5073ab5a9 100644 --- a/apps/playground/src/data/examples/dashboards/ecommerce-dashboard.json +++ b/apps/playground/src/data/examples/dashboards/ecommerce-dashboard.json @@ -1,46 +1,46 @@ { "type": "div", - "className": "min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50 p-6", + "className": "min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-orange-100 p-6 md:p-8", "body": [ { "type": "div", - "className": "max-w-7xl mx-auto space-y-6", + "className": "max-w-7xl mx-auto space-y-8", "body": [ { "type": "div", - "className": "flex justify-between items-center", + "className": "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-lg", "body": [ { "type": "div", - "className": "space-y-1", + "className": "space-y-2", "body": [ { "type": "text", - "content": "E-Commerce Dashboard", - "className": "text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent" + "content": "๐Ÿ›๏ธ E-Commerce Dashboard", + "className": "text-4xl font-extrabold bg-gradient-to-r from-purple-600 via-pink-600 to-orange-600 bg-clip-text text-transparent" }, { "type": "text", "content": "Monitor your store performance in real-time", - "className": "text-gray-600" + "className": "text-gray-600 font-medium" } ] }, { "type": "flex", "direction": "row", - "gap": 2, + "gap": 3, "children": [ { "type": "button", - "label": "Download Report", + "label": "๐Ÿ“ฅ Download Report", "variant": "outline", - "className": "border-purple-200" + "className": "border-purple-200 hover:bg-purple-50 shadow-sm hover:shadow-md transition-all" }, { "type": "button", - "label": "View Details", - "className": "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700" + "label": "๐Ÿ“Š View Details", + "className": "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 shadow-lg hover:shadow-xl transition-all" } ] } @@ -53,10 +53,10 @@ "children": [ { "type": "card", - "className": "bg-gradient-to-br from-blue-500 to-blue-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow", + "className": "bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden", "body": { "type": "div", - "className": "space-y-3", + "className": "space-y-4 relative z-10", "body": [ { "type": "flex", @@ -66,35 +66,58 @@ "children": [ { "type": "text", - "content": "Total Sales", - "className": "text-sm font-medium text-blue-100" + "content": "TOTAL SALES", + "className": "text-xs font-black text-blue-100 uppercase tracking-widest" }, { - "type": "icon", - "name": "TrendingUp", - "className": "w-5 h-5 text-blue-100" + "type": "div", + "className": "p-2 bg-white/20 backdrop-blur rounded-full", + "body": [ + { + "type": "icon", + "name": "TrendingUp", + "className": "w-5 h-5 text-white" + } + ] } ] }, { "type": "text", "content": "$124,563", - "className": "text-4xl font-bold" + "className": "text-5xl font-black tracking-tight" }, { - "type": "text", - "content": "+25% from last week", - "className": "text-sm text-blue-100" + "type": "div", + "className": "flex items-center gap-2", + "body": [ + { + "type": "div", + "className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full", + "body": [ + { + "type": "text", + "content": "+25%", + "className": "text-xs font-bold" + } + ] + }, + { + "type": "text", + "content": "from last week", + "className": "text-sm text-blue-100 font-medium" + } + ] } ] } }, { "type": "card", - "className": "bg-gradient-to-br from-green-500 to-emerald-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow", + "className": "bg-gradient-to-br from-green-500 via-emerald-600 to-teal-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden", "body": { "type": "div", - "className": "space-y-3", + "className": "space-y-4 relative z-10", "body": [ { "type": "flex", @@ -104,35 +127,58 @@ "children": [ { "type": "text", - "content": "New Customers", - "className": "text-sm font-medium text-green-100" + "content": "NEW CUSTOMERS", + "className": "text-xs font-black text-green-100 uppercase tracking-widest" }, { - "type": "icon", - "name": "UserPlus", - "className": "w-5 h-5 text-green-100" + "type": "div", + "className": "p-2 bg-white/20 backdrop-blur rounded-full", + "body": [ + { + "type": "icon", + "name": "UserPlus", + "className": "w-5 h-5 text-white" + } + ] } ] }, { "type": "text", "content": "1,429", - "className": "text-4xl font-bold" + "className": "text-5xl font-black tracking-tight" }, { - "type": "text", - "content": "+18% from last week", - "className": "text-sm text-green-100" + "type": "div", + "className": "flex items-center gap-2", + "body": [ + { + "type": "div", + "className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full", + "body": [ + { + "type": "text", + "content": "+18%", + "className": "text-xs font-bold" + } + ] + }, + { + "type": "text", + "content": "from last week", + "className": "text-sm text-green-100 font-medium" + } + ] } ] } }, { "type": "card", - "className": "bg-gradient-to-br from-orange-500 to-red-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow", + "className": "bg-gradient-to-br from-orange-500 via-red-600 to-pink-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden", "body": { "type": "div", - "className": "space-y-3", + "className": "space-y-4 relative z-10", "body": [ { "type": "flex", @@ -142,12 +188,54 @@ "children": [ { "type": "text", - "content": "Pending Orders", - "className": "text-sm font-medium text-orange-100" + "content": "PENDING ORDERS", + "className": "text-xs font-black text-orange-100 uppercase tracking-widest" }, { - "type": "icon", - "name": "Clock", + "type": "div", + "className": "p-2 bg-white/20 backdrop-blur rounded-full", + "body": [ + { + "type": "icon", + "name": "Clock", + "className": "w-5 h-5 text-white" + } + ] + } + ] + }, + { + "type": "text", + "content": "342", + "className": "text-5xl font-black tracking-tight" + }, + { + "type": "div", + "className": "flex items-center gap-2", + "body": [ + { + "type": "div", + "className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full", + "body": [ + { + "type": "text", + "content": "+12", + "className": "text-xs font-bold" + } + ] + }, + { + "type": "text", + "content": "waiting for approval", + "className": "text-sm text-orange-100 font-medium" + } + ] + } + ] + } + } + ] + }, "className": "w-5 h-5 text-orange-100" } ] From 3b00948d3aac7acffda6c228a25ab965f333d990 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 14 Jan 2026 13:46:57 +0000 Subject: [PATCH 4/6] Enhance complex and data-display examples with modern styling Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- .../data/examples/complex/kanban-board.json | 142 ++++----- .../examples/complex/timeline-events.json | 163 +++++----- .../examples/data-display/alert-messages.json | 284 +++++++++--------- 3 files changed, 307 insertions(+), 282 deletions(-) diff --git a/apps/playground/src/data/examples/complex/kanban-board.json b/apps/playground/src/data/examples/complex/kanban-board.json index a9b6e39d7..d061c7fb2 100644 --- a/apps/playground/src/data/examples/complex/kanban-board.json +++ b/apps/playground/src/data/examples/complex/kanban-board.json @@ -1,80 +1,86 @@ { "type": "div", - "className": "space-y-4", + "className": "min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 p-6 md:p-8", "body": [ { "type": "div", - "className": "space-y-2", + "className": "space-y-6", "body": [ { - "type": "text", - "content": "Kanban Board", - "className": "text-2xl font-bold" + "type": "div", + "className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl", + "body": [ + { + "type": "text", + "content": "๐Ÿ“‹ Kanban Board", + "className": "text-4xl font-black bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "Drag and drop kanban board for project management - similar to Trello", + "className": "text-gray-600 font-medium text-lg" + } + ] }, { - "type": "text", - "content": "Drag and drop kanban board for project management - similar to Trello", - "className": "text-muted-foreground" - } - ] - }, - { - "type": "kanban", - "className": "h-[600px]", - "columns": [ - { "id": "todo", "title": "To Do", "color": "bg-slate-100" }, - { "id": "in-progress", "title": "In Progress", "color": "bg-blue-50" }, - { "id": "review", "title": "Review", "color": "bg-orange-50" }, - { "id": "done", "title": "Done", "color": "bg-green-50" } - ], - "data": [ - { - "id": 1, - "title": "Research Competitors", - "description": "Analyze top 3 competitors features and pricing", - "status": "todo", - "priority": "high", - "assignee": "John Doe" - }, - { - "id": 2, - "title": "Design System Draft", - "description": "Create initial tokens and core components", - "status": "in-progress", - "priority": "critical", - "assignee": "Jane Smith" - }, - { - "id": 3, - "title": "Setup CI/CD Pipeline", - "description": "Configure GitHub Actions for automated testing", - "status": "review", - "priority": "medium", - "assignee": "Bob Johnson" - }, - { - "id": 4, - "title": "User Interview Script", - "description": "Prepare questions for user research phase", - "status": "todo", - "priority": "low", - "assignee": "Alice Williams" - }, - { - "id": 5, - "title": "Database Schema", - "description": "Finalize database relationships and indexing strategy", - "status": "done", - "priority": "critical", - "assignee": "Charlie Brown" - }, - { - "id": 6, - "title": "API Documentation", - "description": "Document all endpoints using OpenAPI spec", - "status": "in-progress", - "priority": "high", - "assignee": "Diana Prince" + "type": "kanban", + "className": "h-[600px]", + "columns": [ + { "id": "todo", "title": "๐Ÿ“ To Do", "color": "bg-gradient-to-br from-slate-50 to-gray-100" }, + { "id": "in-progress", "title": "โšก In Progress", "color": "bg-gradient-to-br from-blue-50 to-cyan-100" }, + { "id": "review", "title": "๐Ÿ‘€ Review", "color": "bg-gradient-to-br from-orange-50 to-amber-100" }, + { "id": "done", "title": "โœ… Done", "color": "bg-gradient-to-br from-green-50 to-emerald-100" } + ], + "data": [ + { + "id": 1, + "title": "๐Ÿ” Research Competitors", + "description": "Analyze top 3 competitors features and pricing", + "status": "todo", + "priority": "high", + "assignee": "John Doe" + }, + { + "id": 2, + "title": "๐ŸŽจ Design System Draft", + "description": "Create initial tokens and core components", + "status": "in-progress", + "priority": "critical", + "assignee": "Jane Smith" + }, + { + "id": 3, + "title": "๐Ÿš€ Setup CI/CD Pipeline", + "description": "Configure GitHub Actions for automated testing", + "status": "review", + "priority": "medium", + "assignee": "Bob Johnson" + }, + { + "id": 4, + "title": "๐Ÿ’ฌ User Interview Script", + "description": "Prepare questions for user research phase", + "status": "todo", + "priority": "low", + "assignee": "Alice Williams" + }, + { + "id": 5, + "title": "๐Ÿ—„๏ธ Database Schema", + "description": "Finalize database relationships and indexing strategy", + "status": "done", + "priority": "critical", + "assignee": "Charlie Brown" + }, + { + "id": 6, + "title": "๐Ÿ“š API Documentation", + "description": "Document all endpoints using OpenAPI spec", + "status": "in-progress", + "priority": "high", + "assignee": "Diana Prince" + } + ] } ] } diff --git a/apps/playground/src/data/examples/complex/timeline-events.json b/apps/playground/src/data/examples/complex/timeline-events.json index b4c985476..15fea1912 100644 --- a/apps/playground/src/data/examples/complex/timeline-events.json +++ b/apps/playground/src/data/examples/complex/timeline-events.json @@ -1,88 +1,93 @@ { "type": "div", - "className": "space-y-6 max-w-4xl", + "className": "min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-6 md:p-8", "body": [ { "type": "div", - "className": "space-y-2", + "className": "max-w-4xl mx-auto space-y-8", "body": [ { - "type": "text", - "content": "Timeline Component", - "className": "text-3xl font-bold" + "type": "div", + "className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl text-center", + "body": [ + { + "type": "text", + "content": "โฑ๏ธ Timeline Component", + "className": "text-4xl font-black bg-gradient-to-r from-slate-700 via-blue-600 to-indigo-600 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "Display chronological events in a beautiful visual timeline", + "className": "text-gray-600 font-medium text-lg" + } + ] }, { - "type": "text", - "content": "Display chronological events in a visual timeline", - "className": "text-muted-foreground" - } - ] - }, - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-6", - "body": [ - { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { "type": "div", - "className": "space-y-4", + "className": "space-y-8", "body": [ { - "type": "text", - "content": "Project Timeline", - "className": "text-lg font-semibold" - }, - { - "type": "timeline", - "items": [ - { - "title": "Project Initiated", - "description": "Initial planning and team formation completed", - "timestamp": "2024-01-15", - "status": "completed" - }, + "type": "div", + "className": "space-y-6", + "body": [ { - "title": "Design Phase", - "description": "UI/UX design and architecture planning", - "timestamp": "2024-02-01", - "status": "completed" + "type": "text", + "content": "๐Ÿš€ Project Timeline", + "className": "text-2xl font-bold text-gray-900" }, { - "title": "Development Sprint 1", - "description": "Core components and infrastructure setup", - "timestamp": "2024-03-01", - "status": "completed" - }, - { - "title": "Testing & QA", - "description": "Comprehensive testing and bug fixes", - "timestamp": "2024-04-15", - "status": "in-progress" - }, - { - "title": "Production Release", - "description": "Deploy to production environment", - "timestamp": "2024-05-01", - "status": "pending" + "type": "timeline", + "items": [ + { + "title": "โœจ Project Initiated", + "description": "Initial planning and team formation completed", + "timestamp": "2024-01-15", + "status": "completed" + }, + { + "title": "๐ŸŽจ Design Phase", + "description": "UI/UX design and architecture planning", + "timestamp": "2024-02-01", + "status": "completed" + }, + { + "title": "โšก Development Sprint 1", + "description": "Core components and infrastructure setup", + "timestamp": "2024-03-01", + "status": "completed" + }, + { + "title": "๐Ÿงช Testing & QA", + "description": "Comprehensive testing and bug fixes", + "timestamp": "2024-04-15", + "status": "in-progress" + }, + { + "title": "๐Ÿš€ Production Release", + "description": "Deploy to production environment", + "timestamp": "2024-05-01", + "status": "pending" + } + ] } ] - } - ] - }, - { - "type": "separator" - }, - { - "type": "div", - "className": "space-y-4", - "body": [ + }, { - "type": "text", - "content": "User Activity", - "className": "text-lg font-semibold" + "type": "separator", + "className": "my-6" }, + { + "type": "div", + "className": "space-y-6", + "body": [ + { + "type": "text", + "content": "๐Ÿ‘ค User Activity", + "className": "text-2xl font-bold text-gray-900" + }, { "type": "timeline", "items": [ @@ -122,19 +127,19 @@ } ] } - }, - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-4", - "body": [ - { - "type": "text", - "content": "Order Tracking", - "className": "text-lg font-semibold" - }, + }, + { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { + "type": "div", + "className": "space-y-6", + "body": [ + { + "type": "text", + "content": "๐Ÿ“ฆ Order Tracking", + "className": "text-2xl font-bold text-gray-900" + }, { "type": "timeline", "orientation": "horizontal", diff --git a/apps/playground/src/data/examples/data-display/alert-messages.json b/apps/playground/src/data/examples/data-display/alert-messages.json index 1dcd0bd6f..123348ef2 100644 --- a/apps/playground/src/data/examples/data-display/alert-messages.json +++ b/apps/playground/src/data/examples/data-display/alert-messages.json @@ -1,184 +1,198 @@ { "type": "div", - "className": "space-y-6 max-w-4xl", + "className": "min-h-screen bg-gradient-to-br from-slate-50 via-gray-50 to-zinc-100 p-6 md:p-8", "body": [ { "type": "div", - "className": "space-y-2", + "className": "max-w-4xl mx-auto space-y-8", "body": [ { - "type": "text", - "content": "Alert Messages", - "className": "text-3xl font-bold" + "type": "div", + "className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl text-center", + "body": [ + { + "type": "text", + "content": "๐Ÿ”” Alert Messages", + "className": "text-4xl font-black bg-gradient-to-r from-slate-700 via-gray-600 to-zinc-600 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "Display important information with beautiful contextual styling", + "className": "text-gray-600 font-medium text-lg" + } + ] }, { - "type": "text", - "content": "Display important information with contextual styling", - "className": "text-muted-foreground" - } - ] - }, - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-6", - "body": [ - { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { "type": "div", - "className": "space-y-4", + "className": "space-y-8", "body": [ { - "type": "text", - "content": "Alert Variants", - "className": "text-lg font-semibold" + "type": "div", + "className": "space-y-6", + "body": [ + { + "type": "text", + "content": "โœจ Alert Variants", + "className": "text-2xl font-bold text-gray-900" + }, + { + "type": "alert", + "variant": "default", + "title": "๐Ÿ“Œ Default Alert", + "description": "This is a default alert message with standard styling.", + "className": "shadow-md" + }, + { + "type": "alert", + "variant": "destructive", + "title": "โŒ Error Alert", + "description": "Something went wrong. Please check your input and try again.", + "className": "shadow-md" + } + ] }, { - "type": "alert", - "variant": "default", - "title": "Default Alert", - "description": "This is a default alert message with standard styling." + "type": "separator", + "className": "my-6" }, { - "type": "alert", - "variant": "destructive", - "title": "Error Alert", - "description": "Something went wrong. Please check your input and try again." - } - ] - }, - { - "type": "separator" - }, - { - "type": "div", - "className": "space-y-4", - "body": [ + "type": "div", + "className": "space-y-6", + "body": [ + { + "type": "text", + "content": "โœ… Success Messages", + "className": "text-2xl font-bold text-gray-900" + }, + { + "type": "alert", + "variant": "default", + "title": "โœ“ Success", + "description": "Your changes have been saved successfully.", + "className": "border-green-300 bg-gradient-to-r from-green-50 to-emerald-100 text-green-900 shadow-lg hover:shadow-xl transition-shadow" + }, + { + "type": "alert", + "variant": "default", + "title": "โœ“ Profile Updated", + "description": "Your profile information has been updated.", + "className": "border-green-300 bg-gradient-to-r from-green-50 to-emerald-100 text-green-900 shadow-lg hover:shadow-xl transition-shadow" + } + ] + }, { - "type": "text", - "content": "Success Messages", - "className": "text-lg font-semibold" + "type": "separator", + "className": "my-6" }, { - "type": "alert", - "variant": "default", - "title": "โœ“ Success", - "description": "Your changes have been saved successfully.", - "className": "border-green-200 bg-green-50 text-green-800" + "type": "div", + "className": "space-y-6", + "body": [ + { + "type": "text", + "content": "โš ๏ธ Warning Messages", + "className": "text-2xl font-bold text-gray-900" + }, + { + "type": "alert", + "variant": "default", + "title": "โš  Warning", + "description": "Your session will expire in 5 minutes. Please save your work.", + "className": "border-amber-300 bg-gradient-to-r from-amber-50 to-orange-100 text-amber-900 shadow-lg hover:shadow-xl transition-shadow" + }, + { + "type": "alert", + "variant": "default", + "title": "โš  Storage Almost Full", + "description": "You've used 90% of your storage quota. Consider upgrading your plan.", + "className": "border-amber-300 bg-gradient-to-r from-amber-50 to-orange-100 text-amber-900 shadow-lg hover:shadow-xl transition-shadow" + } + ] }, { - "type": "alert", - "variant": "default", - "title": "โœ“ Profile Updated", - "description": "Your profile information has been updated.", - "className": "border-green-200 bg-green-50 text-green-800" + "type": "separator", + "className": "my-6" + }, + { + "type": "div", + "className": "space-y-6", + "body": [ + { + "type": "text", + "content": "โ„น๏ธ Info Messages", + "className": "text-2xl font-bold text-gray-900" + }, + { + "type": "alert", + "variant": "default", + "title": "โ„น Information", + "description": "New features are now available. Check out the changelog for details.", + "className": "border-blue-300 bg-gradient-to-r from-blue-50 to-cyan-100 text-blue-900 shadow-lg hover:shadow-xl transition-shadow" + }, + { + "type": "alert", + "variant": "default", + "title": "โ„น System Maintenance", + "description": "Scheduled maintenance on Sunday, 2:00 AM - 4:00 AM UTC.", + "className": "border-blue-300 bg-gradient-to-r from-blue-50 to-cyan-100 text-blue-900 shadow-lg hover:shadow-xl transition-shadow" + } + ] } ] - }, - { - "type": "separator" - }, - { + } + }, + { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { "type": "div", - "className": "space-y-4", + "className": "space-y-6", "body": [ { "type": "text", - "content": "Warning Messages", - "className": "text-lg font-semibold" + "content": "๐Ÿ“ Title Only", + "className": "text-2xl font-bold text-gray-900" }, { "type": "alert", "variant": "default", - "title": "โš  Warning", - "description": "Your session will expire in 5 minutes. Please save your work.", - "className": "border-amber-200 bg-amber-50 text-amber-800" + "title": "Quick notification without description", + "className": "shadow-md" }, { "type": "alert", - "variant": "default", - "title": "โš  Storage Almost Full", - "description": "You've used 90% of your storage quota. Consider upgrading your plan.", - "className": "border-amber-200 bg-amber-50 text-amber-800" + "variant": "destructive", + "title": "Action required", + "className": "shadow-md" } ] - }, - { - "type": "separator" - }, - { + } + }, + { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { "type": "div", - "className": "space-y-4", + "className": "space-y-6", "body": [ { "type": "text", - "content": "Info Messages", - "className": "text-lg font-semibold" + "content": "๐Ÿ’ฌ Description Only", + "className": "text-2xl font-bold text-gray-900" }, { "type": "alert", "variant": "default", - "title": "โ„น Information", - "description": "New features are now available. Check out the changelog for details.", - "className": "border-blue-200 bg-blue-50 text-blue-800" - }, - { - "type": "alert", - "variant": "default", - "title": "โ„น System Maintenance", - "description": "Scheduled maintenance on Sunday, 2:00 AM - 4:00 AM UTC.", - "className": "border-blue-200 bg-blue-50 text-blue-800" + "description": "A simple message without a title.", + "className": "shadow-md" } ] } - ] - } - }, - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-4", - "body": [ - { - "type": "text", - "content": "Title Only", - "className": "text-lg font-semibold" - }, - { - "type": "alert", - "variant": "default", - "title": "Quick notification without description" - }, - { - "type": "alert", - "variant": "destructive", - "title": "Action required" - } - ] - } - }, - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-4", - "body": [ - { - "type": "text", - "content": "Description Only", - "className": "text-lg font-semibold" - }, - { - "type": "alert", - "variant": "default", - "description": "A simple message without a title." - } - ] - } + } + ] } ] -} +} \ No newline at end of file From d0a1b14a9f0ba5bea12475d514406bfd3a98f33e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 14 Jan 2026 13:49:07 +0000 Subject: [PATCH 5/6] Enhance project management dashboard and badge examples Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- .../dashboards/project-management.json | 120 +++++++++++------- .../examples/data-display/badge-labels.json | 52 ++++---- 2 files changed, 100 insertions(+), 72 deletions(-) diff --git a/apps/playground/src/data/examples/dashboards/project-management.json b/apps/playground/src/data/examples/dashboards/project-management.json index 2bcaa1622..a41c59b9a 100644 --- a/apps/playground/src/data/examples/dashboards/project-management.json +++ b/apps/playground/src/data/examples/dashboards/project-management.json @@ -1,46 +1,46 @@ { "type": "div", - "className": "min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 p-6", + "className": "min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-gray-950 p-6 md:p-8", "body": [ { "type": "div", - "className": "max-w-7xl mx-auto space-y-6", + "className": "max-w-7xl mx-auto space-y-8", "body": [ { "type": "div", - "className": "flex justify-between items-center", + "className": "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 backdrop-blur-sm bg-white/5 p-6 rounded-2xl border border-white/10 shadow-2xl", "body": [ { "type": "div", - "className": "space-y-1", + "className": "space-y-2", "body": [ { "type": "text", - "content": "Project Management", - "className": "text-3xl font-bold text-white" + "content": "๐ŸŽฏ Project Management", + "className": "text-4xl font-extrabold bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent" }, { "type": "text", "content": "Track your team's progress and deliverables", - "className": "text-gray-400" + "className": "text-gray-400 font-medium text-lg" } ] }, { "type": "flex", "direction": "row", - "gap": 2, + "gap": 3, "children": [ { "type": "button", - "label": "New Project", - "className": "bg-indigo-600 hover:bg-indigo-700 text-white" + "label": "โž• New Project", + "className": "bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white shadow-lg hover:shadow-xl transition-all" }, { "type": "button", - "label": "Settings", + "label": "โš™๏ธ Settings", "variant": "outline", - "className": "border-gray-600 text-gray-300 hover:bg-gray-800" + "className": "border-gray-600 text-gray-300 hover:bg-gray-800 hover:border-gray-500 shadow-md transition-all" } ] } @@ -53,10 +53,10 @@ "children": [ { "type": "card", - "className": "bg-gray-800 border border-gray-700 p-6 shadow-xl", + "className": "bg-gradient-to-br from-gray-800 to-gray-900 border border-purple-500/20 p-8 shadow-2xl hover:shadow-purple-500/20 hover:-translate-y-1 transition-all duration-300", "body": { "type": "div", - "className": "space-y-3", + "className": "space-y-4", "body": [ { "type": "flex", @@ -66,35 +66,41 @@ "children": [ { "type": "text", - "content": "Active Projects", - "className": "text-sm font-medium text-gray-400" + "content": "ACTIVE PROJECTS", + "className": "text-xs font-black text-gray-400 uppercase tracking-widest" }, { - "type": "icon", - "name": "FolderOpen", - "className": "w-5 h-5 text-indigo-400" + "type": "div", + "className": "p-2 bg-indigo-500/20 rounded-full backdrop-blur", + "body": [ + { + "type": "icon", + "name": "FolderOpen", + "className": "w-5 h-5 text-indigo-400" + } + ] } ] }, { "type": "text", "content": "24", - "className": "text-4xl font-bold text-white" + "className": "text-5xl font-black text-white tracking-tight" }, { "type": "progress", "value": 75, - "className": "bg-gray-700" + "className": "bg-gray-700 [&>div]:bg-gradient-to-r [&>div]:from-indigo-500 [&>div]:to-purple-500" } ] } }, { "type": "card", - "className": "bg-gray-800 border border-gray-700 p-6 shadow-xl", + "className": "bg-gradient-to-br from-gray-800 to-gray-900 border border-green-500/20 p-8 shadow-2xl hover:shadow-green-500/20 hover:-translate-y-1 transition-all duration-300", "body": { "type": "div", - "className": "space-y-3", + "className": "space-y-4", "body": [ { "type": "flex", @@ -104,35 +110,41 @@ "children": [ { "type": "text", - "content": "Team Members", - "className": "text-sm font-medium text-gray-400" + "content": "TEAM MEMBERS", + "className": "text-xs font-black text-gray-400 uppercase tracking-widest" }, { - "type": "icon", - "name": "Users", - "className": "w-5 h-5 text-green-400" + "type": "div", + "className": "p-2 bg-green-500/20 rounded-full backdrop-blur", + "body": [ + { + "type": "icon", + "name": "Users", + "className": "w-5 h-5 text-green-400" + } + ] } ] }, { "type": "text", "content": "142", - "className": "text-4xl font-bold text-white" + "className": "text-5xl font-black text-white tracking-tight" }, { "type": "text", "content": "โ†— 12 new this month", - "className": "text-sm text-green-400" + "className": "text-sm text-green-400 font-semibold" } ] } }, { "type": "card", - "className": "bg-gray-800 border border-gray-700 p-6 shadow-xl", + "className": "bg-gradient-to-br from-gray-800 to-gray-900 border border-cyan-500/20 p-8 shadow-2xl hover:shadow-cyan-500/20 hover:-translate-y-1 transition-all duration-300", "body": { "type": "div", - "className": "space-y-3", + "className": "space-y-4", "body": [ { "type": "flex", @@ -142,35 +154,41 @@ "children": [ { "type": "text", - "content": "Tasks Completed", - "className": "text-sm font-medium text-gray-400" + "content": "TASKS COMPLETED", + "className": "text-xs font-black text-gray-400 uppercase tracking-widest" }, { - "type": "icon", - "name": "CheckCircle", - "className": "w-5 h-5 text-cyan-400" + "type": "div", + "className": "p-2 bg-cyan-500/20 rounded-full backdrop-blur", + "body": [ + { + "type": "icon", + "name": "CheckCircle", + "className": "w-5 h-5 text-cyan-400" + } + ] } ] }, { "type": "text", "content": "389", - "className": "text-4xl font-bold text-white" + "className": "text-5xl font-black text-white tracking-tight" }, { "type": "text", "content": "85% completion rate", - "className": "text-sm text-cyan-400" + "className": "text-sm text-cyan-400 font-semibold" } ] } }, { "type": "card", - "className": "bg-gray-800 border border-gray-700 p-6 shadow-xl", + "className": "bg-gradient-to-br from-gray-800 to-gray-900 border border-red-500/20 p-8 shadow-2xl hover:shadow-red-500/20 hover:-translate-y-1 transition-all duration-300", "body": { "type": "div", - "className": "space-y-3", + "className": "space-y-4", "body": [ { "type": "flex", @@ -180,25 +198,31 @@ "children": [ { "type": "text", - "content": "Overdue Tasks", - "className": "text-sm font-medium text-gray-400" + "content": "OVERDUE TASKS", + "className": "text-xs font-black text-gray-400 uppercase tracking-widest" }, { - "type": "icon", - "name": "AlertCircle", - "className": "w-5 h-5 text-red-400" + "type": "div", + "className": "p-2 bg-red-500/20 rounded-full backdrop-blur", + "body": [ + { + "type": "icon", + "name": "AlertCircle", + "className": "w-5 h-5 text-red-400" + } + ] } ] }, { "type": "text", "content": "15", - "className": "text-4xl font-bold text-white" + "className": "text-5xl font-black text-white tracking-tight" }, { "type": "text", "content": "Needs attention", - "className": "text-sm text-red-400" + "className": "text-sm text-red-400 font-semibold" } ] } diff --git a/apps/playground/src/data/examples/data-display/badge-labels.json b/apps/playground/src/data/examples/data-display/badge-labels.json index 938df8424..2f6fcc0c4 100644 --- a/apps/playground/src/data/examples/data-display/badge-labels.json +++ b/apps/playground/src/data/examples/data-display/badge-labels.json @@ -1,39 +1,43 @@ { "type": "div", - "className": "space-y-6 max-w-4xl", + "className": "min-h-screen bg-gradient-to-br from-violet-50 via-purple-50 to-fuchsia-100 p-6 md:p-8", "body": [ { "type": "div", - "className": "space-y-2", + "className": "max-w-4xl mx-auto space-y-8", "body": [ { - "type": "text", - "content": "Badge Component", - "className": "text-3xl font-bold" + "type": "div", + "className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl text-center", + "body": [ + { + "type": "text", + "content": "๐Ÿท๏ธ Badge Component", + "className": "text-4xl font-black bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 bg-clip-text text-transparent" + }, + { + "type": "text", + "content": "Beautiful labels and status indicators for modern UIs", + "className": "text-gray-600 font-medium text-lg" + } + ] }, { - "type": "text", - "content": "Labels and status indicators", - "className": "text-muted-foreground" - } - ] - }, - { - "type": "card", - "className": "p-6", - "body": { - "type": "div", - "className": "space-y-6", - "body": [ - { + "type": "card", + "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", + "body": { "type": "div", - "className": "space-y-4", + "className": "space-y-8", "body": [ { - "type": "text", - "content": "Badge Variants", - "className": "text-lg font-semibold" - }, + "type": "div", + "className": "space-y-6", + "body": [ + { + "type": "text", + "content": "โœจ Badge Variants", + "className": "text-2xl font-bold text-gray-900" + }, { "type": "flex", "direction": "row", From e166f7a811781f91dd1798381e924ed082b55168 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 14 Jan 2026 14:01:45 +0000 Subject: [PATCH 6/6] Fix JSON syntax errors in examples Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com> --- .../examples/complex/timeline-events.json | 163 ++++++++--------- .../dashboards/ecommerce-dashboard.json | 168 +++++------------- .../examples/data-display/badge-labels.json | 52 +++--- 3 files changed, 143 insertions(+), 240 deletions(-) diff --git a/apps/playground/src/data/examples/complex/timeline-events.json b/apps/playground/src/data/examples/complex/timeline-events.json index 15fea1912..b4c985476 100644 --- a/apps/playground/src/data/examples/complex/timeline-events.json +++ b/apps/playground/src/data/examples/complex/timeline-events.json @@ -1,93 +1,88 @@ { "type": "div", - "className": "min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 p-6 md:p-8", + "className": "space-y-6 max-w-4xl", "body": [ { "type": "div", - "className": "max-w-4xl mx-auto space-y-8", + "className": "space-y-2", "body": [ { - "type": "div", - "className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl text-center", - "body": [ - { - "type": "text", - "content": "โฑ๏ธ Timeline Component", - "className": "text-4xl font-black bg-gradient-to-r from-slate-700 via-blue-600 to-indigo-600 bg-clip-text text-transparent" - }, - { - "type": "text", - "content": "Display chronological events in a beautiful visual timeline", - "className": "text-gray-600 font-medium text-lg" - } - ] + "type": "text", + "content": "Timeline Component", + "className": "text-3xl font-bold" }, { - "type": "card", - "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", - "body": { + "type": "text", + "content": "Display chronological events in a visual timeline", + "className": "text-muted-foreground" + } + ] + }, + { + "type": "card", + "className": "p-6", + "body": { + "type": "div", + "className": "space-y-6", + "body": [ + { "type": "div", - "className": "space-y-8", + "className": "space-y-4", "body": [ { - "type": "div", - "className": "space-y-6", - "body": [ + "type": "text", + "content": "Project Timeline", + "className": "text-lg font-semibold" + }, + { + "type": "timeline", + "items": [ + { + "title": "Project Initiated", + "description": "Initial planning and team formation completed", + "timestamp": "2024-01-15", + "status": "completed" + }, { - "type": "text", - "content": "๐Ÿš€ Project Timeline", - "className": "text-2xl font-bold text-gray-900" + "title": "Design Phase", + "description": "UI/UX design and architecture planning", + "timestamp": "2024-02-01", + "status": "completed" }, { - "type": "timeline", - "items": [ - { - "title": "โœจ Project Initiated", - "description": "Initial planning and team formation completed", - "timestamp": "2024-01-15", - "status": "completed" - }, - { - "title": "๐ŸŽจ Design Phase", - "description": "UI/UX design and architecture planning", - "timestamp": "2024-02-01", - "status": "completed" - }, - { - "title": "โšก Development Sprint 1", - "description": "Core components and infrastructure setup", - "timestamp": "2024-03-01", - "status": "completed" - }, - { - "title": "๐Ÿงช Testing & QA", - "description": "Comprehensive testing and bug fixes", - "timestamp": "2024-04-15", - "status": "in-progress" - }, - { - "title": "๐Ÿš€ Production Release", - "description": "Deploy to production environment", - "timestamp": "2024-05-01", - "status": "pending" - } - ] + "title": "Development Sprint 1", + "description": "Core components and infrastructure setup", + "timestamp": "2024-03-01", + "status": "completed" + }, + { + "title": "Testing & QA", + "description": "Comprehensive testing and bug fixes", + "timestamp": "2024-04-15", + "status": "in-progress" + }, + { + "title": "Production Release", + "description": "Deploy to production environment", + "timestamp": "2024-05-01", + "status": "pending" } ] - }, + } + ] + }, + { + "type": "separator" + }, + { + "type": "div", + "className": "space-y-4", + "body": [ { - "type": "separator", - "className": "my-6" + "type": "text", + "content": "User Activity", + "className": "text-lg font-semibold" }, - { - "type": "div", - "className": "space-y-6", - "body": [ - { - "type": "text", - "content": "๐Ÿ‘ค User Activity", - "className": "text-2xl font-bold text-gray-900" - }, { "type": "timeline", "items": [ @@ -127,19 +122,19 @@ } ] } - }, - { - "type": "card", - "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", - "body": { - "type": "div", - "className": "space-y-6", - "body": [ - { - "type": "text", - "content": "๐Ÿ“ฆ Order Tracking", - "className": "text-2xl font-bold text-gray-900" - }, + }, + { + "type": "card", + "className": "p-6", + "body": { + "type": "div", + "className": "space-y-4", + "body": [ + { + "type": "text", + "content": "Order Tracking", + "className": "text-lg font-semibold" + }, { "type": "timeline", "orientation": "horizontal", diff --git a/apps/playground/src/data/examples/dashboards/ecommerce-dashboard.json b/apps/playground/src/data/examples/dashboards/ecommerce-dashboard.json index 5073ab5a9..7b11593a0 100644 --- a/apps/playground/src/data/examples/dashboards/ecommerce-dashboard.json +++ b/apps/playground/src/data/examples/dashboards/ecommerce-dashboard.json @@ -1,46 +1,46 @@ { "type": "div", - "className": "min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-orange-100 p-6 md:p-8", + "className": "min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50 p-6", "body": [ { "type": "div", - "className": "max-w-7xl mx-auto space-y-8", + "className": "max-w-7xl mx-auto space-y-6", "body": [ { "type": "div", - "className": "flex flex-col md:flex-row justify-between items-start md:items-center gap-4 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-lg", + "className": "flex justify-between items-center", "body": [ { "type": "div", - "className": "space-y-2", + "className": "space-y-1", "body": [ { "type": "text", - "content": "๐Ÿ›๏ธ E-Commerce Dashboard", - "className": "text-4xl font-extrabold bg-gradient-to-r from-purple-600 via-pink-600 to-orange-600 bg-clip-text text-transparent" + "content": "E-Commerce Dashboard", + "className": "text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent" }, { "type": "text", "content": "Monitor your store performance in real-time", - "className": "text-gray-600 font-medium" + "className": "text-gray-600" } ] }, { "type": "flex", "direction": "row", - "gap": 3, + "gap": 2, "children": [ { "type": "button", - "label": "๐Ÿ“ฅ Download Report", + "label": "Download Report", "variant": "outline", - "className": "border-purple-200 hover:bg-purple-50 shadow-sm hover:shadow-md transition-all" + "className": "border-purple-200" }, { "type": "button", - "label": "๐Ÿ“Š View Details", - "className": "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 shadow-lg hover:shadow-xl transition-all" + "label": "View Details", + "className": "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700" } ] } @@ -53,10 +53,10 @@ "children": [ { "type": "card", - "className": "bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden", + "className": "bg-gradient-to-br from-blue-500 to-blue-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow", "body": { "type": "div", - "className": "space-y-4 relative z-10", + "className": "space-y-3", "body": [ { "type": "flex", @@ -66,58 +66,35 @@ "children": [ { "type": "text", - "content": "TOTAL SALES", - "className": "text-xs font-black text-blue-100 uppercase tracking-widest" + "content": "Total Sales", + "className": "text-sm font-medium text-blue-100" }, { - "type": "div", - "className": "p-2 bg-white/20 backdrop-blur rounded-full", - "body": [ - { - "type": "icon", - "name": "TrendingUp", - "className": "w-5 h-5 text-white" - } - ] + "type": "icon", + "name": "TrendingUp", + "className": "w-5 h-5 text-blue-100" } ] }, { "type": "text", "content": "$124,563", - "className": "text-5xl font-black tracking-tight" + "className": "text-4xl font-bold" }, { - "type": "div", - "className": "flex items-center gap-2", - "body": [ - { - "type": "div", - "className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full", - "body": [ - { - "type": "text", - "content": "+25%", - "className": "text-xs font-bold" - } - ] - }, - { - "type": "text", - "content": "from last week", - "className": "text-sm text-blue-100 font-medium" - } - ] + "type": "text", + "content": "+25% from last week", + "className": "text-sm text-blue-100" } ] } }, { "type": "card", - "className": "bg-gradient-to-br from-green-500 via-emerald-600 to-teal-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden", + "className": "bg-gradient-to-br from-green-500 to-emerald-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow", "body": { "type": "div", - "className": "space-y-4 relative z-10", + "className": "space-y-3", "body": [ { "type": "flex", @@ -127,58 +104,35 @@ "children": [ { "type": "text", - "content": "NEW CUSTOMERS", - "className": "text-xs font-black text-green-100 uppercase tracking-widest" + "content": "New Customers", + "className": "text-sm font-medium text-green-100" }, { - "type": "div", - "className": "p-2 bg-white/20 backdrop-blur rounded-full", - "body": [ - { - "type": "icon", - "name": "UserPlus", - "className": "w-5 h-5 text-white" - } - ] + "type": "icon", + "name": "UserPlus", + "className": "w-5 h-5 text-green-100" } ] }, { "type": "text", "content": "1,429", - "className": "text-5xl font-black tracking-tight" + "className": "text-4xl font-bold" }, { - "type": "div", - "className": "flex items-center gap-2", - "body": [ - { - "type": "div", - "className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full", - "body": [ - { - "type": "text", - "content": "+18%", - "className": "text-xs font-bold" - } - ] - }, - { - "type": "text", - "content": "from last week", - "className": "text-sm text-green-100 font-medium" - } - ] + "type": "text", + "content": "+18% from last week", + "className": "text-sm text-green-100" } ] } }, { "type": "card", - "className": "bg-gradient-to-br from-orange-500 via-red-600 to-pink-600 p-8 text-white shadow-2xl hover:shadow-3xl transition-all hover:-translate-y-1 duration-300 rounded-2xl relative overflow-hidden", + "className": "bg-gradient-to-br from-orange-500 to-red-600 p-6 text-white shadow-lg hover:shadow-xl transition-shadow", "body": { "type": "div", - "className": "space-y-4 relative z-10", + "className": "space-y-3", "body": [ { "type": "flex", @@ -188,54 +142,12 @@ "children": [ { "type": "text", - "content": "PENDING ORDERS", - "className": "text-xs font-black text-orange-100 uppercase tracking-widest" + "content": "Pending Orders", + "className": "text-sm font-medium text-orange-100" }, { - "type": "div", - "className": "p-2 bg-white/20 backdrop-blur rounded-full", - "body": [ - { - "type": "icon", - "name": "Clock", - "className": "w-5 h-5 text-white" - } - ] - } - ] - }, - { - "type": "text", - "content": "342", - "className": "text-5xl font-black tracking-tight" - }, - { - "type": "div", - "className": "flex items-center gap-2", - "body": [ - { - "type": "div", - "className": "px-2 py-1 bg-white/30 backdrop-blur rounded-full", - "body": [ - { - "type": "text", - "content": "+12", - "className": "text-xs font-bold" - } - ] - }, - { - "type": "text", - "content": "waiting for approval", - "className": "text-sm text-orange-100 font-medium" - } - ] - } - ] - } - } - ] - }, + "type": "icon", + "name": "Clock", "className": "w-5 h-5 text-orange-100" } ] diff --git a/apps/playground/src/data/examples/data-display/badge-labels.json b/apps/playground/src/data/examples/data-display/badge-labels.json index 2f6fcc0c4..938df8424 100644 --- a/apps/playground/src/data/examples/data-display/badge-labels.json +++ b/apps/playground/src/data/examples/data-display/badge-labels.json @@ -1,43 +1,39 @@ { "type": "div", - "className": "min-h-screen bg-gradient-to-br from-violet-50 via-purple-50 to-fuchsia-100 p-6 md:p-8", + "className": "space-y-6 max-w-4xl", "body": [ { "type": "div", - "className": "max-w-4xl mx-auto space-y-8", + "className": "space-y-2", "body": [ { - "type": "div", - "className": "space-y-3 backdrop-blur-sm bg-white/40 p-6 rounded-2xl border border-white/60 shadow-xl text-center", - "body": [ - { - "type": "text", - "content": "๐Ÿท๏ธ Badge Component", - "className": "text-4xl font-black bg-gradient-to-r from-violet-600 via-purple-600 to-fuchsia-600 bg-clip-text text-transparent" - }, - { - "type": "text", - "content": "Beautiful labels and status indicators for modern UIs", - "className": "text-gray-600 font-medium text-lg" - } - ] + "type": "text", + "content": "Badge Component", + "className": "text-3xl font-bold" }, { - "type": "card", - "className": "p-8 shadow-2xl border-0 bg-white/90 backdrop-blur-lg rounded-2xl", - "body": { + "type": "text", + "content": "Labels and status indicators", + "className": "text-muted-foreground" + } + ] + }, + { + "type": "card", + "className": "p-6", + "body": { + "type": "div", + "className": "space-y-6", + "body": [ + { "type": "div", - "className": "space-y-8", + "className": "space-y-4", "body": [ { - "type": "div", - "className": "space-y-6", - "body": [ - { - "type": "text", - "content": "โœจ Badge Variants", - "className": "text-2xl font-bold text-gray-900" - }, + "type": "text", + "content": "Badge Variants", + "className": "text-lg font-semibold" + }, { "type": "flex", "direction": "row",