Merge branch 'main' into codex/update-component-registry-paths-and-sources

2026-04-26 22:54:54 +00:00 · 2026-01-18 18:48:07 +00:00
parent 85fb859131 d408ceff79
commit d351f05b14
10 changed files with 409 additions and 61 deletions
--- a/src/components/JSONUIShowcase.tsx
+++ b/src/components/JSONUIShowcase.tsx
@@ -1,24 +1,11 @@
 import { useMemo, useState } from 'react'
 import showcaseCopy from '@/config/ui-examples/showcase.json'
-import dashboardExample from '@/config/ui-examples/dashboard.json'
-import formExample from '@/config/ui-examples/form.json'
-import tableExample from '@/config/ui-examples/table.json'
-import listTableTimelineExample from '@/config/ui-examples/list-table-timeline.json'
-import settingsExample from '@/config/ui-examples/settings.json'
 import { FileCode, ChartBar, ListBullets, Table, Gear, Clock } from '@phosphor-icons/react'
 import { ShowcaseHeader } from '@/components/json-ui-showcase/ShowcaseHeader'
 import { ShowcaseTabs } from '@/components/json-ui-showcase/ShowcaseTabs'
 import { ShowcaseFooter } from '@/components/json-ui-showcase/ShowcaseFooter'
 import { ShowcaseExample } from '@/components/json-ui-showcase/types'

