Add script to list JSON-compatible components

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
2026-04-24 13:44:54 +00:00 · 2026-01-17 21:49:59 +00:00
parent 4a78002ac2
commit 933f6ed1a0
2 changed files with 152 additions and 1 deletions
--- a/scripts/list-json-components.cjs
+++ b/scripts/list-json-components.cjs
@@ -0,0 +1,150 @@
+#!/usr/bin/env node
+
+/**
+ * JSON Components List Script
+ * 
+ * Lists all components that can be rendered from JSON using the JSON UI system.
+ * 
+ * Usage:
+ *   node scripts/list-json-components.js [--format=table|json]
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+// Read the component definitions
+const componentDefsPath = path.join(process.cwd(), 'src', 'lib', 'component-definitions.ts')
+
+if (!fs.existsSync(componentDefsPath)) {
+  console.error('❌ Could not find src/lib/component-definitions.ts')
+  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
+try {
+  componentDefinitions = JSON.parse(arrayStr)
+} catch (e) {
+  console.error('❌ Failed to parse component definitions:', 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'
+
+// 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
+}))
+
+if (format === 'json') {
+  console.log(JSON.stringify(componentsList, null, 2))
+  process.exit(0)
+}
+
+// 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')
+
+// Group by category
+const categories = ['layout', 'input', 'display', 'custom']
+const categoryIcons = {
+  layout: '📐',
+  input: '⌨️ ',
+  display: '🎨',
+  custom: '⚡'
+}
+
+categories.forEach(category => {
+  const categoryComps = componentsList.filter(c => c.category === category)
+  
+  if (categoryComps.length === 0) return
+  
+  console.log(`\n${categoryIcons[category]} ${category.toUpperCase()}\n`)
+  console.log('───────────────────────────────────────────────────────────────────────────')
+  
+  categoryComps.forEach(comp => {
+    const children = comp.canHaveChildren ? '👶 Can have children' : '➖ No children'
+    const defaults = comp.hasDefaultProps ? '✓' : '✗'
+    
+    console.log(`  • ${comp.label} (${comp.type})`)
+    console.log(`    Icon: ${comp.icon}`)
+    console.log(`    ${children}`)
+    console.log(`    Default Props: ${defaults}`)
+    console.log('')
+  })
+})
+
+console.log('═══════════════════════════════════════════════════════════════════════════')
+console.log(`\nTotal Components: ${componentsList.length}`)
+console.log(`By Category:`)
+categories.forEach(cat => {
+  const count = componentsList.filter(c => c.category === cat).length
+  if (count > 0) {
+    console.log(`  ${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('  • 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('')