Merge pull request #58 from johndoe6345789/codex/refactor-jsondemopage-to-improve-structure

Refactor JSON demo and showcase into configs and smaller components

src/config/json-demo.json

@@ -0,0 +1,102 @@
+{
+  "copy": {
+    "toastAdded": "Todo added!",
+    "toastDeleted": "Todo deleted",
+    "deleteButtonLabel": "×"
+  },
+  "initialTodos": [
+    { "id": 1, "text": "Design JSON schema", "completed": true },
+    { "id": 2, "text": "Build atomic components", "completed": false },
+    { "id": 3, "text": "Create custom hooks", "completed": false }
+  ],
+  "schema": {
+    "id": "json-demo-page",
+    "type": "div",
+    "className": "h-full overflow-auto p-6",
+    "children": [
+      {
+        "id": "header",
+        "type": "div",
+        "className": "mb-6",
+        "children": [
+          {
+            "id": "title",
+            "type": "h1",
+            "className": "text-3xl font-bold mb-2",
+            "children": "JSON-Driven UI Demo"
+          },
+          {
+            "id": "description",
+            "type": "p",
+            "className": "text-muted-foreground",
+            "children": "This entire page is built from a JSON schema - no JSX required!"
+          }
+        ]
+      },
+      {
+        "id": "main-card",
+        "type": "Card",
+        "className": "max-w-2xl",
+        "children": [
+          {
+            "id": "card-header",
+            "type": "CardHeader",
+            "children": [
+              {
+                "id": "card-title",
+                "type": "CardTitle",
+                "children": "Todo List"
+              },
+              {
+                "id": "card-description",
+                "type": "CardDescription",
+                "children": "Manage your tasks with JSON-powered UI"
+              }
+            ]
+          },
+          {
+            "id": "card-content",
+            "type": "CardContent",
+            "className": "space-y-4",
+            "children": [
+              {
+                "id": "input-group",
+                "type": "div",
+                "className": "flex gap-2",
+                "children": [
+                  {
+                    "id": "todo-input",
+                    "type": "Input",
+                    "props": {
+                      "placeholder": "Enter a new todo...",
+                      "value": ""
+                    },
+                    "events": {
+                      "onChange": { "action": "update-input" }
+                    }
+                  },
+                  {
+                    "id": "add-button",
+                    "type": "Button",
+                    "props": {
+                      "children": "Add"
+                    },
+                    "events": {
+                      "onClick": { "action": "add-todo" }
+                    }
+                  }
+                ]
+              },
+              {
+                "id": "todo-list",
+                "type": "div",
+                "className": "space-y-2",
+                "children": []
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

src/config/json-page-renderer.json

@@ -0,0 +1,3 @@
+{
+  "fallbackText": "No schema provided"
+}

src/config/ui-examples/showcase.json

@@ -0,0 +1,59 @@
+{
+  "defaultExampleKey": "dashboard",
+  "header": {
+    "title": "JSON UI System",
+    "description": "Build complex UIs from declarative JSON configurations",
+    "badge": "EXPERIMENTAL"
+  },
+  "tabs": {
+    "showJsonLabel": "Show JSON",
+    "showPreviewLabel": "Show Preview",
+    "jsonTitle": "JSON Configuration"
+  },
+  "examples": [
+    {
+      "key": "dashboard",
+      "name": "Dashboard",
+      "description": "Complete dashboard with stats, activity feed, and quick actions",
+      "icon": "ChartBar",
+      "configKey": "dashboard"
+    },
+    {
+      "key": "form",
+      "name": "Form",
+      "description": "Dynamic form with validation and data binding",
+      "icon": "ListBullets",
+      "configKey": "form"
+    },
+    {
+      "key": "table",
+      "name": "Data Table",
+      "description": "Interactive table with row actions and looping",
+      "icon": "Table",
+      "configKey": "table"
+    },
+    {
+      "key": "settings",
+      "name": "Settings",
+      "description": "Tabbed settings panel with switches and selections",
+      "icon": "Gear",
+      "configKey": "settings"
+    }
+  ],
+  "footer": {
+    "items": [
+      {
+        "label": "Fully declarative - no React code needed",
+        "colorClass": "bg-green-500"
+      },
+      {
+        "label": "Data binding with automatic updates",
+        "colorClass": "bg-blue-500"
+      },
+      {
+        "label": "Event handlers and actions",
+        "colorClass": "bg-purple-500"
+      }
+    ]
+  }
+}