@object-ui/plugin-detail 3.3.0 → 3.3.1

package/src/ActivityTimeline.tsx

@@ -1,184 +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, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
-import { Activity, Edit, PlusCircle, Trash2, MessageSquare, ArrowRightLeft, Filter } from 'lucide-react';
-import type { ActivityEntry } from '@object-ui/types';
-
-export type ActivityFilterType = ActivityEntry['type'] | 'all';
-
-export interface ActivityTimelineProps {
-  activities: ActivityEntry[];
-  /** Show filter controls for activity types */
-  filterable?: boolean;
-  /** Default filter (defaults to 'all') */
-  defaultFilter?: ActivityFilterType;
-  className?: string;
-}
-
-const ACTIVITY_ICONS: Record<ActivityEntry['type'], React.ElementType> = {
-  field_change: Edit,
-  create: PlusCircle,
-  delete: Trash2,
-  comment: MessageSquare,
-  status_change: ArrowRightLeft,
-};
-
-const ACTIVITY_COLORS: Record<ActivityEntry['type'], string> = {
-  field_change: 'bg-blue-100 text-blue-600',
-  create: 'bg-green-100 text-green-600',
-  delete: 'bg-red-100 text-red-600',
-  comment: 'bg-purple-100 text-purple-600',
-  status_change: 'bg-amber-100 text-amber-600',
-};
-
-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;
-  }
-}
-
-function formatFieldChange(entry: ActivityEntry): string {
-  if (entry.description) return entry.description;
-
-  if (entry.type === 'field_change' && entry.field) {
-    const fieldLabel = entry.field.charAt(0).toUpperCase() + entry.field.slice(1).replace(/_/g, ' ');
-    const oldVal = entry.oldValue != null ? String(entry.oldValue) : '(empty)';
-    const newVal = entry.newValue != null ? String(entry.newValue) : '(empty)';
-    return `Changed ${fieldLabel} from "${oldVal}" to "${newVal}"`;
-  }
-
-  if (entry.type === 'create') return 'Created this record';
-  if (entry.type === 'delete') return 'Deleted this record';
-  if (entry.type === 'status_change' && entry.field) {
-    const newVal = entry.newValue != null ? String(entry.newValue) : '(empty)';
-    return `Changed status to "${newVal}"`;
-  }
-
-  return 'Updated record';
-}
-
-const FILTER_LABELS: Record<ActivityFilterType, string> = {
-  all: 'All',
-  field_change: 'Field Changes',
-  create: 'Creates',
-  delete: 'Deletes',
-  comment: 'Comments',
-  status_change: 'Status Changes',
-};
-
-export const ActivityTimeline: React.FC<ActivityTimelineProps> = ({
-  activities,
-  filterable = false,
-  defaultFilter = 'all',
-  className,
-}) => {
-  const [activeFilter, setActiveFilter] = React.useState<ActivityFilterType>(defaultFilter);
-
-  const filteredActivities = React.useMemo(() => {
-    if (activeFilter === 'all') return activities;
-    return activities.filter(a => a.type === activeFilter);
-  }, [activities, activeFilter]);
-
-  return (
-    <Card className={cn('', className)}>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-base">
-          <Activity className="h-4 w-4" />
-          Activity
-          <span className="text-sm font-normal text-muted-foreground">
-            ({filteredActivities.length})
-          </span>
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        {/* Filter controls */}
-        {filterable && (
-          <div className="flex flex-wrap gap-1.5 mb-4" role="group" aria-label="Activity type filter">
-            {(Object.keys(FILTER_LABELS) as ActivityFilterType[]).map(type => (
-              <button
-                key={type}
-                type="button"
-                className={cn(
-                  'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors',
-                  activeFilter === type
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-muted text-muted-foreground hover:bg-muted/80',
-                )}
-                onClick={() => setActiveFilter(type)}
-                aria-pressed={activeFilter === type}
-              >
-                {type !== 'all' && React.createElement(ACTIVITY_ICONS[type] || Edit, { className: 'h-3 w-3' })}
-                {FILTER_LABELS[type]}
-              </button>
-            ))}
-          </div>
-        )}
-
-        {filteredActivities.length === 0 ? (
-          <p className="text-sm text-muted-foreground text-center py-4">
-            No activity recorded
-          </p>
-        ) : (
-          <div className="relative">
-            {/* Timeline line */}
-            <div className="absolute left-4 top-2 bottom-2 w-px bg-border" />
-
-            <div className="space-y-4">
-              {filteredActivities.map((entry) => {
-                const Icon = ACTIVITY_ICONS[entry.type] || Edit;
-                const colorClass = ACTIVITY_COLORS[entry.type] || 'bg-gray-100 text-gray-600';
-
-                return (
-                  <div key={entry.id} className="flex gap-3 relative">
-                    {/* Icon */}
-                    <div
-                      className={cn(
-                        'shrink-0 h-8 w-8 rounded-full flex items-center justify-center z-10',
-                        colorClass,
-                      )}
-                    >
-                      <Icon className="h-3.5 w-3.5" />
-                    </div>
-                    {/* Content */}
-                    <div className="flex-1 min-w-0 pt-1">
-                      <p className="text-sm">
-                        <span className="font-medium">{entry.user}</span>
-                        {' '}
-                        <span className="text-muted-foreground">
-                          {formatFieldChange(entry)}
-                        </span>
-                      </p>
-                      <p className="text-xs text-muted-foreground mt-0.5">
-                        {formatTimestamp(entry.timestamp)}
-                      </p>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};

package/src/CommentAttachment.tsx

@@ -1,194 +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 } from '@object-ui/components';
-import { Paperclip, X, FileText, Image, FileArchive, File, Upload } from 'lucide-react';
-import { useDetailTranslation } from './useDetailTranslation';
-
-export interface Attachment {
-  id: string;
-  name: string;
-  size: number;
-  type: string;
-  url?: string;
-  thumbnailUrl?: string;
-}
-
-export interface CommentAttachmentProps {
-  attachments: Attachment[];
-  onUpload?: (files: FileList) => void | Promise<void>;
-  onRemove?: (attachmentId: string) => void;
-  className?: string;
-  readOnly?: boolean;
-}
-
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-function isImageType(type: string): boolean {
-  return type.startsWith('image/');
-}
-
-function getFileIcon(type: string): React.ElementType {
-  if (isImageType(type)) return Image;
-  if (type.includes('pdf') || type.includes('document') || type.includes('text'))
-    return FileText;
-  if (type.includes('zip') || type.includes('archive') || type.includes('compressed'))
-    return FileArchive;
-  return File;
-}
-
-export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
-  attachments,
-  onUpload,
-  onRemove,
-  className,
-  readOnly = false,
-}) => {
-  const { t } = useDetailTranslation();
-  const [isDragOver, setIsDragOver] = React.useState(false);
-  const fileInputRef = React.useRef<HTMLInputElement>(null);
-
-  const handleDragOver = React.useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragOver(true);
-  }, []);
-
-  const handleDragLeave = React.useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragOver(false);
-  }, []);
-
-  const handleDrop = React.useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setIsDragOver(false);
-      if (onUpload && e.dataTransfer.files.length > 0) {
-        onUpload(e.dataTransfer.files);
-      }
-    },
-    [onUpload],
-  );
-
-  const handleFileSelect = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (onUpload && e.target.files && e.target.files.length > 0) {
-        onUpload(e.target.files);
-        // Reset so the same file can be selected again
-        e.target.value = '';
-      }
-    },
-    [onUpload],
-  );
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      {/* Drop zone */}
-      {onUpload && !readOnly && (
-        <div
-          className={cn(
-            'border-2 border-dashed rounded-md px-4 py-3 text-center transition-colors cursor-pointer',
-            isDragOver
-              ? 'border-primary bg-primary/5'
-              : 'border-muted-foreground/25 hover:border-muted-foreground/40',
-          )}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-          onClick={() => fileInputRef.current?.click()}
-          role="button"
-          tabIndex={0}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault();
-              fileInputRef.current?.click();
-            }
-          }}
-        >
-          <Upload className="h-5 w-5 mx-auto text-muted-foreground mb-1" />
-          <p className="text-xs text-muted-foreground">
-            {t('detail.dropFilesToUpload')}
-          </p>
-          <input
-            ref={fileInputRef}
-            type="file"
-            multiple
-            className="hidden"
-            onChange={handleFileSelect}
-          />
-        </div>
-      )}
-
-      {/* Attachment list */}
-      {attachments.length > 0 && (
-        <div className="space-y-1.5">
-          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-            <Paperclip className="h-3 w-3" />
-            <span>
-              {attachments.length !== 1 ? t('detail.attachmentCountPlural', { count: attachments.length }) : t('detail.attachmentCount', { count: attachments.length })}
-            </span>
-          </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            {attachments.map((attachment) => {
-              const isImage = isImageType(attachment.type);
-              const Icon = getFileIcon(attachment.type);
-
-              return (
-                <div
-                  key={attachment.id}
-                  className="flex items-center gap-2 rounded-md border px-2.5 py-2 bg-muted/30 group"
-                >
-                  {/* Thumbnail or icon */}
-                  {isImage && (attachment.thumbnailUrl || attachment.url) ? (
-                    <img
-                      src={attachment.thumbnailUrl || attachment.url}
-                      alt={attachment.name}
-                      className="h-10 w-10 rounded object-cover shrink-0"
-                    />
-                  ) : (
-                    <div className="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0">
-                      <Icon className="h-5 w-5 text-muted-foreground" />
-                    </div>
-                  )}
-
-                  {/* File info */}
-                  <div className="flex-1 min-w-0">
-                    <p className="text-xs font-medium truncate">{attachment.name}</p>
-                    <p className="text-[10px] text-muted-foreground">
-                      {formatFileSize(attachment.size)}
-                    </p>
-                  </div>
-
-                  {/* Remove button */}
-                  {onRemove && !readOnly && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                      onClick={() => onRemove(attachment.id)}
-                      title={t('detail.removeAttachment')}
-                    >
-                      <X className="h-3.5 w-3.5" />
-                    </Button>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/CommentInput.tsx

@@ -1,81 +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 } from '@object-ui/components';
-import { Send } from 'lucide-react';
-
-export interface CommentInputProps {
-  /** Called when a comment is submitted */
-  onSubmit: (text: string) => void | Promise<void>;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Whether the input is disabled */
-  disabled?: boolean;
-  className?: string;
-}
-
-/**
- * CommentInput — Simple comment input component.
- * Renders a "Leave a comment" textarea with submit button.
- * Supports Ctrl+Enter to submit.
- */
-export const CommentInput: React.FC<CommentInputProps> = ({
-  onSubmit,
-  placeholder = 'Leave a comment…',
-  disabled = false,
-  className,
-}) => {
-  const [text, setText] = React.useState('');
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-
-  const handleSubmit = React.useCallback(async () => {
-    const value = text.trim();
-    if (!value) return;
-    setIsSubmitting(true);
-    try {
-      await onSubmit(value);
-      setText('');
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [text, onSubmit]);
-
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-        e.preventDefault();
-        handleSubmit();
-      }
-    },
-    [handleSubmit],
-  );
-
-  return (
-    <div className={cn('flex gap-2', className)}>
-      <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={placeholder}
-        value={text}
-        onChange={(e) => setText(e.target.value)}
-        onKeyDown={handleKeyDown}
-        disabled={disabled || isSubmitting}
-      />
-      <Button
-        size="icon"
-        variant="default"
-        onClick={handleSubmit}
-        disabled={!text.trim() || isSubmitting || disabled}
-        className="shrink-0 self-end"
-        aria-label="Submit comment"
-      >
-        <Send className="h-4 w-4" />
-      </Button>
-    </div>
-  );
-};