Add JSON UI support for progress and divider atoms

json-components-registry.json

@@ -611,7 +611,7 @@
       "category": "display",
       "canHaveChildren": false,
       "description": "Circular progress indicator",
-      "status": "planned",
+      "status": "supported",
       "source": "atoms"
     },
     {
@@ -629,7 +629,7 @@
       "category": "display",
       "canHaveChildren": false,
       "description": "Visual section divider",
-      "status": "planned",
+      "status": "supported",
       "source": "atoms"
     },
     {
@@ -719,7 +719,7 @@
       "category": "display",
       "canHaveChildren": false,
       "description": "Linear progress bar",
-      "status": "planned",
+      "status": "supported",
       "source": "atoms"
     },
     {

src/components/JSONUIShowcasePage.tsx

@@ -10,6 +10,7 @@ import newMoleculesShowcaseJson from '@/schemas/new-molecules-showcase.json'
 const todoListSchema = hydrateSchema(todoListJson)
 const newMoleculesShowcaseSchema = hydrateSchema(newMoleculesShowcaseJson)
 const dataComponentsDemoSchema = hydrateSchema(pageSchemasJson.dataComponentsDemoSchema)
+const feedbackAtomsDemoSchema = hydrateSchema(pageSchemasJson.feedbackAtomsDemoSchema)
 
 export function JSONUIShowcasePage() {
   return (

src/lib/component-definitions.ts

@@ -211,6 +211,101 @@ export const componentDefinitions: ComponentDefinition[] = [
     icon: 'CircleNotch',
     defaultProps: { value: 50 }
   },
+  {
+    type: 'ProgressBar',
+    label: 'Progress Bar',
+    category: 'display',
+    icon: 'CircleNotch',
+    defaultProps: { value: 50, max: 100, size: 'md', variant: 'default', showLabel: false },
+    props: [
+      {
+        name: 'value',
+        type: 'number',
+        description: 'Current progress value.',
+        required: true,
+        supportsBinding: true,
+      },
+      {
+        name: 'max',
+        type: 'number',
+        description: 'Maximum progress value.',
+        defaultValue: '100',
+        supportsBinding: true,
+      },
+      {
+        name: 'size',
+        type: 'string',
+        description: 'Height preset for the bar.',
+        defaultValue: 'md',
+        options: ['sm', 'md', 'lg'],
+      },
+      {
+        name: 'variant',
+        type: 'string',
+        description: 'Color variant for the bar.',
+        defaultValue: 'default',
+        options: ['default', 'accent', 'destructive'],
+      },
+      {
+        name: 'showLabel',
+        type: 'boolean',
+        description: 'Whether to render the percentage label below the bar.',
+        defaultValue: 'false',
+      },
+      {
+        name: 'className',
+        type: 'string',
+        description: 'Optional custom classes for the bar container.',
+      },
+    ],
+  },
+  {
+    type: 'CircularProgress',
+    label: 'Circular Progress',
+    category: 'display',
+    icon: 'CircleNotch',
+    defaultProps: { value: 65, max: 100, size: 'md', showLabel: true },
+    props: [
+      {
+        name: 'value',
+        type: 'number',
+        description: 'Current progress value.',
+        required: true,
+        supportsBinding: true,
+      },
+      {
+        name: 'max',
+        type: 'number',
+        description: 'Maximum progress value.',
+        defaultValue: '100',
+        supportsBinding: true,
+      },
+      {
+        name: 'size',
+        type: 'string',
+        description: 'Size preset for the circular indicator.',
+        defaultValue: 'md',
+        options: ['sm', 'md', 'lg', 'xl'],
+      },
+      {
+        name: 'showLabel',
+        type: 'boolean',
+        description: 'Whether to show the percentage label inside the circle.',
+        defaultValue: 'true',
+      },
+      {
+        name: 'strokeWidth',
+        type: 'number',
+        description: 'Custom stroke width for the circle outline.',
+        supportsBinding: true,
+      },
+      {
+        name: 'className',
+        type: 'string',
+        description: 'Optional custom classes for the wrapper.',
+      },
+    ],
+  },
   {
     type: 'Spinner',
     label: 'Spinner',
@@ -232,6 +327,33 @@ export const componentDefinitions: ComponentDefinition[] = [
     icon: 'Minus',
     defaultProps: {}
   },
+  {
+    type: 'Divider',
+    label: 'Divider',
+    category: 'display',
+    icon: 'Minus',
+    defaultProps: { orientation: 'horizontal', decorative: true },
+    props: [
+      {
+        name: 'orientation',
+        type: 'string',
+        description: 'Layout direction for the divider.',
+        defaultValue: 'horizontal',
+        options: ['horizontal', 'vertical'],
+      },
+      {
+        name: 'decorative',
+        type: 'boolean',
+        description: 'Whether the divider is purely decorative.',
+        defaultValue: 'true',
+      },
+      {
+        name: 'className',
+        type: 'string',
+        description: 'Optional custom classes for spacing or styling.',
+      },
+    ],
+  },
   // Navigation Components
   {
     type: 'Link',

src/lib/json-ui/component-registry.ts

@@ -141,9 +141,12 @@ export const atomComponents: UIComponentRegistry = {
     atomRegistryNames,
     AtomComponents as Record<string, ComponentType<any>>
   ),
+  CircularProgress: (AtomComponents as Record<string, ComponentType<any>>).CircularProgress,
+  Divider: (AtomComponents as Record<string, ComponentType<any>>).Divider,
   DataList: (AtomComponents as Record<string, ComponentType<any>>).DataList,
   DataTable: (AtomComponents as Record<string, ComponentType<any>>).DataTable,
   MetricCard: (AtomComponents as Record<string, ComponentType<any>>).MetricCard,
+  ProgressBar: (AtomComponents as Record<string, ComponentType<any>>).ProgressBar,
   Timeline: (AtomComponents as Record<string, ComponentType<any>>).Timeline,
 }
 

src/schemas/page-schemas.json

@@ -208,5 +208,88 @@
         ]
       }
     ]
+  },
+  "feedbackAtomsDemoSchema": {
+    "id": "feedback-atoms-demo",
+    "name": "Feedback Atoms Demo",
+    "layout": {
+      "type": "single"
+    },
+    "dataSources": [
+      {
+        "id": "circularProgressValue",
+        "type": "static",
+        "defaultValue": 72
+      },
+      {
+        "id": "progressBarValue",
+        "type": "static",
+        "defaultValue": 42
+      }
+    ],
+    "components": [
+      {
+        "id": "feedback-atoms-root",
+        "type": "div",
+        "props": {
+          "className": "space-y-6 rounded-lg border border-border bg-card p-6"
+        },
+        "children": [
+          {
+            "id": "feedback-atoms-title",
+            "type": "Heading",
+            "props": {
+              "className": "text-xl font-semibold",
+              "children": "Feedback Atoms"
+            }
+          },
+          {
+            "id": "feedback-atoms-divider",
+            "type": "Divider",
+            "props": {
+              "className": "my-2"
+            }
+          },
+          {
+            "id": "feedback-atoms-progress-grid",
+            "type": "div",
+            "props": {
+              "className": "grid gap-6 md:grid-cols-2"
+            },
+            "children": [
+              {
+                "id": "feedback-atoms-circular-progress",
+                "type": "CircularProgress",
+                "props": {
+                  "size": "lg",
+                  "showLabel": true
+                },
+                "bindings": {
+                  "value": {
+                    "source": "circularProgressValue",
+                    "sourceType": "data"
+                  }
+                }
+              },
+              {
+                "id": "feedback-atoms-progress-bar",
+                "type": "ProgressBar",
+                "props": {
+                  "variant": "accent",
+                  "size": "lg",
+                  "showLabel": true
+                },
+                "bindings": {
+                  "value": {
+                    "source": "progressBarValue",
+                    "sourceType": "data"
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
   }
 }

src/types/json-ui.ts

@@ -7,6 +7,7 @@ export type ComponentType =
   | 'Link' | 'Breadcrumb' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'
   | 'Alert' | 'InfoBox' | 'EmptyState' | 'StatusBadge' 
   | 'ErrorBadge' | 'Notification' | 'StatusIcon'
+  | 'CircularProgress' | 'Divider' | 'ProgressBar'
   | 'Table' | 'KeyValue' | 'StatCard' | 'DataCard' | 'SearchInput' | 'ActionBar'
   | 'DataList' | 'DataTable' | 'MetricCard' | 'Timeline'
   | 'AppBranding' | 'LabelWithBadge' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState' | 'NavigationGroupHeader'