@object-ui/components 0.3.1 → 0.5.0

package/src/SchemaRenderer.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+
+export const SchemaRenderer = ({ schema }: { schema: any }) => {
+  if (!schema) return null;
+  if (Array.isArray(schema)) {
+      return <>{schema.map((s, i) => <SchemaRenderer key={s.id || i} schema={s} />)}</>;
+  }
+  
+  const { type, hidden } = schema;
+  if (hidden) return null; // Simple hidden check
+  
+  if (!type) {
+      if (typeof schema === 'string') return <>{schema}</>;
+      return null;
+  }
+
+  const Component = ComponentRegistry.get(type);
+
+  if (!Component) {
+    console.warn(`Renderer not found for type: ${type}`);
+    return <div className="p-2 text-xs text-red-500 border border-red-200 bg-red-50 rounded">Unknown: {type}</div>;
+  }
+
+  // This is dynamic component resolution from registry, not component creation during render
+  // eslint-disable-next-line
+  return <Component schema={schema} {...schema} />;
+};

package/src/__tests__/PageRendererRegions.test.tsx

@@ -0,0 +1,59 @@
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { PageRenderer } from '../renderers/layout/page'; // Direct import to test logic
+import { ComponentRegistry } from '@object-ui/core';
+
+// Mock SchemaRenderer to verify it's called
+import { SchemaRenderer } from '@object-ui/react';
+import { vi } from 'vitest';
+
+// Mock the SchemaRenderer to avoid full tree recursion deps
+vi.mock('@object-ui/react', () => ({
+  SchemaRenderer: ({ schema }: any) => <div data-testid="child-node">{schema.type}:{schema.value || schema.name}</div>
+}));
+
+describe('PageRenderer Regions', () => {
+    it('should render components from regions', () => {
+        const schema: any = {
+            type: 'page',
+            title: 'Test Page',
+            regions: [
+                {
+                    name: 'main',
+                    components: [
+                        { type: 'text', value: 'Region Content 1' },
+                        { type: 'button', label: 'Region Button' }
+                    ]
+                }
+            ]
+        };
+
+        render(<PageRenderer schema={schema} />);
+
+        // Check if title is rendered
+        expect(screen.getByText('Test Page')).toBeDefined();
+
+        // Check real content (since mock didn't take effect, we verify real render)
+        // The text component renders the value directly
+        expect(screen.getByText('Region Content 1')).toBeDefined();
+        
+        // The button component renders the label
+        expect(screen.getByText('Region Button')).toBeDefined();
+    });
+
+    it('should render legacy body', () => {
+        const schema: any = {
+            type: 'page',
+            title: 'Legacy Page',
+            body: [
+                { type: 'text', value: 'Body Content' }
+            ]
+        };
+
+        render(<PageRenderer schema={schema} />);
+        
+        expect(screen.getByText('Body Content')).toBeDefined();
+    });
+});

package/src/__tests__/Registry.test.ts

@@ -0,0 +1,21 @@
+
+import { describe, it, expect } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+import '../renderers'; // Ensure side-effects are run
+
+describe('Component Registry', () => {
+  it('should register standard page types', () => {
+    expect(ComponentRegistry.get('page')).toBeDefined();
+    expect(ComponentRegistry.get('app')).toBeDefined();
+    expect(ComponentRegistry.get('utility')).toBeDefined();
+    expect(ComponentRegistry.get('home')).toBeDefined();
+    expect(ComponentRegistry.get('record')).toBeDefined();
+  });
+
+  it('should register standard layout components', () => {
+    expect(ComponentRegistry.get('container')).toBeDefined();
+    expect(ComponentRegistry.get('grid')).toBeDefined();
+    expect(ComponentRegistry.get('stack')).toBeDefined();
+    expect(ComponentRegistry.get('card')).toBeDefined();
+  });
+});

package/src/__tests__/basic-renderers.test.tsx

