Add JSON components registry and working list script

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>

json-components-registry.json

@@ -0,0 +1,512 @@
+{
+  "$schema": "./schemas/json-components-registry-schema.json",
+  "version": "1.0.0",
+  "description": "Registry of all components that can be rendered from JSON schemas",
+  "categories": {
+    "layout": "Layout and container components",
+    "input": "Form inputs and interactive controls",
+    "display": "Display and presentation components",
+    "navigation": "Navigation and routing components",
+    "feedback": "Alerts, notifications, and status indicators",
+    "data": "Data display and visualization components",
+    "custom": "Custom domain-specific components"
+  },
+  "components": [
+    {
+      "type": "div",
+      "name": "Container (div)",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Generic container element",
+      "status": "supported"
+    },
+    {
+      "type": "section",
+      "name": "Section",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic section element",
+      "status": "supported"
+    },
+    {
+      "type": "article",
+      "name": "Article",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic article element",
+      "status": "supported"
+    },
+    {
+      "type": "header",
+      "name": "Header",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic header element",
+      "status": "supported"
+    },
+    {
+      "type": "footer",
+      "name": "Footer",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic footer element",
+      "status": "supported"
+    },
+    {
+      "type": "main",
+      "name": "Main",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Semantic main content element",
+      "status": "supported"
+    },
+    {
+      "type": "Card",
+      "name": "Card",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Container card with optional header, content, and footer",
+      "status": "supported",
+      "subComponents": ["CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"]
+    },
+    {
+      "type": "Grid",
+      "name": "Grid",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Responsive grid layout",
+      "status": "supported"
+    },
+    {
+      "type": "Flex",
+      "name": "Flex",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Flexible box layout container",
+      "status": "planned"
+    },
+    {
+      "type": "Stack",
+      "name": "Stack",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Vertical or horizontal stack layout",
+      "status": "planned"
+    },
+    {
+      "type": "Container",
+      "name": "Container",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Centered container with max-width",
+      "status": "planned"
+    },
+    {
+      "type": "Button",
+      "name": "Button",
+      "category": "input",
+      "canHaveChildren": true,
+      "description": "Interactive button element",
+      "status": "supported"
+    },
+    {
+      "type": "Input",
+      "name": "Input",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Text input field",
+      "status": "supported"
+    },
+    {
+      "type": "TextArea",
+      "name": "TextArea",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Multi-line text input",
+      "status": "planned"
+    },
+    {
+      "type": "Select",
+      "name": "Select",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Dropdown select control",
+      "status": "supported"
+    },
+    {
+      "type": "Checkbox",
+      "name": "Checkbox",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Checkbox toggle control",
+      "status": "supported"
+    },
+    {
+      "type": "Radio",
+      "name": "Radio",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Radio button selection",
+      "status": "planned"
+    },
+    {
+      "type": "Switch",
+      "name": "Switch",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Toggle switch control",
+      "status": "supported"
+    },
+    {
+      "type": "Slider",
+      "name": "Slider",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Numeric range slider",
+      "status": "planned"
+    },
+    {
+      "type": "NumberInput",
+      "name": "NumberInput",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Numeric input with increment/decrement",
+      "status": "planned"
+    },
+    {
+      "type": "DatePicker",
+      "name": "DatePicker",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "Date selection input",
+      "status": "planned"
+    },
+    {
+      "type": "FileUpload",
+      "name": "FileUpload",
+      "category": "input",
+      "canHaveChildren": false,
+      "description": "File upload control",
+      "status": "planned"
+    },
+    {
+      "type": "Text",
+      "name": "Text",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Text content with typography variants",
+      "status": "supported"
+    },
+    {
+      "type": "Heading",
+      "name": "Heading",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Heading text with level (h1-h6)",
+      "status": "supported"
+    },
+    {
+      "type": "Label",
+      "name": "Label",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Form label element",
+      "status": "supported"
+    },
+    {
+      "type": "Badge",
+      "name": "Badge",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Small status or count indicator",
+      "status": "supported"
+    },
+    {
+      "type": "Tag",
+      "name": "Tag",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Removable tag or chip",
+      "status": "planned"
+    },
+    {
+      "type": "Code",
+      "name": "Code",
+      "category": "display",
+      "canHaveChildren": true,
+      "description": "Inline or block code display",
+      "status": "planned"
+    },
+    {
+      "type": "Image",
+      "name": "Image",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Image element with loading states",
+      "status": "planned"
+    },
+    {
+      "type": "Avatar",
+      "name": "Avatar",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "User avatar image",
+      "status": "planned"
+    },
+    {
+      "type": "Icon",
+      "name": "Icon",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Icon from icon library",
+      "status": "planned"
+    },
+    {
+      "type": "Separator",
+      "name": "Separator",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Visual divider line",
+      "status": "supported"
+    },
+    {
+      "type": "Divider",
+      "name": "Divider",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Visual section divider",
+      "status": "planned"
+    },
+    {
+      "type": "Progress",
+      "name": "Progress",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Progress bar indicator",
+      "status": "supported"
+    },
+    {
+      "type": "ProgressBar",
+      "name": "ProgressBar",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Linear progress bar",
+      "status": "planned"
+    },
+    {
+      "type": "CircularProgress",
+      "name": "CircularProgress",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Circular progress indicator",
+      "status": "planned"
+    },
+    {
+      "type": "Spinner",
+      "name": "Spinner",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Loading spinner",
+      "status": "planned"
+    },
+    {
+      "type": "Skeleton",
+      "name": "Skeleton",
+      "category": "display",
+      "canHaveChildren": false,
+      "description": "Loading skeleton placeholder",
+      "status": "planned"
+    },
+    {
+      "type": "Link",
+      "name": "Link",
+      "category": "navigation",
+      "canHaveChildren": true,
+      "description": "Hyperlink element",
+      "status": "planned"
+    },
+    {
+      "type": "Breadcrumb",
+      "name": "Breadcrumb",
+      "category": "navigation",
+      "canHaveChildren": false,
+      "description": "Navigation breadcrumb trail",
+      "status": "planned"
+    },
+    {
+      "type": "Tabs",
+      "name": "Tabs",
+      "category": "navigation",
+      "canHaveChildren": true,
+      "description": "Tabbed interface container",
+      "status": "supported",
+      "subComponents": ["TabsList", "TabsTrigger", "TabsContent"]
+    },
+    {
+      "type": "Alert",
+      "name": "Alert",
+      "category": "feedback",
+      "canHaveChildren": true,
+      "description": "Alert notification message",
+      "status": "planned"
+    },
+    {
+      "type": "InfoBox",
+      "name": "InfoBox",
+      "category": "feedback",
+      "canHaveChildren": true,
+      "description": "Information box with icon",
+      "status": "planned"
+    },
+    {
+      "type": "Notification",
+      "name": "Notification",
+      "category": "feedback",
+      "canHaveChildren": true,
+      "description": "Toast notification",
+      "status": "planned"
+    },
+    {
+      "type": "StatusBadge",
+      "name": "StatusBadge",
+      "category": "feedback",
+      "canHaveChildren": false,
+      "description": "Status indicator badge",
+      "status": "supported"
+    },
+    {
+      "type": "StatusIcon",
+      "name": "StatusIcon",
+      "category": "feedback",
+      "canHaveChildren": false,
+      "description": "Status indicator icon",
+      "status": "planned"
+    },
+    {
+      "type": "EmptyState",
+      "name": "EmptyState",
+      "category": "feedback",
+      "canHaveChildren": true,
+      "description": "Empty state placeholder",
+      "status": "planned"
+    },
+    {
+      "type": "ErrorBadge",
+      "name": "ErrorBadge",
+      "category": "feedback",
+      "canHaveChildren": false,
+      "description": "Error state badge",
+      "status": "planned"
+    },
+    {
+      "type": "List",
+      "name": "List",
+      "category": "data",
+      "canHaveChildren": false,
+      "description": "Generic list renderer with custom items",
+      "status": "supported"
+    },
+    {
+      "type": "DataList",
+      "name": "DataList",
+      "category": "data",
+      "canHaveChildren": false,
+      "description": "Styled data list",
+      "status": "planned"
+    },
+    {
+      "type": "Table",
+      "name": "Table",
+      "category": "data",
+      "canHaveChildren": false,
+      "description": "Data table",
+      "status": "planned"
+    },
+    {
+      "type": "DataTable",
+      "name": "DataTable",
+      "category": "data",
+      "canHaveChildren": false,
+      "description": "Advanced data table with sorting and filtering",
+      "status": "planned"
+    },
+    {
+      "type": "KeyValue",
+      "name": "KeyValue",
+      "category": "data",
+      "canHaveChildren": false,
+      "description": "Key-value pair display",
+      "status": "planned"
+    },
+    {
+      "type": "Timeline",
+      "name": "Timeline",
+      "category": "data",
+      "canHaveChildren": false,
+      "description": "Timeline visualization",
+      "status": "planned"
+    },
+    {
+      "type": "StatCard",
+      "name": "StatCard",
+      "category": "data",
+      "canHaveChildren": false,
+      "description": "Statistic card display",
+      "status": "planned"
+    },
+    {
+      "type": "MetricCard",
+      "name": "MetricCard",
+      "category": "data",
+      "canHaveChildren": false,
+      "description": "Metric display card",
+      "status": "planned"
+    },
+    {
+      "type": "DataCard",
+      "name": "DataCard",
+      "category": "custom",
+      "canHaveChildren": false,
+      "description": "Custom data display card",
+      "status": "supported"
+    },
+    {
+      "type": "SearchInput",
+      "name": "SearchInput",
+      "category": "custom",
+      "canHaveChildren": false,
+      "description": "Search input with icon",
+      "status": "supported"
+    },
+    {
+      "type": "ActionBar",
+      "name": "ActionBar",
+      "category": "custom",
+      "canHaveChildren": false,
+      "description": "Action button toolbar",
+      "status": "supported"
+    },
+    {
+      "type": "Dialog",
+      "name": "Dialog",
+      "category": "layout",
+      "canHaveChildren": true,
+      "description": "Modal dialog overlay",
+      "status": "supported"
+    }
+  ],
+  "statistics": {
+    "total": 68,
+    "supported": 23,
+    "planned": 45,
+    "byCategory": {
+      "layout": 11,
+      "input": 11,
+      "display": 17,
+      "navigation": 3,
+      "feedback": 7,
+      "data": 8,
+      "custom": 3
+    }
+  }
+}

