@object-ui/components 3.3.0 → 3.3.1

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

@@ -1,302 +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 { describe, it, expect, beforeAll } from 'vitest';
-import { ComponentRegistry } from '@object-ui/core';
-import {
-  renderComponent,
-  validateComponentRegistration,
-  checkDOMStructure,
-} from './test-utils';
-
-// 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
- */
-describe('Disclosure Renderers - Display Issue Detection', () => {
-  describe('Accordion Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('accordion');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render accordion with items', () => {
-      const { container } = renderComponent({
-        type: 'accordion',
-        items: [
-          {
-            title: 'Section 1',
-            content: 'Content 1',
-          },
-          {
-            title: 'Section 2',
-            content: 'Content 2',
-          },
-        ],
-      });
-
-      expect(container.textContent).toContain('Section 1');
-      expect(container.textContent).toContain('Section 2');
-    });
-
-    it('should not have structural issues', () => {
-      const { container } = renderComponent({
-        type: 'accordion',
-        items: [{ title: 'Test', content: 'Content' }],
-      });
-
-      const domCheck = checkDOMStructure(container);
-      expect(domCheck.hasContent).toBe(true);
-    });
-  });
-
-  describe('Collapsible Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('collapsible');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render collapsible component', () => {
-      const { container } = renderComponent({
-        type: 'collapsible',
-        trigger: { type: 'button', label: 'Toggle' },
-        body: [{ type: 'text', content: 'Hidden content' }],
-      });
-
-      expect(container.textContent).toContain('Toggle');
-    });
-  });
-
-  describe('Toggle Group Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('toggle-group');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render toggle group with items', () => {
-      const { container } = renderComponent({
-        type: 'toggle-group',
-        selectionType: 'single',
-        items: [
-          { value: 'bold', label: 'Bold' },
-          { value: 'italic', label: 'Italic' },
-        ],
-      });
-
-      expect(container).toBeDefined();
-    });
-  });
-});
-
-/**
- * Comprehensive tests for complex renderer components
- */
-describe('Complex Renderers - Display Issue Detection', () => {
-  describe('Data Table Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('data-table');
-      expect(validation.isRegistered).toBe(true);
-      expect(validation.hasDefaultProps).toBe(true);
-    });
-
-    it('should render table with data', () => {
-      const { container } = renderComponent({
-        type: 'data-table',
-        columns: [
-          { id: 'name', header: 'Name' },
-          { id: 'age', header: 'Age' },
-        ],
-        data: [
-          { name: 'John', age: 30 },
-          { name: 'Jane', age: 25 },
-        ],
-      });
-
-      expect(container.textContent).toContain('Name');
-      expect(container.textContent).toContain('Age');
-    });
-
-    it('should use table semantics', () => {
-      const { container } = renderComponent({
-        type: 'data-table',
-        columns: [{ id: 'col1', header: 'Column 1' }],
-        data: [{ col1: 'Data' }],
-      });
-
-      const table = container.querySelector('table');
-      expect(table || container.querySelector('[role="table"]')).toBeTruthy();
-    });
-
-    it('should not have excessive nesting', () => {
-      const { container } = renderComponent({
-        type: 'data-table',
-        columns: [{ id: 'col1', header: 'Test' }],
-        data: [{ col1: 'Value' }],
-      });
-
-      const domCheck = checkDOMStructure(container);
-      // Tables can be nested but not excessively
-      expect(domCheck.nestedDepth).toBeLessThan(25);
-    });
-  });
-
-  describe('Carousel Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('carousel');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render carousel with items', () => {
-      const { container } = renderComponent({
-        type: 'carousel',
-        items: [
-          { type: 'div', body: [{ type: 'text', content: 'Slide 1' }] },
-          { type: 'div', body: [{ type: 'text', content: 'Slide 2' }] },
-        ],
-      });
-
-      // Carousel should render
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Scroll Area Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('scroll-area');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render scrollable area', () => {
-      const { container } = renderComponent({
-        type: 'scroll-area',
-        children: [{ type: 'text', content: 'Scrollable content' }],
-      });
-
-      // ScrollArea renders content
-
-      expect(container.textContent).toContain('Scrollable content');
-    });
-  });
-
-  describe('Resizable Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('resizable');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render resizable panels', () => {
-      const { container } = renderComponent({
-        type: 'resizable',
-        panels: [
-          { content: { type: 'text', content: 'Panel 1' } },
-          { content: { type: 'text', content: 'Panel 2' } },
-        ],
-      });
-
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Filter Builder Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('filter-builder');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render filter builder', () => {
-      const { container } = renderComponent({
-        type: 'filter-builder',
-        fields: [
-          { name: 'name', label: 'Name', type: 'text' },
-          { name: 'age', label: 'Age', type: 'number' },
-        ],
-      });
-
-      expect(container).toBeDefined();
-    });
-  });
-
-  describe('Table Renderer', () => {
-    it('should be properly registered', () => {
-      const validation = validateComponentRegistration('table');
-      expect(validation.isRegistered).toBe(true);
-    });
-
-    it('should render basic table', () => {
-      const { container } = renderComponent({
-        type: 'table',
-        head: {
-          rows: [
-            {
-              cells: [
-                { type: 'text', content: 'Header 1' },
-                { type: 'text', content: 'Header 2' },
-              ],
-            },
-          ],
-        },
-        body: {
-          rows: [
-            {
-              cells: [
-                { type: 'text', content: 'Cell 1' },
-                { type: 'text', content: 'Cell 2' },
-              ],
-            },
-          ],
-        },
-      });
-
-      const table = container.querySelector('table');
-      expect(table).toBeTruthy();
-    });
-  });
-});
-
-/**
- * Cross-cutting concerns: Tests that apply to all components
- */
-describe('All Renderers - Cross-Cutting Concerns', () => {
-  it('should not render components with excessive DOM nesting', () => {
-    const components = ['div', 'container', 'flex', 'grid'];
-    
-    components.forEach(type => {
-      if (ComponentRegistry.has(type)) {
-        const { container } = renderComponent({
-          type,
-          body: [{ type: 'text', content: 'Test' }],
-        });
-
-        const domCheck = checkDOMStructure(container);
-        expect(domCheck.nestedDepth).toBeLessThan(20);
-      }
-    });
-  });
-
-  it('should handle className prop for custom styling', () => {
-    const components = ['button', 'input', 'div', 'text'];
-    
-    components.forEach(type => {
-      if (ComponentRegistry.has(type)) {
-        const { container } = renderComponent({
-          type,
-          className: 'custom-class',
-          label: 'Test',
-          content: 'Test',
-        });
-
-        // Should render without errors
-        expect(container).toBeDefined();
-      }
-    });
-  });
-});

