@object-ui/components 0.3.0 → 0.5.0

package/src/renderers/layout/tabs.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 { TabsSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
@@ -7,39 +15,65 @@ import {
   TabsTrigger,
   TabsContent
 } from '../../ui';
+import { cn } from '../../lib/utils';
+import React from 'react';
+
+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;
 
-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 handleValueChange = (val: string) => {
+    if (onChange) {
+      onChange(val);
+    }
+  };
 
-    return (
+  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',
     inputs: [
       { name: 'defaultValue', type: 'string', label: 'Default Value', required: true },

package/src/renderers/navigation/header-bar.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 { HeaderBarSchema } from '@object-ui/types';
@@ -14,7 +22,7 @@ import {
 
 ComponentRegistry.register('header-bar', 
   ({ schema }: { schema: HeaderBarSchema }) => (
-    <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
+    <header className="flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b px-3 sm:px-4">
       <SidebarTrigger />
       <Separator orientation="vertical" className="mr-2 h-4" />
       <Breadcrumb>
@@ -36,6 +44,7 @@ ComponentRegistry.register('header-bar',
     </header>
   ),
   {
+    namespace: 'ui',
     label: 'Header Bar',
     inputs: [
        { name: 'crumbs', type: 'array', label: 'Breadcrumbs' }

package/src/renderers/navigation/index.ts

@@ -1,2 +1,10 @@
+/**
+ * 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 './sidebar';
 import './header-bar';

package/src/renderers/navigation/sidebar.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 { SidebarSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
@@ -22,6 +30,7 @@ ComponentRegistry.register('sidebar-provider',
     <SidebarProvider {...props}>{renderChildren(schema.body)}</SidebarProvider>
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar Provider',
     inputs: [
       { name: 'defaultOpen', type: 'boolean', label: 'Default Open', defaultValue: true }
@@ -41,6 +50,7 @@ ComponentRegistry.register('sidebar',
     <Sidebar {...props}>{renderChildren(schema.body)}</Sidebar>
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar',
     inputs: [
       { name: 'collapsible', type: 'enum', enum: ['offcanvas', 'icon', 'none'], defaultValue: 'icon', label: 'Collapsible' },
@@ -94,6 +104,7 @@ ComponentRegistry.register('sidebar-group',
     </SidebarGroup>
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar Group',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' }
@@ -139,6 +150,7 @@ ComponentRegistry.register('sidebar-menu-button',
     </SidebarMenuButton>
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar Menu Button',
     inputs: [
       { name: 'active', type: 'boolean', label: 'Active', defaultValue: false },
@@ -183,6 +195,7 @@ ComponentRegistry.register('sidebar-trigger',
     <SidebarTrigger className={className} {...props} />
   ),
   {
+    namespace: 'ui',
     label: 'Sidebar Trigger',
     inputs: [{ name: 'className', type: 'string', label: 'CSS Class' }]
   }

package/src/renderers/overlay/alert-dialog.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 { AlertDialogSchema } from '@object-ui/types';
 import { 
@@ -33,6 +41,7 @@ ComponentRegistry.register('alert-dialog',
     </AlertDialog>
   ),
   {
+    namespace: 'ui',
     label: 'Alert Dialog',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/overlay/context-menu.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 { ContextMenuSchema } from '@object-ui/types';
 import { 
@@ -45,7 +53,7 @@ const renderContextMenuItems = (items: any[]) => {
 ComponentRegistry.register('context-menu', 
   ({ schema, className, ...props }: { schema: ContextMenuSchema; className?: string; [key: string]: any }) => {
     // Determine classes
-    const triggerClass = schema.triggerClassName || className || (schema.className as string) || "h-[150px] w-[300px] border border-dashed text-sm flex items-center justify-center";
+    const triggerClass = schema.triggerClassName || className || (schema.className as string) || "h-[120px] w-full sm:h-[150px] sm:w-[300px] border border-dashed text-sm flex items-center justify-center";
     const contentClass = schema.contentClassName;
 
     return (
@@ -62,6 +70,7 @@ ComponentRegistry.register('context-menu',
     </ContextMenu>
   )},
   {
+    namespace: 'ui',
     label: 'Context Menu',
     inputs: [
       { 

package/src/renderers/overlay/dialog.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 { DialogSchema } from '@object-ui/types';
 import { 
@@ -32,6 +40,7 @@ ComponentRegistry.register('dialog',
     </Dialog>
   ),
   {
+    namespace: 'ui',
     label: 'Dialog',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/overlay/drawer.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 { DrawerSchema } from '@object-ui/types';
 import { 
@@ -34,6 +42,7 @@ ComponentRegistry.register('drawer',
     </Drawer>
   ),
   {
+    namespace: 'ui',
     label: 'Drawer',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/overlay/dropdown-menu.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 { DropdownMenuSchema } from '@object-ui/types';
 import { 
@@ -57,6 +65,7 @@ ComponentRegistry.register('dropdown-menu',
     </DropdownMenu>
   ),
   {
+    namespace: 'ui',
     label: 'Dropdown Menu',
     inputs: [
       { name: 'label', type: 'string', label: 'Menu Label' },

package/src/renderers/overlay/hover-card.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 { HoverCardSchema } from '@object-ui/types';
 import { 
@@ -19,6 +27,7 @@ ComponentRegistry.register('hover-card',
     </HoverCard>
   ),
   {
+    namespace: 'ui',
     label: 'Hover Card',
     inputs: [
        { name: 'openDelay', type: 'number', label: 'Open Delay' },

package/src/renderers/overlay/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 './dialog';
 import './sheet';
 import './popover';
@@ -7,3 +15,4 @@ import './drawer';
 import './hover-card';
 import './dropdown-menu';
 import './context-menu';
+import './menubar';

package/src/renderers/overlay/menubar.tsx

@@ -0,0 +1,76 @@
+/**
+ * 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 { MenubarSchema } from '@object-ui/types';
+import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarSub, MenubarSubTrigger, MenubarSubContent } from '../../ui/menubar';
+
+ComponentRegistry.register('menubar', 
+  ({ schema, ...props }: { schema: MenubarSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...menubarProps
+    } = props;
+    
+    return (
+      <Menubar 
+        className={schema.className} 
+        {...menubarProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {schema.menus?.map((menu, idx) => (
+          <MenubarMenu key={idx}>
+            <MenubarTrigger>{menu.label}</MenubarTrigger>
+            <MenubarContent>
+              {menu.items?.map((item, itemIdx) => (
+                item.separator ? (
+                  <MenubarSeparator key={itemIdx} />
+                ) : item.children ? (
+                  <MenubarSub key={itemIdx}>
+                    <MenubarSubTrigger>{item.label}</MenubarSubTrigger>
+                    <MenubarSubContent>
+                      {item.children.map((child, childIdx) => (
+                        <MenubarItem key={childIdx}>{child.label}</MenubarItem>
+                      ))}
+                    </MenubarSubContent>
+                  </MenubarSub>
+                ) : (
+                  <MenubarItem key={itemIdx} disabled={item.disabled}>
+                    {item.label}
+                  </MenubarItem>
+                )
+              ))}
+            </MenubarContent>
+          </MenubarMenu>
+        ))}
+      </Menubar>
+    );
+  },
+  {
+    namespace: 'ui',
+    label: 'Menubar',
+    inputs: [
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      menus: [
+        {
+          label: 'File',
+          items: [
+            { label: 'New' },
+            { label: 'Open' },
+            { separator: true },
+            { label: 'Exit' }
+          ]
+        }
+      ]
+    }
+  }
+);

package/src/renderers/overlay/popover.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 { PopoverSchema } from '@object-ui/types';
 import { 
@@ -19,6 +27,7 @@ ComponentRegistry.register('popover',
     </Popover>
   ),
   {
+    namespace: 'ui',
     label: 'Popover',
     inputs: [
       { name: 'modal', type: 'boolean', label: 'Modal' },

package/src/renderers/overlay/sheet.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 { SheetSchema } from '@object-ui/types';
 import { 
@@ -32,6 +40,7 @@ ComponentRegistry.register('sheet',
     </Sheet>
   ),
   {
+    namespace: 'ui',
     label: 'Sheet',
     inputs: [
       { name: 'title', type: 'string', label: 'Title' },

package/src/renderers/overlay/tooltip.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 { TooltipSchema } from '@object-ui/types';
 import { 
@@ -26,6 +34,7 @@ ComponentRegistry.register('tooltip',
     </TooltipProvider>
   ),
   {
+    namespace: 'ui',
     label: 'Tooltip',
     inputs: [
       { name: 'delayDuration', type: 'number', label: 'Delay Duration', defaultValue: 700 },

package/src/renderers/placeholders.tsx

@@ -0,0 +1,107 @@
+/**
+ * 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 { cn } from '../lib/utils';
+import { Box, FileQuestion } from 'lucide-react';
+
+export const PlaceholderRenderer = ({ schema, className }: any) => {
+  const type = schema.type;
+  const isView = type.startsWith('view:');
+  const isWidget = type.startsWith('widget:');
+  const isField = type.startsWith('field:');
+
+  return (
+    <div className={cn(
+      "flex flex-col items-center justify-center p-6 border-2 border-dashed rounded-lg bg-muted/30 transition-colors hover:bg-muted/50",
+      isView && "border-blue-300 bg-blue-50/50 min-h-[200px]",
+      isWidget && "border-purple-300 bg-purple-50/50 min-h-[150px]",
+      isField && "border-yellow-300 bg-yellow-50/50 p-2 min-h-[40px] flex-row gap-2 justify-start",
+      className
+    )}>
+      <div className={cn("flex items-center gap-2 text-muted-foreground", isField && "text-sm")}>
+        {isField ? <Box className="h-4 w-4" /> : <FileQuestion className="h-8 w-8 mb-2 opacity-50" />}
+        <div className="flex flex-col items-center text-center">
+             <span className="font-mono font-medium text-foreground">{type}</span>
+             {!isField && <span className="text-xs">Component Placeholder</span>}
+        </div>
+      </div>
+      {schema.props && !isField && (
+        <div className="mt-4 w-full text-xs text-muted-foreground bg-background/50 p-2 rounded overflow-hidden">
+            <div className="opacity-70">Properties:</div>
+            <pre className="mt-1 truncate">{JSON.stringify(schema.props, null, 0)}</pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// List of all protocol-defined components that need placeholders
+const PROTOCOL_COMPONENTS = [
+  // 1. Views (List)
+  'view:grid', 'view:kanban', 'view:map', 'view:calendar', 'view:gantt', 
+  'view:timeline', 'view:gallery',
+  
+  // 2. Views (Form)
+  'view:simple', 'view:wizard', 'view:tabbed', 'view:drawer', 'view:modal', 'view:split',
+
+  // 3. Fields (Textual)
+  'field:text', 'field:textarea', 'field:password', 'field:email', 'field:url', 'field:phone',
+  
+  // 4. Fields (Rich)
+  'field:markdown', 'field:html', 'field:code',
+
+  // 5. Fields (Numeric)
+  'field:number', 'field:currency', 'field:percent', 'field:slider',
+
+  // 6. Fields (Selection)
+  'field:boolean', 'field:checkboxes', 'field:select', 'field:multiselect', 'field:radio',
+
+  // 7. Fields (Date/Time)
+  'field:date', 'field:datetime', 'field:time', 'field:duration',
+
+  // 8. Fields (Relational)
+  'field:lookup', 'field:master_detail', 'field:tree',
+
+  // 9. Fields (Media)
+  'field:image', 'field:file', 'field:video', 'field:audio', 'field:avatar',
+
+  // 10. Fields (Visual)
+  'field:color', 'field:rating', 'field:signature', 'field:qrcode', 'field:progress',
+
+  // 11. Fields (Structure)
+  'field:json', 'field:address', 'field:location',
+
+  // 12. Page Components
+  'page:header', 'page-header', // Added headers
+  'page:footer', 'page:tabs', 'page:accordion', 'page:card', 'page:sidebar',
+  'record:details', 'record:highlights', 'record:related_list', 'record:activity', 
+  'record:chatter', 'record:path',
+  'app:launcher', 'nav:menu', 'nav:breadcrumb',
+  'global:search', 'global:notifications', 'user:profile',
+
+  // 13. Dashboard Widgets
+  'widget:metric', 'widget:bar', 'widget:line', 'widget:pie', 'widget:funnel', 
+  'widget:radar', 'widget:scatter', 'widget:heatmap', 'widget:pivot', 'widget:table', 'widget:text', 'widget:image',
+
+  // 14. Smart Actions
+  'action:button', 'action:group', 'action:menu', 'action:icon',
+
+  // 15. AI
+  'ai:chat_window', 'ai:input', 'ai:suggestion', 'ai:feedback'
+];
+
+export function registerPlaceholders() {
+    PROTOCOL_COMPONENTS.forEach(type => {
+        // Only register if not already registered (to avoid overwriting real implementations)
+        if (!ComponentRegistry.get(type)) {
+            ComponentRegistry.register(type, PlaceholderRenderer);
+        }
+    });
+}