scripts/list-json-components.cjs

@@ -6,79 +6,36 @@
  * Lists all components that can be rendered from JSON using the JSON UI system.
  * 
  * Usage:
- *   node scripts/list-json-components.js [--format=table|json]
+ *   node scripts/list-json-components.cjs [--format=table|json] [--status=all|supported|planned]
  */
 
 const fs = require('fs')
 const path = require('path')
 
-// Read the component definitions
-const componentDefsPath = path.join(process.cwd(), 'src', 'lib', 'component-definitions.ts')
+// Read the JSON components registry
+const registryPath = path.join(process.cwd(), 'json-components-registry.json')
 
-if (!fs.existsSync(componentDefsPath)) {
-  console.error('❌ Could not find src/lib/component-definitions.ts')
+if (!fs.existsSync(registryPath)) {
+  console.error('❌ Could not find json-components-registry.json')
   process.exit(1)
 }
 
-// Read the types file to get the ComponentType union
-const typesPath = path.join(process.cwd(), 'src', 'types', 'json-ui.ts')
-
-if (!fs.existsSync(typesPath)) {
-  console.error('❌ Could not find src/types/json-ui.ts')
-  process.exit(1)
-}
-
-// Parse the component definitions from the TypeScript file
-const componentDefsContent = fs.readFileSync(componentDefsPath, 'utf8')
-
-// Extract the component definitions array using regex
-const arrayMatch = componentDefsContent.match(/export const componentDefinitions: ComponentDefinition\[\] = (\[[\s\S]*?\n\])/m)
-
-if (!arrayMatch) {
-  console.error('❌ Could not parse componentDefinitions from file')
-  process.exit(1)
-}
-
-// Convert the TypeScript array to JSON by replacing single quotes with double quotes
-// and removing trailing commas
-let arrayStr = arrayMatch[1]
-  .replace(/'/g, '"')
-  .replace(/,(\s*[}\]])/g, '$1')
-
-// Parse as JSON
-let componentDefinitions
+let registry
 try {
-  componentDefinitions = JSON.parse(arrayStr)
+  registry = JSON.parse(fs.readFileSync(registryPath, 'utf8'))
 } catch (e) {
-  console.error('❌ Failed to parse component definitions:', e.message)
+  console.error('❌ Failed to parse json-components-registry.json:', e.message)
   process.exit(1)
 }
 
