@object-ui/components 0.3.0 → 0.3.1

package/src/renderers/basic/index.ts

@@ -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 './div';
 import './text';
 import './span';
@@ -5,3 +13,6 @@ import './separator';
 import './image';
 import './icon';
 import './html';
+import './button-group';
+import './pagination';
+import './navigation-menu';

package/src/renderers/basic/navigation-menu.tsx

@@ -0,0 +1,80 @@
+/**
+ * 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 { NavigationMenuSchema } from '@object-ui/types';
+import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '../../ui/navigation-menu';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('navigation-menu', 
+  ({ schema, ...props }: { schema: NavigationMenuSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...navigationMenuProps
+    } = props;
+    
+    return (
+      <NavigationMenu 
+        className={schema.className} 
+        {...navigationMenuProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        <NavigationMenuList>
+          {schema.items?.map((item, idx) => (
+            <NavigationMenuItem key={idx}>
+              {item.children ? (
+                <>
+                  <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>
+                  <NavigationMenuContent>
+                    <ul className="grid w-full gap-3 p-4 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+                      {item.children.map((child, childIdx) => (
+                        <li key={childIdx}>
+                          <NavigationMenuLink asChild>
+                            <a
+                              className={cn(
+                                "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                              )}
+                              href={child.href}
+                            >
+                              <div className="text-sm font-medium leading-none">{child.label}</div>
+                              {child.description && (
+                                <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                                  {child.description}
+                                </p>
+                              )}
+                            </a>
+                          </NavigationMenuLink>
+                        </li>
+                      ))}
+                    </ul>
+                  </NavigationMenuContent>
+                </>
+              ) : (
+                <NavigationMenuLink href={item.href}>{item.label}</NavigationMenuLink>
+              )}
+            </NavigationMenuItem>
+          ))}
+        </NavigationMenuList>
+      </NavigationMenu>
+    );
+  },
+  {
+    label: 'Navigation Menu',
+    inputs: [
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      items: [
+        { label: 'Home', href: '/' },
+        { label: 'About', href: '/about' }
+      ]
+    }
+  }
+);

package/src/renderers/basic/pagination.tsx

@@ -0,0 +1,82 @@
+/**
+ * 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 { PaginationSchema } from '@object-ui/types';
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '../../ui/pagination';
+
+ComponentRegistry.register('pagination', 
+  ({ schema, ...props }: { schema: PaginationSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...paginationProps
+    } = props;
+    
+    const currentPage = schema.currentPage || schema.page || 1;
+    const totalPages = schema.totalPages || 1;
+    const showEllipsis = totalPages > 7;
+    
+    const getPageNumbers = () => {
+      if (totalPages <= 7) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+      }
+      
+      if (currentPage <= 3) {
+        return [1, 2, 3, 4, 5, -1, totalPages];
+      }
+      
+      if (currentPage >= totalPages - 2) {
+        return [1, -1, totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages];
+      }
+      
+      return [1, -1, currentPage - 1, currentPage, currentPage + 1, -1, totalPages];
+    };
+    
+    return (
+      <Pagination 
+        className={schema.className} 
+        {...paginationProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          {getPageNumbers().map((page, idx) => (
+            <PaginationItem key={idx}>
+              {page === -1 ? (
+                <PaginationEllipsis />
+              ) : (
+                <PaginationLink href="#" isActive={page === currentPage}>
+                  {page}
+                </PaginationLink>
+              )}
+            </PaginationItem>
+          ))}
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+  },
+  {
+    label: 'Pagination',
+    inputs: [
+      { name: 'currentPage', type: 'number', label: 'Current Page', defaultValue: 1 },
+      { name: 'totalPages', type: 'number', label: 'Total Pages', defaultValue: 10 },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      currentPage: 1,
+      totalPages: 10
+    }
+  }
+);

package/src/renderers/basic/separator.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 { SeparatorSchema } from '@object-ui/types';
 import { Separator } from '../../ui';
@@ -42,7 +50,7 @@ ComponentRegistry.register('separator',
     ],
     defaultProps: {
       orientation: 'horizontal',
-      className: 'my-4'
+      className: 'my-2 sm:my-4'
     }
   }
 );

package/src/renderers/basic/span.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 { SpanSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
@@ -35,7 +43,7 @@ ComponentRegistry.register('span',
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
-      className: 'px-2 py-1'
+      className: 'px-1.5 py-0.5 sm:px-2 sm:py-1'
     },
     defaultChildren: [
       { type: 'text', content: 'Inline text' }

package/src/renderers/basic/text.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 { TextSchema } from '@object-ui/types';
 

package/src/renderers/complex/__tests__/data-table.test.ts

@@ -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 { describe, it, expect, beforeAll } from 'vitest';
 import { ComponentRegistry } from '@object-ui/core';
 

package/src/renderers/complex/carousel.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 { CarouselSchema } from '@object-ui/types';
 import { 
@@ -50,9 +58,9 @@ ComponentRegistry.register('carousel',
       orientation: 'horizontal',
       showArrows: true,
       items: [
-        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 1' }] }],
-        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 2' }] }],
-        [{ type: 'div', className: 'p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 3' }] }]
+        [{ type: 'div', className: 'p-4 sm:p-6 md:p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 1' }] }],
+        [{ type: 'div', className: 'p-4 sm:p-6 md:p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 2' }] }],
+        [{ type: 'div', className: 'p-4 sm:p-6 md:p-8 border rounded bg-slate-50', body: [{ type: 'text', content: 'Slide 3' }] }]
       ],
       className: 'w-full max-w-xs'
     }

package/src/renderers/complex/data-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.
+ */
+
 // Enterprise-level DataTable Component (Airtable-like)
 import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
@@ -77,7 +85,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 +99,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);
@@ -386,8 +403,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
       </div>
 
       {/* Table */}
-      <div className="border rounded-lg">
-        <Table>
+      <Table>
           {caption && <TableCaption>{caption}</TableCaption>}
           <TableHeader>
             <TableRow>
@@ -511,7 +527,6 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
             )}
           </TableBody>
         </Table>
-      </div>
 
       {/* Pagination */}
       {pagination && sortedData.length > 0 && (

package/src/renderers/complex/filter-builder.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 { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
 import { FilterBuilder } from '../../ui/filter-builder';

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

package/src/renderers/complex/scroll-area.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 { ScrollAreaSchema } from '@object-ui/types';
 import { ScrollArea, ScrollBar } from '../../ui';

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>

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

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 {

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

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

@@ -0,0 +1,59 @@
+/**
+ * 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>
+    );
+  },
+  {
+    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';
+

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

@@ -0,0 +1,49 @@
+/**
+ * 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 { KbdSchema } from '@object-ui/types';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('kbd', 
+  ({ schema, ...props }: { schema: KbdSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...kbdProps
+    } = props;
+    
+    const keys = Array.isArray(schema.keys) ? schema.keys : [schema.keys || schema.label || 'K'];
+    
+    return (
+      <div className={cn('inline-flex flex-wrap gap-1', schema.className)}>
+        {keys.map((key, idx) => (
+          <kbd
+            key={idx}
+            className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+            {...kbdProps}
+            {...(idx === 0 ? { 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style } : {})}
+          >
+            {key}
+          </kbd>
+        ))}
+      </div>
+    );
+  },
+  {
+    label: 'Keyboard Key',
+    inputs: [
+      { name: 'label', type: 'string', label: 'Label' },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      label: 'K'
+    }
+  }
+);

package/src/renderers/data-display/list.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 { ListSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';