Add progress components to JSON UI schemas

This commit is contained in:
2026-01-18 13:03:37 +00:00
parent 5f921e6193
commit 0a491528f3
3 changed files with 89 additions and 3 deletions

View File

@@ -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",

View File

@@ -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,

View File

@@ -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" }
}
}
]
}
]
}
}