@object-ui/components 0.3.0 → 0.5.0

package/src/renderers/complex/data-table.tsx

@@ -1,5 +1,14 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 // Enterprise-level DataTable Component (Airtable-like)
 import React, { useState, useMemo, useRef, useEffect } from 'react';
+import { cn } from '../../lib/utils';
 import { ComponentRegistry } from '@object-ui/core';
 import type { DataTableSchema } from '@object-ui/types';
 import { 
@@ -77,7 +86,7 @@ type SortDirection = 'asc' | 'desc' | null;
 const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   const {
     caption,
-    columns: initialColumns = [],
+    columns: rawColumns = [],
     data = [],
     pagination = true,
     pageSize: initialPageSize = 10,
@@ -91,6 +100,15 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     className,
   } = schema;
 
+  // Normalize columns to support legacy keys (label/name) from existing JSONs
+  const initialColumns = useMemo(() => {
+    return rawColumns.map((col: any) => ({
+      ...col,
+      header: col.header || col.label,
+      accessorKey: col.accessorKey || col.name
+    }));
+  }, [rawColumns]);
+
   // State management
   const [searchQuery, setSearchQuery] = useState('');
   const [sortColumn, setSortColumn] = useState<string | null>(null);
@@ -343,56 +361,60 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     return selectedRowIds.has(rowId);
   }) && !allPageRowsSelected;
 
+  const showToolbar = searchable || exportable || (selectable && selectedRowIds.size > 0);
+
   return (
-    <div className={`space-y-4 ${className || ''}`}>
+    <div className={`flex flex-col h-full gap-4 ${className || ''}`}>
       {/* Toolbar */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-2 flex-1">
-          {searchable && (
-            <div className="relative max-w-sm flex-1">
-              <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="Search..."
-                value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                  setCurrentPage(1);
-                }}
-                className="pl-8"
-              />
-            </div>
-          )}
-        </div>
-        
-        <div className="flex items-center gap-2">
-          {exportable && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleExport}
-              disabled={sortedData.length === 0}
-            >
-              <Download className="h-4 w-4 mr-2" />
-              Export CSV
-            </Button>
-          )}
+      {showToolbar && (
+        <div className="flex items-center justify-between gap-4 flex-none">
+          <div className="flex items-center gap-2 flex-1">
+            {searchable && (
+              <div className="relative max-w-sm flex-1">
+                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => {
+                    setSearchQuery(e.target.value);
+                    setCurrentPage(1);
+                  }}
+                  className="pl-8"
+                />
+              </div>
+            )}
+          </div>
           
-          {selectable && selectedRowIds.size > 0 && (
-            <div className="text-sm text-muted-foreground">
-              {selectedRowIds.size} selected
-            </div>
-          )}
+          <div className="flex items-center gap-2">
+            {exportable && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleExport}
+                disabled={sortedData.length === 0}
+              >
+                <Download className="h-4 w-4 mr-2" />
+                Export CSV
+              </Button>
+            )}
+            
+            {selectable && selectedRowIds.size > 0 && (
+              <div className="text-sm text-muted-foreground">
+                {selectedRowIds.size} selected
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Table */}
-      <div className="border rounded-lg">
+      <div className="rounded-md border flex-1 min-h-0 overflow-auto relative bg-background">
         <Table>
           {caption && <TableCaption>{caption}</TableCaption>}
-          <TableHeader>
+          <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
             <TableRow>
               {selectable && (
-                <TableHead className="w-12">
+                <TableHead className="w-12 bg-background">
                   <Checkbox
                     checked={allPageRowsSelected ? true : somePageRowsSelected ? 'indeterminate' : false}
                     onCheckedChange={handleSelectAll}
@@ -407,7 +429,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 return (
                   <TableHead
                     key={col.accessorKey}
-                    className={`${col.className || ''} ${sortable && col.sortable !== false ? 'cursor-pointer select-none' : ''} ${isDragging ? 'opacity-50' : ''} ${isDragOver ? 'border-l-2 border-primary' : ''} relative group`}
+                    className={`${col.className || ''} ${sortable && col.sortable !== false ? 'cursor-pointer select-none' : ''} ${isDragging ? 'opacity-50' : ''} ${isDragOver ? 'border-l-2 border-primary' : ''} relative group bg-background`}
                     style={{ 
                       width: columnWidth,
                       minWidth: columnWidth 
@@ -439,7 +461,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 );
               })}
               {rowActions && (
-                <TableHead className="w-24 text-right">Actions</TableHead>
+                <TableHead className="w-24 text-right bg-background">Actions</TableHead>
               )}
             </TableRow>
           </TableHeader>
@@ -448,66 +470,97 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
               <TableRow>
                 <TableCell
                   colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)}
-                  className="h-24 text-center text-muted-foreground"
+                  className="h-96 text-center text-muted-foreground"
                 >
