From 0a491528f3006c4fe28e7a836ddfecd99eb70bae Mon Sep 17 00:00:00 2001
From: johndoe6345789 <john.doe6345789@gmail.com>
Date: Sun, 18 Jan 2026 13:03:37 +0000
Subject: [PATCH] Add progress components to JSON UI schemas

---
 src/lib/component-definitions.json    | 12 +++--
 src/lib/json-ui/component-registry.ts |  4 ++
 src/schemas/page-schemas.json         | 76 +++++++++++++++++++++++++++
 3 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/src/lib/component-definitions.json b/src/lib/component-definitions.json
index 9731f20..784eb4d 100644
--- a/src/lib/component-definitions.json
+++ b/src/lib/component-definitions.json
@@ -185,14 +185,20 @@
     "label": "Progress Bar",
     "category": "display",
     "icon": "ChartBar",
-    "defaultProps": { "value": 65, "size": "md", "variant": "default", "showLabel": false }
+    "defaultProps": {
+      "value": 65,
+      "max": 100,
+      "size": "md",
+      "variant": "default",
+      "showLabel": false
+    }
   },
   {
     "type": "CircularProgress",
     "label": "Circular Progress",
     "category": "display",
     "icon": "CircleNotch",
-    "defaultProps": { "value": 65, "size": "md", "showLabel": true }
+    "defaultProps": { "value": 65, "max": 100, "size": "md", "showLabel": true }
   },
   {
     "type": "Spinner",
@@ -220,7 +226,7 @@
     "label": "Divider",
     "category": "display",
     "icon": "Minus",
-    "defaultProps": { "orientation": "horizontal", "decorative": true }
+    "defaultProps": { "orientation": "horizontal", "decorative": true, "className": "" }
   },
   {
     "type": "Link",
diff --git a/src/lib/json-ui/component-registry.ts b/src/lib/json-ui/component-registry.ts
index 90df225..6d9315f 100644
--- a/src/lib/json-ui/component-registry.ts
+++ b/src/lib/json-ui/component-registry.ts
@@ -17,6 +17,7 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
 import { Skeleton as ShadcnSkeleton } from '@/components/ui/skeleton'
 import { Progress } from '@/components/ui/progress'
 import { Avatar as ShadcnAvatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { CircularProgress, Divider, ProgressBar } from '@/components/atoms'
 import * as AtomComponents from '@/components/atoms'
 import * as MoleculeComponents from '@/components/molecules'
 import * as OrganismComponents from '@/components/organisms'
@@ -175,6 +176,9 @@ export const atomComponents: UIComponentRegistry = {
     atomRegistryNames,
     AtomComponents as Record<string, ComponentType<any>>
   ),
+  CircularProgress,
+  Divider,
+  ProgressBar,
   DataList: (AtomComponents as Record<string, ComponentType<any>>).DataList,
   DataTable: (AtomComponents as Record<string, ComponentType<any>>).DataTable,
   MetricCard: (AtomComponents as Record<string, ComponentType<any>>).MetricCard,
diff --git a/src/schemas/page-schemas.json b/src/schemas/page-schemas.json
index 0a38f9a..8521334 100644
--- a/src/schemas/page-schemas.json
+++ b/src/schemas/page-schemas.json
@@ -208,5 +208,81 @@
         ]
       }
     ]
+  },
+  "progressComponentsDemoSchema": {
+    "id": "progress-components-demo",
+    "name": "Progress Components Demo",
+    "layout": {
+      "type": "single"
+    },
+    "dataSources": [
+      {
+        "id": "progressValues",
+        "type": "static",
+        "defaultValue": {
+          "linear": 72,
+          "circular": 48,
+          "max": 100
+        }
+      }
+    ],
+    "components": [
+      {
+        "id": "progress-components-root",
+        "type": "div",
+        "props": {
+          "className": "space-y-6 rounded-lg border border-border bg-card p-6"
+        },
+        "children": [
+          {
+            "id": "progress-components-title",
+            "type": "Heading",
+            "props": {
+              "className": "text-xl font-semibold",
+              "children": "Progress Indicators"
+            }
+          },
+          {
+            "id": "progress-components-divider-top",
+            "type": "Divider",
+            "props": {
+              "orientation": "horizontal"
+            }
+          },
+          {
+            "id": "progress-components-linear",
+            "type": "ProgressBar",
+            "props": {
+              "size": "md",
+              "variant": "accent",
+              "showLabel": true
+            },
+            "bindings": {
+              "value": { "source": "progressValues", "sourceType": "data", "path": "linear" },
+              "max": { "source": "progressValues", "sourceType": "data", "path": "max" }
+            }
+          },
+          {
+            "id": "progress-components-divider-middle",
+            "type": "Divider",
+            "props": {
+              "orientation": "horizontal"
+            }
+          },
+          {
+            "id": "progress-components-circular",
+            "type": "CircularProgress",
+            "props": {
+              "size": "md",
+              "showLabel": true
+            },
+            "bindings": {
+              "value": { "source": "progressValues", "sourceType": "data", "path": "circular" },
+              "max": { "source": "progressValues", "sourceType": "data", "path": "max" }
+            }
+          }
+        ]
+      }
+    ]
   }
 }