-// Parse the ComponentType union from types file
-const typesContent = fs.readFileSync(typesPath, 'utf8')
-const typeMatch = typesContent.match(/export type ComponentType = \n([\s\S]*?)\n\n/)
-
-let componentTypes = []
-if (typeMatch) {
-  const typeLines = typeMatch[1].split('\n')
-  componentTypes = typeLines
-    .map(line => line.trim())
-    .filter(line => line.startsWith('|'))
-    .map(line => line.replace(/^\|\s*/, '').replace(/['"\s]/g, ''))
-    .filter(t => t.length > 0)
-}
-
 const format = process.argv.find(arg => arg.startsWith('--format='))?.split('=')[1] || 'table'
+const statusFilter = process.argv.find(arg => arg.startsWith('--status='))?.split('=')[1] || 'all'
 
-// Build the output data
-const componentsList = componentDefinitions.map(comp => ({
-  type: comp.type,
-  label: comp.label,
-  category: comp.category,
-  icon: comp.icon,
-  canHaveChildren: comp.canHaveChildren || false,
-  hasDefaultProps: !!comp.defaultProps
-}))
+// Filter components by status if requested
+let componentsList = registry.components
+if (statusFilter !== 'all') {
+  componentsList = componentsList.filter(c => c.status === statusFilter)
+}
 
 if (format === 'json') {
   console.log(JSON.stringify(componentsList, null, 2))
@@ -88,14 +45,21 @@ if (format === 'json') {
 // Table format output
 console.log('\n🧩 JSON-Compatible Components\n')
 console.log('═══════════════════════════════════════════════════════════════════════════\n')
-console.log('These components can be rendered from JSON schemas using the JSON UI system.\n')
+console.log(`These components can be rendered from JSON schemas using the JSON UI system.`)
+if (statusFilter !== 'all') {
+  console.log(`\nFiltered by status: ${statusFilter}`)
+}
+console.log()
 
 // Group by category
-const categories = ['layout', 'input', 'display', 'custom']
+const categories = ['layout', 'input', 'display', 'navigation', 'feedback', 'data', 'custom']
 const categoryIcons = {
   layout: '📐',
   input: '⌨️ ',
   display: '🎨',
+  navigation: '🧭',
+  feedback: '💬',
+  data: '📊',
   custom: '⚡'
 }
 
@@ -109,42 +73,46 @@ categories.forEach(category => {
   
   categoryComps.forEach(comp => {
     const children = comp.canHaveChildren ? '👶 Can have children' : '➖ No children'
-    const defaults = comp.hasDefaultProps ? '✓' : '✗'
+    const statusIcon = comp.status === 'supported' ? '✅' : '📋'
+    const subComps = comp.subComponents ? ` (includes: ${comp.subComponents.join(', ')})` : ''
     
-    console.log(`  • ${comp.label} (${comp.type})`)
-    console.log(`    Icon: ${comp.icon}`)
+    console.log(`  ${statusIcon} ${comp.name} (${comp.type})`)
+    console.log(`    ${comp.description}`)
     console.log(`    ${children}`)
-    console.log(`    Default Props: ${defaults}`)
+    if (comp.subComponents) {
+      console.log(`    Sub-components: ${comp.subComponents.join(', ')}`)
+    }
     console.log('')
   })
 })
 
 console.log('═══════════════════════════════════════════════════════════════════════════')
 console.log(`\nTotal Components: ${componentsList.length}`)
-console.log(`By Category:`)
+
+if (statusFilter === 'all') {
+  const supported = componentsList.filter(c => c.status === 'supported').length
+  const planned = componentsList.filter(c => c.status === 'planned').length
+  console.log(`\nBy Status:`)
+  console.log(`  ✅ Supported: ${supported}`)
+  console.log(`  📋 Planned: ${planned}`)
+}
+
+console.log(`\nBy Category:`)
 categories.forEach(cat => {
   const count = componentsList.filter(c => c.category === cat).length
   if (count > 0) {
-    console.log(`  ${cat}: ${count}`)
+    console.log(`  ${categoryIcons[cat]} ${cat}: ${count}`)
   }
 })
 
 console.log(`\nComponents with children support: ${componentsList.filter(c => c.canHaveChildren).length}`)
-console.log(`Components with default props: ${componentsList.filter(c => c.hasDefaultProps).length}`)
 
 console.log('\n💡 Tips:')
-console.log('  • These components are defined in src/lib/component-definitions.ts')
-console.log('  • Component types are listed in src/types/json-ui.ts')
-console.log('  • Component registry is in src/lib/json-ui/component-registry.tsx')
+console.log('  • Full registry in json-components-registry.json')
+console.log('  • Component types defined in src/types/json-ui.ts')
+console.log('  • Component registry in src/lib/json-ui/component-registry.tsx')
+console.log('  • Component definitions in src/lib/component-definitions.ts')
 console.log('  • Run with --format=json for JSON output')
-console.log('')
-
-// List all available ComponentTypes
-console.log('\n📝 Available ComponentTypes:\n')
-console.log('───────────────────────────────────────────────────────────────────────────')
-componentTypes.forEach(type => {
-  const isDefined = componentsList.some(c => c.type === type)
-  const status = isDefined ? '✓' : '⚠️ '
-  console.log(`  ${status} ${type}`)
-})
+console.log('  • Run with --status=supported to see only supported components')
+console.log('  • Run with --status=planned to see only planned components')
 console.log('')