-                  No data available
+                  <div className="flex flex-col items-center justify-center gap-2">
+                    <Search className="h-8 w-8 text-muted-foreground/50" />
+                    <p>No results found</p>
+                    <p className="text-xs text-muted-foreground/50">Try adjusting your filters or search query.</p>
+                  </div>
                 </TableCell>
               </TableRow>
             ) : (
-              paginatedData.map((row, rowIndex) => {
-                const globalIndex = (currentPage - 1) * pageSize + rowIndex;
-                const rowId = getRowId(row, globalIndex);
-                const isSelected = selectedRowIds.has(rowId);
-                
-                return (
-                  <TableRow key={rowId} data-state={isSelected ? 'selected' : undefined}>
-                    {selectable && (
-                      <TableCell>
-                        <Checkbox
-                          checked={isSelected}
-                          onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
-                        />
-                      </TableCell>
-                    )}
-                    {columns.map((col, colIndex) => {
-                      const columnWidth = columnWidths[col.accessorKey] || col.width;
-                      return (
-                        <TableCell 
-                          key={colIndex} 
-                          className={col.cellClassName}
-                          style={{
-                            width: columnWidth,
-                            minWidth: columnWidth,
-                            maxWidth: columnWidth
-                          }}
-                        >
-                          {row[col.accessorKey]}
+              <>
+                {paginatedData.map((row, rowIndex) => {
+                  const globalIndex = (currentPage - 1) * pageSize + rowIndex;
+                  const rowId = getRowId(row, globalIndex);
+                  const isSelected = selectedRowIds.has(rowId);
+                  
+                  return (
+                    <TableRow 
+                      key={rowId} 
+                      data-state={isSelected ? 'selected' : undefined}
+                      className={cn(
+                        // @ts-expect-error - onRowClick might not be in schema type definition
+                        schema.onRowClick && "cursor-pointer"
+                      )}
+                      onClick={(e) => {
+                        // @ts-expect-error - onRowClick might not be in schema type definition
+                        if (schema.onRowClick && !e.defaultPrevented) {
+                           // Simple heuristic to avoid triggering on interactive elements if they didn't stop propagation
+                           const target = e.target as HTMLElement;
+                           if (target.closest('button') || target.closest('[role="checkbox"]') || target.closest('a')) {
+                             return;
+                           }
+                           // @ts-expect-error - onRowClick might not be in schema type definition
+                           schema.onRowClick(row);
+                        }
+                      }}
+                    >
+                      {selectable && (
+                        <TableCell>
+                          <Checkbox
+                            checked={isSelected}
+                            onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
+                          />
                         </TableCell>
-                      );
-                    })}
-                    {rowActions && (
-                      <TableCell className="text-right">
-                        <div className="flex items-center justify-end gap-1">
-                          <Button
-                            variant="ghost"
-                            size="icon-sm"
-                            onClick={() => schema.onRowEdit?.(row)}
-                          >
-                            <Edit className="h-4 w-4" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon-sm"
-                            onClick={() => schema.onRowDelete?.(row)}
+                      )}
+                      {columns.map((col, colIndex) => {
+                        const columnWidth = columnWidths[col.accessorKey] || col.width;
+                        return (
+                          <TableCell 
+                            key={colIndex} 
+                            className={col.cellClassName}
+                            style={{
+                              width: columnWidth,
+                              minWidth: columnWidth,
+                              maxWidth: columnWidth
+                            }}
                           >
-                            <Trash2 className="h-4 w-4 text-destructive" />
-                          </Button>
-                        </div>
-                      </TableCell>
-                    )}
+                            {row[col.accessorKey]}
+                          </TableCell>
+                        );
+                      })}
+                      {rowActions && (
+                        <TableCell className="text-right">
+                          <div className="flex items-center justify-end gap-1">
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              onClick={() => schema.onRowEdit?.(row)}
+                            >
+                              <Edit className="h-4 w-4" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon-sm"
+                              onClick={() => schema.onRowDelete?.(row)}
+                            >
+                              <Trash2 className="h-4 w-4 text-destructive" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      )}
+                    </TableRow>
+                  );
+                })}
+                {/* Filler rows to maintain height consistency */}
+                {paginatedData.length > 0 && Array.from({ length: Math.max(0, pageSize - paginatedData.length) }).map((_, i) => (
+                  <TableRow key={`empty-${i}`} className="hover:bg-transparent">
+                    <TableCell colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} className="h-[52px] p-0" />
                   </TableRow>
-                );
-              })
+                ))}
+              </>
             )}
           </TableBody>
         </Table>
