Merge pull request #28 from objectstack-ai/copilot/implement-ui-components

Author: hotlong

packages/components/package.json

@@ -25,6 +25,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@object-ui/core": "workspace:*",
     "@object-ui/react": "workspace:*",
+    "@object-ui/types": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",

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>

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} />;

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 || ''}

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',

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>

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}</>
   ),
   {

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 [];

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'}

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';
 
 /**