Add JSON UI support for progress indicators

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/lib/component-definitions.ts

@@ -6,9 +6,16 @@ export interface ComponentDefinition {
   category: 'layout' | 'input' | 'display' | 'navigation' | 'feedback' | 'data' | 'custom'
   icon: string
   defaultProps?: Record<string, any>
+  propSchema?: Record<string, ComponentPropSchema>
   canHaveChildren?: boolean
 }
 
+export interface ComponentPropSchema {
+  type: 'string' | 'number' | 'boolean' | 'enum'
+  description?: string
+  options?: string[]
+}
+
 export const componentDefinitions: ComponentDefinition[] = [
   // Layout Components
   {
@@ -194,6 +201,40 @@ export const componentDefinitions: ComponentDefinition[] = [
     icon: 'CircleNotch',
     defaultProps: { value: 50 }
   },
+  {
+    type: 'ProgressBar',
+    label: 'Progress Bar',
+    category: 'display',
+    icon: 'ChartBar',
+    defaultProps: { value: 60, max: 100, size: 'md', variant: 'default', showLabel: false },
+    propSchema: {
+      value: { type: 'number', description: 'Current progress value.' },
+      max: { type: 'number', description: 'Maximum progress value.' },
+      size: { type: 'enum', options: ['sm', 'md', 'lg'], description: 'Height size of the bar.' },
+      variant: {
+        type: 'enum',
+        options: ['default', 'accent', 'destructive'],
+        description: 'Color variant for the progress fill.',
+      },
+      showLabel: { type: 'boolean', description: 'Show percentage text below the bar.' },
+      className: { type: 'string', description: 'Additional class names for the container.' },
+    },
+  },
+  {
+    type: 'CircularProgress',
+    label: 'Circular Progress',
+    category: 'display',
+    icon: 'CircleNotch',
+    defaultProps: { value: 72, max: 100, size: 'md', showLabel: true },
+    propSchema: {
+      value: { type: 'number', description: 'Current progress value.' },
+      max: { type: 'number', description: 'Maximum progress value.' },
+      size: { type: 'enum', options: ['sm', 'md', 'lg', 'xl'], description: 'Rendered size.' },
+      showLabel: { type: 'boolean', description: 'Show percentage label in the center.' },
+      strokeWidth: { type: 'number', description: 'Override the default stroke width.' },
+      className: { type: 'string', description: 'Additional class names for the wrapper.' },
+    },
+  },
   {
     type: 'Spinner',
     label: 'Spinner',
@@ -215,6 +256,22 @@ export const componentDefinitions: ComponentDefinition[] = [
     icon: 'Minus',
     defaultProps: {}
   },
+  {
+    type: 'Divider',
+    label: 'Divider',
+    category: 'display',
+    icon: 'Minus',
+    defaultProps: { orientation: 'horizontal', decorative: true },
+    propSchema: {
+      orientation: {
+        type: 'enum',
+        options: ['horizontal', 'vertical'],
+        description: 'Divider orientation.',
+      },
+      decorative: { type: 'boolean', description: 'Whether the divider is decorative.' },
+      className: { type: 'string', description: 'Additional class names for the divider.' },
+    },
+  },
   // Navigation Components
   {
     type: 'Link',

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

@@ -136,10 +136,15 @@ export const shadcnComponents: UIComponentRegistry = {
   AvatarImage,
 }
 
-export const atomComponents: UIComponentRegistry = buildRegistryFromNames(
+export const atomComponents: UIComponentRegistry = {
-  atomRegistryNames,
+  ...buildRegistryFromNames(
-  AtomComponents as Record<string, ComponentType<any>>
+    atomRegistryNames,
-)
+    AtomComponents as Record<string, ComponentType<any>>
+  ),
+  CircularProgress: AtomComponents.CircularProgress,
+  Divider: AtomComponents.Divider,
+  ProgressBar: AtomComponents.ProgressBar,
+}
 
 export const moleculeComponents: UIComponentRegistry = buildRegistryFromNames(
   moleculeRegistryNames,

src/schemas/page-schemas.ts

@@ -73,3 +73,106 @@ export const stateBindingsDemoSchema: PageSchema = {
     },
   ],
 }
+
+export const progressIndicatorsDemoSchema: PageSchema = {
+  id: 'progress-indicators-demo',
+  name: 'Progress Indicators Demo',
+  layout: {
+    type: 'single',
+  },
+  dataSources: [],
+  components: [
+    {
+      id: 'progress-demo-root',
+      type: 'div',
+      props: {
+        className: 'space-y-6 rounded-lg border border-border bg-card p-6',
+      },
+      children: [
+        {
+          id: 'progress-demo-title',
+          type: 'Heading',
+          props: {
+            className: 'text-xl font-semibold',
+            children: 'Progress Indicators',
+          },
+        },
+        {
+          id: 'progress-demo-subtitle',
+          type: 'Text',
+          props: {
+            className: 'text-sm text-muted-foreground',
+            children: 'Circular and linear progress components with JSON-friendly props.',
+          },
+        },
+        {
+          id: 'progress-demo-circular-row',
+          type: 'div',
+          props: {
+            className: 'flex flex-wrap items-center gap-6',
+          },
+          children: [
+            {
+              id: 'progress-demo-circular-primary',
+              type: 'CircularProgress',
+              props: {
+                value: 72,
+                size: 'md',
+                showLabel: true,
+              },
+            },
+            {
+              id: 'progress-demo-circular-large',
+              type: 'CircularProgress',
+              props: {
+                value: 45,
+                size: 'lg',
+                showLabel: true,
+              },
+            },
+          ],
+        },
+        {
+          id: 'progress-demo-divider',
+          type: 'Divider',
+          props: {
+            orientation: 'horizontal',
+            decorative: true,
+            className: 'my-2',
+          },
+        },
+        {
+          id: 'progress-demo-linear-stack',
+          type: 'div',
+          props: {
+            className: 'space-y-4',
+          },
+          children: [
+            {
+              id: 'progress-demo-linear-accent',
+              type: 'ProgressBar',
+              props: {
+                value: 60,
+                max: 100,
+                size: 'md',
+                variant: 'accent',
+                showLabel: true,
+              },
+            },
+            {
+              id: 'progress-demo-linear-compact',
+              type: 'ProgressBar',
+              props: {
+                value: 35,
+                max: 100,
+                size: 'sm',
+                variant: 'default',
+                showLabel: false,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}

src/types/json-ui.ts

@@ -2,7 +2,7 @@ export type ComponentType =
   | 'div' | 'section' | 'article' | 'header' | 'footer' | 'main'
   | 'Button' | 'Card' | 'CardHeader' | 'CardTitle' | 'CardDescription' | 'CardContent' | 'CardFooter'
   | 'Input' | 'TextArea' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'NumberInput'
-  | 'Badge' | 'Progress' | 'Separator' | 'Tabs' | 'TabsContent' | 'TabsList' | 'TabsTrigger' | 'Dialog'
+  | 'Badge' | 'CircularProgress' | 'Divider' | 'Progress' | 'ProgressBar' | 'Separator' | 'Tabs' | 'TabsContent' | 'TabsList' | 'TabsTrigger' | 'Dialog'
   | 'Text' | 'Heading' | 'Label' | 'List' | 'Grid' | 'Stack' | 'Flex' | 'Container'
   | 'Link' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'
   | 'Alert' | 'InfoBox' | 'EmptyState' | 'StatusBadge'