@object-ui/components 3.1.5 → 3.3.1

package/TESTING.md

@@ -1,335 +0,0 @@
-# Component and Renderer Testing Guide
-
-## Overview
-
-This document describes the comprehensive automated testing infrastructure for ObjectUI components and renderers. The tests are designed to automatically discover display, accessibility, and structural issues in UI components.
-
-## Test Architecture
-
-### Test Utilities (`test-utils.tsx`)
-
-A suite of helper functions that provide automated checks for common display issues:
-
-#### `renderComponent(schema, options)`
-Renders a component from its schema definition for testing.
-
-```typescript
-const { container } = renderComponent({
-  type: 'button',
-  label: 'Click Me',
-});
-```
-
-#### `checkAccessibility(element)`
-Validates accessibility attributes and identifies common a11y issues:
-- Missing ARIA labels on interactive elements
-- Missing form labels
-- Missing alt attributes on images
-
-Returns:
-```typescript
-{
-  hasRole: boolean;
-  hasAriaLabel: boolean;
-  hasAriaDescribedBy: boolean;
-  issues: string[]; // List of detected issues
-}
-```
-
-#### `checkDOMStructure(container)`
-Analyzes DOM structure for potential issues:
-- Empty components
-- Excessive nesting (>20 levels)
-- Missing content
-
-Returns:
-```typescript
-{
-  hasContent: boolean;
-  isEmpty: boolean;
-  hasChildren: boolean;
-  nestedDepth: number;
-  issues: string[]; // List of detected issues
-}
-```
-
-#### `checkStyling(element)`
-Validates component styling:
-- Class presence
-- Tailwind CSS usage
-- Inline styles
-
-Returns:
-```typescript
-{
-  hasClasses: boolean;
-  hasTailwindClasses: boolean;
-  hasInlineStyles: boolean;
-  classes: string[];
-}
-```
-
-#### `validateComponentRegistration(componentType)`
-Verifies component registration in ComponentRegistry:
-- Component is registered
-- Has configuration
-- Has renderer function
-- Has label and inputs
-- Has default props
-
-Returns:
-```typescript
-{
-  isRegistered: boolean;
-  hasConfig: boolean;
-  hasRenderer: boolean;
-  hasLabel: boolean;
-  hasInputs: boolean;
-  hasDefaultProps: boolean;
-  config: any;
-}
-```
-
-#### `getAllDisplayIssues(container)`
-Comprehensive check that runs all validation checks and returns aggregated issues:
-
-```typescript
-const issues = getAllDisplayIssues(container);
-// Returns array of issue descriptions
-```
-
-## Test Coverage
-
-### Component Categories
-
-The test suite covers all major component categories:
-
-1. **Basic Components** (`basic-renderers.test.tsx`)
-   - Text, Div, Span, Image, Icon, Separator, HTML
-
-2. **Form Components** (`form-renderers.test.tsx`)
-   - Button, Input, Textarea, Select, Checkbox, Switch
-   - Radio Group, Slider, Label, Email, Password
-
-3. **Layout Components** (`layout-data-renderers.test.tsx`)
-   - Container, Grid, Flex
-
-4. **Data Display Components** (`layout-data-renderers.test.tsx`)
-   - List, Tree View, Badge, Avatar, Alert
-   - Breadcrumb, Statistic, Kbd
-
-5. **Feedback Components** (`feedback-overlay-renderers.test.tsx`)
-   - Loading, Spinner, Progress, Skeleton, Empty, Toast
-
-6. **Overlay Components** (`feedback-overlay-renderers.test.tsx`)
-   - Dialog, Alert Dialog, Sheet, Drawer
-   - Popover, Tooltip, Dropdown Menu, Context Menu
-   - Hover Card, Menubar
-
-7. **Disclosure Components** (`complex-disclosure-renderers.test.tsx`)
-   - Accordion, Collapsible, Toggle Group
-
-8. **Complex Components** (`complex-disclosure-renderers.test.tsx`)
-   - Timeline, Data Table, Chatbot, Carousel
-   - Scroll Area, Resizable, Filter Builder, Calendar View, Table
-
-## What the Tests Check
-
-### 1. Component Registration
-Every component should be properly registered:
-```typescript
-it('should be properly registered', () => {
-  const validation = validateComponentRegistration('button');
-  expect(validation.isRegistered).toBe(true);
-  expect(validation.hasConfig).toBe(true);
-  expect(validation.hasLabel).toBe(true);
-});
-```
-
-### 2. Rendering Without Errors
-Components should render without throwing errors:
-```typescript
-it('should render without issues', () => {
-  const { container } = renderComponent({
-    type: 'button',
-    label: 'Test',
-  });
-  expect(container).toBeDefined();
-});
-```
-
-### 3. Accessibility
-Components should be accessible:
-```typescript
-it('should have proper accessibility', () => {
-  const { container } = renderComponent({
-    type: 'button',
-    label: 'Click Me',
-  });
-  
-  const issues = getAllDisplayIssues(container);
-  const a11yIssues = issues.filter(i => i.includes('accessible'));
-  expect(a11yIssues).toHaveLength(0);
-});
-```
-
-### 4. DOM Structure
-Components should have valid DOM structure:
-```typescript
-it('should have valid structure', () => {
-  const { container } = renderComponent({
-    type: 'container',
-    body: [{ type: 'text', content: 'Content' }],
-  });
-  
-  const domCheck = checkDOMStructure(container);
-  expect(domCheck.hasContent).toBe(true);
-  expect(domCheck.isEmpty).toBe(false);
-  expect(domCheck.nestedDepth).toBeLessThan(20);
-});
-```
-
-### 5. Props and Variants
-Components should support their documented props:
-```typescript
-it('should support variants', () => {
-  const variants = ['default', 'secondary', 'destructive'];
-  
-  variants.forEach(variant => {
-    const { container } = renderComponent({
-      type: 'button',
-      label: 'Test',
-      variant,
-    });
-    expect(container).toBeDefined();
-  });
-});
-```
-
-## Running Tests
-
-### Run All Tests
-```bash
-pnpm test
-```
-
-### Run Component Tests Only
-```bash
-pnpm vitest run packages/components/src/__tests__/
-```
-
-### Run Specific Test File
-```bash
-pnpm vitest run packages/components/src/__tests__/form-renderers.test.tsx
-```
-
-### Watch Mode
-```bash
-pnpm test:watch
-```
-
-### Coverage Report
-```bash
-pnpm test:coverage
-```
-
-### Interactive UI
-```bash
-pnpm test:ui
-```
-
-## Test Results
-
-Current test coverage:
-- **150 total tests** across all component categories
-- **140 passing** (93% pass rate)
-- **10 failing** - identifying real schema/prop mismatches that need fixing
-
-The failing tests are valuable as they automatically discovered:
-- Components with missing props
-- Schema mismatches (e.g., `content` vs `html`, `text` vs `content`)
-- Missing default values
-- Incorrect prop expectations
-
-## Adding New Tests
-
-### For New Components
-
-When adding a new component, create tests following this pattern:
-
-```typescript
-describe('MyComponent Renderer', () => {
-  it('should be properly registered', () => {
-    const validation = validateComponentRegistration('my-component');
-    expect(validation.isRegistered).toBe(true);
-    expect(validation.hasConfig).toBe(true);
-  });
-
-  it('should render without issues', () => {
-    const { container } = renderComponent({
-      type: 'my-component',
-      // ... required props
-    });
-
-    expect(container).toBeDefined();
-    const issues = getAllDisplayIssues(container);
-    expect(issues).toHaveLength(0);
-  });
-
-  it('should support required props', () => {
-    const { container } = renderComponent({
-      type: 'my-component',
-      requiredProp: 'value',
-    });
-
-    expect(container.textContent).toContain('value');
-  });
-});
-```
-
-### For Display Issue Detection
-
-Add specific checks for known issues:
-
-```typescript
-it('should not have excessive nesting', () => {
-  const { container } = renderComponent({
-    type: 'complex-component',
-    data: complexData,
-  });
-
-  const domCheck = checkDOMStructure(container);
-  expect(domCheck.nestedDepth).toBeLessThan(20);
-});
-
-it('should have proper ARIA attributes', () => {
-  const { container } = renderComponent({
-    type: 'interactive-component',
-  });
-
-  const button = container.querySelector('button');
-  const a11y = checkAccessibility(button);
-  expect(a11y.issues).toHaveLength(0);
-});
-```
-
-## Benefits
-
-This testing infrastructure provides:
-
-1. **Automated Issue Detection** - Tests automatically find display and accessibility issues
-2. **Regression Prevention** - Catches breaking changes in component rendering
-3. **Documentation** - Tests serve as examples of how components should be used
-4. **Confidence** - High test coverage ensures components work as expected
-5. **Quick Feedback** - Fast test execution helps during development
-
-## Future Enhancements
-
-Potential improvements:
-
-1. Visual regression testing with screenshot comparison
-2. Performance benchmarking for complex components
-3. Cross-browser testing
-4. Responsive design testing
-5. Theme variation testing
-6. Integration tests with SchemaRenderer