@@ -17,7 +17,7 @@ import {
 // Import renderers to ensure registration
 beforeAll(async () => {
   await import('../renderers');
-});
+}, 30000); // Increase timeout to 30 seconds for heavy renderer imports
 
 /**
  * Comprehensive tests for basic renderer components

package/src/__tests__/complex-disclosure-renderers.test.tsx

@@ -17,7 +17,7 @@ import {
 // Import renderers to ensure registration
 beforeAll(async () => {
   await import('../renderers');
-});
+}, 30000); // Increase timeout to 30 seconds for heavy renderer imports
 
 /**
  * Comprehensive tests for disclosure renderer components
@@ -178,10 +178,11 @@ describe('Complex Renderers - Display Issue Detection', () => {
     it('should render scrollable area', () => {
       const { container } = renderComponent({
         type: 'scroll-area',
-        content: [{ type: 'text', content: 'Scrollable content' }],
+        children: [{ type: 'text', content: 'Scrollable content' }],
       });
 
       // ScrollArea renders content
+
       expect(container.textContent).toContain('Scrollable content');
     });
   });

package/src/__tests__/feedback-overlay-renderers.test.tsx

@@ -16,7 +16,7 @@ import {
 // Import renderers to ensure registration
 beforeAll(async () => {
   await import('../renderers');
-});
+}, 30000); // Increase timeout to 30 seconds for heavy renderer imports
 
 /**
  * Comprehensive tests for feedback renderer components

package/src/__tests__/form-renderers.test.tsx

@@ -17,7 +17,7 @@ import {
 // Import renderers to ensure registration
 beforeAll(async () => {
   await import('../renderers');
-});
+}, 30000); // Increase timeout to 30 seconds for heavy renderer imports
 
 /**
  * Comprehensive tests for form renderer components

package/src/__tests__/layout-data-renderers.test.tsx

@@ -16,7 +16,7 @@ import {
 // Import renderers to ensure registration
 beforeAll(async () => {
   await import('../renderers');
-});
+}, 30000); // Increase timeout to 30 seconds for heavy renderer imports
 
 /**
  * Comprehensive tests for layout renderer components

package/src/{ui → custom}/button-group.tsx

@@ -10,7 +10,7 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
-import { Separator } from "./separator"
+import { Separator } from "../ui/separator"
 
 const buttonGroupVariants = cva(
   "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",

package/src/{ui → custom}/combobox.tsx

@@ -12,7 +12,7 @@ import * as React from "react"
 import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "../lib/utils"
-import { Button } from "./button"
+import { Button } from "../ui/button"
 import {
   Command,
   CommandEmpty,
@@ -20,12 +20,12 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "./command"
+} from "../ui/command"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "./popover"
+} from "../ui/popover"
 
 export interface ComboboxOption {
   value: string

package/src/{ui → custom}/date-picker.tsx

@@ -13,9 +13,9 @@ import { CalendarIcon } from "lucide-react"
 import { format } from "date-fns"
 
 import { cn } from "../lib/utils"
-import { Button } from "./button"
-import { Calendar } from "./calendar"
-import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+import { Button } from "../ui/button"
+import { Calendar } from "../ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
 
 export interface DatePickerProps {
   date?: Date

package/src/custom/field.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 * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Label } from "../ui/label"
+
+const fieldVariants = cva("space-y-2")
+
+export interface FieldProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof fieldVariants> {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  error?: React.ReactNode
+  required?: boolean
+  htmlFor?: string
+}
+
+const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ className, label, description, error, required, htmlFor, children, ...props }, ref) => {
+    const id = React.useId()
+    const fieldId = htmlFor || id
+    const descriptionId = `${fieldId}-description`
+    const errorId = `${fieldId}-error`
+
+    return (
+      <div ref={ref} className={cn(fieldVariants(), className)} {...props}>
+        {label && (
+          <Label 
+            htmlFor={fieldId}
+            className={cn(error && "text-destructive", required && "after:content-['*'] after:ml-0.5 after:text-destructive")}
+          >
+            {label}
+          </Label>
+        )}
+        
+        <Slot 
+          id={fieldId}
+          aria-describedby={
+            [description && descriptionId, error && errorId]
+              .filter(Boolean)
+              .join(" ") || undefined
+          }
+          aria-invalid={!!error}
+        >
+          {children}
+        </Slot>
+
+        {description && !error && (
+          <p
+            id={descriptionId}
+            className="text-[0.8rem] text-muted-foreground"
+          >
+            {description}
+          </p>
+        )}
+
+        {error && (
+          <p
+            id={errorId}
+            className="text-[0.8rem] font-medium text-destructive"
+          >
+            {error}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+Field.displayName = "Field"
+
+export { Field }

package/src/{ui → custom}/filter-builder.tsx

@@ -12,9 +12,9 @@ import * as React from "react"
 import { X, Plus, Trash2 } from "lucide-react"
 
 import { cn } from "../lib/utils"
-import { Button } from "./button"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
-import { Input } from "./input"
+import { Button } from "../ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select"
+import { Input } from "../ui/input"
 
 export interface FilterCondition {
   id: string

package/src/custom/index.ts

@@ -0,0 +1,12 @@
+export * from './button-group';
+export * from './combobox';
+export * from './date-picker';
+export * from './empty';
+export * from './field';
+export * from './filter-builder';
+export * from './input-group';
+export * from './item';
+export * from './kbd';
+export * from './native-select';
+export * from './spinner';
+export * from './sort-builder';

package/src/custom/input-group.tsx

@@ -0,0 +1,53 @@
+/**
+ * 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 { Input } from "../ui/input"
+import { Button } from "../ui/button"
+
+export interface InputGroupProps extends React.ComponentProps<"div"> {
+  startContent?: React.ReactNode
+  endContent?: React.ReactNode
+}
+
+const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  ({ className, startContent, endContent, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex w-full items-center rounded-md border border-input bg-transparent ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          "has-[[data-invalid]]:border-destructive",
+          className
+        )}
+        {...props}
+      >
+        {startContent && (
+          <div className="flex items-center px-3 text-muted-foreground bg-muted/50 border-r h-full self-stretch rounded-l-md">
+            {startContent}
+          </div>
+        )}
+        
+        {/* We need to process children to remove their default borders/rings if they are Inputs */}
+        <div className="flex-1 relative [&_input]:border-0 [&_input]:shadow-none [&_input]:focus-visible:ring-0 [&_input]:bg-transparent">
+          {children}
+        </div>
+
+        {endContent && (
+          <div className="flex items-center px-3 text-muted-foreground bg-muted/50 border-l h-full self-stretch rounded-r-md">
+            {endContent}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+InputGroup.displayName = "InputGroup"
+
+export { InputGroup }

package/src/{ui → custom}/item.tsx

@@ -11,7 +11,7 @@ import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
-import { Separator } from "./separator"
+import { Separator } from "../ui/separator"
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/custom/native-select.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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"
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        className={cn(
+          "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </select>
+    )
+  }
+)
+NativeSelect.displayName = "NativeSelect"
+
+export { NativeSelect }

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/index.css

@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 
 /* Scan sources for Tailwind classes */
-@source './src/**/*.{ts,tsx}';
+@source '../src/**/*.{ts,tsx}';
 
 /* Tailwind plugin for animations */
 @plugin 'tailwindcss-animate';
@@ -33,6 +33,13 @@
   --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 */
@@ -66,6 +73,12 @@
   --ring: 222.2 84% 4.9%;
 
   --radius: 0.5rem;
+
+  --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 {
@@ -96,6 +109,12 @@
   --border: 217.2 32.6% 17.5%;
   --input: 217.2 32.6% 17.5%;
   --ring: 212.7 26.8% 83.9%;
+
+  --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%;
 }
 
 * {

package/src/index.ts

@@ -20,6 +20,7 @@ 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

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

@@ -47,6 +47,7 @@ ComponentRegistry.register('button-group',
     );
   },
   {
+    namespace: 'ui',
     label: 'Button Group',
     inputs: [
       { 

package/src/renderers/basic/div.tsx

@@ -13,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, 
@@ -38,7 +48,8 @@ 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' }
     ],

package/src/renderers/basic/html.tsx

@@ -34,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

@@ -75,6 +75,7 @@ IconRenderer.displayName = 'IconRenderer';
 ComponentRegistry.register('icon',
   IconRenderer,
   {
+    namespace: 'ui',
     label: 'Icon',
     icon: 'smile',
     category: 'basic',