@object-ui/components 0.3.0 → 0.5.0

package/src/renderers/basic/image.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 { ImageSchema } from '@object-ui/types';
 
@@ -25,6 +33,7 @@ ComponentRegistry.register('image',
   );
   },
   {
+    namespace: 'ui',
     label: 'Image',
     icon: 'image',
     category: 'basic',
@@ -32,6 +41,9 @@ ComponentRegistry.register('image',
       { name: 'src', type: 'string', label: 'Source URL' },
       { name: 'alt', type: 'string', label: 'Alt Text' },
       { name: 'className', type: 'string', label: 'Classes' }
-    ]
+    ],
+    defaultProps: {
+      className: 'max-w-full h-auto'
+    }
   }
 );

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,81 @@
+/**
+ * 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>
+    );
+  },
+  {
+    namespace: 'ui',
+    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,109 @@
+/**
+ * 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';
+import React from 'react';
+
+ComponentRegistry.register('pagination', 
+  ({ schema, ...props }: { schema: PaginationSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        onPageChange,
+        ...paginationProps
+    } = props;
+    
+    const currentPage = schema.currentPage || schema.page || 1;
+    const totalPages = schema.totalPages || 1;
+    
+    const handlePageChange = (page: number, e: React.MouseEvent) => {
+      e.preventDefault();
+      if (page === currentPage) return;
+      if (page < 1 || page > totalPages) return;
+      
+      if (onPageChange) {
+        onPageChange(page);
+      }
+    };
+
+    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="#" 
+              onClick={(e) => handlePageChange(currentPage - 1, e)}
+              className={currentPage <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              aria-disabled={currentPage <= 1}
+            />
+          </PaginationItem>
+          {getPageNumbers().map((page, idx) => (
+            <PaginationItem key={idx}>
+              {page === -1 ? (
+                <PaginationEllipsis />
+              ) : (
+                <PaginationLink 
+                  href="#" 
+                  isActive={page === currentPage}
+                  onClick={(e) => handlePageChange(page, e)}
+                  className="cursor-pointer"
+                >
+                  {page}
+                </PaginationLink>
+              )}
+            </PaginationItem>
+          ))}
+          <PaginationItem>
+            <PaginationNext 
+              href="#" 
+              onClick={(e) => handlePageChange(currentPage + 1, e)}
+              className={currentPage >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              aria-disabled={currentPage >= totalPages}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    );
+  },
+  {
+    namespace: 'ui',
+    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';
@@ -29,6 +37,7 @@ const SeparatorRenderer = forwardRef<HTMLDivElement, { schema: SeparatorSchema;
 ComponentRegistry.register('separator', 
   SeparatorRenderer,
   {
+    namespace: 'ui',
     label: 'Separator',
     inputs: [
       { 
@@ -42,7 +51,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';
@@ -5,6 +13,16 @@ import { forwardRef } from 'react';
 
 const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className?: string; [key: string]: any }>(
   ({ schema, className, ...props }, ref) => {
+    // Deprecation warning
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        '[ObjectUI] The "span" component is deprecated. Please use Shadcn components instead:\n' +
+        '  - For badges/labels: use "badge" component\n' +
+        '  - For inline text emphasis: use "text" component with appropriate className\n' +
+        'See documentation at https://www.objectui.org/docs/components for alternatives.'
+      );
+    }
+    
     // Extract designer-related props
     const { 
         'data-obj-id': dataObjId, 
@@ -30,12 +48,13 @@ const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className
 ComponentRegistry.register('span', 
   SpanRenderer,
   {
-    label: 'Inline Container',
+    namespace: 'ui',
+    label: 'Inline Container (Deprecated)',
     inputs: [
       { 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';
 
@@ -14,13 +22,14 @@ ComponentRegistry.register('text',
         ...rest 
     } = props;
 
-    // If we have designer props, we must wrap it to make it selectable
-    if (dataObjId) {
+    // If we have designer props or className, we must wrap it to make it selectable and styleable
+    if (dataObjId || schema.className || rest.className) {
         return (
             <span 
                 data-obj-id={dataObjId}
                 data-obj-type={dataObjType}
                 style={style}
+                className={schema.className || rest.className}
                 {...rest}
             >
                 {schema.content || schema.value}
@@ -31,6 +40,7 @@ ComponentRegistry.register('text',
     return <>{schema.content || schema.value}</>;
   },
   {
+    namespace: 'ui',
     label: 'Text',
     inputs: [
       { name: 'content', type: 'string', label: 'Content', required: true }

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 { 
@@ -33,6 +41,7 @@ ComponentRegistry.register('carousel',
     </Carousel>
   ),
   {
+    namespace: 'ui',
     label: 'Carousel',
     inputs: [
       { name: 'orientation', type: 'enum', enum: ['horizontal', 'vertical'], defaultValue: 'horizontal', label: 'Orientation' },
@@ -50,9 +59,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'
     }