Merge pull request #137 from objectstack-ai/copilot/fix-unknown-component-error

Author: huangyiirene

apps/site/app/components/ObjectUIProvider.tsx

@@ -1,9 +1,18 @@
 'use client';
 
 // Import components to trigger registration
-import '@object-ui/components';
+import { initializeComponents } from '@object-ui/components';
+import { ComponentRegistry } from '@object-ui/core';
+import { useEffect } from 'react';
 
 export function ObjectUIProvider({ children }: { children: React.ReactNode }) {
-  // Components are auto-registered on import
+  // Explicitly call init to ensure components are registered
+  useEffect(() => {
+    initializeComponents();
+    // Log registered components for debugging
+    const componentTypes = ComponentRegistry.getAllTypes();
+    console.log('[ObjectUIProvider] Registered components:', componentTypes);
+  }, []);
+  
   return <>{children}</>;
 }

packages/components/package.json

@@ -16,6 +16,7 @@
   "main": "dist/index.umd.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "sideEffects": true,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

packages/components/src/index.ts

@@ -16,3 +16,11 @@ export * from './lib/utils';
 
 // Export raw Shadcn UI components
 export * from './ui';
+
+// Export an init function to ensure components are registered
+// This is a workaround for bundlers that might tree-shake side-effect imports
+export function initializeComponents() {
+  // This function exists to ensure the import side-effects above are executed
+  // Simply importing this module should register all components
+  return true;
+}

packages/components/src/renderers/basic/icon.tsx

@@ -10,15 +10,61 @@ import { ComponentRegistry } from '@object-ui/core';
 import type { IconSchema } from '@object-ui/types';
 import { icons } from 'lucide-react';
 import React, { forwardRef } from 'react';
+import { cn } from '../../lib/utils';
+
+// Convert kebab-case to PascalCase for Lucide icon names
+// e.g., "arrow-right" -> "ArrowRight", "home" -> "Home"
+function toPascalCase(str: string): string {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}
 
 const IconRenderer = forwardRef<SVGSVGElement, { schema: IconSchema; className?: string; [key: string]: any }>(
   ({ schema, className, ...props }, ref) => {
-    const Icon = (icons as any)[schema.name || schema.icon];
-    if (!Icon) return null;
-    return <Icon ref={ref} className={className} {...props} />;
+    // Extract designer-related props
+    const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style,
+      ...iconProps
+    } = props;
+    
+    // Convert icon name to PascalCase for Lucide lookup
+    const iconName = toPascalCase(schema.name);
+    const Icon = (icons as any)[iconName];
+    
+    if (!Icon) {
+      console.warn(`Icon "${schema.name}" (lookup: "${iconName}") not found in lucide-react`);
+      return null;
+    }
+    
+    // Build size style
+    const sizeStyle = schema.size ? { width: schema.size, height: schema.size } : undefined;
+    
+    // Merge classNames: schema color, schema className, prop className
+    const mergedClassName = cn(
+      schema.color,
+      schema.className,
+      className
+    );
+    
+    return (
+      <Icon 
+        ref={ref} 
+        className={mergedClassName}
+        style={{ ...sizeStyle, ...style }}
+        {...iconProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType }}
+      />
+    );
   }
 );
 
+IconRenderer.displayName = 'IconRenderer';
+
 ComponentRegistry.register('icon',
   IconRenderer,
   {
@@ -27,6 +73,8 @@ ComponentRegistry.register('icon',
     category: 'basic',
     inputs: [
       { name: 'name', type: 'string', label: 'Icon Name', defaultValue: 'smile' },
+      { name: 'size', type: 'number', label: 'Size (px)' },
+      { name: 'color', type: 'string', label: 'Color Class' },
       { name: 'className', type: 'string', label: 'CSS Class' }
     ]
   }

packages/components/vite.config.ts

@@ -31,11 +31,13 @@ export default defineConfig({
       fileName: 'index',
     },
     rollupOptions: {
-      external: ['react', 'react-dom'],
+      external: ['react', 'react-dom', '@object-ui/core', '@object-ui/react', '@object-ui/types'],
       output: {
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
+          '@object-ui/core': 'ObjectUICore',
+          '@object-ui/react': 'ObjectUIReact',
         },
       },
     },