@object-ui/components 0.3.0 → 0.5.0

package/src/custom/sort-builder.tsx

@@ -0,0 +1,129 @@
+/**
+ * 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 * as React from "react"
+import { X, Plus, Trash2 } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "../ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
+
+export interface SortItem {
+  id: string;
+  field: string;
+  order: 'asc' | 'desc';
+}
+
+export interface SortBuilderProps {
+  fields?: Array<{ 
+    value: string
+    label: string
+  }>;
+  value?: SortItem[];
+  onChange?: (value: SortItem[]) => void;
+  className?: string;
+}
+
+export function SortBuilder({
+  fields = [],
+  value = [],
+  onChange,
+  className,
+}: SortBuilderProps) {
+  // Use internal state initialization prop changes
+  const [items, setItems] = React.useState<SortItem[]>(value || []);
+
+  React.useEffect(() => {
+    if (value && JSON.stringify(value) !== JSON.stringify(items)) {
+         setItems(value);
+    }
+  }, [value]);
+
+  const handleChange = (newItems: SortItem[]) => {
+    setItems(newItems);
+    onChange?.(newItems);
+  };
+
+  const addItem = () => {
+    const newItem: SortItem = {
+      id: crypto.randomUUID(),
+      field: fields[0]?.value || "",
+      order: 'asc',
+    };
+    handleChange([...items, newItem]);
+  };
+
+  const updateItem = (id: string, updates: Partial<SortItem>) => {
+    handleChange(items.map(item => item.id === id ? { ...item, ...updates } : item));
+  };
+
+  const removeItem = (id: string) => {
+    handleChange(items.filter(item => item.id !== id));
+  };
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="space-y-2">
+        {items.map((item, index) => (
+          <div key={item.id} className="flex items-center gap-2">
+             <span className="text-sm font-medium w-16 text-muted-foreground">
+               {index === 0 ? "Sort by" : "Then by"}
+             </span>
+             <div className="flex-1">
+                <Select
+                  value={item.field}
+                  onValueChange={(val) => updateItem(item.id, { field: val })}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="Select field" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {fields.map(f => (
+                      <SelectItem key={f.value} value={f.value}>{f.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+             </div>
+             <div className="w-28">
+                <Select
+                  value={item.order}
+                  onValueChange={(val) => updateItem(item.id, { order: val as 'asc' | 'desc' })}
+                >
+                  <SelectTrigger className="h-9">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="asc">A -&gt; Z</SelectItem>
+                    <SelectItem value="desc">Z -&gt; A</SelectItem>
+                  </SelectContent>
+                </Select>
+             </div>
+             <Button
+               variant="ghost"
+               size="icon-sm"
+               className="h-9 w-9 shrink-0"
+               onClick={() => removeItem(item.id)}
+             >
+               <X className="h-4 w-4" />
+             </Button>
+          </div>
+        ))}
+      </div>
+       <Button
+        variant="outline"
+        size="sm"
+        onClick={addItem}
+        className="h-8"
+        disabled={fields.length === 0}
+      >
+        <Plus className="h-3 w-3 mr-2" />
+        Add sort
+      </Button>
+    </div>
+  );
+}

package/src/custom/spinner.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 * as React from "react"
+import { cn } from "../lib/utils"
+import { Loader2 } from "lucide-react"
+
+function Spinner({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="status"
+      aria-label="Loading"
+      className={cn("flex items-center justify-center", className)}
+      {...props}
+    >
+      <Loader2 className="animate-spin text-muted-foreground w-full h-full min-w-4 min-h-4" />
+    </div>
+  )
+}
+
+export { Spinner }

package/src/hooks/use-mobile.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 * as React from "react"
 
 const MOBILE_BREAKPOINT = 768

package/src/index.css

@@ -1,76 +1,127 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+/* Scan sources for Tailwind classes */
+@source '../src/**/*.{ts,tsx}';
+
+/* Tailwind plugin for animations */
+@plugin 'tailwindcss-animate';
+
+/* Define theme colors for Tailwind 4 */
+@theme {
+  /* Border radius tokens */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* Color tokens mapped to CSS variables */
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  /* Chart colors */
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+}
+
+/* CSS custom properties for theme */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+  --radius: 0.5rem;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
 
