@object-ui/plugin-detail 3.0.3 → 3.1.1

package/src/__tests__/SectionGroup.test.tsx

@@ -0,0 +1,101 @@
+/**
+ * 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 { SectionGroup } from '../SectionGroup';
+import type { SectionGroup as SectionGroupType } from '@object-ui/types';
+
+describe('SectionGroup', () => {
+  const baseGroup: SectionGroupType = {
+    title: 'Address Information',
+    sections: [
+      {
+        title: 'Billing',
+        fields: [
+          { name: 'billingStreet', label: 'Street' },
+          { name: 'billingCity', label: 'City' },
+        ],
+      },
+      {
+        title: 'Shipping',
+        fields: [
+          { name: 'shippingStreet', label: 'Street' },
+          { name: 'shippingCity', label: 'City' },
+        ],
+      },
+    ],
+  };
+
+  const data = {
+    billingStreet: '123 Main St',
+    billingCity: 'Springfield',
+    shippingStreet: '456 Oak Ave',
+    shippingCity: 'Shelbyville',
+  };
+
+  it('should render group title', () => {
+    render(<SectionGroup group={baseGroup} data={data} />);
+    expect(screen.getByText('Address Information')).toBeInTheDocument();
+  });
+
+  it('should render child section titles', () => {
+    render(<SectionGroup group={baseGroup} data={data} />);
+    expect(screen.getByText('Billing')).toBeInTheDocument();
+    expect(screen.getByText('Shipping')).toBeInTheDocument();
+  });
+
+  it('should render field values in child sections', () => {
+    render(<SectionGroup group={baseGroup} data={data} />);
+    expect(screen.getByText('123 Main St')).toBeInTheDocument();
+    expect(screen.getByText('Springfield')).toBeInTheDocument();
+  });
+
+  it('should be collapsible by default', () => {
+    render(<SectionGroup group={baseGroup} data={data} />);
+    // The group should render a collapsible trigger
+    const trigger = screen.getByText('Address Information');
+    expect(trigger.closest('[data-state]') || trigger.closest('div')).toBeTruthy();
+  });
+
+  it('should start collapsed when defaultCollapsed is true', () => {
+    const collapsedGroup = { ...baseGroup, defaultCollapsed: true };
+    render(<SectionGroup group={collapsedGroup} data={data} />);
+    // Title should still be visible
+    expect(screen.getByText('Address Information')).toBeInTheDocument();
+    // Child section content should be hidden (in collapsed state)
+    expect(screen.queryByText('123 Main St')).not.toBeInTheDocument();
+  });
+
+  it('should expand when clicked while collapsed', () => {
+    const collapsedGroup = { ...baseGroup, defaultCollapsed: true };
+    render(<SectionGroup group={collapsedGroup} data={data} />);
+    
+    // Click the trigger to expand
+    fireEvent.click(screen.getByText('Address Information'));
+    
+    // Content should now be visible
+    expect(screen.getByText('123 Main St')).toBeInTheDocument();
+  });
+
+  it('should render description when provided', () => {
+    const groupWithDesc = { ...baseGroup, description: 'Billing and shipping addresses', collapsible: false };
+    render(<SectionGroup group={groupWithDesc} data={data} />);
+    expect(screen.getByText('Billing and shipping addresses')).toBeInTheDocument();
+  });
+
+  it('should not be collapsible when collapsible is false', () => {
+    const nonCollapsible = { ...baseGroup, collapsible: false };
+    const { container } = render(<SectionGroup group={nonCollapsible} data={data} />);
+    // The top-level group heading should not have a cursor-pointer collapsible trigger
+    const heading = screen.getByText('Address Information');
+    const parentDiv = heading.closest('div');
+    // Non-collapsible group renders a static border-b div, not a CollapsibleTrigger
+    expect(parentDiv?.className).not.toContain('cursor-pointer');
+  });
+});

package/src/__tests__/SubscriptionToggle.test.tsx

@@ -0,0 +1,84 @@
+/**
+ * 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 '@testing-library/jest-dom';
+import { SubscriptionToggle } from '../SubscriptionToggle';
+import type { RecordSubscription } from '@object-ui/types';
+
+describe('SubscriptionToggle', () => {
+  it('should render subscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} />);
+    const btn = screen.getByRole('button');
+    expect(btn).toHaveAttribute('aria-label', 'Unsubscribe from notifications');
+  });
+
+  it('should render unsubscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} />);
+    const btn = screen.getByRole('button');
+    expect(btn).toHaveAttribute('aria-label', 'Subscribe to notifications');
+  });
+
+  it('should call onToggle with new state when clicked', () => {
+    const onToggle = vi.fn();
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+
+  it('should call onToggle with false when unsubscribing', () => {
+    const onToggle = vi.fn();
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onToggle).toHaveBeenCalledWith(false);
+  });
+
+  it('should be disabled when no onToggle provided', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} />);
+    expect(screen.getByRole('button')).toBeDisabled();
+  });
+
+  it('should show title for subscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    render(<SubscriptionToggle subscription={sub} onToggle={() => {}} />);
+    expect(screen.getByRole('button')).toHaveAttribute('title', 'Subscribed — click to unsubscribe');
+  });
+
+  it('should show title for unsubscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} onToggle={() => {}} />);
+    expect(screen.getByRole('button')).toHaveAttribute('title', 'Subscribe to notifications');
+  });
+
+  it('should be disabled during loading after click', async () => {
+    let resolveToggle: () => void;
+    const onToggle = vi.fn(() => new Promise<void>((r) => { resolveToggle = r; }));
+    const sub: RecordSubscription = { recordId: '1', subscribed: false };
+    render(<SubscriptionToggle subscription={sub} onToggle={onToggle} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('button')).toBeDisabled();
+    resolveToggle!();
+    await vi.waitFor(() => {
+      expect(screen.getByRole('button')).not.toBeDisabled();
+    });
+  });
+
+  it('should update aria-label based on subscribed state', () => {
+    const sub: RecordSubscription = { recordId: '1', subscribed: true };
+    const { rerender } = render(<SubscriptionToggle subscription={sub} onToggle={() => {}} />);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Unsubscribe from notifications');
+    rerender(<SubscriptionToggle subscription={{ ...sub, subscribed: false }} onToggle={() => {}} />);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Subscribe to notifications');
+  });
+});

package/src/__tests__/ThreadedReplies.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * 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 '@testing-library/jest-dom';
+import { ThreadedReplies } from '../ThreadedReplies';
+import type { FeedItem } from '@object-ui/types';
+
+const parentItem: FeedItem = {
+  id: 'p1',
+  type: 'comment',
+  actor: 'Alice',
+  body: 'Parent comment',
+  createdAt: '2026-02-20T10:00:00Z',
+  replyCount: 2,
+};
+
+const mockReplies: FeedItem[] = [
+  {
+    id: 'r1',
+    type: 'comment',
+    actor: 'Bob',
+    body: 'First reply',
+    createdAt: '2026-02-20T11:00:00Z',
+    parentId: 'p1',
+  },
+  {
+    id: 'r2',
+    type: 'comment',
+    actor: 'Charlie',
+    body: 'Second reply',
+    createdAt: '2026-02-20T12:00:00Z',
+    parentId: 'p1',
+  },
+];
+
+describe('ThreadedReplies', () => {
+  it('should render reply count toggle', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    expect(screen.getByText('2 replies')).toBeInTheDocument();
+  });
+
+  it('should use singular "reply" for one reply', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[mockReplies[0]]} />,
+    );
+    expect(screen.getByText('1 reply')).toBeInTheDocument();
+  });
+
+  it('should not render replies by default (collapsed)', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    expect(screen.queryByText('First reply')).not.toBeInTheDocument();
+  });
+
+  it('should expand replies when toggle is clicked', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    expect(screen.getByText('First reply')).toBeInTheDocument();
+    expect(screen.getByText('Second reply')).toBeInTheDocument();
+  });
+
+  it('should show reply authors', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+  });
+
+  it('should show reply input when onAddReply and showReplyInput', () => {
+    const onAdd = vi.fn();
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    expect(screen.getByPlaceholderText('Reply…')).toBeInTheDocument();
+  });
+
+  it('should call onAddReply with parentId and text', () => {
+    const onAdd = vi.fn().mockResolvedValue(undefined);
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    const input = screen.getByPlaceholderText('Reply…');
+    fireEvent.change(input, { target: { value: 'My reply' } });
+    fireEvent.click(screen.getByLabelText('Send reply'));
+    expect(onAdd).toHaveBeenCalledWith('p1', 'My reply');
+  });
+
+  it('should return null when no replies and no reply input', () => {
+    const { container } = render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} showReplyInput={false} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should have aria-expanded=false when collapsed', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    const toggle = screen.getByText('2 replies').closest('button');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('should have aria-expanded=true when expanded', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    const toggle = screen.getByText('2 replies').closest('button');
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('should render avatarUrl when provided on reply', () => {
+    const repliesWithAvatar: FeedItem[] = [
+      {
+        id: 'r1',
+        type: 'comment',
+        actor: 'Bob',
+        actorAvatarUrl: 'https://example.com/bob.png',
+        body: 'With avatar',
+        createdAt: '2026-02-20T11:00:00Z',
+        parentId: 'p1',
+      },
+    ];
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={repliesWithAvatar} />,
+    );
+    fireEvent.click(screen.getByText('1 reply'));
+    const img = screen.getByAltText('Bob');
+    expect(img).toHaveAttribute('src', 'https://example.com/bob.png');
+  });
+
+  it('should render first-letter avatar fallback', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    // Bob should show 'B' as fallback initial
+    expect(screen.getByText('B')).toBeInTheDocument();
+  });
+
+  it('should submit reply via Ctrl+Enter', () => {
+    const onAdd = vi.fn().mockResolvedValue(undefined);
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    const input = screen.getByPlaceholderText('Reply…');
+    fireEvent.change(input, { target: { value: 'Ctrl reply' } });
+    fireEvent.keyDown(input, { key: 'Enter', ctrlKey: true });
+    expect(onAdd).toHaveBeenCalledWith('p1', 'Ctrl reply');
+  });
+
+  it('should disable Send button when input is empty', () => {
+    const onAdd = vi.fn();
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    expect(screen.getByLabelText('Send reply')).toBeDisabled();
+  });
+
+  it('should disable input and button during reply submission', async () => {
+    let resolveReply: () => void;
+    const onAdd = vi.fn(() => new Promise<void>((r) => { resolveReply = r; }));
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    const input = screen.getByPlaceholderText('Reply…') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'submitting reply' } });
+    fireEvent.click(screen.getByLabelText('Send reply'));
+    expect(input).toBeDisabled();
+    expect(screen.getByLabelText('Send reply')).toBeDisabled();
+    resolveReply!();
+    await vi.waitFor(() => {
+      expect(input).not.toBeDisabled();
+    });
+  });
+
+  it('should clear input after successful reply submission', async () => {
+    const onAdd = vi.fn().mockResolvedValue(undefined);
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={[]} onAddReply={onAdd} showReplyInput />,
+    );
+    const input = screen.getByPlaceholderText('Reply…') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'reply text' } });
+    fireEvent.click(screen.getByLabelText('Send reply'));
+    await vi.waitFor(() => {
+      expect(input.value).toBe('');
+    });
+  });
+
+  it('should render reply body and timestamp when expanded', () => {
+    render(
+      <ThreadedReplies parentItem={parentItem} replies={mockReplies} />,
+    );
+    fireEvent.click(screen.getByText('2 replies'));
+    expect(screen.getByText('First reply')).toBeInTheDocument();
+    expect(screen.getByText('Second reply')).toBeInTheDocument();
+  });
+});

package/src/__tests__/autoLayout.test.ts

@@ -0,0 +1,184 @@
+/**
+ * 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 {
+  inferDetailColumns,
+  isWideFieldType,
+  applyAutoSpan,
+  applyDetailAutoLayout,
+} from '../autoLayout';
+
+describe('Detail Auto-Layout', () => {
+  describe('inferDetailColumns', () => {
+    it('should return 1 column for 0 fields', () => {
+      expect(inferDetailColumns(0)).toBe(1);
+    });
+
+    it('should return 1 column for 1-3 fields', () => {
+      expect(inferDetailColumns(1)).toBe(1);
+      expect(inferDetailColumns(2)).toBe(1);
+      expect(inferDetailColumns(3)).toBe(1);
+    });
+
+    it('should return 2 columns for 4-10 fields', () => {
+      expect(inferDetailColumns(4)).toBe(2);
+      expect(inferDetailColumns(7)).toBe(2);
+      expect(inferDetailColumns(10)).toBe(2);
+    });
+
+    it('should return 3 columns for 11+ fields', () => {
+      expect(inferDetailColumns(11)).toBe(3);
+      expect(inferDetailColumns(15)).toBe(3);
+      expect(inferDetailColumns(50)).toBe(3);
+    });
+  });
+
+  describe('isWideFieldType', () => {
+    it('should identify textarea as wide', () => {
+      expect(isWideFieldType('textarea')).toBe(true);
+      expect(isWideFieldType('field:textarea')).toBe(true);
+    });
+
+    it('should identify markdown as wide', () => {
+      expect(isWideFieldType('markdown')).toBe(true);
+      expect(isWideFieldType('field:markdown')).toBe(true);
+    });
+
+    it('should identify html as wide', () => {
+      expect(isWideFieldType('html')).toBe(true);
+      expect(isWideFieldType('field:html')).toBe(true);
+    });
+
+    it('should identify grid as wide', () => {
+      expect(isWideFieldType('grid')).toBe(true);
+      expect(isWideFieldType('field:grid')).toBe(true);
+    });
+
+    it('should identify rich-text as wide', () => {
+      expect(isWideFieldType('rich-text')).toBe(true);
+      expect(isWideFieldType('field:rich-text')).toBe(true);
+    });
+
+    it('should NOT identify regular types as wide', () => {
+      expect(isWideFieldType('text')).toBe(false);
+      expect(isWideFieldType('number')).toBe(false);
+      expect(isWideFieldType('date')).toBe(false);
+      expect(isWideFieldType('select')).toBe(false);
+    });
+  });
+
+  describe('applyAutoSpan', () => {
+    it('should return fields unchanged when columns <= 1', () => {
+      const fields = [
+        { name: 'desc', label: 'Description', type: 'textarea' },
+      ];
+      const result = applyAutoSpan(fields, 1);
+      expect(result).toEqual(fields);
+    });
+
+    it('should set span on wide fields in multi-column layout', () => {
+      const fields = [
+        { name: 'name', label: 'Name', type: 'text' },
+        { name: 'desc', label: 'Description', type: 'textarea' },
+      ];
+      const result = applyAutoSpan(fields, 2);
+      expect(result[0].span).toBeUndefined();
+      expect(result[1].span).toBe(2);
+    });
+
+    it('should NOT override user-defined span', () => {
+      const fields = [
+        { name: 'desc', label: 'Description', type: 'textarea', span: 1 },
+      ];
+      const result = applyAutoSpan(fields, 2);
+      expect(result[0].span).toBe(1);
+    });
+
+    it('should handle fields without type', () => {
+      const fields = [
+        { name: 'name', label: 'Name' },
+      ];
+      const result = applyAutoSpan(fields, 2);
+      expect(result[0].span).toBeUndefined();
+    });
+  });
+
+  describe('applyDetailAutoLayout', () => {
+    it('should infer 1 column for 3 fields', () => {
+      const fields = [
+        { name: 'a', label: 'A' },
+        { name: 'b', label: 'B' },
+        { name: 'c', label: 'C' },
+      ];
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(1);
+    });
+
+    it('should infer 2 columns for 5 fields', () => {
+      const fields = Array.from({ length: 5 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`,
+      }));
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(2);
+    });
+
+    it('should infer 3 columns for 15 fields', () => {
+      const fields = Array.from({ length: 15 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`,
+      }));
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(3);
+    });
+
+    it('should respect explicit columns and still apply auto-span', () => {
+      const fields = [
+        { name: 'name', label: 'Name', type: 'text' },
+        { name: 'desc', label: 'Description', type: 'textarea' },
+      ];
+      const result = applyDetailAutoLayout(fields, 2);
+      expect(result.columns).toBe(2);
+      // Wide field gets auto-span
+      expect(result.fields[1].span).toBe(2);
+    });
+
+    it('should not mutate original fields', () => {
+      const fields = [
+        { name: 'name', label: 'Name', type: 'text' },
+        { name: 'desc', label: 'Description', type: 'textarea' },
+      ];
+      const original = fields.map(f => ({ ...f }));
+      applyDetailAutoLayout(fields, undefined);
+      expect(fields).toEqual(original);
+    });
+
+    it('should auto-span wide fields in inferred multi-column layout', () => {
+      const fields = [
+        { name: 'name', label: 'Name', type: 'text' },
+        { name: 'email', label: 'Email', type: 'text' },
+        { name: 'phone', label: 'Phone', type: 'text' },
+        { name: 'addr', label: 'Address', type: 'text' },
+        { name: 'notes', label: 'Notes', type: 'textarea' },
+      ];
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(2);
+      // textarea field should span full row
+      expect(result.fields[4].span).toBe(2);
+    });
+
+    it('should infer columns correctly when schemaColumns is undefined (no regression)', () => {
+      // Ensure that removing explicit columns: 2 from RecordDetailView still gives good defaults
+      const fields = Array.from({ length: 8 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`, type: 'text',
+      }));
+      const result = applyDetailAutoLayout(fields, undefined);
+      expect(result.columns).toBe(2);
+      expect(result.fields.length).toBe(8);
+    });
+  });
+});