From 156e471f0b9f411ce6c55b68e65c0e99dc1a07f2 Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sun, 18 Jan 2026 13:06:22 +0000
Subject: [PATCH] Update new molecules JSON showcase examples

---
 JSON_COMPATIBILITY_IMPLEMENTATION.md    |  4 +-
 src/schemas/new-molecules-showcase.json | 76 +++++++++++++++++++------
 2 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/JSON_COMPATIBILITY_IMPLEMENTATION.md b/JSON_COMPATIBILITY_IMPLEMENTATION.md
index 68469ea..8068b0f 100644
--- a/JSON_COMPATIBILITY_IMPLEMENTATION.md
+++ b/JSON_COMPATIBILITY_IMPLEMENTATION.md
@@ -32,7 +32,7 @@ The following components have been successfully integrated into the JSON UI syst
 
 ### 4. Created Showcase Schema
 
-**File: `src/schemas/page-schemas.ts`**
+**File: `src/schemas/new-molecules-showcase.json`**
 - Created `newMoleculesShowcaseSchema` - A comprehensive demonstration page
 - Showcases each new component with realistic use cases
 - Includes data bindings and multiple variants
@@ -166,7 +166,7 @@ Here's how to use the new components in JSON schemas:
 - Implementation summary: `JSON_COMPATIBILITY_IMPLEMENTATION.md` (this file)
 - Component registry: `src/lib/json-ui/component-registry.tsx`
 - Type definitions: `src/types/json-ui.ts`
-- Showcase schema: `src/schemas/page-schemas.ts`
+- Showcase schema: `src/schemas/new-molecules-showcase.json`
 - Live demo: Navigate to JSON UI Showcase → "New Molecules" tab
 
 ## ✨ Key Achievements
diff --git a/src/schemas/new-molecules-showcase.json b/src/schemas/new-molecules-showcase.json
index 16bcd81..f4d6ae2 100644
--- a/src/schemas/new-molecules-showcase.json
+++ b/src/schemas/new-molecules-showcase.json
@@ -5,15 +5,54 @@
     "type": "single"
   },
   "dataSources": [
+    {
+      "id": "appTitle",
+      "type": "static",
+      "defaultValue": "Nova Workspace"
+    },
+    {
+      "id": "appSubtitle",
+      "type": "static",
+      "defaultValue": "Operational Control Center"
+    },
     {
       "id": "itemCount",
       "type": "static",
       "defaultValue": 42
     },
+    {
+      "id": "overdueCount",
+      "type": "static",
+      "defaultValue": 3
+    },
     {
       "id": "isLoading",
       "type": "static",
       "defaultValue": false
+    },
+    {
+      "id": "loadingMessage",
+      "type": "static",
+      "defaultValue": "Syncing workspace assets..."
+    },
+    {
+      "id": "loadingSize",
+      "type": "static",
+      "defaultValue": "lg"
+    },
+    {
+      "id": "fallbackMessage",
+      "type": "static",
+      "defaultValue": "Fetching editor state..."
+    },
+    {
+      "id": "navGroup",
+      "type": "static",
+      "defaultValue": {
+        "label": "Workspace",
+        "count": 12,
+        "isExpanded": true
+      }
     }
   ],
   "components": [
@@ -80,9 +119,9 @@
                     {
                       "id": "branding-demo",
                       "type": "AppBranding",
-                      "props": {
-                        "title": "My Amazing App",
-                        "subtitle": "Built with JSON-Powered Components"
+                      "bindings": {
+                        "title": { "source": "appTitle" },
+                        "subtitle": { "source": "appSubtitle" }
                       }
                     }
                   ]
@@ -118,7 +157,8 @@
                       "id": "label-badge-demo-1",
                       "type": "LabelWithBadge",
                       "props": {
-                        "label": "Total Items"
+                        "label": "Total Items",
+                        "badgeVariant": "secondary"
                       },
                       "bindings": {
                         "badge": { "source": "itemCount" }
@@ -128,9 +168,11 @@
                       "id": "label-badge-demo-2",
                       "type": "LabelWithBadge",
                       "props": {
-                        "label": "Warning",
-                        "badge": "3",
+                        "label": "Overdue Tasks",
                         "badgeVariant": "destructive"
+                      },
+                      "bindings": {
+                        "badge": { "source": "overdueCount" }
                       }
                     },
                     {
@@ -212,8 +254,8 @@
                         {
                           "id": "loading-fallback-demo",
                           "type": "LoadingFallback",
-                          "props": {
-                            "message": "Loading your data..."
+                          "bindings": {
+                            "message": { "source": "fallbackMessage" }
                           }
                         }
                       ]
@@ -251,16 +293,18 @@
                       "id": "loading-state-demo",
                       "type": "LoadingState",
                       "props": {
-                        "message": "Processing request...",
                         "size": "sm"
+                      },
+                      "bindings": {
+                        "message": { "source": "loadingMessage" }
                       }
                     },
                     {
                       "id": "loading-state-demo-lg",
                       "type": "LoadingState",
-                      "props": {
-                        "message": "Syncing workspace...",
-                        "size": "lg"
+                      "bindings": {
+                        "message": { "source": "loadingMessage" },
+                        "size": { "source": "loadingSize" }
                       }
                     }
                   ]
@@ -295,10 +339,10 @@
                     {
                       "id": "nav-header-demo",
                       "type": "NavigationGroupHeader",
-                      "props": {
-                        "label": "Components",
-                        "count": 24,
-                        "isExpanded": true
+                      "bindings": {
+                        "label": { "source": "navGroup", "path": "label" },
+                        "count": { "source": "navGroup", "path": "count" },
+                        "isExpanded": { "source": "navGroup", "path": "isExpanded" }
                       }
                     }
                   ]