package/dist/src/ui/aspect-ratio.d.ts

@@ -1,3 +0,0 @@
-import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';
-declare const AspectRatio: import('react').ForwardRefExoticComponent<AspectRatioPrimitive.AspectRatioProps & import('react').RefAttributes<HTMLDivElement>>;
-export { AspectRatio };

package/dist/src/ui/chart.d.ts

@@ -1,68 +0,0 @@
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-declare const THEMES: {
-    readonly light: "";
-    readonly dark: ".dark";
-};
-export type ChartConfig = {
-    [k in string]: {
-        label?: React.ReactNode;
-        icon?: React.ComponentType;
-    } & ({
-        color?: string;
-        theme?: never;
-    } | {
-        color?: never;
-        theme: Record<keyof typeof THEMES, string>;
-    });
-};
-declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    config: ChartConfig;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ChartStyle: ({ id, config }: {
-    id: string;
-    config: ChartConfig;
-}) => import("react/jsx-runtime").JSX.Element | null;
-declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
-declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<Omit<RechartsPrimitive.DefaultTooltipContentProps<RechartsPrimitive.TooltipValueType, import('recharts/types/component/DefaultTooltipContent').NameType>, "label" | "viewBox" | "active" | "payload" | "coordinate" | "accessibilityLayer"> & {
-    active?: boolean;
-    allowEscapeViewBox?: import('recharts/types/util/types').AllowInDimension;
-    animationDuration?: import('recharts/types/util/types').AnimationDuration;
-    animationEasing?: import('recharts/types/util/types').AnimationTiming;
-    axisId?: RechartsPrimitive.AxisId;
-    content?: import('recharts/types/component/Tooltip').ContentType<RechartsPrimitive.TooltipValueType, import('recharts/types/component/DefaultTooltipContent').NameType> | undefined;
-    contentStyle?: React.CSSProperties;
-    cursor?: import('recharts/types/component/Cursor').CursorDefinition;
-    defaultIndex?: number | RechartsPrimitive.TooltipIndex;
-    filterNull?: boolean;
-    formatter?: ((value: RechartsPrimitive.TooltipValueType, name: import('recharts/types/component/DefaultTooltipContent').NameType, item: import('recharts/types/state/tooltipSlice').TooltipPayloadEntry, index: number, payload: RechartsPrimitive.TooltipPayload) => React.ReactNode | [React.ReactNode, React.ReactNode]) | undefined;
-    includeHidden?: boolean | undefined;
-    isAnimationActive?: boolean | "auto";
-    itemSorter?: RechartsPrimitive.TooltipItemSorter;
-    itemStyle?: React.CSSProperties;
-    labelFormatter?: (label: any, payload: RechartsPrimitive.TooltipPayload) => React.ReactNode;
-    labelStyle?: React.CSSProperties;
-    offset?: number | RechartsPrimitive.Coordinate;
-    payloadUniqBy?: import('recharts/types/util/payload/getUniqPayload').UniqueOption<import('recharts/types/state/tooltipSlice').TooltipPayloadEntry>;
-    portal?: HTMLElement | null;
-    position?: Partial<RechartsPrimitive.Coordinate>;
-    reverseDirection?: import('recharts/types/util/types').AllowInDimension;
-    separator?: string;
-    shared?: boolean;
-    trigger?: import('recharts/types/chart/types').TooltipTrigger;
-    useTranslate3d?: boolean;
-    wrapperStyle?: React.CSSProperties;
-} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
-    hideLabel?: boolean;
-    hideIndicator?: boolean;
-    indicator?: "line" | "dot" | "dashed";
-    nameKey?: string;
-    labelKey?: string;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
-declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-    hideIcon?: boolean;
-    nameKey?: string;
-}, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/src/ui/resizable.d.ts

