@object-ui/plugin-detail 3.0.2 → 3.1.0

package/src/ThreadedReplies.tsx

@@ -0,0 +1,161 @@
+/**
+ * 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 React from 'react';
+import { cn, Button } from '@object-ui/components';
+import { MessageSquare, ChevronDown, ChevronRight, Send } from 'lucide-react';
+import type { FeedItem } from '@object-ui/types';
+
+export interface ThreadedRepliesProps {
+  /** Parent feed item (root comment) */
+  parentItem: FeedItem;
+  /** Reply feed items (children) */
+  replies: FeedItem[];
+  /** Called when a reply is submitted */
+  onAddReply?: (parentId: string | number, text: string) => void | Promise<void>;
+  /** Whether to show the reply input */
+  showReplyInput?: boolean;
+  className?: string;
+}
+
+function formatTimestamp(timestamp: string): string {
+  try {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  } catch {
+    return timestamp;
+  }
+}
+
+/**
+ * ThreadedReplies — Displays a collapsible thread of replies under a parent comment.
+ * Supports adding new replies and showing reply count.
+ */
+export const ThreadedReplies: React.FC<ThreadedRepliesProps> = ({
+  parentItem,
+  replies,
+  onAddReply,
+  showReplyInput = true,
+  className,
+}) => {
+  const [expanded, setExpanded] = React.useState(false);
+  const [replyText, setReplyText] = React.useState('');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmitReply = React.useCallback(async () => {
+    const text = replyText.trim();
+    if (!text || !onAddReply) return;
+    setIsSubmitting(true);
+    try {
+      await onAddReply(parentItem.id, text);
+      setReplyText('');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [replyText, onAddReply, parentItem.id]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        handleSubmitReply();
+      }
+    },
+    [handleSubmitReply],
+  );
+
+  if (replies.length === 0 && !showReplyInput) return null;
+
+  return (
+    <div className={cn('ml-10 mt-1', className)}>
+      {/* Toggle */}
+      {replies.length > 0 && (
+        <button
+          type="button"
+          className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-1"
+          onClick={() => setExpanded(!expanded)}
+          aria-expanded={expanded}
+        >
+          {expanded ? (
+            <ChevronDown className="h-3 w-3" />
+          ) : (
+            <ChevronRight className="h-3 w-3" />
+          )}
+          <MessageSquare className="h-3 w-3" />
+          <span>{replies.length} {replies.length === 1 ? 'reply' : 'replies'}</span>
+        </button>
+      )}
+
+      {/* Replies list */}
+      {expanded && (
+        <div className="space-y-2 border-l-2 border-border pl-3">
+          {replies.map((reply) => (
+            <div key={reply.id} className="flex gap-2">
+              <div className="shrink-0">
+                {reply.actorAvatarUrl ? (
+                  <img
+                    src={reply.actorAvatarUrl}
+                    alt={reply.actor}
+                    className="h-6 w-6 rounded-full object-cover"
+                  />
+                ) : (
+                  <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground">
+                    {reply.actor.charAt(0).toUpperCase()}
+                  </div>
+                )}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-1.5">
+                  <span className="text-xs font-medium">{reply.actor}</span>
+                  <span className="text-[10px] text-muted-foreground">
+                    {formatTimestamp(reply.createdAt)}
+                  </span>
+                </div>
+                <p className="text-xs whitespace-pre-wrap break-words">{reply.body}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Reply input */}
+      {showReplyInput && onAddReply && (
+        <div className="flex gap-1.5 mt-1.5">
+          <input
+            className="flex-1 rounded-md border border-input bg-background px-2 py-1 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            placeholder="Reply…"
+            value={replyText}
+            onChange={(e) => setReplyText(e.target.value)}
+            onKeyDown={handleKeyDown}
+            disabled={isSubmitting}
+          />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6 shrink-0"
+            onClick={handleSubmitReply}
+            disabled={!replyText.trim() || isSubmitting}
+            aria-label="Send reply"
+          >
+            <Send className="h-3 w-3" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/__tests__/ActivityTimeline.test.tsx

@@ -0,0 +1,119 @@
+/**
+ * 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 { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ActivityTimeline } from '../ActivityTimeline';
+import type { ActivityEntry } from '@object-ui/types';
+
+const mockActivities: ActivityEntry[] = [
+  {
+    id: '1',
+    type: 'create',
+    user: 'Alice',
+    timestamp: '2026-02-15T10:00:00Z',
+  },
+  {
+    id: '2',
+    type: 'field_change',
+    field: 'status',
+    oldValue: 'open',
+    newValue: 'in_progress',
+    user: 'Bob',
+    timestamp: '2026-02-16T08:30:00Z',
+  },
+  {
+    id: '3',
+    type: 'status_change',
+    field: 'stage',
+    newValue: 'Completed',
+    user: 'Charlie',
+    timestamp: '2026-02-16T09:00:00Z',
+    description: 'Moved to Completed stage',
+  },
+  {
+    id: '4',
+    type: 'comment',
+    user: 'Alice',
+    timestamp: '2026-02-16T09:30:00Z',
+    description: 'Added a comment',
+  },
+];
+
+describe('ActivityTimeline', () => {
+  it('should render activity heading with count', () => {
+    render(<ActivityTimeline activities={mockActivities} />);
+    expect(screen.getByText('Activity')).toBeInTheDocument();
+    expect(screen.getByText('(4)')).toBeInTheDocument();
+  });
+
+  it('should render user names', () => {
+    render(<ActivityTimeline activities={mockActivities} />);
+    expect(screen.getAllByText('Alice')).toHaveLength(2);
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Charlie')).toBeInTheDocument();
+  });
+
+  it('should show "No activity recorded" when empty', () => {
+    render(<ActivityTimeline activities={[]} />);
+    expect(screen.getByText('No activity recorded')).toBeInTheDocument();
+  });
+
+  it('should render field change description for field_change type', () => {
+    render(
+      <ActivityTimeline
+        activities={[
+          {
+            id: '1',
+            type: 'field_change',
+            field: 'priority',
+            oldValue: 'low',
+            newValue: 'high',
+            user: 'Eve',
+            timestamp: '2026-02-16T10:00:00Z',
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText(/Changed Priority from "low" to "high"/)).toBeInTheDocument();
+  });
+
+  it('should use description if provided', () => {
+    render(
+      <ActivityTimeline
+        activities={[
+          {
+            id: '1',
+            type: 'comment',
+            user: 'Alice',
+            timestamp: '2026-02-16T09:30:00Z',
+            description: 'Added a comment',
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText('Added a comment')).toBeInTheDocument();
+  });
+
+  it('should render create type with default description', () => {
+    render(
+      <ActivityTimeline
+        activities={[
+          {
+            id: '1',
+            type: 'create',
+            user: 'Eve',
+            timestamp: '2026-02-16T10:00:00Z',
+          },
+        ]}
+      />,
+    );
+    expect(screen.getByText('Created this record')).toBeInTheDocument();
+  });
+});

package/src/__tests__/ActivityTimelineFiltering.test.tsx

@@ -0,0 +1,143 @@
+/**
+ * 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 { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ActivityTimeline } from '../ActivityTimeline';
+import type { ActivityEntry } from '@object-ui/types';
+
+const mockActivities: ActivityEntry[] = [
+  {
+    id: '1',
+    type: 'create',
+    user: 'Alice',
+    timestamp: '2026-02-15T10:00:00Z',
+  },
+  {
+    id: '2',
+    type: 'field_change',
+    field: 'status',
+    oldValue: 'open',
+    newValue: 'in_progress',
+    user: 'Bob',
+    timestamp: '2026-02-16T08:30:00Z',
+  },
+  {
+    id: '3',
+    type: 'comment',
+    user: 'Charlie',
+    timestamp: '2026-02-16T09:00:00Z',
+    description: 'Added a comment on the record',
+  },
+  {
+    id: '4',
+    type: 'delete',
+    user: 'Diana',
+    timestamp: '2026-02-16T09:30:00Z',
+  },
+  {
+    id: '5',
+    type: 'comment',
+    user: 'Eve',
+    timestamp: '2026-02-16T10:00:00Z',
+    description: 'Another comment here',
+  },
+];
+
+describe('ActivityTimeline - Filtering', () => {
+  it('does not render filter controls when filterable is false/not provided', () => {
+    render(<ActivityTimeline activities={mockActivities} />);
+    expect(screen.queryByRole('group', { name: 'Activity type filter' })).not.toBeInTheDocument();
+  });
+
+  it('renders filter controls when filterable is true', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+    const filterGroup = screen.getByRole('group', { name: 'Activity type filter' });
+    expect(filterGroup).toBeInTheDocument();
+
+    // Should have "All", "Field Changes", "Creates", "Deletes", "Comments", "Status Changes"
+    expect(screen.getByText('All')).toBeInTheDocument();
+    expect(screen.getByText('Comments')).toBeInTheDocument();
+    expect(screen.getByText('Field Changes')).toBeInTheDocument();
+    expect(screen.getByText('Creates')).toBeInTheDocument();
+    expect(screen.getByText('Deletes')).toBeInTheDocument();
+  });
+
+  it('shows all activities by default', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+    // Count should be (5)
+    expect(screen.getByText('(5)')).toBeInTheDocument();
+  });
+
+  it('filters to only comments when Comments filter is selected', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+
+    const commentsFilter = screen.getByText('Comments');
+    fireEvent.click(commentsFilter);
+
+    // Only 2 comment activities
+    expect(screen.getByText('(2)')).toBeInTheDocument();
+    expect(screen.getByText('Added a comment on the record')).toBeInTheDocument();
+    expect(screen.getByText('Another comment here')).toBeInTheDocument();
+  });
+
+  it('filters to only field changes when Field Changes filter is selected', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+
+    const fieldChangesFilter = screen.getByText('Field Changes');
+    fireEvent.click(fieldChangesFilter);
+
+    // Only 1 field_change activity
+    expect(screen.getByText('(1)')).toBeInTheDocument();
+  });
+
+  it('shows all activities when All filter is re-selected', () => {
+    render(<ActivityTimeline activities={mockActivities} filterable />);
+
+    // First filter to comments only
+    fireEvent.click(screen.getByText('Comments'));
+    expect(screen.getByText('(2)')).toBeInTheDocument();
+
+    // Then go back to All
+    fireEvent.click(screen.getByText('All'));
+    expect(screen.getByText('(5)')).toBeInTheDocument();
+  });
+
+  it('respects defaultFilter prop', () => {
+    render(
+      <ActivityTimeline
+        activities={mockActivities}
+        filterable
+        defaultFilter="comment"
+      />,
+    );
+
+    // Should start filtered to comments
+    expect(screen.getByText('(2)')).toBeInTheDocument();
+  });
+
+  it('shows "No activity recorded" when filter has no results', () => {
+    render(
+      <ActivityTimeline
+        activities={mockActivities}
+        filterable
+        defaultFilter="status_change"
+      />,
+    );
+
+    expect(screen.getByText('No activity recorded')).toBeInTheDocument();
+  });
+
+  it('renders all activities without filter when filterable is not set', () => {
+    render(<ActivityTimeline activities={mockActivities} />);
+    expect(screen.getByText('(5)')).toBeInTheDocument();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+  });
+});

package/src/__tests__/CommentInput.test.tsx

@@ -0,0 +1,57 @@
+/**
+ * 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 { CommentInput } from '../CommentInput';
+
+describe('CommentInput', () => {
+  it('should render placeholder text', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} />);
+    expect(screen.getByPlaceholderText('Leave a comment…')).toBeInTheDocument();
+  });
+
+  it('should render custom placeholder', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} placeholder="Type here…" />);
+    expect(screen.getByPlaceholderText('Type here…')).toBeInTheDocument();
+  });
+
+  it('should disable submit when textarea is empty', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} />);
+    expect(screen.getByLabelText('Submit comment')).toBeDisabled();
+  });
+
+  it('should enable submit when text is entered', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} />);
+    fireEvent.change(screen.getByPlaceholderText('Leave a comment…'), {
+      target: { value: 'Hello' },
+    });
+    expect(screen.getByLabelText('Submit comment')).not.toBeDisabled();
+  });
+
+  it('should call onSubmit with text when clicked', () => {
+    const onSubmit = vi.fn().mockResolvedValue(undefined);
+    render(<CommentInput onSubmit={onSubmit} />);
+    fireEvent.change(screen.getByPlaceholderText('Leave a comment…'), {
+      target: { value: 'Hello world' },
+    });
+    fireEvent.click(screen.getByLabelText('Submit comment'));
+    expect(onSubmit).toHaveBeenCalledWith('Hello world');
+  });
+
+  it('should disable input when disabled prop is true', () => {
+    const onSubmit = vi.fn();
+    render(<CommentInput onSubmit={onSubmit} disabled />);
+    expect(screen.getByPlaceholderText('Leave a comment…')).toBeDisabled();
+  });
+});