@object-ui/components 0.3.0 → 0.5.0

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/{ui → custom}/button-group.tsx

@@ -1,8 +1,16 @@
+/**
+ * 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 { 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/custom/combobox.tsx

@@ -0,0 +1,104 @@
+/**
+ * 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.
+ */
+
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+import { Button } from "../ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../ui/popover"
+
+export interface ComboboxOption {
+  value: string
+  label: string
+}
+
+export interface ComboboxProps {
+  options: ComboboxOption[]
+  value?: string
+  onValueChange?: (value: string) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  className?: string
+  disabled?: boolean
+}
+
+export function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select option...",
+  searchPlaceholder = "Search...",
+  emptyText = "No option found.",
+  className,
+  disabled,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn("w-[200px] justify-between", className)}
+          disabled={disabled}
+        >
+          {value
+            ? options.find((option) => option.value === value)?.label
+            : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={searchPlaceholder} />
+          <CommandList>
+            <CommandEmpty>{emptyText}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={(currentValue) => {
+                    onValueChange?.(currentValue === value ? "" : currentValue)
+                    setOpen(false)
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value === option.value ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/custom/date-picker.tsx

@@ -0,0 +1,61 @@
+/**
+ * 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.
+ */
+
+"use client"
+
+import * as React from "react"
+import { CalendarIcon } from "lucide-react"
+import { format } from "date-fns"
+
+import { cn } from "../lib/utils"
+import { Button } from "../ui/button"
+import { Calendar } from "../ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
+
+export interface DatePickerProps {
+  date?: Date
+  onDateChange?: (date: Date | undefined) => void
+  placeholder?: string
+  className?: string
+  disabled?: boolean
+}
+
+export function DatePicker({
+  date,
+  onDateChange,
+  placeholder = "Pick a date",
+  className,
+  disabled,
+}: DatePickerProps) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={"outline"}
+          className={cn(
+            "w-[280px] justify-start text-left font-normal",
+            !date && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={onDateChange}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/{ui → custom}/empty.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 { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "../lib/utils"

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

@@ -1,12 +1,20 @@
+/**
+ * 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.
+ */
+
 "use client"
 
 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

@@ -1,9 +1,17 @@
+/**
+ * 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 { Separator } from "./separator"
+import { Separator } from "../ui/separator"
 
 function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (

package/src/{ui → custom}/kbd.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 { cn } from "../lib/utils"
 
 function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {

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 }