diff --git a/json-components-registry.json b/json-components-registry.json index e3f8c9c..076eb01 100644 --- a/json-components-registry.json +++ b/json-components-registry.json @@ -1088,7 +1088,7 @@ "category": "feedback", "canHaveChildren": false, "description": "Error state badge", - "status": "planned", + "status": "supported", "source": "atoms" }, { @@ -1164,7 +1164,7 @@ "category": "feedback", "canHaveChildren": true, "description": "Toast notification", - "status": "planned", + "status": "supported", "source": "atoms" }, { @@ -1201,7 +1201,7 @@ "category": "feedback", "canHaveChildren": false, "description": "Status indicator icon", - "status": "planned", + "status": "supported", "source": "atoms" }, { diff --git a/src/components/JSONUIShowcasePage.tsx b/src/components/JSONUIShowcasePage.tsx index 1cd4c08..6e7fbd6 100644 --- a/src/components/JSONUIShowcasePage.tsx +++ b/src/components/JSONUIShowcasePage.tsx @@ -25,6 +25,7 @@ export function JSONUIShowcasePage() { Atomic Components + Feedback Atoms New Molecules Data Components JSON Dashboard @@ -36,6 +37,10 @@ export function JSONUIShowcasePage() { + + + + diff --git a/src/lib/component-definitions.ts b/src/lib/component-definitions.ts index f5d9e36..85d3f5b 100644 --- a/src/lib/component-definitions.ts +++ b/src/lib/component-definitions.ts @@ -7,6 +7,23 @@ export interface ComponentDefinition { icon: string defaultProps?: Record canHaveChildren?: boolean + props?: ComponentPropDefinition[] + events?: ComponentEventDefinition[] +} + +export interface ComponentPropDefinition { + name: string + type: string + description: string + required?: boolean + defaultValue?: string + options?: string[] + supportsBinding?: boolean +} + +export interface ComponentEventDefinition { + name: string + description: string } export const componentDefinitions: ComponentDefinition[] = [ @@ -256,6 +273,107 @@ export const componentDefinitions: ComponentDefinition[] = [ icon: 'Circle', defaultProps: { status: 'active', children: 'Active' } }, + { + type: 'ErrorBadge', + label: 'Error Badge', + category: 'feedback', + icon: 'WarningCircle', + defaultProps: { count: 3, variant: 'destructive', size: 'md' }, + props: [ + { + name: 'count', + type: 'number', + description: 'Number of errors to display. Hidden when set to 0.', + required: true, + supportsBinding: true, + }, + { + name: 'variant', + type: 'string', + description: 'Visual variant for the badge.', + defaultValue: 'destructive', + options: ['default', 'destructive'], + }, + { + name: 'size', + type: 'string', + description: 'Badge size.', + defaultValue: 'md', + options: ['sm', 'md'], + }, + ], + }, + { + type: 'Notification', + label: 'Notification', + category: 'feedback', + icon: 'Info', + defaultProps: { type: 'info', title: 'Notification', message: 'Details go here.' }, + props: [ + { + name: 'type', + type: 'string', + description: 'Notification style variant.', + required: true, + options: ['info', 'success', 'warning', 'error'], + }, + { + name: 'title', + type: 'string', + description: 'Primary notification title.', + required: true, + supportsBinding: true, + }, + { + name: 'message', + type: 'string', + description: 'Optional supporting message text.', + supportsBinding: true, + }, + { + name: 'className', + type: 'string', + description: 'Optional custom classes for spacing or layout tweaks.', + }, + ], + events: [ + { + name: 'onClose', + description: 'Fires when the close button is clicked. Bind to dismiss or trigger an action.', + }, + ], + }, + { + type: 'StatusIcon', + label: 'Status Icon', + category: 'feedback', + icon: 'CheckCircle', + defaultProps: { type: 'saved', size: 14, animate: false }, + props: [ + { + name: 'type', + type: 'string', + description: 'Status icon style.', + required: true, + supportsBinding: true, + options: ['saved', 'synced'], + }, + { + name: 'size', + type: 'number', + description: 'Icon size in pixels.', + defaultValue: '14', + supportsBinding: true, + }, + { + name: 'animate', + type: 'boolean', + description: 'Applies entry animation when true.', + defaultValue: 'false', + supportsBinding: true, + }, + ], + }, // Data Components { type: 'List', diff --git a/src/types/json-ui.ts b/src/types/json-ui.ts index 5bed643..3dd53f3 100644 --- a/src/types/json-ui.ts +++ b/src/types/json-ui.ts @@ -6,6 +6,7 @@ export type ComponentType = | 'Text' | 'Heading' | 'Label' | 'List' | 'Grid' | 'Stack' | 'Flex' | 'Container' | 'Link' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton' | 'Alert' | 'InfoBox' | 'EmptyState' | 'StatusBadge' + | 'ErrorBadge' | 'Notification' | 'StatusIcon' | 'Table' | 'KeyValue' | 'StatCard' | 'DataCard' | 'SearchInput' | 'ActionBar' | 'DataList' | 'DataTable' | 'MetricCard' | 'Timeline' | 'AppBranding' | 'LabelWithBadge' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState' | 'NavigationGroupHeader'