package/src/__tests__/compliance.test.tsx

@@ -1,72 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import React from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-
-// Ensure all components are registered
-import '../index';
-
-describe('Component Compliance', () => {
-  const components = ComponentRegistry.getAllConfigs();
-
-  it('should have components registered', () => {
-    expect(components.length).toBeGreaterThan(0);
-  });
-
-  components.forEach((config) => {
-    describe(`Component: ${config.type}`, () => {
-      it('should have valid metadata', () => {
-        expect(config.type).toBeDefined();
-        expect(config.component).toBeDefined();
-        // namespace is optional but good practice
-        // expect(config.namespace).toBeDefined(); 
-      });
-
-      it('should define inputs if it has any', () => {
-        if (config.inputs) {
-          expect(Array.isArray(config.inputs)).toBe(true);
-          config.inputs?.forEach((input) => {
-            expect(input.name).toBeDefined();
-            expect(input.type).toBeDefined();
-          });
-        }
-      });
-
-      it('should render generic component without crashing', () => {
-        const Cmp = config.component as React.ComponentType<any>;
-        
-        // Skip components that are known to require specific parents or context
-        // for now, we just try to render them with a basic schema
-        const schema = {
-          type: config.type,
-          id: 'test-id',
-          className: 'test-class',
-          props: {
-            ...config.defaultProps
-          }
-        };
-
-        try {
-          // We wrap in a try-catch for now because some components might strictly require context
-          // But ideally, renderers should be robust.
-          // For now, we prefer to shallow render or just check it is a valid function/class
-          expect(Cmp).toBeDefined();
-          
-          /* 
-             Full rendering is risky because of dependencies (e.g. Hooks, Context).
-             So we will just verify the sanity of the registration for now.
-             If we want to render, we need a wrapper provider.
-          */
-        } catch (e) {
-             // console.warn(`Render failed for ${config.type}`, e);
-        }
-      });
-
-      it('should accept className prop if rendered', () => {
-          // This is a static check on the 'inputs' metadata to ensure className is exposed?
-          // No, className is on the BaseSchema, not necessarily in 'inputs' array (which is for Designer).
-          // But checks that component implementation uses 'cn' are hard to do at runtime without rendering.
-      });
-    });
-  });
-});

