From b0aedbb0bdc5a6ffb22bfba6ee56dda46cdb6bfc Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sun, 18 Jan 2026 11:55:56 +0000 Subject: [PATCH] Add JSON UI support for progress and divider atoms --- json-components-registry.json | 6 +- src/components/JSONUIShowcasePage.tsx | 1 + src/lib/component-definitions.ts | 122 ++++++++++++++++++++++++++ src/lib/json-ui/component-registry.ts | 3 + src/schemas/page-schemas.json | 83 ++++++++++++++++++ src/types/json-ui.ts | 1 + 6 files changed, 213 insertions(+), 3 deletions(-) diff --git a/json-components-registry.json b/json-components-registry.json index bc0676f..ff24740 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/components/JSONUIShowcasePage.tsx b/src/components/JSONUIShowcasePage.tsx index 1926584..448c919 100644 --- a/src/components/JSONUIShowcasePage.tsx +++ b/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 ( diff --git a/src/lib/component-definitions.ts b/src/lib/component-definitions.ts index c607634..cb5825b 100644 --- a/src/lib/component-definitions.ts +++ b/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', diff --git a/src/lib/json-ui/component-registry.ts b/src/lib/json-ui/component-registry.ts index 6206321..ec5783a 100644 --- a/src/lib/json-ui/component-registry.ts +++ b/src/lib/json-ui/component-registry.ts @@ -141,9 +141,12 @@ export const atomComponents: UIComponentRegistry = { atomRegistryNames, AtomComponents as Record> ), + CircularProgress: (AtomComponents as Record>).CircularProgress, + Divider: (AtomComponents as Record>).Divider, DataList: (AtomComponents as Record>).DataList, DataTable: (AtomComponents as Record>).DataTable, MetricCard: (AtomComponents as Record>).MetricCard, + ProgressBar: (AtomComponents as Record>).ProgressBar, Timeline: (AtomComponents as Record>).Timeline, } diff --git a/src/schemas/page-schemas.json b/src/schemas/page-schemas.json index 0a38f9a..8bf48c0 100644 --- a/src/schemas/page-schemas.json +++ b/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" + } + } + } + ] + } + ] + } + ] } } diff --git a/src/types/json-ui.ts b/src/types/json-ui.ts index 8c30f10..7da1b18 100644 --- a/src/types/json-ui.ts +++ b/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'