@object-ui/plugin-detail 3.0.3 → 3.1.1

package/src/MentionAutocomplete.tsx

@@ -0,0 +1,123 @@
+/**
+ * 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 } from '@object-ui/components';
+import type { Mention } from '@object-ui/types';
+
+export interface MentionSuggestionItem {
+  /** Entity ID */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Avatar URL */
+  avatarUrl?: string;
+  /** Entity type */
+  type: 'user' | 'team' | 'group';
+}
+
+export interface MentionAutocompleteProps {
+  /** Search query (text after @) */
+  query: string;
+  /** Available suggestions */
+  suggestions: MentionSuggestionItem[];
+  /** Called when a suggestion is selected */
+  onSelect: (item: MentionSuggestionItem) => void;
+  /** Whether the dropdown is visible */
+  visible?: boolean;
+  /** Active/highlighted index */
+  activeIndex?: number;
+  className?: string;
+}
+
+/**
+ * MentionAutocomplete — Dropdown for @mention autocomplete.
+ * Filters suggestions by query and renders a selectable list.
+ * Produces MentionSchema data on selection.
+ */
+export const MentionAutocomplete: React.FC<MentionAutocompleteProps> = ({
+  query,
+  suggestions,
+  onSelect,
+  visible = true,
+  activeIndex = 0,
+  className,
+}) => {
+  const filtered = React.useMemo(() => {
+    if (!query) return suggestions;
+    const q = query.toLowerCase();
+    return suggestions.filter(
+      (s) => s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q),
+    );
+  }, [query, suggestions]);
+
+  if (!visible || filtered.length === 0) return null;
+
+  return (
+    <div
+      className={cn(
+        'bg-popover border rounded-md shadow-md z-50 max-h-48 overflow-y-auto w-56',
+        className,
+      )}
+      role="listbox"
+      aria-label="Mention suggestions"
+    >
+      {filtered.map((item, index) => (
+        <button
+          key={item.id}
+          type="button"
+          role="option"
+          aria-selected={index === activeIndex}
+          className={cn(
+            'w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 hover:bg-accent transition-colors',
+            index === activeIndex && 'bg-accent',
+          )}
+          onMouseDown={(e) => {
+            e.preventDefault();
+            onSelect(item);
+          }}
+        >
+          {item.avatarUrl ? (
+            <img
+              src={item.avatarUrl}
+              alt={item.name}
+              className="h-5 w-5 rounded-full object-cover"
+            />
+          ) : (
+            <div className="h-5 w-5 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium">
+              {item.name.charAt(0).toUpperCase()}
+            </div>
+          )}
+          <div className="flex-1 min-w-0">
+            <span className="truncate">{item.name}</span>
+            {item.type !== 'user' && (
+              <span className="ml-1 text-xs text-muted-foreground capitalize">({item.type})</span>
+            )}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Helper to create a Mention object from a suggestion item.
+ */
+export function createMentionFromSuggestion(
+  item: MentionSuggestionItem,
+  offset: number,
+  length: number,
+): Mention {
+  return {
+    type: item.type,
+    id: item.id,
+    name: item.name,
+    offset,
+    length,
+  };
+}

package/src/PointInTimeRestore.tsx

@@ -0,0 +1,261 @@
+/**
+ * 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,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+} from '@object-ui/components';
+import { History, RotateCcw, Eye, ChevronRight } from 'lucide-react';
+
+export interface RevisionEntry {
+  id: string;
+  timestamp: string;
+  user: string;
+  changes: { field: string; oldValue: any; newValue: any }[];
+  /** Full record snapshot at this revision point. */
+  snapshot?: Record<string, any>;
+}
+
+export interface PointInTimeRestoreProps {
+  recordId: string;
+  revisions: RevisionEntry[];
+  onRestore?: (revisionId: string, snapshot: Record<string, any>) => void | Promise<void>;
+  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`;
+    return date.toLocaleString();
+  } catch {
+    return timestamp;
+  }
+}
+
+export const PointInTimeRestore: React.FC<PointInTimeRestoreProps> = ({
+  recordId: _recordId,
+  revisions,
+  onRestore,
+  className,
+}) => {
+  const [selectedRevisionId, setSelectedRevisionId] = React.useState<string | null>(null);
+  const [isConfirming, setIsConfirming] = React.useState(false);
+  const [isRestoring, setIsRestoring] = React.useState(false);
+
+  const selectedRevision = React.useMemo(
+    () => revisions.find((r) => r.id === selectedRevisionId) ?? null,
+    [revisions, selectedRevisionId],
+  );
+
+  const handleRestore = React.useCallback(async () => {
+    if (!selectedRevision || !onRestore) return;
+
+    if (!isConfirming) {
+      setIsConfirming(true);
+      return;
+    }
+
+    setIsRestoring(true);
+    try {
+      const snapshot = selectedRevision.snapshot ?? {};
+      await onRestore(selectedRevision.id, snapshot);
+      setIsConfirming(false);
+      setSelectedRevisionId(null);
+    } finally {
+      setIsRestoring(false);
+    }
+  }, [selectedRevision, onRestore, isConfirming]);
+
+  const handleCancelConfirm = React.useCallback(() => {
+    setIsConfirming(false);
+  }, []);
+
+  return (
+    <Card className={cn('', className)}>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <History className="h-4 w-4" />
+          Revision History
+          <span className="text-sm font-normal text-muted-foreground">
+            ({revisions.length})
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {revisions.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No revisions recorded
+          </p>
+        ) : (
+          <div className="flex flex-col lg:flex-row gap-4">
+            {/* Timeline */}
+            <div className="flex-1 min-w-0">
+              <div className="relative">
+                <div className="absolute left-3 top-2 bottom-2 w-px bg-border" />
+                <div className="space-y-1">
+                  {revisions.map((revision) => {
+                    const isSelected = revision.id === selectedRevisionId;
+                    return (
+                      <button
+                        key={revision.id}
+                        type="button"
+                        className={cn(
+                          'w-full text-left flex items-start gap-3 py-2 px-2 rounded-md transition-colors relative',
+                          isSelected
+                            ? 'bg-accent'
+                            : 'hover:bg-accent/50',
+                        )}
+                        onClick={() => {
+                          setSelectedRevisionId(revision.id);
+                          setIsConfirming(false);
+                        }}
+                      >
+                        {/* Timeline dot */}
+                        <div
+                          className={cn(
+                            'shrink-0 h-6 w-6 rounded-full border-2 flex items-center justify-center z-10 mt-0.5',
+                            isSelected
+                              ? 'border-primary bg-primary'
+                              : 'border-border bg-background',
+                          )}
+                        >
+                          {isSelected && (
+                            <ChevronRight className="h-3 w-3 text-primary-foreground" />
+                          )}
+                        </div>
+                        {/* Content */}
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium">{revision.user}</span>
+                            <span className="text-xs text-muted-foreground">
+                              {formatTimestamp(revision.timestamp)}
+                            </span>
+                          </div>
+                          <p className="text-xs text-muted-foreground mt-0.5">
+                            {revision.changes.length} field{revision.changes.length !== 1 ? 's' : ''}{' '}
+                            changed
+                          </p>
+                        </div>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+
+            {/* Preview panel */}
+            {selectedRevision && (
+              <div className="lg:w-80 border rounded-md p-3 space-y-3">
+                <div className="flex items-center gap-2 text-sm font-medium">
+                  <Eye className="h-4 w-4 text-muted-foreground" />
+                  Revision Preview
+                </div>
+
+                {/* Field changes */}
+                <div className="space-y-2">
+                  {selectedRevision.changes.map((change, i) => (
+                    <div key={i} className="text-xs">
+                      <span className="font-medium text-muted-foreground">
+                        {change.field}
+                      </span>
+                      <div className="flex items-center gap-1.5 mt-0.5">
+                        <span className="line-through text-red-600 dark:text-red-400 truncate max-w-[120px]">
+                          {change.oldValue != null ? String(change.oldValue) : '(empty)'}
+                        </span>
+                        <ChevronRight className="h-3 w-3 text-muted-foreground shrink-0" />
+                        <span className="text-green-600 dark:text-green-400 truncate max-w-[120px]">
+                          {change.newValue != null ? String(change.newValue) : '(empty)'}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Snapshot values */}
+                {selectedRevision.snapshot && (
+                  <div className="border-t pt-2 space-y-1">
+                    <p className="text-xs font-medium text-muted-foreground">
+                      Record state at this point
+                    </p>
+                    <div className="max-h-40 overflow-y-auto space-y-1">
+                      {Object.entries(selectedRevision.snapshot).map(([key, val]) => (
+                        <div key={key} className="flex justify-between text-xs gap-2">
+                          <span className="text-muted-foreground truncate">{key}</span>
+                          <span className="font-mono truncate max-w-[140px]">
+                            {val != null ? String(val) : '–'}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Restore button */}
+                {onRestore && (
+                  <div className="pt-1 space-y-2">
+                    {isConfirming ? (
+                      <>
+                        <p className="text-xs text-amber-600 dark:text-amber-400">
+                          This will restore the record to its state at{' '}
+                          {formatTimestamp(selectedRevision.timestamp)}. Continue?
+                        </p>
+                        <div className="flex gap-2">
+                          <Button
+                            variant="destructive"
+                            size="sm"
+                            className="gap-1.5 flex-1"
+                            onClick={handleRestore}
+                            disabled={isRestoring}
+                          >
+                            <RotateCcw className="h-3.5 w-3.5" />
+                            {isRestoring ? 'Restoring…' : 'Confirm Restore'}
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={handleCancelConfirm}
+                            disabled={isRestoring}
+                          >
+                            Cancel
+                          </Button>
+                        </div>
+                      </>
+                    ) : (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="w-full gap-1.5"
+                        onClick={handleRestore}
+                      >
+                        <RotateCcw className="h-3.5 w-3.5" />
+                        Restore to this point
+                      </Button>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/ReactionPicker.tsx

@@ -0,0 +1,106 @@
+/**
+ * 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 { SmilePlus } from 'lucide-react';
+import type { Reaction } from '@object-ui/types';
+
+const DEFAULT_EMOJI_OPTIONS = ['👍', '❤️', '🎉', '😂', '😮', '😢'];
+
+export interface ReactionPickerProps {
+  /** Existing reactions on the feed item */
+  reactions: Reaction[];
+  /** Called when user adds or removes a reaction */
+  onToggleReaction?: (emoji: string) => void | Promise<void>;
+  /** Available emoji options */
+  emojiOptions?: string[];
+  className?: string;
+}
+
+/**
+ * ReactionPicker — Emoji reaction selector and display.
+ * Shows existing reactions with counts, and a picker to add/remove.
+ * Aligned with @objectstack/spec ReactionSchema.
+ */
+export const ReactionPicker: React.FC<ReactionPickerProps> = ({
+  reactions,
+  onToggleReaction,
+  emojiOptions = DEFAULT_EMOJI_OPTIONS,
+  className,
+}) => {
+  const [showPicker, setShowPicker] = React.useState(false);
+
+  const handleReaction = React.useCallback(
+    (emoji: string) => {
+      onToggleReaction?.(emoji);
+      setShowPicker(false);
+    },
+    [onToggleReaction],
+  );
+
+  return (
+    <div className={cn('flex items-center gap-1 flex-wrap', className)}>
+      {/* Existing reactions */}
+      {reactions.map((reaction) => (
+        <button
+          key={reaction.emoji}
+          type="button"
+          className={cn(
+            'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs border transition-colors',
+            reaction.reacted
+              ? 'bg-primary/10 border-primary/30 text-primary'
+              : 'bg-muted border-border text-muted-foreground hover:bg-muted/80',
+          )}
+          onClick={() => handleReaction(reaction.emoji)}
+          disabled={!onToggleReaction}
+          aria-label={`${reaction.emoji} ${reaction.count} reaction${reaction.count !== 1 ? 's' : ''}`}
+        >
+          <span>{reaction.emoji}</span>
+          <span>{reaction.count}</span>
+        </button>
+      ))}
+
+      {/* Add reaction button */}
+      {onToggleReaction && (
+        <div className="relative">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-6 w-6"
+            onClick={() => setShowPicker(!showPicker)}
+            aria-label="Add reaction"
+          >
+            <SmilePlus className="h-3.5 w-3.5" />
+          </Button>
+
+          {showPicker && (
+            <div
+              className="absolute bottom-full mb-1 left-0 bg-popover border rounded-md shadow-md z-50 p-1.5 flex gap-1"
+              role="listbox"
+              aria-label="Emoji picker"
+            >
+              {emojiOptions.map((emoji) => (
+                <button
+                  key={emoji}
+                  type="button"
+                  className="hover:bg-accent rounded p-1 text-base transition-colors"
+                  onClick={() => handleReaction(emoji)}
+                  role="option"
+                  aria-selected={reactions.some(r => r.emoji === emoji && r.reacted)}
+                >
+                  {emoji}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};