package/src/__tests__/config-field-renderer.test.tsx

@@ -1,307 +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 { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ConfigFieldRenderer } from '../custom/config-field-renderer';
-import type { ConfigField } from '../types/config-panel';
-
-const defaultDraft = { name: 'Test', enabled: true, theme: 'dark', count: 5 };
-
-describe('ConfigFieldRenderer', () => {
-  describe('input type', () => {
-    const field: ConfigField = { key: 'name', label: 'Name', type: 'input', placeholder: 'Enter name' };
-
-    it('should render input with label', () => {
-      render(<ConfigFieldRenderer field={field} value="Test" onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Name')).toBeDefined();
-      expect(screen.getByTestId('config-field-name')).toBeDefined();
-    });
-
-    it('should display current value', () => {
-      render(<ConfigFieldRenderer field={field} value="Hello" onChange={vi.fn()} draft={defaultDraft} />);
-      expect((screen.getByTestId('config-field-name') as HTMLInputElement).value).toBe('Hello');
-    });
-
-    it('should call onChange on input', () => {
-      const onChange = vi.fn();
-      render(<ConfigFieldRenderer field={field} value="" onChange={onChange} draft={defaultDraft} />);
-      fireEvent.change(screen.getByTestId('config-field-name'), { target: { value: 'New' } });
-      expect(onChange).toHaveBeenCalledWith('New');
-    });
-
-    it('should use defaultValue when value is undefined', () => {
-      const fieldWithDefault: ConfigField = { key: 'name', label: 'Name', type: 'input', defaultValue: 'Default' };
-      render(<ConfigFieldRenderer field={fieldWithDefault} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
-      expect((screen.getByTestId('config-field-name') as HTMLInputElement).value).toBe('Default');
-    });
-  });
-
-  describe('switch type', () => {
-    const field: ConfigField = { key: 'enabled', label: 'Enabled', type: 'switch' };
-
-    it('should render switch with label', () => {
-      render(<ConfigFieldRenderer field={field} value={true} onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Enabled')).toBeDefined();
-      expect(screen.getByTestId('config-field-enabled')).toBeDefined();
-    });
-
-    it('should toggle on click', () => {
-      const onChange = vi.fn();
-      render(<ConfigFieldRenderer field={field} value={false} onChange={onChange} draft={defaultDraft} />);
-      fireEvent.click(screen.getByTestId('config-field-enabled'));
-      expect(onChange).toHaveBeenCalledWith(true);
-    });
-  });
-
-  describe('checkbox type', () => {
-    const field: ConfigField = { key: 'checked', label: 'Active', type: 'checkbox' };
-
-    it('should render checkbox with label', () => {
-      render(<ConfigFieldRenderer field={field} value={false} onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Active')).toBeDefined();
-      expect(screen.getByTestId('config-field-checked')).toBeDefined();
-    });
-
-    it('should toggle on click', () => {
-      const onChange = vi.fn();
-      render(<ConfigFieldRenderer field={field} value={false} onChange={onChange} draft={defaultDraft} />);
-      fireEvent.click(screen.getByTestId('config-field-checked'));
-      expect(onChange).toHaveBeenCalledWith(true);
-    });
-  });
-
-  describe('select type', () => {
-    const field: ConfigField = {
-      key: 'theme',
-      label: 'Theme',
-      type: 'select',
-      options: [
-        { value: 'light', label: 'Light' },
-        { value: 'dark', label: 'Dark' },
-        { value: 'auto', label: 'Auto' },
-      ],
-    };
-
-    it('should render select trigger with label', () => {
-      render(<ConfigFieldRenderer field={field} value="dark" onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Theme')).toBeDefined();
-      expect(screen.getByTestId('config-field-theme')).toBeDefined();
-    });
-  });
-
-  describe('slider type', () => {
-    const field: ConfigField = {
-      key: 'count',
-      label: 'Count',
-      type: 'slider',
-      min: 1,
-      max: 10,
-      step: 1,
-    };
-
-    it('should render slider with label and value display', () => {
-      render(<ConfigFieldRenderer field={field} value={5} onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Count')).toBeDefined();
-      expect(screen.getByText('5')).toBeDefined();
-    });
-  });
-
-  describe('color type', () => {
-    const field: ConfigField = { key: 'bgColor', label: 'Background', type: 'color' };
-
-    it('should render color picker', () => {
-      render(<ConfigFieldRenderer field={field} value="#ff0000" onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Background')).toBeDefined();
-      const input = screen.getByTestId('config-field-bgColor') as HTMLInputElement;
-      expect(input.type).toBe('color');
-      expect(input.value).toBe('#ff0000');
-    });
-
-    it('should call onChange on color change', () => {
-      const onChange = vi.fn();
-      render(<ConfigFieldRenderer field={field} value="#ff0000" onChange={onChange} draft={defaultDraft} />);
-      fireEvent.change(screen.getByTestId('config-field-bgColor'), { target: { value: '#00ff00' } });
-      expect(onChange).toHaveBeenCalledWith('#00ff00');
-    });
-  });
-
-  describe('icon-group type', () => {
-    const field: ConfigField = {
-      key: 'size',
-      label: 'Size',
-      type: 'icon-group',
-      options: [
-        { value: 'sm', label: 'Small' },
-        { value: 'md', label: 'Medium' },
-        { value: 'lg', label: 'Large' },
-      ],
-    };
-
-    it('should render icon group buttons', () => {
-      render(<ConfigFieldRenderer field={field} value="md" onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Size')).toBeDefined();
-      expect(screen.getByTitle('Small')).toBeDefined();
-      expect(screen.getByTitle('Medium')).toBeDefined();
-      expect(screen.getByTitle('Large')).toBeDefined();
-    });
-
-    it('should call onChange when button clicked', () => {
-      const onChange = vi.fn();
-      render(<ConfigFieldRenderer field={field} value="sm" onChange={onChange} draft={defaultDraft} />);
-      fireEvent.click(screen.getByTitle('Large'));
-      expect(onChange).toHaveBeenCalledWith('lg');
-    });
-  });
-
-  describe('custom type', () => {
-    it('should render custom content via render prop', () => {
-      const field: ConfigField = {
-        key: 'custom',
-        label: 'Custom',
-        type: 'custom',
-        render: (value, onChange) => (
-          <div data-testid="custom-render">
-            <span>Custom: {value}</span>
-            <button onClick={() => onChange('updated')}>Update</button>
-          </div>
-        ),
-      };
-      const onChange = vi.fn();
-      render(<ConfigFieldRenderer field={field} value="initial" onChange={onChange} draft={defaultDraft} />);
-      expect(screen.getByTestId('custom-render')).toBeDefined();
-      expect(screen.getByText('Custom: initial')).toBeDefined();
-      fireEvent.click(screen.getByText('Update'));
-      expect(onChange).toHaveBeenCalledWith('updated');
-    });
-
-    it('should return null for custom type without render', () => {
-      const field: ConfigField = { key: 'empty', label: 'Empty', type: 'custom' };
-      const { container } = render(<ConfigFieldRenderer field={field} value={null} onChange={vi.fn()} draft={defaultDraft} />);
-      expect(container.innerHTML).toBe('');
-    });
-  });
-
-  describe('visibility', () => {
-    it('should hide field when visibleWhen returns false', () => {
-      const field: ConfigField = {
-        key: 'hidden',
-        label: 'Hidden',
-        type: 'input',
-        visibleWhen: () => false,
-      };
-      const { container } = render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
-      expect(container.innerHTML).toBe('');
-    });
-
-    it('should show field when visibleWhen returns true', () => {
-      const field: ConfigField = {
-        key: 'visible',
-        label: 'Visible',
-        type: 'input',
-        visibleWhen: (draft) => draft.enabled === true,
-      };
-      render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Visible')).toBeDefined();
-    });
-
-    it('should evaluate visibleWhen against draft', () => {
-      const field: ConfigField = {
-        key: 'conditional',
-        label: 'Conditional',
-        type: 'input',
-        visibleWhen: (draft) => draft.theme === 'dark',
-      };
-      const { container: hidden } = render(
-        <ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={{ ...defaultDraft, theme: 'light' }} />,
-      );
-      expect(hidden.innerHTML).toBe('');
-
-      render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={{ ...defaultDraft, theme: 'dark' }} />);
-      expect(screen.getByText('Conditional')).toBeDefined();
-    });
-  });
-
-  describe('field-picker type', () => {
-    it('should render as clickable config row', () => {
-      const field: ConfigField = { key: 'field', label: 'Select Field', type: 'field-picker', placeholder: 'Choose...' };
-      render(<ConfigFieldRenderer field={field} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Select Field')).toBeDefined();
-      expect(screen.getByText('Choose...')).toBeDefined();
-    });
-  });
-
-  describe('filter/sort types', () => {
-    it('should render filter with FilterBuilder', () => {
-      const field: ConfigField = {
-        key: 'filter',
-        label: 'Filters',
-        type: 'filter',
-        fields: [
-          { value: 'name', label: 'Name' },
-          { value: 'status', label: 'Status' },
-        ],
-      };
-      render(<ConfigFieldRenderer field={field} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Filters')).toBeDefined();
-      expect(screen.getByTestId('config-field-filter')).toBeDefined();
-      // FilterBuilder renders 'Where' label and 'Add filter' button
-      expect(screen.getByText('Add filter')).toBeDefined();
-    });
-
-    it('should render sort with SortBuilder', () => {
-      const field: ConfigField = {
-        key: 'sort',
-        label: 'Sorting',
-        type: 'sort',
-        fields: [
-          { value: 'name', label: 'Name' },
-          { value: 'date', label: 'Date' },
-        ],
-      };
-      render(<ConfigFieldRenderer field={field} value={undefined} onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Sorting')).toBeDefined();
-      expect(screen.getByTestId('config-field-sort')).toBeDefined();
-      // SortBuilder renders 'Add sort' button
-      expect(screen.getByText('Add sort')).toBeDefined();
-    });
-  });
-
-  describe('helpText rendering', () => {
-    it('should render helpText below field when provided', () => {
-      const field: ConfigField = {
-        key: 'width',
-        label: 'Width',
-        type: 'input',
-        helpText: 'Available for drawer, modal, and split modes',
-      };
-      render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Available for drawer, modal, and split modes')).toBeDefined();
-    });
-
-    it('should not render helpText paragraph when not provided', () => {
-      const field: ConfigField = { key: 'name', label: 'Name', type: 'input' };
-      const { container } = render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
-      expect(container.querySelectorAll('p').length).toBe(0);
-    });
-
-    it('should render helpText for custom field type', () => {
-      const React = require('react');
-      const field: ConfigField = {
-        key: 'custom',
-        label: 'Custom',
-        type: 'custom',
-        helpText: 'Custom help text',
-        render: (value, onChange) => React.createElement('div', { 'data-testid': 'custom-content' }, 'Custom'),
-      };
-      render(<ConfigFieldRenderer field={field} value="" onChange={vi.fn()} draft={defaultDraft} />);
-      expect(screen.getByText('Custom help text')).toBeDefined();
-      expect(screen.getByTestId('custom-content')).toBeDefined();
-    });
-  });
-});