Add ref forwarding to SchemaRenderer and ButtonRenderer

Refactored SchemaRenderer and button form renderer to use React.forwardRef, enabling ref forwarding for better integration with libraries like Radix UI. Updated renderChildren to unwrap single children arrays for compatibility with 'asChild' patterns and improved key assignment for child elements.

Author: hotlong

packages/components/src/lib/utils.tsx

@@ -10,8 +10,13 @@ export function cn(...inputs: ClassValue[]) {
 export function renderChildren(children: any): React.ReactNode {
   if (!children) return null;
   if (Array.isArray(children)) {
+    if (children.length === 0) return null;
+    // Unwrap single child to support Radix UI 'asChild' pattern which expects a single ReactElement, not an array
+    if (children.length === 1) {
+      return <SchemaRenderer schema={children[0]} />; 
+    }
     return children.map((child, index) => (
-      <SchemaRenderer key={index} schema={child} />
+      <SchemaRenderer key={child.id || index} schema={child} />
     ));
   }
   return <SchemaRenderer schema={children} />;

packages/components/src/renderers/form/button.tsx

@@ -2,9 +2,10 @@ import { ComponentRegistry } from '@object-ui/core';
 import type { ButtonSchema } from '@object-ui/types';
 import { Button } from '../../ui';
 import { renderChildren } from '../../lib/utils';
+import { forwardRef } from 'react';
 
-ComponentRegistry.register('button', 
-  ({ schema, ...props }: { schema: ButtonSchema; [key: string]: any }) => {
+const ButtonRenderer = forwardRef<HTMLButtonElement, { schema: ButtonSchema; [key: string]: any }>(
+  ({ schema, ...props }, ref) => {
     // Extract designer-related props
     const { 
         'data-obj-id': dataObjId, 
@@ -15,6 +16,7 @@ ComponentRegistry.register('button',
 
     return (
     <Button 
+        ref={ref}
         variant={schema.variant} 
         size={schema.size} 
         className={schema.className} 
@@ -25,7 +27,11 @@ ComponentRegistry.register('button',
       {schema.label || renderChildren(schema.body)}
     </Button>
   );
-  },
+  }
+);
+ButtonRenderer.displayName = 'ButtonRenderer';
+
+ComponentRegistry.register('button', ButtonRenderer,
   {
     label: 'Button',
     inputs: [

packages/react/src/SchemaRenderer.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { SchemaNode, ComponentRegistry } from '@object-ui/core';
 
-export const SchemaRenderer: React.FC<{ schema: SchemaNode }> = ({ schema }) => {
+export const SchemaRenderer = forwardRef<any, { schema: SchemaNode }>(({ schema }, ref) => {
   if (!schema) return null;
   // If schema is just a string, render it as text
   if (typeof schema === 'string') return <>{schema}</>;
@@ -23,6 +23,8 @@ export const SchemaRenderer: React.FC<{ schema: SchemaNode }> = ({ schema }) =>
     ...(schema.props || {}),
     className: schema.className,
     'data-obj-id': schema.id,
-    'data-obj-type': schema.type
+    'data-obj-type': schema.type,
+    ref
   });
-};
+});
+SchemaRenderer.displayName = 'SchemaRenderer';