Merge pull request #171 from johndoe6345789/codex/extend-json-schema-for-component-registry

Make json-ui registry sources data-driven

src/lib/json-ui/component-registry.ts

@@ -1,27 +1,47 @@
 import { ComponentType } from 'react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
+import { InputOtp } from '@/components/ui/input-otp'
 import { Textarea } from '@/components/ui/textarea'
 import { Label } from '@/components/ui/label'
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
 import { Alert as ShadcnAlert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { AlertDialog } from '@/components/ui/alert-dialog'
+import { AspectRatio } from '@/components/ui/aspect-ratio'
+import { Carousel } from '@/components/ui/carousel'
+import { ChartContainer as Chart } from '@/components/ui/chart'
+import { Collapsible } from '@/components/ui/collapsible'
+import { Command } from '@/components/ui/command'
 import { Switch } from '@/components/ui/switch'
 import { Checkbox } from '@/components/ui/checkbox'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { DropdownMenu } from '@/components/ui/dropdown-menu'
+import { Menubar } from '@/components/ui/menubar'
+import { NavigationMenu } from '@/components/ui/navigation-menu'
 import { Table as ShadcnTable, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Skeleton as ShadcnSkeleton } from '@/components/ui/skeleton'
 import { Progress } from '@/components/ui/progress'
+import { Pagination } from '@/components/ui/pagination'
+import { ResizablePanelGroup as Resizable } from '@/components/ui/resizable'
+import { Sheet } from '@/components/ui/sheet'
+import { Sidebar } from '@/components/ui/sidebar'
+import { Toaster as Sonner } from '@/components/ui/sonner'
+import { ToggleGroup } from '@/components/ui/toggle-group'
 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'
 import {
+  ComponentBindingDialogWrapper,
+  ComponentTreeWrapper,
+  DataSourceEditorDialogWrapper,
+  GitHubBuildStatusWrapper,
   LazyBarChartWrapper,
   LazyD3BarChartWrapper,
   LazyLineChartWrapper,
@@ -49,6 +69,9 @@ interface JsonRegistryEntry {
   export?: string
   source?: string
   status?: string
+  wrapperRequired?: boolean
+  wrapperComponent?: string
+  wrapperFor?: string
   deprecated?: DeprecatedComponentInfo
 }
 
@@ -63,6 +86,9 @@ export interface DeprecatedComponentInfo {
 
 const jsonRegistry = jsonComponentsRegistry as JsonComponentRegistry
 
+const getRegistryEntryName = (entry: JsonRegistryEntry): string | undefined =>
+  entry.export ?? entry.name ?? entry.type
+
 const buildRegistryFromNames = (
   names: string[],
   components: Record<string, ComponentType<any>>
@@ -77,10 +103,18 @@ const buildRegistryFromNames = (
 }
 
 const jsonRegistryEntries = jsonRegistry.components ?? []
+const registryEntryByType = new Map(
+  jsonRegistryEntries
+    .map((entry) => {
+      const entryName = getRegistryEntryName(entry)
+      return entryName ? [entryName, entry] : null
+    })
+    .filter((entry): entry is [string, JsonRegistryEntry] => Boolean(entry))
+)
 const atomComponentMap = AtomComponents as Record<string, ComponentType<any>>
 const deprecatedComponentInfo = jsonRegistryEntries.reduce<Record<string, DeprecatedComponentInfo>>(
   (acc, entry) => {
-    const entryName = entry.export ?? entry.name ?? entry.type
+    const entryName = getRegistryEntryName(entry)
     if (!entryName) {
       return acc
     }
@@ -93,15 +127,27 @@ const deprecatedComponentInfo = jsonRegistryEntries.reduce<Record<string, Deprec
 )
 const atomRegistryNames = jsonRegistryEntries
   .filter((entry) => entry.source === 'atoms')
-  .map((entry) => entry.export ?? entry.name ?? entry.type)
+  .map((entry) => getRegistryEntryName(entry))
   .filter((name): name is string => Boolean(name))
 const moleculeRegistryNames = jsonRegistryEntries
   .filter((entry) => entry.source === 'molecules')
-  .map((entry) => entry.export ?? entry.name ?? entry.type)
+  .map((entry) => getRegistryEntryName(entry))
   .filter((name): name is string => Boolean(name))
 const organismRegistryNames = jsonRegistryEntries
   .filter((entry) => entry.source === 'organisms')
-  .map((entry) => entry.export ?? entry.name ?? entry.type)
+  .map((entry) => getRegistryEntryName(entry))
+  .filter((name): name is string => Boolean(name))
+const shadcnRegistryNames = jsonRegistryEntries
+  .filter((entry) => entry.source === 'ui')
+  .map((entry) => getRegistryEntryName(entry))
+  .filter((name): name is string => Boolean(name))
+const wrapperRegistryNames = jsonRegistryEntries
+  .filter((entry) => entry.source === 'wrappers')
+  .map((entry) => getRegistryEntryName(entry))
+  .filter((name): name is string => Boolean(name))
+const iconRegistryNames = jsonRegistryEntries
+  .filter((entry) => entry.source === 'icons')
+  .map((entry) => getRegistryEntryName(entry))
   .filter((name): name is string => Boolean(name))
 
 export const primitiveComponents: UIComponentRegistry = {
@@ -123,9 +169,17 @@ export const primitiveComponents: UIComponentRegistry = {
   nav: 'nav' as any,
 }
 
-export const shadcnComponents: UIComponentRegistry = {
+const shadcnComponentMap: Record<string, ComponentType<any>> = {
+  AlertDialog,
+  AspectRatio,
   Button,
+  Carousel,
+  Chart,
+  Collapsible,
+  Command,
+  DropdownMenu,
   Input,
+  InputOtp,
   Textarea,
   Label,
   Card,
@@ -164,13 +218,26 @@ export const shadcnComponents: UIComponentRegistry = {
   DialogFooter,
   DialogHeader,
   DialogTitle,
+  Menubar,
+  NavigationMenu,
   Skeleton: ShadcnSkeleton,
+  Pagination,
   Progress,
+  Resizable,
+  Sheet,
+  Sidebar,
+  Sonner,
+  ToggleGroup,
   Avatar: ShadcnAvatar,
   AvatarFallback,
   AvatarImage,
 }
 
+export const shadcnComponents: UIComponentRegistry = buildRegistryFromNames(
+  shadcnRegistryNames,
+  shadcnComponentMap
+)
+
 export const atomComponents: UIComponentRegistry = {
   ...buildRegistryFromNames(
     atomRegistryNames,
@@ -208,16 +275,25 @@ export const organismComponents: UIComponentRegistry = buildRegistryFromNames(
   OrganismComponents as Record<string, ComponentType<any>>
 )
 
-export const jsonWrapperComponents: UIComponentRegistry = {
-  SaveIndicator: SaveIndicatorWrapper,
-  LazyBarChart: LazyBarChartWrapper,
-  LazyLineChart: LazyLineChartWrapper,
-  LazyD3BarChart: LazyD3BarChartWrapper,
-  SeedDataManager: SeedDataManagerWrapper,
-  StorageSettings: StorageSettingsWrapper,
+const wrapperComponentMap: Record<string, ComponentType<any>> = {
+  ComponentBindingDialogWrapper,
+  ComponentTreeWrapper,
+  DataSourceEditorDialogWrapper,
+  GitHubBuildStatusWrapper,
+  SaveIndicatorWrapper,
+  LazyBarChartWrapper,
+  LazyLineChartWrapper,
+  LazyD3BarChartWrapper,
+  SeedDataManagerWrapper,
+  StorageSettingsWrapper,
 }
 
-export const iconComponents: UIComponentRegistry = {
+export const jsonWrapperComponents: UIComponentRegistry = buildRegistryFromNames(
+  wrapperRegistryNames,
+  wrapperComponentMap
+)
+
+const iconComponentMap: Record<string, ComponentType<any>> = {
   ArrowLeft,
   ArrowRight,
   Check,
@@ -258,6 +334,11 @@ export const iconComponents: UIComponentRegistry = {
   MoreHorizontal: DotsThree,
 }
 
+export const iconComponents: UIComponentRegistry = buildRegistryFromNames(
+  iconRegistryNames,
+  iconComponentMap
+)
+
 export const uiComponentRegistry: UIComponentRegistry = {
   ...primitiveComponents,
   ...shadcnComponents,