@@ -1,14 +0,0 @@
-/**
- * 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 ResizablePrimitive from "react-resizable-panels";
-declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Group>) => import("react/jsx-runtime").JSX.Element;
-declare const ResizablePanel: typeof ResizablePrimitive.Panel;
-declare const ResizableHandle: ({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.Separator> & {
-    withHandle?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/docs/FilterBuilder.md

@@ -1,268 +0,0 @@
-# Filter Builder Component
-
-An Airtable-like filter builder component for building complex query conditions in Object UI.
-
-## Overview
-
-The Filter Builder component provides a user-friendly interface for creating and managing filter conditions. It supports:
-
-- ✅ Dynamic add/remove filter conditions
-- ✅ Field selection from configurable list
-- ✅ Type-aware operators (text, number, boolean, date, select)
-- ✅ AND/OR logic toggling
-- ✅ Clear all filters button
-- ✅ Date picker support for date fields
-- ✅ Dropdown support for select fields
-- ✅ Schema-driven configuration
-- ✅ Tailwind CSS styled with Shadcn UI components
-
-## Usage
-
-### Basic Example
-
-```typescript
-{
-  type: 'filter-builder',
-  name: 'userFilters',
-  label: 'User Filters',
-  fields: [
-    { value: 'name', label: 'Name', type: 'text' },
-    { value: 'email', label: 'Email', type: 'text' },
-    { value: 'age', label: 'Age', type: 'number' },
-    { value: 'status', label: 'Status', type: 'text' }
-  ],
-  value: {
-    id: 'root',
-    logic: 'and',
-    conditions: [
-      {
-        id: 'cond-1',
-        field: 'status',
-        operator: 'equals',
-        value: 'active'
-      }
-    ]
-  }
-}
-```
-
-### With Select Fields
-
-```typescript
-{
-  type: 'filter-builder',
-  name: 'productFilters',
-  label: 'Product Filters',
-  fields: [
-    { value: 'name', label: 'Product Name', type: 'text' },
-    { value: 'price', label: 'Price', type: 'number' },
-    { 
-      value: 'category', 
-      label: 'Category', 
-      type: 'select',
-      options: [
-        { value: 'electronics', label: 'Electronics' },
-        { value: 'clothing', label: 'Clothing' },
-        { value: 'food', label: 'Food' }
-      ]
-    },
-    { value: 'inStock', label: 'In Stock', type: 'boolean' }
-  ],
-  value: {
-    id: 'root',
-    logic: 'and',
-    conditions: []
-  }
-}
-```
-
-### With Date Fields
-
-```typescript
-{
-  type: 'filter-builder',
-  name: 'orderFilters',
-  label: 'Order Filters',
-  fields: [
-    { value: 'orderId', label: 'Order ID', type: 'text' },
-    { value: 'amount', label: 'Amount', type: 'number' },
-    { value: 'orderDate', label: 'Order Date', type: 'date' },
-    { value: 'shipped', label: 'Shipped', type: 'boolean' }
-  ],
-  showClearAll: true
-}
-```
-
-## Props
-
-### Schema Properties
-
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `type` | `string` | ✅ | Must be `'filter-builder'` |
-| `name` | `string` | ✅ | Form field name for the filter value |
-| `label` | `string` | ❌ | Label displayed above the filter builder |
-| `fields` | `Field[]` | ✅ | Array of available fields for filtering |
-| `value` | `FilterGroup` | ❌ | Initial filter configuration |
-| `showClearAll` | `boolean` | ❌ | Show "Clear all" button (default: true) |
-
-### Field Type
-
-```typescript
-interface Field {
-  value: string;    // Field identifier
-  label: string;    // Display label
-  type?: string;    // Field type: 'text' | 'number' | 'boolean' | 'date' | 'select'
-  options?: Array<{ value: string; label: string }> // For select fields
-}
-```
-
-### FilterGroup Type
-
-```typescript
-interface FilterGroup {
-  id: string;                    // Group identifier
-  logic: 'and' | 'or';          // Logic operator
-  conditions: FilterCondition[]; // Array of conditions
-}
-
-interface FilterCondition {
-  id: string;                    // Condition identifier
-  field: string;                 // Field value
-  operator: string;              // Operator (see below)
-  value: string | number | boolean; // Filter value
-}
-```
-
-## Operators
-
-The available operators change based on the field type:
-
-### Text Fields
-- `equals` - Equals
-- `notEquals` - Does not equal
-- `contains` - Contains
-- `notContains` - Does not contain
-- `isEmpty` - Is empty
-- `isNotEmpty` - Is not empty
-
-### Number Fields
-- `equals` - Equals
-- `notEquals` - Does not equal
-- `greaterThan` - Greater than
-- `lessThan` - Less than
-- `greaterOrEqual` - Greater than or equal
-- `lessOrEqual` - Less than or equal
-- `isEmpty` - Is empty
-- `isNotEmpty` - Is not empty
-
-### Boolean Fields
-- `equals` - Equals
-- `notEquals` - Does not equal
-
-### Date Fields
-- `equals` - Equals
-- `notEquals` - Does not equal
-- `before` - Before
-- `after` - After
-- `between` - Between
-- `isEmpty` - Is empty
-- `isNotEmpty` - Is not empty
-
-### Select Fields
-- `equals` - Equals
-- `notEquals` - Does not equal
-- `in` - In
-- `notIn` - Not in
-- `isEmpty` - Is empty
-- `isNotEmpty` - Is not empty
-
-## Events
-
-The component emits change events when the filter configuration is modified:
-
-```typescript
-{
-  target: {
-    name: 'filters',
-    value: {
-      id: 'root',
-      logic: 'and',
-      conditions: [...]
-    }
-  }
-}
-```
-
-## Demo
-
-To see the filter builder in action:
-
-```bash
-pnpm --filter prototype dev
-# Visit http://localhost:5173/?demo=filter-builder
-```
-
-## Styling
-
-The component is fully styled with Tailwind CSS and follows the Object UI design system. All Shadcn UI components are used for consistent look and feel.
-
-You can customize the appearance using the `className` prop or by overriding Tailwind classes.
-
-## Integration
-
-The Filter Builder integrates seamlessly with Object UI's schema system and can be used in:
-
-- Forms
-- Data tables
-- Search interfaces
-- Admin panels
-- Dashboard filters
-
-## Example in Context
-
-```typescript
-const pageSchema = {
-  type: 'page',
-  title: 'User Management',
-  body: [
-    {
-      type: 'card',
-      body: [
-        {
-          type: 'filter-builder',
-          name: 'userFilters',
-          label: 'Filter Users',
-          fields: [
-            { value: 'name', label: 'Name', type: 'text' },
-            { value: 'email', label: 'Email', type: 'text' },
-            { value: 'age', label: 'Age', type: 'number' },
-            { value: 'department', label: 'Department', type: 'text' },
-            { value: 'active', label: 'Active', type: 'boolean' }
-          ]
-        }
-      ]
-    },
-    {
-      type: 'table',
-      // table configuration...
-    }
-  ]
-};
-```
-
-## Technical Details
-
-- Built with React 18+ hooks
-- Uses Radix UI primitives (Select, Popover)
-- Type-safe with TypeScript
-- Accessible keyboard navigation
-- Responsive design
-
-## Browser Support
-
-Works in all modern browsers that support:
-- ES6+
-- CSS Grid
-- Flexbox
-- crypto.randomUUID()