-const exampleConfigs = {
-  dashboard: dashboardExample,
-  form: formExample,
-  table: tableExample,
-  'list-table-timeline': listTableTimelineExample,
-  settings: settingsExample,
-}
-
 const exampleIcons = {
  ChartBar,
  ListBullets,
@@ -27,14 +14,22 @@ const exampleIcons = {
  Gear,
 }

+const configModules = import.meta.glob('/src/config/ui-examples/*.json', { eager: true })
+
+const resolveExampleConfig = (configPath: string) => {
+  const moduleEntry = configModules[configPath] as { default: ShowcaseExample['config'] } | undefined
+
+  return moduleEntry?.default ?? {}
+}
+
 export function JSONUIShowcase() {
  const [selectedExample, setSelectedExample] = useState(showcaseCopy.defaultExampleKey)
  const [showJSON, setShowJSON] = useState(false)

  const examples = useMemo<ShowcaseExample[]>(() => {
    return showcaseCopy.examples.map((example) => {
-      const icon = exampleIcons[example.icon as keyof typeof exampleIcons] || FileCode
-      const config = exampleConfigs[example.configKey as keyof typeof exampleConfigs]
+      const icon = exampleIcons[example.iconId as keyof typeof exampleIcons] || FileCode
+      const config = resolveExampleConfig(example.configPath)

      return {
        key: example.key,
--- a/src/config/ui-examples/showcase.json
+++ b/src/config/ui-examples/showcase.json
@@ -15,36 +15,36 @@
      "key": "dashboard",
      "name": "Dashboard",
      "description": "Complete dashboard with stats, activity feed, and quick actions",
-      "icon": "ChartBar",
-      "configKey": "dashboard"
+      "iconId": "ChartBar",
+      "configPath": "/src/config/ui-examples/dashboard.json"
    },
    {
      "key": "form",
      "name": "Form",
      "description": "Dynamic form with validation and data binding",
-      "icon": "ListBullets",
-      "configKey": "form"
+      "iconId": "ListBullets",
+      "configPath": "/src/config/ui-examples/form.json"
    },
    {
      "key": "table",
      "name": "Data Table",
      "description": "Interactive table with row actions and looping",
-      "icon": "Table",
-      "configKey": "table"
+      "iconId": "Table",
+      "configPath": "/src/config/ui-examples/table.json"
    },
    {
      "key": "bindings",
      "name": "Bindings",
      "description": "List, table, and timeline bindings with shared data sources",
-      "icon": "Clock",
-      "configKey": "list-table-timeline"
+      "iconId": "Clock",
+      "configPath": "/src/config/ui-examples/list-table-timeline.json"
    },
    {
      "key": "settings",
      "name": "Settings",
      "description": "Tabbed settings panel with switches and selections",
-      "icon": "Gear",
-      "configKey": "settings"
+      "iconId": "Gear",
+      "configPath": "/src/config/ui-examples/settings.json"
    }
  ],
  "footer": {
--- a/src/lib/json-ui/component-registry.ts
+++ b/src/lib/json-ui/component-registry.ts
@@ -24,6 +24,7 @@ interface JsonRegistryEntry {

 interface JsonComponentRegistry {
  components?: JsonRegistryEntry[]
+  sourceRoots?: Record<string, string[]>
 }

 export interface DeprecatedComponentInfo {
@@ -32,6 +33,15 @@ export interface DeprecatedComponentInfo {
 }

 const jsonRegistry = jsonComponentsRegistry as JsonComponentRegistry
+const sourceRoots = jsonRegistry.sourceRoots ?? {}
+const moduleMapsBySource = Object.fromEntries(
+  Object.entries(sourceRoots).map(([source, patterns]) => {
+    if (!patterns || patterns.length === 0) {
+      return [source, {}]
+    }
+    return [source, import.meta.glob(patterns, { eager: true })]
+  })
+) as Record<string, Record<string, unknown>>

 const getRegistryEntryKey = (entry: JsonRegistryEntry): string | undefined =>
  entry.name ?? entry.type
--- a/src/types/json-ui-component-types.ts
+++ b/src/types/json-ui-component-types.ts
@@ -0,0 +1,249 @@
+// This file is auto-generated by scripts/generate-json-ui-component-types.ts.
+// Do not edit this file directly.
+
+export const jsonUIComponentTypes = [
+  "div",
+  "section",
+  "article",
+  "header",
+  "footer",
+  "main",
+  "ActionCard",
+  "AlertDialog",
+  "Card",
+  "CodeExplanationDialog",
+  "CompletionCard",
+  "ComponentBindingDialog",
+  "ComponentBindingDialogWrapper",
+  "Container",
+  "DataSourceCard",
+  "DataSourceEditorDialog",
+  "DataSourceEditorDialogWrapper",
+  "Dialog",
+  "Drawer",
+  "Flex",
+  "GlowCard",
+  "Grid",
+  "HoverCard",
+  "Modal",
+  "ResponsiveGrid",
+  "Section",
+  "Stack",
+  "TipsCard",
+  "TreeCard",
+  "TreeFormDialog",
+  "ActionButton",
+  "Button",
+  "ButtonGroup",
+  "Checkbox",
+  "ConfirmButton",
+  "CopyButton",
+  "DatePicker",
+  "FileUpload",
+  "FilterInput",
+  "Form",
+  "IconButton",
+  "Input",
+  "InputOtp",
+  "NumberInput",
+  "PasswordInput",
+  "QuickActionButton",
+  "Radio",
+  "RadioGroup",
+  "RangeSlider",
+  "Select",
+  "Slider",
+  "Switch",
+  "TextArea",
+  "Toggle",
+  "ToggleGroup",
+  "ToolbarButton",
+  "ActionIcon",
+  "Avatar",
+  "AvatarGroup",
+  "Badge",
+  "CircularProgress",
+  "Code",
+  "Divider",
+  "FileIcon",
+  "Heading",
+  "HelperText",
+  "IconText",
+  "IconWrapper",
+  "Image",
+  "Label",
+  "Progress",
+  "ProgressBar",
+  "SchemaCodeViewer",
+  "Separator",
+  "Skeleton",
+  "Spinner",
+  "Tag",
+  "Text",
+  "Textarea",
+  "TextGradient",
+  "TextHighlight",
+  "TreeIcon",
+  "ArrowLeft",
+  "ArrowRight",
+  "Check",
+  "X",
+  "Plus",
+  "Minus",
+  "Search",
+  "Filter",
+  "Download",
+  "Upload",
+  "Edit",
+  "Trash",
+  "Eye",
+  "EyeOff",
+  "ChevronUp",
+  "ChevronDown",
+  "ChevronLeft",
+  "ChevronRight",
+  "Settings",
+  "User",
+  "Bell",
+  "Mail",
+  "Calendar",
+  "Clock",
+  "Star",
+  "Heart",
+  "Share",
+  "Link",
+  "Copy",
+  "Save",
+  "RefreshCw",
+  "AlertCircle",
+  "Info",
+  "HelpCircle",
+  "Home",
+  "Menu",
+  "MoreVertical",
+  "MoreHorizontal",
+  "Breadcrumb",
+  "ContextMenu",
+  "DropdownMenu",
+  "FileTabs",
+  "Menubar",
+  "NavigationGroupHeader",
+  "NavigationItem",
+  "NavigationMenu",
+  "TabIcon",
+  "Tabs",
+  "Alert",
+  "CountBadge",
+  "DataSourceBadge",
+  "EmptyCanvasState",
+  "EmptyEditorState",
+  "EmptyMessage",
+  "EmptyState",
+  "EmptyStateIcon",
+  "ErrorBadge",
+  "GitHubBuildStatus",
+  "GitHubBuildStatusWrapper",
+  "InfoBox",
+  "LabelWithBadge",
+  "LoadingFallback",
+  "LoadingSpinner",
+  "LoadingState",
+  "Notification",
+  "SchemaEditorStatusBar",
+  "SeedDataStatus",
+  "StatusBadge",
+  "StatusIcon",
+  "Chart",
+  "DataList",
+  "DataSourceManager",
+  "DataTable",
+  "KeyValue",
+  "LazyBarChart",
+  "LazyBarChartWrapper",
+  "LazyD3BarChart",
+  "LazyD3BarChartWrapper",
+  "LazyLineChart",
+  "LazyLineChartWrapper",
+  "List",
+  "ListItem",
+  "MetricCard",
+  "MetricDisplay",
+  "SeedDataManager",
+  "SeedDataManagerWrapper",
+  "StatCard",
+  "Table",
+  "TableHeader",
+  "TableBody",
+  "TableRow",
+  "TableCell",
+  "TableHead",
+  "Timeline",
+  "TreeListHeader",
+  "TreeListPanel",
+  "Accordion",
+  "ActionBar",
+  "AppBranding",
+  "AppHeader",
+  "AppLogo",
+  "AspectRatio",
+  "BindingEditor",
+  "BindingIndicator",
+  "CanvasRenderer",
+  "Carousel",
+  "Chip",
+  "Collapsible",
+  "ColorSwatch",
+  "Command",
+  "CommandPalette",
+  "ComponentPalette",
+  "ComponentPaletteItem",
+  "ComponentTree",
+  "ComponentTreeWrapper",
+  "ComponentTreeNode",
+  "DataCard",
+  "DetailRow",
+  "Dot",
+  "EditorActions",
+  "EditorToolbar",
+  "InfoPanel",
+  "JSONUIShowcase",
+  "Kbd",
+  "LazyInlineMonacoEditor",
+  "LazyMonacoEditor",
+  "LiveIndicator",
+  "MonacoEditorPanel",
+  "PageHeader",
+  "PageHeaderContent",
+  "Pagination",
+  "PanelHeader",
+  "Popover",
+  "PropertyEditor",
+  "PropertyEditorField",
+  "Pulse",
+  "Rating",
+  "Resizable",
+  "SaveIndicator",
+  "SaveIndicatorWrapper",
+  "SchemaEditorCanvas",
+  "SchemaEditorLayout",
+  "SchemaEditorPropertiesPanel",
+  "SchemaEditorSidebar",
+  "SchemaEditorToolbar",
+  "ScrollArea",
+  "SearchBar",
+  "SearchInput",
+  "Sheet",
+  "Sidebar",
+  "Sonner",
+  "Spacer",
+  "Sparkle",
+  "StepIndicator",
+  "Stepper",
+  "StorageSettings",
+  "StorageSettingsWrapper",
+  "Timestamp",
+  "ToolbarActions",
+  "Tooltip",
+] as const
+
+export type JSONUIComponentType = typeof jsonUIComponentTypes[number]
--- a/src/types/json-ui.ts
+++ b/src/types/json-ui.ts
@@ -1,29 +1,6 @@
-export type ComponentType = 
-  | 'div' | 'section' | 'article' | 'header' | 'footer' | 'main'
-  | 'Button' | 'Card' | 'CardHeader' | 'CardTitle' | 'CardDescription' | 'CardContent' | 'CardFooter'
-  | 'Input' | 'TextArea' | 'Textarea' | 'Select' | 'Checkbox' | 'Radio' | 'Switch' | 'Slider' | 'NumberInput' | 'DatePicker' | 'FileUpload'
-  | 'Badge' | 'Progress' | 'Separator' | 'Tabs' | 'TabsContent' | 'TabsList' | 'TabsTrigger' | 'Dialog'
-  | 'Text' | 'Heading' | 'Label' | 'List' | 'ListItem' | 'Grid' | 'Stack' | 'Flex' | 'Container'
-  | 'Link' | 'Breadcrumb' | 'Image' | 'Avatar' | 'Code' | 'Tag' | 'Spinner' | 'Skeleton'
-  | 'CircularProgress' | 'Divider' | 'ProgressBar'
-  | 'Alert' | 'InfoBox' | 'EmptyState' | 'StatusBadge' 
-  | 'ErrorBadge' | 'Notification' | 'StatusIcon'
-  | 'Table' | 'TableHeader' | 'TableBody' | 'TableRow' | 'TableCell' | 'TableHead'
-  | 'KeyValue' | 'StatCard' | 'DataCard' | 'SearchInput' | 'ActionBar'
-  | 'DataList' | 'DataTable' | 'MetricCard' | 'Timeline'
-  | 'LazyBarChart' | 'LazyLineChart' | 'LazyD3BarChart' | 'SeedDataManager'
-  | 'SaveIndicator' | 'StorageSettings'
-  | 'AppBranding' | 'LabelWithBadge' | 'NavigationGroupHeader' | 'EmptyEditorState' | 'LoadingFallback' | 'LoadingState'
-  | 'CodeExplanationDialog' | 'ComponentBindingDialog' | 'DataSourceCard' | 'DataSourceEditorDialog' | 'TreeCard' | 'TreeFormDialog'
-  | 'ToolbarButton'
-  | 'SchemaCodeViewer'
-  | 'FileTabs' | 'NavigationItem' | 'NavigationMenu'
-  | 'EmptyCanvasState' | 'SchemaEditorStatusBar'
-  | 'DataSourceManager' | 'TreeListHeader' | 'TreeListPanel'
-  | 'AppHeader' | 'BindingEditor' | 'CanvasRenderer' | 'ComponentPalette' | 'ComponentTree' | 'EditorActions'
-  | 'EditorToolbar' | 'JSONUIShowcase' | 'LazyInlineMonacoEditor' | 'LazyMonacoEditor' | 'MonacoEditorPanel'
-  | 'PageHeaderContent' | 'PropertyEditor' | 'SchemaEditorCanvas' | 'SchemaEditorLayout'
-  | 'SchemaEditorPropertiesPanel' | 'SchemaEditorSidebar' | 'SchemaEditorToolbar' | 'SearchBar' | 'ToolbarActions'
+import type { JSONUIComponentType } from './json-ui-component-types'
+
+export type ComponentType = JSONUIComponentType

 export interface BreadcrumbItem {
  label: string