@object-ui/components 3.3.0 → 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/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()

package/metadata/Chart.component.yml

@@ -1,30 +0,0 @@
-name: Chart
-label: Chart
-description: Data visualization component based on Recharts/ECharts
-category: visualization
-version: 1.0.0
-framework: react
-
-props:
-  - name: type
-    type: string
-    enum: [bar, line, pie, area, radar]
-    required: true
-  - name: data
-    type: array
-    required: true
-  - name: series
-    type: array
-    description: Configuration for data series
-  - name: xAxis
-    type: object
-  - name: yAxis
-    type: object
-
-events:
-  - name: onClick
-    payload: "{ dataIndex: number, value: any }"
-
-features:
-  responsive: true
-  dark_mode: true

package/metadata/FilterBuilder.component.yml

@@ -1,39 +0,0 @@
-name: FilterBuilder
-label: Filter Builder
-description: Airtable-like filter builder for creating complex query conditions
-category: complex
-version: 1.0.0
-framework: react
-
-props:
-  - name: label
-    type: string
-    description: Label text displayed above the filter builder
-  - name: name
-    type: string
-    required: true
-    description: Form field name for the filter value
-  - name: fields
-    type: array
-    required: true
-    description: Available fields for filtering
-    schema:
-      - value: string
-      - label: string
-      - type: string
-  - name: value
-    type: object
-    description: Current filter configuration
-    schema:
-      - id: string
-      - logic: enum[and, or]
-      - conditions: array
-
-events:
-  - name: onChange
-    payload: "{ name: string, value: FilterGroup }"
-
-features:
-  dynamic_conditions: true
-  multiple_operators: true
-  field_type_aware: true

package/metadata/GridLayout.component.yml

@@ -1,27 +0,0 @@
-name: GridLayout
-label: Grid Layout
-description: 12-column grid layout system
-category: layout
-version: 1.0.0
-framework: react
-
-props:
-  - name: columns
-    type: number
-    default: 12
-  - name: gap
-    type: string
-    default: md
-  - name: items
-    type: array
-    description: list of widgets to render in the grid
-    schema:
-      - x: number
-      - y: number
-      - w: number
-      - h: number
-      - component: object  # SchemaNode
-
-features:
-  responsive: true
-  drag_and_drop: true