From 8fd601357ddb4e6cc2ef14f8ac02e4256b703d76 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 11:48:06 +0000 Subject: [PATCH] Add JSON UI support for progress indicators --- json-components-registry.json | 6 +- src/lib/component-definitions.ts | 57 ++++++++++++++ src/lib/json-ui/component-registry.ts | 13 +++- src/schemas/page-schemas.ts | 103 ++++++++++++++++++++++++++ src/types/json-ui.ts | 2 +- 5 files changed, 173 insertions(+), 8 deletions(-) diff --git a/json-components-registry.json b/json-components-registry.json index bb68d7b..83989ec 100644 --- a/json-components-registry.json +++ b/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" }, { diff --git a/src/lib/component-definitions.ts b/src/lib/component-definitions.ts index 8093398..08e273d 100644 --- a/src/lib/component-definitions.ts +++ b/src/lib/component-definitions.ts @@ -6,9 +6,16 @@ export interface ComponentDefinition { category: 'layout' | 'input' | 'display' | 'navigation' | 'feedback' | 'data' | 'custom' icon: string defaultProps?: Record + propSchema?: Record 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', diff --git a/src/lib/json-ui/component-registry.ts b/src/lib/json-ui/component-registry.ts index 3e53dfe..d118e1e 100644 --- a/src/lib/json-ui/component-registry.ts +++ b/src/lib/json-ui/component-registry.ts @@ -136,10 +136,15 @@ export const shadcnComponents: UIComponentRegistry = { AvatarImage, } -export const atomComponents: UIComponentRegistry = buildRegistryFromNames( - atomRegistryNames, - AtomComponents as Record> -) +export const atomComponents: UIComponentRegistry = { + ...buildRegistryFromNames( + atomRegistryNames, + AtomComponents as Record> + ), + CircularProgress: AtomComponents.CircularProgress, + Divider: AtomComponents.Divider, + ProgressBar: AtomComponents.ProgressBar, +} export const moleculeComponents: UIComponentRegistry = buildRegistryFromNames( moleculeRegistryNames, diff --git a/src/schemas/page-schemas.ts b/src/schemas/page-schemas.ts index 46ceb50..10dc58d 100644 --- a/src/schemas/page-schemas.ts +++ b/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, + }, + }, + ], + }, + ], + }, + ], +} diff --git a/src/types/json-ui.ts b/src/types/json-ui.ts index f3ce4c3..1d17b00 100644 --- a/src/types/json-ui.ts +++ b/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'