Add deprecation guidance and schema warnings

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

@@ -47,12 +47,19 @@ interface JsonRegistryEntry {
   type?: string
   export?: string
   source?: string
+  status?: string
+  deprecated?: DeprecatedComponentInfo
 }
 
 interface JsonComponentRegistry {
   components?: JsonRegistryEntry[]
 }
 
+export interface DeprecatedComponentInfo {
+  replacedBy?: string
+  message?: string
+}
+
 const jsonRegistry = jsonComponentsRegistry as JsonComponentRegistry
 
 const buildRegistryFromNames = (
@@ -69,6 +76,19 @@ const buildRegistryFromNames = (
 }
 
 const jsonRegistryEntries = jsonRegistry.components ?? []
+const deprecatedComponentInfo = jsonRegistryEntries.reduce<Record<string, DeprecatedComponentInfo>>(
+  (acc, entry) => {
+    const entryName = entry.export ?? entry.name ?? entry.type
+    if (!entryName) {
+      return acc
+    }
+    if (entry.status === 'deprecated' || entry.deprecated) {
+      acc[entryName] = entry.deprecated ?? {}
+    }
+    return acc
+  },
+  {}
+)
 const atomRegistryNames = jsonRegistryEntries
   .filter((entry) => entry.source === 'atoms')
   .map((entry) => entry.export ?? entry.name ?? entry.type)
@@ -237,3 +257,7 @@ export function getUIComponent(type: string): ComponentType<any> | string | null
 export function hasComponent(type: string): boolean {
   return type in uiComponentRegistry
 }
+
+export function getDeprecatedComponentInfo(type: string): DeprecatedComponentInfo | null {
+  return deprecatedComponentInfo[type] ?? null
+}

src/lib/schema-renderer.tsx

@@ -2,6 +2,7 @@ import { createElement, type ComponentType, type ReactNode } from 'react'
 import { cn } from '@/lib/utils'
 import { Component as ComponentSchema, Layout } from '@/schemas/ui-schema'
 import { useDataBinding, useEventHandlers, useComponentRegistry } from '@/hooks/ui'
+import { getDeprecatedComponentInfo } from '@/lib/json-ui/component-registry'
 
 interface SchemaRendererProps {
   schema: ComponentSchema
@@ -15,6 +16,26 @@ interface LayoutRendererProps {
   children: ReactNode
 }
 
+const warnedDeprecatedComponents = new Set<string>()
+
+const warnDeprecatedComponent = (schema: ComponentSchema) => {
+  const deprecatedInfo = getDeprecatedComponentInfo(schema.type)
+  if (!deprecatedInfo || warnedDeprecatedComponents.has(schema.type)) {
+    return
+  }
+
+  const idSuffix = schema.id ? ` (id: ${schema.id})` : ''
+  const replacementHint = deprecatedInfo.replacedBy
+    ? ` Replace with "${deprecatedInfo.replacedBy}".`
+    : ''
+  const extraMessage = deprecatedInfo.message ? ` ${deprecatedInfo.message}` : ''
+
+  console.warn(
+    `[SchemaRenderer] Deprecated component "${schema.type}" detected in schema${idSuffix}.${replacementHint}${extraMessage}`
+  )
+  warnedDeprecatedComponents.add(schema.type)
+}
+
 function LayoutRenderer({ layout, children }: LayoutRendererProps) {
   const getLayoutClasses = () => {
     const classes: string[] = []
@@ -85,6 +106,8 @@ export function SchemaRenderer({ schema, data, functions = {}, componentRegistry
     )
   }
 
+  warnDeprecatedComponent(schema)
+
   const props = resolveProps(schema.props || {})
   const events = resolveEvents(schema.events)
   const combinedProps = { ...props, ...events }