-    --radius: 0.5rem;
-  }
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+}
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
+* {
+  border-color: hsl(var(--border));
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
 }

package/src/index.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 } from 'vitest';
 
 describe('components', () => {

package/src/index.ts

@@ -1,10 +1,31 @@
+/**
+ * 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 './index.css';
 
 // Register all ObjectUI renderers (side-effects)
 import './renderers'; 
 
 // Export utils
-export * from './lib/utils';
+export { cn } from './lib/utils';
+export { renderChildren } from './lib/utils';
+
+// Export placeholder registration
+export { registerPlaceholders } from './renderers/placeholders';
 
 // Export raw Shadcn UI components
 export * from './ui';
+export * from './custom';
+
+// Export an init function to ensure components are registered
+// This is a workaround for bundlers that might tree-shake side-effect imports
+export function initializeComponents() {
+  // This function exists to ensure the import side-effects above are executed
+  // Simply importing this module should register all components
+  return true;
+}

package/src/lib/utils.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 { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 import { SchemaRenderer } from "@object-ui/react"

package/src/new-components.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';
 
@@ -62,13 +70,4 @@ describe('New Components Registration', () => {
       expect(component?.label).toBe('Loading');
     });
   });
-
-  describe('Complex Components', () => {
-    it('should register timeline component', () => {
-      const component = ComponentRegistry.getConfig('timeline');
-      expect(component).toBeDefined();
-      expect(component?.label).toBe('Timeline');
-      expect(component?.category).toBe('data-display');
-    });
-  });
 });

package/src/renderers/basic/button-group.tsx

@@ -0,0 +1,79 @@
+/**
+ * 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 { ButtonGroupSchema } from '@object-ui/types';
+import { Button } from '../../ui';
+import { cn } from '../../lib/utils';
+
+ComponentRegistry.register('button-group', 
+  ({ schema, ...props }: { schema: ButtonGroupSchema; [key: string]: any }) => {
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style,
+        ...buttonGroupProps
+    } = props;
+    
+    return (
+      <div 
+        className={cn('flex flex-wrap sm:inline-flex rounded-md shadow-sm', schema.className)} 
+        role="group"
+        {...buttonGroupProps}
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+      >
+        {schema.buttons?.map((button, idx) => (
+          <Button
+            key={idx}
+            variant={button.variant || schema.variant}
+            size={button.size || schema.size}
+            className={cn(
+              'rounded-none',
+              idx === 0 && 'rounded-l-md',
+              idx === (schema.buttons?.length || 0) - 1 && 'rounded-r-md',
+              idx > 0 && '-ml-px',
+              button.className
+            )}
+          >
+            {button.label}
+          </Button>
+        ))}
+      </div>
+    );
+  },
+  {
+    namespace: 'ui',
+    label: 'Button Group',
+    inputs: [
+      { 
+        name: 'variant', 
+        type: 'enum', 
+        enum: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'], 
+        defaultValue: 'default',
+        label: 'Variant'
+      },
+      { 
+        name: 'size', 
+        type: 'enum', 
+        enum: ['default', 'sm', 'lg', 'icon'], 
+        defaultValue: 'default',
+        label: 'Size'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      variant: 'default',
+      size: 'default',
+      buttons: [
+        { label: 'Left' },
+        { label: 'Middle' },
+        { label: 'Right' }
+      ]
+    }
+  }
+);

package/src/renderers/basic/div.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 { DivSchema } from '@object-ui/types';
 import { renderChildren } from '../../lib/utils';
@@ -5,6 +13,16 @@ import { forwardRef } from 'react';
 
 const DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?: string; [key: string]: any }>(
   ({ schema, className, ...props }, ref) => {
+    // Deprecation warning
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        '[ObjectUI] The "div" component is deprecated. Please use Shadcn components instead:\n' +
+        '  - For containers: use "card", "flex", or semantic layout components\n' +
+        '  - For simple wrappers: use layout components like "container", "stack", or "grid"\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 DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?:
 ComponentRegistry.register('div', 
   DivRenderer,
   {
-    label: 'Container',
+    namespace: 'ui',
+    label: 'Container (Deprecated)',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
-      className: 'p-4 border border-dashed border-gray-300 rounded min-h-[100px]'
+      className: 'p-2 sm:p-4 border border-dashed border-gray-300 rounded min-h-[100px]'
     }
   }
 );

package/src/renderers/basic/html.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 { HtmlSchema } from '@object-ui/types';
@@ -26,6 +34,7 @@ ComponentRegistry.register('html',
     );
   },
   {
+    namespace: 'ui',
     label: 'HTML Content',
     inputs: [
       { name: 'html', type: 'string', label: 'HTML', description: 'Raw HTML content' }

package/src/renderers/basic/icon.tsx

@@ -1,24 +1,88 @@
+/**
+ * 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 { IconSchema } from '@object-ui/types';
 import { icons } from 'lucide-react';
 import React, { forwardRef } from 'react';
+import { cn } from '../../lib/utils';
+
+// Convert kebab-case to PascalCase for Lucide icon names
+// e.g., "arrow-right" -> "ArrowRight", "home" -> "Home"
+function toPascalCase(str: string): string {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}
+
+// Map of renamed icons in lucide-react (from old name to new name)
+const iconNameMap: Record<string, string> = {
+  'Home': 'House', // "Home" was renamed to "House" in lucide-react's icons object
+};
 
 const IconRenderer = forwardRef<SVGSVGElement, { schema: IconSchema; className?: string; [key: string]: any }>(
   ({ schema, className, ...props }, ref) => {
-    const Icon = (icons as any)[schema.name || schema.icon];
-    if (!Icon) return null;
-    return <Icon ref={ref} className={className} {...props} />;
+    // Extract designer-related props
+    const { 
+      'data-obj-id': dataObjId, 
+      'data-obj-type': dataObjType,
+      style,
+      ...iconProps
+    } = props;
+    
+    // Convert icon name to PascalCase for Lucide lookup
+    const iconName = toPascalCase(schema.name);
+    // Apply icon name mapping for renamed icons
+    const mappedIconName = iconNameMap[iconName] || iconName;
+    const Icon = (icons as any)[mappedIconName];
+    
+    if (!Icon) {
+      console.warn(`Icon "${schema.name}" (lookup: "${iconName}"${mappedIconName !== iconName ? ` -> "${mappedIconName}"` : ''}) not found in lucide-react`);
+      return null;
+    }
+    
+    // Build size style
+    const sizeStyle = schema.size ? { width: schema.size, height: schema.size } : undefined;
+    
+    // Merge classNames: schema color, schema className, prop className
+    const mergedClassName = cn(
+      schema.color,
+      schema.className,
+      className
+    );
+    
+    return (
+      <Icon 
+        ref={ref} 
+        className={mergedClassName}
+        style={{ ...sizeStyle, ...style }}
+        {...iconProps}
+        // Apply designer props
+        {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType }}
+      />
+    );
   }
 );
 
+IconRenderer.displayName = 'IconRenderer';
+
 ComponentRegistry.register('icon',
   IconRenderer,
   {
+    namespace: 'ui',
     label: 'Icon',
     icon: 'smile',
     category: 'basic',
     inputs: [
       { name: 'name', type: 'string', label: 'Icon Name', defaultValue: 'smile' },
+      { name: 'size', type: 'number', label: 'Size (px)' },
+      { name: 'color', type: 'string', label: 'Color Class' },
       { name: 'className', type: 'string', label: 'CSS Class' }
     ]
   }