Update all component renderers to use types from @object-ui/types

Copilot · hotlong · Copilot · commit 8058f2f4c88c · 2026-01-14T13:34:54.000Z
Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/packages/components/src/renderers/basic/div.tsx b/packages/components/src/renderers/basic/div.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { DivSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('div', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: DivSchema; className?: string; [key: string]: any }) => (
     <div className={className} {...props}>
       {renderChildren(schema.body)}
     </div>
diff --git a/packages/components/src/renderers/basic/icon.tsx b/packages/components/src/renderers/basic/icon.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { IconSchema } from '@object-ui/types';
 import { icons } from 'lucide-react';
 
 ComponentRegistry.register('icon',
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: IconSchema; className?: string; [key: string]: any }) => {
     const Icon = (icons as any)[schema.name || schema.icon];
     if (!Icon) return null;
     return <Icon className={className} {...props} />;
diff --git a/packages/components/src/renderers/basic/image.tsx b/packages/components/src/renderers/basic/image.tsx
@@ -1,7 +1,8 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ImageSchema } from '@object-ui/types';
 
 ComponentRegistry.register('image',
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ImageSchema; className?: string; [key: string]: any }) => (
     <img
       src={schema.src}
       alt={schema.alt || ''}
diff --git a/packages/components/src/renderers/basic/separator.tsx b/packages/components/src/renderers/basic/separator.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SeparatorSchema } from '@object-ui/types';
 import { Separator } from '@/ui';
 
 ComponentRegistry.register('separator', 
-  ({ className, ...props }) => (
-    <Separator className={className} {...props} />
+  ({ schema, className, ...props }: { schema: SeparatorSchema; className?: string; [key: string]: any }) => (
+    <Separator orientation={schema.orientation} className={className} {...props} />
   ),
   {
     label: 'Separator',
diff --git a/packages/components/src/renderers/basic/span.tsx b/packages/components/src/renderers/basic/span.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SpanSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('span', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: SpanSchema; className?: string; [key: string]: any }) => (
     <span className={className} {...props}>
       {renderChildren(schema.body)}
     </span>
diff --git a/packages/components/src/renderers/basic/text.tsx b/packages/components/src/renderers/basic/text.tsx
@@ -1,7 +1,8 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TextSchema } from '@object-ui/types';
 
 ComponentRegistry.register('text', 
-  ({ schema }) => (
+  ({ schema }: { schema: TextSchema }) => (
     <>{schema.content}</>
   ),
   {
diff --git a/packages/components/src/renderers/complex/calendar-view.tsx b/packages/components/src/renderers/complex/calendar-view.tsx
@@ -1,10 +1,11 @@
 import { ComponentRegistry } from '@object-ui/core';
-import { CalendarView, type CalendarEvent } from '@/ui';
+import type { CalendarViewSchema, CalendarEvent } from '@object-ui/types';
+import { CalendarView } from '@/ui';
 import React from 'react';
 
 // Calendar View Renderer - Airtable-style calendar for displaying records as events
 ComponentRegistry.register('calendar-view', 
-  ({ schema, className, onAction, ...props }) => {
+  ({ schema, className, onAction, ...props }: { schema: CalendarViewSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
     // Transform schema data to CalendarEvent format
     const events: CalendarEvent[] = React.useMemo(() => {
       if (!schema.data || !Array.isArray(schema.data)) return [];
diff --git a/packages/components/src/renderers/complex/carousel.tsx b/packages/components/src/renderers/complex/carousel.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { CarouselSchema } from '@object-ui/types';
 import { 
   Carousel, 
   CarouselContent, 
@@ -9,7 +10,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('carousel', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: CarouselSchema; className?: string; [key: string]: any }) => (
     <Carousel 
       opts={schema.opts} 
       orientation={schema.orientation || 'horizontal'}
diff --git a/packages/components/src/renderers/complex/chatbot.tsx b/packages/components/src/renderers/complex/chatbot.tsx
@@ -1,5 +1,6 @@
 import { ComponentRegistry } from '@object-ui/core';
-import { Chatbot, type ChatMessage } from '@/ui';
+import type { ChatbotSchema, ChatMessage } from '@object-ui/types';
+import { Chatbot } from '@/ui';
 import { useState } from 'react';
 
 /**
diff --git a/packages/components/src/renderers/complex/data-table.tsx b/packages/components/src/renderers/complex/data-table.tsx
@@ -1,6 +1,7 @@
 // Enterprise-level DataTable Component (Airtable-like)
 import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import type { DataTableSchema } from '@object-ui/types';
 import { 
   Table, 
   TableHeader, 
diff --git a/packages/components/src/renderers/complex/filter-builder.tsx b/packages/components/src/renderers/complex/filter-builder.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
-import { FilterBuilder, type FilterGroup } from '@/ui/filter-builder';
+import type { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
+import { FilterBuilder } from '@/ui/filter-builder';
 
 ComponentRegistry.register('filter-builder', 
-  ({ schema, className, onChange, ...props }) => {
+  ({ schema, className, onChange, ...props }: { schema: FilterBuilderSchema; className?: string; onChange?: (event: any) => void; [key: string]: any }) => {
     const handleChange = (value: FilterGroup) => {
       if (onChange) {
         onChange({
diff --git a/packages/components/src/renderers/complex/kanban.tsx b/packages/components/src/renderers/complex/kanban.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { KanbanSchema } from '@object-ui/types';
 import { KanbanBoard, type KanbanColumn, type KanbanCard } from '@/ui';
 import React from 'react';
 
 ComponentRegistry.register('kanban', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: KanbanSchema; className?: string; [key: string]: any }) => {
     return (
       <KanbanBoard 
         columns={schema.columns || []}
diff --git a/packages/components/src/renderers/complex/resizable.tsx b/packages/components/src/renderers/complex/resizable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import type { ResizableSchema } from '@object-ui/types';
 import { 
   ResizablePanelGroup, 
   ResizablePanel, 
@@ -8,7 +9,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('resizable', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ResizableSchema; className?: string; [key: string]: any }) => (
     <ResizablePanelGroup 
         direction={schema.direction || 'horizontal'} 
         className={className} 
diff --git a/packages/components/src/renderers/complex/scroll-area.tsx b/packages/components/src/renderers/complex/scroll-area.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ScrollAreaSchema } from '@object-ui/types';
 import { ScrollArea, ScrollBar } from '@/ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('scroll-area', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ScrollAreaSchema; className?: string; [key: string]: any }) => (
     <ScrollArea className={className} style={{ height: schema.height, width: schema.width }} {...props}>
       {renderChildren(schema.content || schema.children)}
       {schema.orientation === 'horizontal' && <ScrollBar orientation="horizontal" />}
diff --git a/packages/components/src/renderers/complex/table.tsx b/packages/components/src/renderers/complex/table.tsx
@@ -1,5 +1,6 @@
 // table.tsx implementation
 import { ComponentRegistry } from '@object-ui/core';
+import type { TableSchema } from '@object-ui/types';
 import { 
   Table, 
   TableHeader, 
diff --git a/packages/components/src/renderers/complex/timeline.tsx b/packages/components/src/renderers/complex/timeline.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TimelineSchema } from '@object-ui/types';
 import {
   Timeline,
   TimelineItem,
diff --git a/packages/components/src/renderers/data-display/alert.tsx b/packages/components/src/renderers/data-display/alert.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AlertSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import {
   Alert,
@@ -7,7 +8,7 @@ import {
 } from '@/ui';
 
 ComponentRegistry.register('alert', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: AlertSchema; className?: string; [key: string]: any }) => (
     <Alert variant={schema.variant} className={className} {...props}>
       <AlertTitle>{schema.title}</AlertTitle>
       <AlertDescription>{schema.description || renderChildren(schema.body)}</AlertDescription>
diff --git a/packages/components/src/renderers/data-display/avatar.tsx b/packages/components/src/renderers/data-display/avatar.tsx
@@ -1,12 +1,13 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AvatarSchema } from '@object-ui/types';
 import {
   Avatar,
   AvatarImage,
   AvatarFallback
 } from '@/ui';
 
 ComponentRegistry.register('avatar', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: AvatarSchema; className?: string; [key: string]: any }) => (
     <Avatar className={className} {...props}>
       <AvatarImage src={schema.src} alt={schema.alt} />
       <AvatarFallback>{schema.fallback}</AvatarFallback>
diff --git a/packages/components/src/renderers/data-display/badge.tsx b/packages/components/src/renderers/data-display/badge.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { BadgeSchema } from '@object-ui/types';
 import { Badge } from '@/ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('badge', 
-  ({ schema, ...props }) => (
+  ({ schema, ...props }: { schema: BadgeSchema; [key: string]: any }) => (
     <Badge variant={schema.variant} className={schema.className} {...props}>
       {schema.label || renderChildren(schema.body)}
     </Badge>
diff --git a/packages/components/src/renderers/data-display/chart.tsx b/packages/components/src/renderers/data-display/chart.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ChartSchema } from '@object-ui/types';
 import {
   ChartContainer,
   ChartTooltip,
@@ -20,7 +21,7 @@ import {
 } from 'recharts';
 
 ComponentRegistry.register('chart',
-  ({ schema, className }) => {
+  ({ schema, className }: { schema: ChartSchema; className?: string }) => {
     const { chartType = 'bar', data = [], config = {}, xAxisKey, series = [] } = schema;
 
     const ChartComponent = {
diff --git a/packages/components/src/renderers/data-display/list.tsx b/packages/components/src/renderers/data-display/list.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ListSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('list', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: ListSchema; className?: string; [key: string]: any }) => {
     const ListTag = schema.ordered ? 'ol' : 'ul';
     
     return (
diff --git a/packages/components/src/renderers/data-display/markdown.tsx b/packages/components/src/renderers/data-display/markdown.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { MarkdownSchema } from '@object-ui/types';
 import { Markdown } from '@/ui';
 
 /**
@@ -23,7 +24,7 @@ import { Markdown } from '@/ui';
  * - Tailwind CSS prose styling
  */
 ComponentRegistry.register('markdown', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: MarkdownSchema; className?: string; [key: string]: any }) => (
     <Markdown 
       content={schema.content || ''} 
       className={className}
diff --git a/packages/components/src/renderers/data-display/tree-view.tsx b/packages/components/src/renderers/data-display/tree-view.tsx
@@ -1,16 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { TreeViewSchema, TreeNode } from '@object-ui/types';
 import { ChevronRight, ChevronDown, Folder, File } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '@/lib/utils';
 
-interface TreeNode {
-  id: string;
-  label: string;
-  icon?: string;
-  children?: TreeNode[];
-  data?: any;
-}
-
 const TreeNodeComponent = ({ 
   node, 
   level = 0, 
diff --git a/packages/components/src/renderers/disclosure/accordion.tsx b/packages/components/src/renderers/disclosure/accordion.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { AccordionSchema } from '@object-ui/types';
 import { 
   Accordion, 
   AccordionItem, 
@@ -8,11 +9,11 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('accordion', 
-  ({ schema, className, ...props }) => (
-    <Accordion type={schema.accordionType || 'single'} collapsible={schema.collapsible} className={className} {...props}>
-      {schema.items?.map((item: any, index: number) => (
+  ({ schema, className, ...props }: { schema: AccordionSchema; className?: string; [key: string]: any }) => (
+    <Accordion type={schema.type || 'single'} collapsible={schema.collapsible} className={className} {...props}>
+      {schema.items?.map((item, index: number) => (
         <AccordionItem key={item.value || index} value={item.value || `item-${index}`}>
-          <AccordionTrigger>{item.trigger || item.label}</AccordionTrigger>
+          <AccordionTrigger>{item.title}</AccordionTrigger>
           <AccordionContent>
             {renderChildren(item.content)}
           </AccordionContent>
diff --git a/packages/components/src/renderers/disclosure/collapsible.tsx b/packages/components/src/renderers/disclosure/collapsible.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { CollapsibleSchema } from '@object-ui/types';
 import { 
   Collapsible, 
   CollapsibleTrigger, 
@@ -7,7 +8,7 @@ import {
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('collapsible', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: CollapsibleSchema; className?: string; [key: string]: any }) => (
     <Collapsible defaultOpen={schema.defaultOpen} disabled={schema.disabled} className={className} {...props}>
        <CollapsibleTrigger asChild>
          {renderChildren(schema.trigger)}
diff --git a/packages/components/src/renderers/feedback/loading.tsx b/packages/components/src/renderers/feedback/loading.tsx
@@ -1,9 +1,10 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { LoadingSchema } from '@object-ui/types';
 import { Spinner } from '@/ui';
 import { cn } from '@/lib/utils';
 
 ComponentRegistry.register('loading', 
-  ({ schema, className, ...props }) => {
+  ({ schema, className, ...props }: { schema: LoadingSchema; className?: string; [key: string]: any }) => {
     const size = schema.size || 'md';
     const fullscreen = schema.fullscreen || false;
     
diff --git a/packages/components/src/renderers/feedback/progress.tsx b/packages/components/src/renderers/feedback/progress.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ProgressSchema } from '@object-ui/types';
 import { Progress } from '@/ui';
 
 ComponentRegistry.register('progress', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: ProgressSchema; className?: string; [key: string]: any }) => (
     <Progress value={schema.value} className={className} {...props} />
   ),
   {
diff --git a/packages/components/src/renderers/feedback/skeleton.tsx b/packages/components/src/renderers/feedback/skeleton.tsx
@@ -1,8 +1,9 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SkeletonSchema } from '@object-ui/types';
 import { Skeleton } from '@/ui';
 
 ComponentRegistry.register('skeleton', 
-  ({ schema, className, ...props }) => (
+  ({ schema, className, ...props }: { schema: SkeletonSchema; className?: string; [key: string]: any }) => (
     <Skeleton className={className} {...props} style={{ width: schema.width, height: schema.height }} />
   ),
   {
diff --git a/packages/components/src/renderers/feedback/toaster.tsx b/packages/components/src/renderers/feedback/toaster.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { ToasterSchema } from '@object-ui/types';
 import { Toaster as SonnerToaster } from '@/ui';
 import { Toaster as DefaultToaster } from '@/ui'; 
 // Note: In shadcn/ui typical setup, Toaster is exported from 'components/ui/toaster' and 'components/ui/sonner'.
@@ -7,7 +8,7 @@ import { Toaster as DefaultToaster } from '@/ui';
 // Let's assume standard exports.
 
 ComponentRegistry.register('toaster', 
-  ({ schema }) => {
+  ({ schema }: { schema: ToasterSchema }) => {
     if (schema.provider === 'sonner') {
         return <SonnerToaster />;
     }
diff --git a/packages/components/src/renderers/navigation/header-bar.tsx b/packages/components/src/renderers/navigation/header-bar.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import type { HeaderBarSchema } from '@object-ui/types';
 import {
   SidebarTrigger,
   Separator,
@@ -12,7 +13,7 @@ import {
 } from '@/ui';
 
 ComponentRegistry.register('header-bar', 
-  ({ schema }) => (
+  ({ schema }: { schema: HeaderBarSchema }) => (
     <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
       <SidebarTrigger />
       <Separator orientation="vertical" className="mr-2 h-4" />
diff --git a/packages/components/src/renderers/navigation/sidebar.tsx b/packages/components/src/renderers/navigation/sidebar.tsx
@@ -1,4 +1,5 @@
 import { ComponentRegistry } from '@object-ui/core';
+import type { SidebarSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
 import {
   SidebarProvider,
diff --git a/packages/components/src/renderers/overlay/alert-dialog.tsx b/packages/components/src/renderers/overlay/alert-dialog.tsx
diff --git a/packages/components/src/renderers/overlay/context-menu.tsx b/packages/components/src/renderers/overlay/context-menu.tsx
diff --git a/packages/components/src/renderers/overlay/dialog.tsx b/packages/components/src/renderers/overlay/dialog.tsx
diff --git a/packages/components/src/renderers/overlay/drawer.tsx b/packages/components/src/renderers/overlay/drawer.tsx
diff --git a/packages/components/src/renderers/overlay/dropdown-menu.tsx b/packages/components/src/renderers/overlay/dropdown-menu.tsx
diff --git a/packages/components/src/renderers/overlay/hover-card.tsx b/packages/components/src/renderers/overlay/hover-card.tsx
diff --git a/packages/components/src/renderers/overlay/popover.tsx b/packages/components/src/renderers/overlay/popover.tsx
diff --git a/packages/components/src/renderers/overlay/sheet.tsx b/packages/components/src/renderers/overlay/sheet.tsx
diff --git a/packages/components/src/renderers/overlay/tooltip.tsx b/packages/components/src/renderers/overlay/tooltip.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,8 @@`
`1`	`1`	`import { ComponentRegistry } from '@object-ui/core';`
	`2`	`+import type { TextSchema } from '@object-ui/types';`
`2`	`3`
`3`	`4`	`ComponentRegistry.register('text',`
`4`		`- ({ schema }) => (`
	`5`	`+ ({ schema }: { schema: TextSchema }) => (`
`5`	`6`	`<>{schema.content}</>`
`6`	`7`	`),`
`7`	`8`	`{`