@object-ui/plugin-list 3.0.3 → 3.1.1

package/src/__tests__/FilterNormalization.test.ts

@@ -0,0 +1,162 @@
+/**
+ * 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 } from 'vitest';
+import { normalizeFilterCondition, normalizeFilters } from '../ListView';
+
+describe('normalizeFilterCondition', () => {
+  // =========================================================================
+  // `in` operator normalization
+  // =========================================================================
+  describe('in operator', () => {
+    it('converts single-value `in` to `=`', () => {
+      expect(normalizeFilterCondition(['status', 'in', ['active']])).toEqual(
+        ['status', '=', 'active'],
+      );
+    });
+
+    it('converts multi-value `in` to `or` of `=`', () => {
+      expect(normalizeFilterCondition(['status', 'in', ['active', 'pending']])).toEqual(
+        ['or', ['status', '=', 'active'], ['status', '=', 'pending']],
+      );
+    });
+
+    it('returns empty array for empty `in` values', () => {
+      expect(normalizeFilterCondition(['status', 'in', []])).toEqual([]);
+    });
+
+    it('handles numeric values in `in`', () => {
+      expect(normalizeFilterCondition(['priority', 'in', [1, 2, 3]])).toEqual(
+        ['or', ['priority', '=', 1], ['priority', '=', 2], ['priority', '=', 3]],
+      );
+    });
+
+    it('handles boolean values in `in`', () => {
+      expect(normalizeFilterCondition(['is_active', 'in', [true]])).toEqual(
+        ['is_active', '=', true],
+      );
+    });
+  });
+
+  // =========================================================================
+  // `not in` operator normalization
+  // =========================================================================
+  describe('not in operator', () => {
+    it('converts single-value `not in` to `!=`', () => {
+      expect(normalizeFilterCondition(['status', 'not in', ['closed']])).toEqual(
+        ['status', '!=', 'closed'],
+      );
+    });
+
+    it('converts multi-value `not in` to `and` of `!=`', () => {
+      expect(normalizeFilterCondition(['status', 'not in', ['closed', 'archived']])).toEqual(
+        ['and', ['status', '!=', 'closed'], ['status', '!=', 'archived']],
+      );
+    });
+
+    it('returns empty array for empty `not in` values', () => {
+      expect(normalizeFilterCondition(['status', 'not in', []])).toEqual([]);
+    });
+  });
+
+  // =========================================================================
+  // Passthrough for non-in operators
+  // =========================================================================
+  describe('passthrough', () => {
+    it('passes through `=` operator unchanged', () => {
+      expect(normalizeFilterCondition(['name', '=', 'Alice'])).toEqual(
+        ['name', '=', 'Alice'],
+      );
+    });
+
+    it('passes through `!=` operator unchanged', () => {
+      expect(normalizeFilterCondition(['status', '!=', null])).toEqual(
+        ['status', '!=', null],
+      );
+    });
+
+    it('passes through `>` operator unchanged', () => {
+      expect(normalizeFilterCondition(['amount', '>', 100])).toEqual(
+        ['amount', '>', 100],
+      );
+    });
+
+    it('passes through `contains` operator unchanged', () => {
+      expect(normalizeFilterCondition(['name', 'contains', 'test'])).toEqual(
+        ['name', 'contains', 'test'],
+      );
+    });
+  });
+
+  // =========================================================================
+  // Logical group recursion
+  // =========================================================================
+  describe('logical groups', () => {
+    it('recursively normalizes `and` groups', () => {
+      const input = ['and', ['status', 'in', ['a', 'b']], ['name', '=', 'Alice']];
+      expect(normalizeFilterCondition(input)).toEqual(
+        ['and', ['or', ['status', '=', 'a'], ['status', '=', 'b']], ['name', '=', 'Alice']],
+      );
+    });
+
+    it('recursively normalizes `or` groups', () => {
+      const input = ['or', ['priority', 'in', [1, 2]], ['status', '=', 'active']];
+      expect(normalizeFilterCondition(input)).toEqual(
+        ['or', ['or', ['priority', '=', 1], ['priority', '=', 2]], ['status', '=', 'active']],
+      );
+    });
+  });
+
+  // =========================================================================
+  // Edge cases
+  // =========================================================================
+  describe('edge cases', () => {
+    it('handles non-array input gracefully', () => {
+      expect(normalizeFilterCondition([] as any)).toEqual([]);
+    });
+
+    it('handles short array input gracefully', () => {
+      expect(normalizeFilterCondition(['field'] as any)).toEqual(['field']);
+    });
+  });
+});
+
+describe('normalizeFilters', () => {
+  it('normalizes an array of conditions', () => {
+    const input = [
+      ['status', 'in', ['active', 'pending']],
+      ['name', '=', 'Alice'],
+    ];
+    const result = normalizeFilters(input);
+    expect(result).toEqual([
+      ['or', ['status', '=', 'active'], ['status', '=', 'pending']],
+      ['name', '=', 'Alice'],
+    ]);
+  });
+
+  it('filters out empty arrays from normalization', () => {
+    const input = [
+      ['status', 'in', []],
+      ['name', '=', 'Alice'],
+    ];
+    const result = normalizeFilters(input);
+    expect(result).toEqual([
+      ['name', '=', 'Alice'],
+    ]);
+  });
+
+  it('returns empty array for empty input', () => {
+    expect(normalizeFilters([])).toEqual([]);
+  });
+
+  it('handles non-array items gracefully', () => {
+    const input = [null, undefined, 'invalid', ['name', '=', 'test']];
+    const result = normalizeFilters(input as any);
+    expect(result).toEqual([['name', '=', 'test']]);
+  });
+});

package/src/__tests__/GalleryGrouping.test.tsx

@@ -0,0 +1,237 @@
+/**
+ * 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, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ObjectGallery } from '../ObjectGallery';
+
+const mockHandleClick = vi.fn();
+const mockNavigationOverlay = {
+  isOverlay: false,
+  handleClick: mockHandleClick,
+  selectedRecord: null,
+  isOpen: false,
+  close: vi.fn(),
+  setIsOpen: vi.fn(),
+  mode: 'page' as const,
+  width: undefined,
+  view: undefined,
+  open: vi.fn(),
+};
+
+vi.mock('@object-ui/react', () => {
+  const React = require('react');
+  return {
+    useDataScope: () => undefined,
+    SchemaRendererContext: React.createContext(null),
+    useNavigationOverlay: () => mockNavigationOverlay,
+  };
+});
+
+vi.mock('@object-ui/components', () => ({
+  cn: (...args: any[]) => args.filter(Boolean).join(' '),
+  Card: ({ children, onClick, ...props }: any) => (
+    <div data-testid="gallery-card" onClick={onClick} {...props}>{children}</div>
+  ),
+  CardContent: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+  NavigationOverlay: ({ children, selectedRecord }: any) => (
+    selectedRecord ? <div data-testid="navigation-overlay">{children(selectedRecord)}</div> : null
+  ),
+}));
+
+vi.mock('@object-ui/core', () => ({
+  ComponentRegistry: { register: vi.fn() },
+}));
+
+vi.mock('lucide-react', () => ({
+  ChevronRight: () => <span data-testid="chevron-right">▸</span>,
+  ChevronDown: () => <span data-testid="chevron-down">▾</span>,
+}));
+
+const mockItems = [
+  { id: '1', name: 'Alpha Widget', category: 'Electronics', image: 'https://example.com/1.jpg' },
+  { id: '2', name: 'Beta Gadget', category: 'Electronics', image: 'https://example.com/2.jpg' },
+  { id: '3', name: 'Gamma Tool', category: 'Tools', image: 'https://example.com/3.jpg' },
+  { id: '4', name: 'Delta Supply', category: 'Office', image: 'https://example.com/4.jpg' },
+  { id: '5', name: 'Epsilon Gear', category: 'Tools', image: 'https://example.com/5.jpg' },
+];
+
+describe('ObjectGallery Grouping', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders without grouping (flat list) when no grouping config', () => {
+    const schema = { objectName: 'products' };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+
+    // All items visible
+    expect(screen.getByText('Alpha Widget')).toBeInTheDocument();
+    expect(screen.getByText('Beta Gadget')).toBeInTheDocument();
+    expect(screen.getByText('Gamma Tool')).toBeInTheDocument();
+    expect(screen.getByText('Delta Supply')).toBeInTheDocument();
+    expect(screen.getByText('Epsilon Gear')).toBeInTheDocument();
+
+    // No group headers
+    expect(screen.queryByText('Electronics')).not.toBeInTheDocument();
+    expect(screen.queryByText('Tools')).not.toBeInTheDocument();
+  });
+
+  it('renders grouped sections when grouping config is provided', () => {
+    const schema = {
+      objectName: 'products',
+      grouping: {
+        fields: [{ field: 'category', order: 'asc' as const, collapsed: false }],
+      },
+    };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+
+    // Group headers should be visible
+    expect(screen.getByText('Electronics')).toBeInTheDocument();
+    expect(screen.getByText('Tools')).toBeInTheDocument();
+    expect(screen.getByText('Office')).toBeInTheDocument();
+
+    // All items should be visible (none collapsed)
+    expect(screen.getByText('Alpha Widget')).toBeInTheDocument();
+    expect(screen.getByText('Beta Gadget')).toBeInTheDocument();
+    expect(screen.getByText('Gamma Tool')).toBeInTheDocument();
+    expect(screen.getByText('Delta Supply')).toBeInTheDocument();
+    expect(screen.getByText('Epsilon Gear')).toBeInTheDocument();
+  });
+
+  it('shows record count per group', () => {
+    const schema = {
+      objectName: 'products',
+      grouping: {
+        fields: [{ field: 'category', order: 'asc' as const, collapsed: false }],
+      },
+    };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+
+    // Electronics has 2 items, Tools has 2, Office has 1
+    const buttons = screen.getAllByRole('button');
+    const electronicsBtn = buttons.find(b => b.textContent?.includes('Electronics'));
+    const toolsBtn = buttons.find(b => b.textContent?.includes('Tools'));
+    const officeBtn = buttons.find(b => b.textContent?.includes('Office'));
+
+    expect(electronicsBtn?.textContent).toContain('2');
+    expect(toolsBtn?.textContent).toContain('2');
+    expect(officeBtn?.textContent).toContain('1');
+  });
+
+  it('collapses a group when clicking the group header', () => {
+    const schema = {
+      objectName: 'products',
+      grouping: {
+        fields: [{ field: 'category', order: 'asc' as const, collapsed: false }],
+      },
+    };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+
+    // All items visible initially
+    expect(screen.getByText('Alpha Widget')).toBeInTheDocument();
+    expect(screen.getByText('Beta Gadget')).toBeInTheDocument();
+
+    // Click Electronics group header to collapse
+    const buttons = screen.getAllByRole('button');
+    const electronicsBtn = buttons.find(b => b.textContent?.includes('Electronics'))!;
+    fireEvent.click(electronicsBtn);
+
+    // Electronics items should be hidden
+    expect(screen.queryByText('Alpha Widget')).not.toBeInTheDocument();
+    expect(screen.queryByText('Beta Gadget')).not.toBeInTheDocument();
+
+    // Other items still visible
+    expect(screen.getByText('Gamma Tool')).toBeInTheDocument();
+    expect(screen.getByText('Delta Supply')).toBeInTheDocument();
+  });
+
+  it('expands a collapsed group when clicking again', () => {
+    const schema = {
+      objectName: 'products',
+      grouping: {
+        fields: [{ field: 'category', order: 'asc' as const, collapsed: false }],
+      },
+    };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+
+    const buttons = screen.getAllByRole('button');
+    const electronicsBtn = buttons.find(b => b.textContent?.includes('Electronics'))!;
+
+    // Collapse
+    fireEvent.click(electronicsBtn);
+    expect(screen.queryByText('Alpha Widget')).not.toBeInTheDocument();
+
+    // Expand
+    fireEvent.click(electronicsBtn);
+    expect(screen.getByText('Alpha Widget')).toBeInTheDocument();
+    expect(screen.getByText('Beta Gadget')).toBeInTheDocument();
+  });
+
+  it('respects initial collapsed state from grouping config', () => {
+    const schema = {
+      objectName: 'products',
+      grouping: {
+        fields: [{ field: 'category', order: 'asc' as const, collapsed: true }],
+      },
+    };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+
+    // Group headers should be visible
+    expect(screen.getByText('Electronics')).toBeInTheDocument();
+    expect(screen.getByText('Tools')).toBeInTheDocument();
+    expect(screen.getByText('Office')).toBeInTheDocument();
+
+    // All items should be hidden (all groups collapsed by default)
+    expect(screen.queryByText('Alpha Widget')).not.toBeInTheDocument();
+    expect(screen.queryByText('Beta Gadget')).not.toBeInTheDocument();
+    expect(screen.queryByText('Gamma Tool')).not.toBeInTheDocument();
+    expect(screen.queryByText('Delta Supply')).not.toBeInTheDocument();
+    expect(screen.queryByText('Epsilon Gear')).not.toBeInTheDocument();
+  });
+
+  it('shows (empty) label for items with empty grouping field', () => {
+    const items = [
+      { id: '1', name: 'Item A', category: 'Cat1' },
+      { id: '2', name: 'Item B', category: '' },
+      { id: '3', name: 'Item C' }, // no category field
+    ];
+    const schema = {
+      objectName: 'products',
+      grouping: {
+        fields: [{ field: 'category', order: 'asc' as const, collapsed: false }],
+      },
+    };
+    render(<ObjectGallery schema={schema} data={items} />);
+
+    expect(screen.getByText('Cat1')).toBeInTheDocument();
+    expect(screen.getByText('(empty)')).toBeInTheDocument();
+  });
+
+  it('sorts groups by descending order when configured', () => {
+    const schema = {
+      objectName: 'products',
+      grouping: {
+        fields: [{ field: 'category', order: 'desc' as const, collapsed: false }],
+      },
+    };
+    render(<ObjectGallery schema={schema} data={mockItems} />);
+
+    const buttons = screen.getAllByRole('button');
+    const labels = buttons.map(b => {
+      // Extract the group label text (the <span> inside button)
+      const spans = b.querySelectorAll('span');
+      return spans[1]?.textContent; // label span
+    }).filter(Boolean);
+
+    // With desc order: Tools > Office > Electronics
+    expect(labels[0]).toBe('Tools');
+    expect(labels[1]).toBe('Office');
+    expect(labels[2]).toBe('Electronics');
+  });
+});

package/src/__tests__/GalleryTimelineSpecConfig.test.tsx

@@ -0,0 +1,203 @@
+/**
+ * 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 } from 'vitest';
+import type { ListViewSchema } from '@object-ui/types';
+
+/**
+ * Tests for Gallery/Timeline spec config propagation through ListView's
+ * buildViewSchema. We test the internal logic by checking that the
+ * ListViewSchema types accept spec config and that the config values are correct.
+ */
+
+describe('Gallery/Timeline Spec Config Types', () => {
+  describe('GalleryConfig on ListViewSchema', () => {
+    it('accepts spec gallery config with coverField', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'products',
+        viewType: 'gallery',
+        fields: ['name', 'photo'],
+        gallery: {
+          coverField: 'photo',
+          coverFit: 'contain',
+          cardSize: 'large',
+          titleField: 'name',
+          visibleFields: ['status', 'price'],
+        },
+      };
+
+      expect(schema.gallery?.coverField).toBe('photo');
+      expect(schema.gallery?.coverFit).toBe('contain');
+      expect(schema.gallery?.cardSize).toBe('large');
+      expect(schema.gallery?.titleField).toBe('name');
+      expect(schema.gallery?.visibleFields).toEqual(['status', 'price']);
+    });
+
+    it('accepts all cardSize values', () => {
+      const sizes = ['small', 'medium', 'large'] as const;
+      sizes.forEach((cardSize) => {
+        const schema: ListViewSchema = {
+          type: 'list-view',
+          objectName: 'products',
+          viewType: 'gallery',
+          fields: ['name'],
+          gallery: { cardSize },
+        };
+        expect(schema.gallery?.cardSize).toBe(cardSize);
+      });
+    });
+
+    it('accepts all coverFit values', () => {
+      const fits = ['cover', 'contain', 'fill'] as const;
+      fits.forEach((coverFit) => {
+        const schema: ListViewSchema = {
+          type: 'list-view',
+          objectName: 'products',
+          viewType: 'gallery',
+          fields: ['name'],
+          gallery: { coverFit },
+        };
+        expect(schema.gallery?.coverFit).toBe(coverFit);
+      });
+    });
+
+    it('accepts legacy imageField and subtitleField alongside spec fields', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'products',
+        viewType: 'gallery',
+        fields: ['name'],
+        gallery: {
+          coverField: 'photo',
+          imageField: 'legacyImg',
+          subtitleField: 'description',
+        },
+      };
+
+      expect(schema.gallery?.coverField).toBe('photo');
+      expect(schema.gallery?.imageField).toBe('legacyImg');
+      expect(schema.gallery?.subtitleField).toBe('description');
+    });
+
+    it('accepts gallery config from legacy options as fallback', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'products',
+        viewType: 'gallery',
+        fields: ['name'],
+        options: {
+          gallery: { imageField: 'oldImg', titleField: 'label' },
+        },
+      };
+
+      expect(schema.options?.gallery?.imageField).toBe('oldImg');
+      expect(schema.options?.gallery?.titleField).toBe('label');
+    });
+  });
+
+  describe('TimelineConfig on ListViewSchema', () => {
+    it('accepts spec timeline config with all fields', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'events',
+        viewType: 'timeline',
+        fields: ['name', 'date'],
+        timeline: {
+          startDateField: 'start_date',
+          endDateField: 'end_date',
+          titleField: 'event_name',
+          groupByField: 'category',
+          colorField: 'priority_color',
+          scale: 'month',
+        },
+      };
+
+      expect(schema.timeline?.startDateField).toBe('start_date');
+      expect(schema.timeline?.endDateField).toBe('end_date');
+      expect(schema.timeline?.titleField).toBe('event_name');
+      expect(schema.timeline?.groupByField).toBe('category');
+      expect(schema.timeline?.colorField).toBe('priority_color');
+      expect(schema.timeline?.scale).toBe('month');
+    });
+
+    it('accepts legacy dateField for backward compatibility', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'events',
+        viewType: 'timeline',
+        fields: ['name'],
+        timeline: {
+          startDateField: 'created_at',
+          titleField: 'name',
+          dateField: 'legacy_date',
+        },
+      };
+
+      expect(schema.timeline?.startDateField).toBe('created_at');
+      expect(schema.timeline?.dateField).toBe('legacy_date');
+    });
+
+    it('supports all scale values', () => {
+      const scales = ['hour', 'day', 'week', 'month', 'quarter', 'year'] as const;
+      scales.forEach((scale) => {
+        const schema: ListViewSchema = {
+          type: 'list-view',
+          objectName: 'events',
+          viewType: 'timeline',
+          fields: ['name'],
+          timeline: { startDateField: 'date', titleField: 'name', scale },
+        };
+        expect(schema.timeline?.scale).toBe(scale);
+      });
+    });
+
+    it('accepts timeline config from legacy options as fallback', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'events',
+        viewType: 'timeline',
+        fields: ['name'],
+        options: {
+          timeline: { dateField: 'created_at', titleField: 'name' },
+        },
+      };
+
+      expect(schema.options?.timeline?.dateField).toBe('created_at');
+    });
+  });
+
+  describe('spec config co-existence', () => {
+    it('gallery and timeline configs can coexist on the same ListViewSchema', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'projects',
+        viewType: 'grid',
+        fields: ['name', 'date', 'photo'],
+        gallery: {
+          coverField: 'photo',
+          cardSize: 'medium',
+          titleField: 'name',
+          visibleFields: ['status'],
+        },
+        timeline: {
+          startDateField: 'start_date',
+          titleField: 'name',
+          scale: 'quarter',
+          groupByField: 'team',
+        },
+      };
+
+      expect(schema.gallery?.coverField).toBe('photo');
+      expect(schema.gallery?.cardSize).toBe('medium');
+      expect(schema.timeline?.startDateField).toBe('start_date');
+      expect(schema.timeline?.scale).toBe('quarter');
+      expect(schema.timeline?.groupByField).toBe('team');
+    });
+  });
+});