@@ -585,6 +638,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
 // Register the component
 ComponentRegistry.register('data-table', DataTableRenderer, {
+  namespace: 'ui',
   label: 'Data Table',
   icon: 'table',
   inputs: [

package/src/renderers/complex/filter-builder.tsx

@@ -1,6 +1,14 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
-import { FilterBuilder } from '../../ui/filter-builder';
+import { FilterBuilder } from '../../custom/filter-builder';
 
 ComponentRegistry.register('filter-builder', 
   ({ schema, className, onChange, ...props }: { schema: FilterBuilderSchema; className?: string; onChange?: (event: any) => void; [key: string]: any }) => {
@@ -31,6 +39,7 @@ ComponentRegistry.register('filter-builder',
     );
   },
   {
+    namespace: 'ui',
     label: 'Filter Builder',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },

package/src/renderers/complex/index.ts

@@ -1,10 +1,16 @@
-import './calendar-view';
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import './carousel';
 import './filter-builder';
 import './scroll-area';
 import './resizable';
 import './table';
-import './chatbot';
 import './data-table';
-import './timeline';
+
 

package/src/renderers/complex/resizable.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
 import type { ResizableSchema } from '@object-ui/types';
@@ -11,7 +19,7 @@ import { renderChildren } from '../../lib/utils';
 ComponentRegistry.register('resizable', 
   ({ schema, className, ...props }: { schema: ResizableSchema; className?: string; [key: string]: any }) => (
     <ResizablePanelGroup 
-        direction={schema.direction || 'horizontal'} 
+        orientation={(schema.direction || 'horizontal') as "horizontal" | "vertical"}
         className={className} 
         {...props}
         style={{ minHeight: schema.minHeight || '200px' }}
@@ -27,6 +35,7 @@ ComponentRegistry.register('resizable',
     </ResizablePanelGroup>
   ),
   {
+    namespace: 'ui',
     label: 'Resizable Panel Group',
     inputs: [
       { name: 'direction', type: 'enum', enum: ['horizontal', 'vertical'], defaultValue: 'horizontal', label: 'Direction' },

package/src/renderers/complex/scroll-area.tsx

@@ -1,29 +1,55 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 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: 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'

package/src/renderers/complex/table.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 // table.tsx implementation
 import { ComponentRegistry } from '@object-ui/core';
 import type { TableSchema } from '@object-ui/types';
@@ -22,7 +30,7 @@ ComponentRegistry.register('table',
         <TableRow>
           {schema.columns?.map((col: any, index: number) => (
             <TableHead key={index} className={col.className} style={{ width: col.width }}>
-                {col.header}
+                {col.header || col.label}
             </TableHead>
           ))}
         </TableRow>
@@ -32,7 +40,7 @@ ComponentRegistry.register('table',
           <TableRow key={rowIndex}>
             {schema.columns?.map((col: any, colIndex: number) => (
                 <TableCell key={colIndex} className={col.cellClassName}>
-                    {row[col.accessorKey]}
+                    {row[col.accessorKey || col.name]}
                 </TableCell>
             ))}
           </TableRow>
@@ -51,6 +59,7 @@ ComponentRegistry.register('table',
     </Table>
   ),
   {
+    namespace: 'ui',
     label: 'Table',
     inputs: [
       { name: 'caption', type: 'string', label: 'Caption' },

package/src/renderers/data-display/alert.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { AlertSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
@@ -15,6 +23,7 @@ ComponentRegistry.register('alert',
     </Alert>
   ),
   {
+    namespace: 'ui',
     label: 'Alert',
     inputs: [
       { name: 'title', type: 'string', label: 'Title', required: true },

package/src/renderers/data-display/avatar.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { AvatarSchema } from '@object-ui/types';
 import {
@@ -14,6 +22,7 @@ ComponentRegistry.register('avatar',
     </Avatar>
   ),
   {
+    namespace: 'ui',
     label: 'Avatar',
     inputs: [
       { name: 'src', type: 'string', label: 'Image URL' },

package/src/renderers/data-display/badge.tsx

@@ -1,3 +1,11 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import { ComponentRegistry } from '@object-ui/core';
 import type { BadgeSchema } from '@object-ui/types';
 import { Badge } from '../../ui';
@@ -26,6 +34,7 @@ ComponentRegistry.register('badge',
   );
   },
   {
+    namespace: 'ui',
     label: 'Badge',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },

package/src/renderers/data-display/breadcrumb.tsx

@@ -0,0 +1,60 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { ComponentRegistry } from '@object-ui/core';
+import type { BreadcrumbSchema } from '@object-ui/types';
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from '../../ui/breadcrumb';
+import { renderChildren } from '../../lib/utils';
+
+ComponentRegistry.register('breadcrumb', 
+  ({ schema, ...props }: { schema: BreadcrumbSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...breadcrumbProps
+    } = props;
+    
+    return (
+      <Breadcrumb 
+        className={schema.className} 
+        {...breadcrumbProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        <BreadcrumbList>
+          {schema.items?.map((item, idx) => (
+            <div key={idx} className="flex items-center">
+              <BreadcrumbItem>
+                {idx === (schema.items?.length || 0) - 1 ? (
+                  <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              {idx < (schema.items?.length || 0) - 1 && <BreadcrumbSeparator />}
+            </div>
+          ))}
+        </BreadcrumbList>
+      </Breadcrumb>
+    );
+  },
+  {
+    namespace: 'ui',
+    label: 'Breadcrumb',
+    inputs: [
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      items: [
+        { label: 'Home', href: '/' },
+        { label: 'Products', href: '/products' },
+        { label: 'Product' }
+      ]
+    }
+  }
+);

package/src/renderers/data-display/index.ts

@@ -1,6 +1,18 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import './badge';
 import './avatar';
 import './alert';
 import './list';
 import './tree-view';
 import './statistic';
+import './breadcrumb';
+import './kbd';
+import './table';
+