@object-ui/components 0.3.0 → 0.3.1

package/src/__tests__/test-utils.tsx

@@ -0,0 +1,190 @@
+/**
+ * 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 { render, RenderOptions } from '@testing-library/react';
+import { ComponentRegistry } from '@object-ui/core';
+import type { SchemaNode } from '@object-ui/types';
+
+/**
+ * Test utility for rendering components from schema
+ */
+export function renderComponent(schema: SchemaNode, options?: RenderOptions) {
+  const Component = ComponentRegistry.get(schema.type);
+  
+  if (!Component) {
+    throw new Error(`Component "${schema.type}" is not registered`);
+  }
+
+  return render(<Component schema={schema} />, options);
+}
+
+/**
+ * Check if a component has proper accessibility attributes
+ */
+export function checkAccessibility(element: HTMLElement): {
+  hasRole: boolean;
+  hasAriaLabel: boolean;
+  hasAriaDescribedBy: boolean;
+  issues: string[];
+} {
+  const issues: string[] = [];
+  const hasRole = element.hasAttribute('role');
+  const hasAriaLabel = element.hasAttribute('aria-label') || element.hasAttribute('aria-labelledby');
+  const hasAriaDescribedBy = element.hasAttribute('aria-describedby');
+
+  // Check for interactive elements without labels
+  if (
+    element.tagName === 'BUTTON' ||
+    element.tagName === 'A' ||
+    element.getAttribute('role') === 'button'
+  ) {
+    if (!element.textContent?.trim() && !hasAriaLabel) {
+      issues.push('Interactive element missing accessible label');
+    }
+  }
+
+  // Check for form inputs without labels
+  if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
+    const id = element.getAttribute('id');
+    const doc = element.ownerDocument || document;
+    const hasAssociatedLabel =
+      !!element.closest('label') ||
+      (!!id && !!doc.querySelector(`label[for="${id}"]`));
+    const hasLabel = hasAriaLabel || hasAssociatedLabel;
+    if (!hasLabel) {
+      issues.push('Form element missing label association');
+    }
+  }
+
+  return {
+    hasRole,
+    hasAriaLabel,
+    hasAriaDescribedBy,
+    issues,
+  };
+}
+
+/**
+ * Check DOM structure for common issues
+ */
+export function checkDOMStructure(container: HTMLElement): {
+  hasContent: boolean;
+  isEmpty: boolean;
+  hasChildren: boolean;
+  nestedDepth: number;
+  issues: string[];
+} {
+  const issues: string[] = [];
+  const hasContent = container.textContent !== null && container.textContent.trim().length > 0;
+  const isEmpty = container.children.length === 0 && !hasContent;
+  const hasChildren = container.children.length > 0;
+
+  // Calculate nesting depth
+  let maxDepth = 0;
+  function getDepth(el: Element, depth = 0): number {
+    if (el.children.length === 0) return depth;
+    let max = depth;
+    for (const child of Array.from(el.children)) {
+      max = Math.max(max, getDepth(child, depth + 1));
+    }
+    return max;
+  }
+  maxDepth = getDepth(container);
+
+  // Check for excessive nesting (potential performance issue)
+  if (maxDepth > 20) {
+    issues.push(`Excessive DOM nesting detected: ${maxDepth} levels`);
+  }
+
+  // Check for empty elements
+  if (isEmpty) {
+    issues.push('Component renders empty content');
+  }
+
+  return {
+    hasContent,
+    isEmpty,
+    hasChildren,
+    nestedDepth: maxDepth,
+    issues,
+  };
+}
+
+/**
+ * Validate component registration
+ */
+export function validateComponentRegistration(componentType: string): {
+  isRegistered: boolean;
+  hasConfig: boolean;
+  hasRenderer: boolean;
+  hasLabel: boolean;
+  hasInputs: boolean;
+  hasDefaultProps: boolean;
+  config: ReturnType<typeof ComponentRegistry.getConfig>;
+} {
+  const isRegistered = ComponentRegistry.has(componentType);
+  const renderer = ComponentRegistry.get(componentType);
+  const config = ComponentRegistry.getConfig(componentType);
+
+  return {
+    isRegistered,
+    hasConfig: !!config,
+    hasRenderer: !!renderer,
+    hasLabel: !!config?.label,
+    hasInputs: !!config?.inputs && config.inputs.length > 0,
+    hasDefaultProps: !!config?.defaultProps,
+    config,
+  };
+}
+
+/**
+ * Get all display issues for a rendered component
+ */
+export function getAllDisplayIssues(container: HTMLElement): string[] {
+  const issues: string[] = [];
+
+  // Check DOM structure
+  const domCheck = checkDOMStructure(container);
+  issues.push(...domCheck.issues);
+
+  // Check accessibility for all interactive elements
+  const buttons = container.querySelectorAll('button, a, [role="button"], input, textarea, select');
+  buttons.forEach((element) => {
+    const a11yCheck = checkAccessibility(element as HTMLElement);
+    issues.push(...a11yCheck.issues);
+  });
+
+  // Check for missing keys in lists
+  const lists = container.querySelectorAll('[role="list"], ul, ol');
+  lists.forEach((list) => {
+    const items = list.children;
+    if (items.length > 0) {
+      // This is a simplified check - in React, keys are not in the DOM
+      // but we can check for duplicate content which might indicate missing keys
+      const contents = Array.from(items).map(item => item.textContent);
+      const contentCounts = new Map<string, number>();
+      contents.forEach(content => {
+        contentCounts.set(content || '', (contentCounts.get(content || '') || 0) + 1);
+      });
+      const hasDuplicates = Array.from(contentCounts.values()).some(count => count > 1);
+      if (hasDuplicates) {
+        issues.push(`Potential duplicate list items detected`);
+      }
+    }
+  });
+
+  // Check for images without alt text
+  const images = container.querySelectorAll('img');
+  images.forEach((img) => {
+    if (!img.hasAttribute('alt')) {
+      issues.push('Image missing alt attribute');
+    }
+  });
+
+  return issues;
+}

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,108 @@
-@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));
+}
+
+/* CSS custom properties for theme */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}
 
-    --radius: 0.5rem;
-  }
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-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%;
+}
 
-    --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,30 @@
+/**
+ * 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 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,78 @@
+/**
+ * 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>
+    );
+  },
+  {
+    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';
@@ -35,7 +43,7 @@ ComponentRegistry.register('div',
       { 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';

package/src/renderers/basic/icon.tsx

@@ -1,16 +1,77 @@
+/**
+ * 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,
   {
@@ -19,6 +80,8 @@ ComponentRegistry.register('icon',
     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' }
     ]
   }

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';
 
@@ -32,6 +40,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'
+    }
   }
 );