@object-ui/plugin-detail 3.3.0 → 3.3.1

package/src/RecordComments.tsx

@@ -1,217 +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 * as React from 'react';
-import { cn, Button, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
-import { MessageSquare, Send, Pin, Search, X } from 'lucide-react';
-import type { CommentEntry } from '@object-ui/types';
-import { useDetailTranslation } from './useDetailTranslation';
-
-export interface RecordCommentsProps {
-  comments: CommentEntry[];
-  onAddComment?: (text: string) => void | Promise<void>;
-  /** Callback to toggle pin/star on a comment */
-  onTogglePin?: (commentId: string | number) => void;
-  /** Enable search input for filtering comments */
-  searchable?: boolean;
-  className?: string;
-}
-
-/**
- * Format a timestamp string into a human-readable relative time or date 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;
-  }
-}
-
-export const RecordComments: React.FC<RecordCommentsProps> = ({
-  comments,
-  onAddComment,
-  onTogglePin,
-  searchable = false,
-  className,
-}) => {
-  const { t } = useDetailTranslation();
-  const [newComment, setNewComment] = React.useState('');
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const [searchQuery, setSearchQuery] = React.useState('');
-
-  const handleSubmit = React.useCallback(async () => {
-    const text = newComment.trim();
-    if (!text || !onAddComment) return;
-
-    setIsSubmitting(true);
-    try {
-      await onAddComment(text);
-      setNewComment('');
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [newComment, onAddComment]);
-
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-        e.preventDefault();
-        handleSubmit();
-      }
-    },
-    [handleSubmit],
-  );
-
-  /** Sort pinned comments first, then by date */
-  const sortedComments = React.useMemo(() => {
-    const filtered = searchQuery.trim()
-      ? comments.filter(c => {
-          const q = searchQuery.trim().toLowerCase();
-          return c.text.toLowerCase().includes(q) || c.author.toLowerCase().includes(q);
-        })
-      : comments;
-
-    return [...filtered].sort((a, b) => {
-      if (a.pinned && !b.pinned) return -1;
-      if (!a.pinned && b.pinned) return 1;
-      return 0;
-    });
-  }, [comments, searchQuery]);
-
-  return (
-    <Card className={cn('', className)}>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-base">
-          <MessageSquare className="h-4 w-4" />
-          {t('detail.comments')}
-          <span className="text-sm font-normal text-muted-foreground">
-            ({comments.length})
-          </span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Search Input */}
-        {searchable && (
-          <div className="flex items-center gap-2">
-            <div className="relative flex-1">
-              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-              <input
-                className="w-full rounded-md border border-input bg-background pl-8 pr-8 py-1.5 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                placeholder={t('detail.searchComments')}
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                aria-label={t('detail.searchComments')}
-              />
-              {searchQuery && (
-                <button
-                  className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                  onClick={() => setSearchQuery('')}
-                  aria-label={t('detail.clearSearch')}
-                  type="button"
-                >
-                  <X className="h-3.5 w-3.5" />
-                </button>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Comment Input */}
-        {onAddComment && (
-          <div className="flex gap-2">
-            <textarea
-              className="flex-1 min-h-[60px] rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
-              placeholder={t('detail.addCommentPlaceholder')}
-              value={newComment}
-              onChange={(e) => setNewComment(e.target.value)}
-              onKeyDown={handleKeyDown}
-              disabled={isSubmitting}
-            />
-            <Button
-              size="icon"
-              variant="default"
-              onClick={handleSubmit}
-              disabled={!newComment.trim() || isSubmitting}
-              className="shrink-0 self-end"
-            >
-              <Send className="h-4 w-4" />
-            </Button>
-          </div>
-        )}
-
-        {/* Comment List */}
-        {sortedComments.length === 0 ? (
-          <p className="text-sm text-muted-foreground text-center py-4">
-            {searchQuery.trim() ? t('detail.noMatchingComments') : t('detail.noCommentsYet')}
-          </p>
-        ) : (
-          <div className="space-y-3">
-            {sortedComments.map((comment) => (
-              <div key={comment.id} className={cn('flex gap-3', comment.pinned && 'bg-muted/40 rounded-md p-2 -mx-2')}>
-                {/* Avatar */}
-                <div className="shrink-0">
-                  {comment.avatarUrl ? (
-                    <img
-                      src={comment.avatarUrl}
-                      alt={comment.author}
-                      className="h-8 w-8 rounded-full object-cover"
-                    />
-                  ) : (
-                    <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground">
-                      {comment.author.charAt(0).toUpperCase()}
-                    </div>
-                  )}
-                </div>
-                {/* Content */}
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-0.5">
-                    <span className="text-sm font-medium truncate">{comment.author}</span>
-                    <span className="text-xs text-muted-foreground">
-                      {formatTimestamp(comment.createdAt)}
-                    </span>
-                    {comment.pinned && (
-                      <span className="text-xs text-amber-600 flex items-center gap-0.5">
-                        <Pin className="h-3 w-3" />
-                        {t('detail.pinned')}
-                      </span>
-                    )}
-                  </div>
-                  <p className="text-sm whitespace-pre-wrap break-words">{comment.text}</p>
-                  {/* Pin action */}
-                  {onTogglePin && (
-                    <button
-                      type="button"
-                      className="mt-1 text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
-                      onClick={() => onTogglePin(comment.id)}
-                      aria-label={comment.pinned ? t('detail.unpin') : t('detail.pin')}
-                    >
-                      <Pin className="h-3 w-3" />
-                      {comment.pinned ? t('detail.unpin') : t('detail.pin')}
-                    </button>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

package/src/RecordNavigationEnhanced.tsx

@@ -1,213 +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 * as React from 'react';
-import { cn, Button, Input } from '@object-ui/components';
-import {
-  ChevronsLeft,
-  ChevronsRight,
-  ChevronLeft,
-  ChevronRight,
-  Search,
-} from 'lucide-react';
-import { useDetailTranslation } from './useDetailTranslation';
-
-export interface RecordNavigationEnhancedProps {
-  currentIndex: number;
-  totalRecords: number;
-  recordIds: string[];
-  onNavigate: (recordId: string) => void;
-  onSearch?: (query: string) => void;
-  className?: string;
-}
-
-export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> = ({
-  currentIndex,
-  totalRecords,
-  recordIds,
-  onNavigate,
-  onSearch,
-  className,
-}) => {
-  const { t } = useDetailTranslation();
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [isSearchOpen, setIsSearchOpen] = React.useState(false);
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-
-  const canGoFirst = currentIndex > 0;
-  const canGoPrev = currentIndex > 0;
-  const canGoNext = currentIndex < totalRecords - 1;
-  const canGoLast = currentIndex < totalRecords - 1;
-
-  const handleFirst = React.useCallback(() => {
-    if (canGoFirst) onNavigate(recordIds[0]);
-  }, [canGoFirst, onNavigate, recordIds]);
-
-  const handlePrev = React.useCallback(() => {
-    if (canGoPrev) onNavigate(recordIds[currentIndex - 1]);
-  }, [canGoPrev, onNavigate, recordIds, currentIndex]);
-
-  const handleNext = React.useCallback(() => {
-    if (canGoNext) onNavigate(recordIds[currentIndex + 1]);
-  }, [canGoNext, onNavigate, recordIds, currentIndex]);
-
-  const handleLast = React.useCallback(() => {
-    if (canGoLast) onNavigate(recordIds[recordIds.length - 1]);
-  }, [canGoLast, onNavigate, recordIds]);
-
-  const handleSearchChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      setSearchQuery(value);
-      onSearch?.(value);
-    },
-    [onSearch],
-  );
-
-  const handleToggleSearch = React.useCallback(() => {
-    setIsSearchOpen((prev) => {
-      if (!prev) {
-        requestAnimationFrame(() => searchInputRef.current?.focus());
-      } else {
-        setSearchQuery('');
-        onSearch?.('');
-      }
-      return !prev;
-    });
-  }, [onSearch]);
-
-  // Keyboard shortcuts
-  React.useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      const tag = (e.target as HTMLElement)?.tagName;
-      const isEditable =
-        tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable;
-
-      // Allow search input to capture normal keys
-      if (isEditable && e.target !== searchInputRef.current) return;
-      // In search input, only handle navigation keys
-      if (e.target === searchInputRef.current) {
-        if (e.key === 'Escape') {
-          e.preventDefault();
-          setIsSearchOpen(false);
-          setSearchQuery('');
-          onSearch?.('');
-          (e.target as HTMLElement).blur();
-        }
-        return;
-      }
-
-      switch (e.key) {
-        case 'Home':
-          e.preventDefault();
-          if (canGoFirst) onNavigate(recordIds[0]);
-          break;
-        case 'End':
-          e.preventDefault();
-          if (canGoLast) onNavigate(recordIds[recordIds.length - 1]);
-          break;
-        case 'ArrowLeft':
-          e.preventDefault();
-          if (canGoPrev) onNavigate(recordIds[currentIndex - 1]);
-          break;
-        case 'ArrowRight':
-          e.preventDefault();
-          if (canGoNext) onNavigate(recordIds[currentIndex + 1]);
-          break;
-      }
-    };
-
-    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler);
-  }, [currentIndex, recordIds, canGoFirst, canGoPrev, canGoNext, canGoLast, onNavigate, onSearch]);
-
-  return (
-    <div className={cn('flex items-center gap-1.5', className)}>
-      {/* First */}
-      <Button
-        variant="outline"
-        size="icon"
-        className="h-8 w-8"
-        disabled={!canGoFirst}
-        onClick={handleFirst}
-        title={t('detail.firstRecord')}
-      >
-        <ChevronsLeft className="h-4 w-4" />
-      </Button>
-
-      {/* Prev */}
-      <Button
-        variant="outline"
-        size="icon"
-        className="h-8 w-8"
-        disabled={!canGoPrev}
-        onClick={handlePrev}
-        title={t('detail.previousRecordKey')}
-      >
-        <ChevronLeft className="h-4 w-4" />
-      </Button>
-
-      {/* Position indicator */}
-      <span className="text-xs text-muted-foreground whitespace-nowrap px-1.5 tabular-nums">
-        {totalRecords > 0 ? t('detail.recordOf', { current: currentIndex + 1, total: totalRecords }) : t('detail.noRecords')}
-      </span>
-
-      {/* Next */}
-      <Button
-        variant="outline"
-        size="icon"
-        className="h-8 w-8"
-        disabled={!canGoNext}
-        onClick={handleNext}
-        title={t('detail.nextRecordKey')}
-      >
-        <ChevronRight className="h-4 w-4" />
-      </Button>
-
-      {/* Last */}
-      <Button
-        variant="outline"
-        size="icon"
-        className="h-8 w-8"
-        disabled={!canGoLast}
-        onClick={handleLast}
-        title={t('detail.lastRecord')}
-      >
-        <ChevronsRight className="h-4 w-4" />
-      </Button>
-
-      {/* Search toggle */}
-      {onSearch && (
-        <>
-          <Button
-            variant={isSearchOpen ? 'secondary' : 'ghost'}
-            size="icon"
-            className="h-8 w-8"
-            onClick={handleToggleSearch}
-            title={t('detail.searchWhileNavigating')}
-          >
-            <Search className="h-4 w-4" />
-          </Button>
-
-          {isSearchOpen && (
-            <div className="relative">
-              <Input
-                ref={searchInputRef}
-                type="text"
-                placeholder={t('detail.searchRecords')}
-                value={searchQuery}
-                onChange={handleSearchChange}
-                className="h-8 w-48 text-sm"
-              />
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-};