feat: enhance layout components with improved props handling and responsive configurations

Author: hotlong

packages/components/src/renderers/complex/scroll-area.tsx

@@ -12,27 +12,44 @@ import { ScrollArea, ScrollBar } from '../../ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('scroll-area', 
-  ({ 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" />}
+  ({ schema, className, ...props }: { schema: ScrollAreaSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...scrollAreaProps 
+    } = props;
+
+    const orientation = schema.orientation || 'vertical';
+
+    return (
+    <ScrollArea 
+        className={className} 
+        style={{ height: schema.height, width: schema.width, ...style }} 
+        {...scrollAreaProps}
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+    >
+      {renderChildren(schema.children)}
+      {(orientation === 'horizontal' || orientation === 'both') && <ScrollBar orientation="horizontal" />}
+      {(orientation === 'vertical' || orientation === 'both') && <ScrollBar orientation="vertical" />}
     </ScrollArea>
-  ),
+  )},
   {
     namespace: 'ui',
     label: 'Scroll Area',
     inputs: [
       { name: 'height', type: 'string', label: 'Height (e.g. 200px)' },
       { name: 'width', type: 'string', label: 'Width' },
       { name: 'orientation', type: 'enum', enum: ['vertical', 'horizontal', 'both'], defaultValue: 'vertical', label: 'Orientation' },
-      { name: 'content', type: 'slot', label: 'Content' },
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
       height: '200px',
       width: '100%',
       orientation: 'vertical',
-      content: [
+      children: [
         { type: 'div', className: 'p-4', body: [{ type: 'text', content: 'Scrollable content goes here. Add more content to see scrolling behavior.' }] }
       ],
       className: 'rounded-md border'

packages/components/src/renderers/layout/aspect-ratio.tsx

@@ -30,7 +30,7 @@ ComponentRegistry.register('aspect-ratio',
         {schema.image ? (
           <img src={schema.image} alt={schema.alt || ''} className="rounded-md object-cover w-full h-full" />
         ) : (
-          renderChildren(schema.body)
+          renderChildren(schema.children || schema.body)
         )}
       </AspectRatio>
     );

packages/components/src/renderers/layout/card.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { CardSchema } from '@object-ui/types';
-import { renderChildren } from '../../lib/utils';
+import { renderChildren, cn } from '../../lib/utils';
 import {
   Card,
   CardHeader,
@@ -28,11 +28,18 @@ const CardRenderer = forwardRef<HTMLDivElement, { schema: CardSchema; className?
         style, 
         ...cardProps 
     } = props;
+    
+    const isClickable = schema.clickable || !!props.onClick;
+    const isHoverable = schema.hoverable || isClickable;
 
     return (
     <Card 
         ref={ref}
-        className={className} 
+        className={cn(
+          className, 
+          isHoverable && "transition-colors hover:bg-muted/50",
+          isClickable && "cursor-pointer active:bg-muted"
+        )} 
         {...cardProps}
         // Apply designer props
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}

packages/components/src/renderers/layout/grid.tsx

@@ -50,13 +50,27 @@ const GAPS: Record<number, string> = {
 ComponentRegistry.register('grid', 
   ({ schema, className, ...props }: { schema: GridSchema & { smColumns?: number, mdColumns?: number, lgColumns?: number, xlColumns?: number }; className?: string; [key: string]: any }) => {
     // Determine columns configuration
-    // Supports direct number or responsive object logic if schema allows, 
-    // but here we primarily handle the flat properties supported by the designer inputs
-    const baseCols = typeof schema.columns === 'number' ? schema.columns : 2;
-    const smCols = schema.smColumns;
-    const mdCols = schema.mdColumns;
-    const lgCols = schema.lgColumns;
-    const xlCols = schema.xlColumns;
+    // Supports detailed object configuration from schema
+    let baseCols = 2;
+    let smCols, mdCols, lgCols, xlCols;
+
+    if (typeof schema.columns === 'number') {
+      baseCols = schema.columns;
+    } else if (typeof schema.columns === 'object' && schema.columns !== null) {
+      // Handle responsive object: { xs: 1, sm: 2, md: 3, lg: 4 }
+      // Note: 'xs' corresponds to base (mobile-first)
+      baseCols = schema.columns.xs ?? 1;
+      smCols = schema.columns.sm;
+      mdCols = schema.columns.md;
+      lgCols = schema.columns.lg;
+      xlCols = schema.columns.xl;
+    }
+
+    // Fallback to legacy flat props if provided (from designer)
+    if (schema.smColumns) smCols = schema.smColumns;
+    if (schema.mdColumns) mdCols = schema.mdColumns;
+    if (schema.lgColumns) lgCols = schema.lgColumns;
+    if (schema.xlColumns) xlCols = schema.xlColumns;
 
     const gap = schema.gap ?? 4;
 
@@ -71,7 +85,7 @@ ComponentRegistry.register('grid',
       lgCols && GRID_COLS_LG[lgCols],
       xlCols && GRID_COLS_XL[xlCols],
       // Gap
-      GAPS[gap] || 'gap-4',
+      GAPS[gap] || `gap-[${gap * 0.25}rem]`, // Fallback for arbitrary values if not in map
       className
     );
 

packages/components/src/renderers/layout/tabs.tsx

@@ -15,38 +15,63 @@ import {
   TabsTrigger,
   TabsContent
 } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
 
-ComponentRegistry.register('tabs', 
-  ({ schema, className, ...props }: { schema: TabsSchema; className?: string; [key: string]: any }) => {
-    // Extract designer-related props
-    const { 
-        'data-obj-id': dataObjId, 
-        'data-obj-type': dataObjType,
-        style, 
-        ...tabsProps 
-    } = props;
+const TabsRenderer = ({ schema, className, onChange, value, ...props }: { schema: TabsSchema; className?: string; onChange?: (val: string) => void; value?: string; [key: string]: any }) => {
+  // Extract designer-related props
+  const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style, 
+      ...tabsProps 
+  } = props;
 
-    return (
+  const handleValueChange = (val: string) => {
+    if (onChange) {
+      onChange(val);
+    }
+  };
+
+  const isVertical = schema.orientation === 'vertical';
+
+  return (
     <Tabs 
-        defaultValue={schema.defaultValue} 
-        className={className} 
+        defaultValue={value === undefined ? schema.defaultValue : undefined} 
+        value={value ?? schema.value}
+        onValueChange={handleValueChange}
+        orientation={schema.orientation || 'horizontal'}
+        className={cn(className, isVertical && "flex gap-2")} 
         {...tabsProps}
         // Apply designer props
         {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
     >
-      <TabsList>
+      <TabsList className={cn(isVertical && "flex-col h-auto items-stretch bg-muted/50 p-1")}>
         {schema.items?.map((item) => (
-          <TabsTrigger key={item.value} value={item.value}>{item.label}</TabsTrigger>
+          <TabsTrigger 
+            key={item.value} 
+            value={item.value}
+            disabled={item.disabled}
+            className={cn(isVertical && "justify-start")}
+          >
+            {item.label}
+          </TabsTrigger>
         ))}
       </TabsList>
       {schema.items?.map((item) => (
-        <TabsContent key={item.value} value={item.value}>
-          {renderChildren((item as any).body)}
+        <TabsContent 
+          key={item.value} 
+          value={item.value}
+          className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isVertical && "mt-0 flex-1")}
+        >
+          {renderChildren(item.content || (item as any).body)}
         </TabsContent>
       ))}
     </Tabs>
   );
-  },
+};
+
+ComponentRegistry.register('tabs', TabsRenderer,
   {
     namespace: 'ui',
     label: 'Tabs',