@object-ui/plugin-detail 3.3.0 → 3.3.1

package/src/RichTextCommentInput.tsx

@@ -1,350 +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 {
-  Bold,
-  Italic,
-  List,
-  Code,
-  AtSign,
-  Eye,
-  Edit,
-  Send,
-} from 'lucide-react';
-import { useDetailTranslation } from './useDetailTranslation';
-
-export interface MentionSuggestion {
-  id: string;
-  label: string;
-  avatarUrl?: string;
-}
-
-export interface RichTextCommentInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSubmit?: () => void | Promise<void>;
-  mentionSuggestions?: MentionSuggestion[];
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-/** Render minimal markdown to HTML for preview. */
-function renderMarkdown(text: string): string {
-  let html = text
-    // Escape HTML
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    // Code blocks (```)
-    .replace(/```([\s\S]*?)```/g, '<pre class="bg-muted rounded p-2 text-xs font-mono my-1 overflow-x-auto">$1</pre>')
-    // Inline code
-    .replace(/`([^`]+)`/g, '<code class="bg-muted rounded px-1 py-0.5 text-xs font-mono">$1</code>')
-    // Bold
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    // Italic
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    // @mentions
-    .replace(/@(\w+)/g, '<span class="text-primary font-medium">@$1</span>')
-    // Unordered lists
-    .replace(/^- (.+)$/gm, '<li class="ml-4 list-disc">$1</li>')
-    // Line breaks
-    .replace(/\n/g, '<br/>');
-
-  // Wrap consecutive <li> in <ul>
-  html = html.replace(
-    /(<li[^>]*>.*?<\/li>(?:<br\/>)?)+/g,
-    (match) => `<ul class="my-1">${match.replace(/<br\/>/g, '')}</ul>`,
-  );
-
-  return html;
-}
-
-export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
-  value,
-  onChange,
-  onSubmit,
-  mentionSuggestions = [],
-  placeholder,
-  className,
-  disabled = false,
-}) => {
-  const { t } = useDetailTranslation();
-  const [isPreview, setIsPreview] = React.useState(false);
-  const [showMentions, setShowMentions] = React.useState(false);
-  const [mentionQuery, setMentionQuery] = React.useState('');
-  const [mentionIndex, setMentionIndex] = React.useState(0);
-  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
-
-  const filteredMentions = React.useMemo(() => {
-    if (!mentionQuery) return mentionSuggestions;
-    const query = mentionQuery.toLowerCase();
-    return mentionSuggestions.filter((s) =>
-      s.label.toLowerCase().includes(query),
-    );
-  }, [mentionQuery, mentionSuggestions]);
-
-  const insertAtCursor = React.useCallback(
-    (before: string, after: string = '') => {
-      const textarea = textareaRef.current;
-      if (!textarea) return;
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
-      const selected = value.slice(start, end);
-      const newValue =
-        value.slice(0, start) + before + selected + after + value.slice(end);
-      onChange(newValue);
-      // Restore cursor after the insertion
-      requestAnimationFrame(() => {
-        textarea.focus();
-        const cursorPos = start + before.length + selected.length;
-        textarea.setSelectionRange(cursorPos, cursorPos);
-      });
-    },
-    [value, onChange],
-  );
-
-  const handleBold = React.useCallback(() => insertAtCursor('**', '**'), [insertAtCursor]);
-  const handleItalic = React.useCallback(() => insertAtCursor('*', '*'), [insertAtCursor]);
-  const handleList = React.useCallback(() => insertAtCursor('\n- ', ''), [insertAtCursor]);
-  const handleCode = React.useCallback(() => insertAtCursor('`', '`'), [insertAtCursor]);
-
-  const handleMentionTrigger = React.useCallback(() => {
-    insertAtCursor('@', '');
-    setShowMentions(true);
-    setMentionQuery('');
-    setMentionIndex(0);
-  }, [insertAtCursor]);
-
-  const handleSelectMention = React.useCallback(
-    (suggestion: MentionSuggestion) => {
-      const textarea = textareaRef.current;
-      if (!textarea) return;
-      const cursorPos = textarea.selectionStart;
-      // Find the last '@' before cursor to replace the partial query
-      const textBefore = value.slice(0, cursorPos);
-      const atIndex = textBefore.lastIndexOf('@');
-      if (atIndex !== -1) {
-        const newValue =
-          value.slice(0, atIndex) + `@${suggestion.label} ` + value.slice(cursorPos);
-        onChange(newValue);
-      }
-      setShowMentions(false);
-      setMentionQuery('');
-      requestAnimationFrame(() => textarea.focus());
-    },
-    [value, onChange],
-  );
-
-  const handleTextChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const newValue = e.target.value;
-      onChange(newValue);
-
-      // Detect @mention trigger
-      const cursorPos = e.target.selectionStart;
-      const textBefore = newValue.slice(0, cursorPos);
-      const lastAtIndex = textBefore.lastIndexOf('@');
-
-      if (lastAtIndex !== -1) {
-        const textAfterAt = textBefore.slice(lastAtIndex + 1);
-        // Only show if @ is at start or preceded by whitespace and no space in query
-        const charBeforeAt = lastAtIndex > 0 ? textBefore[lastAtIndex - 1] : ' ';
-        if (/\s/.test(charBeforeAt) && !/\s/.test(textAfterAt)) {
-          setShowMentions(true);
-          setMentionQuery(textAfterAt);
-          setMentionIndex(0);
-          return;
-        }
-      }
-      setShowMentions(false);
-    },
-    [onChange],
-  );
-
-  const handleKeyDown = React.useCallback(
-    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (showMentions && filteredMentions.length > 0) {
-        if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          setMentionIndex((prev) =>
-            prev < filteredMentions.length - 1 ? prev + 1 : 0,
-          );
-          return;
-        }
-        if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          setMentionIndex((prev) =>
-            prev > 0 ? prev - 1 : filteredMentions.length - 1,
-          );
-          return;
-        }
-        if (e.key === 'Enter' || e.key === 'Tab') {
-          e.preventDefault();
-          handleSelectMention(filteredMentions[mentionIndex]);
-          return;
-        }
-        if (e.key === 'Escape') {
-          setShowMentions(false);
-          return;
-        }
-      }
-
-      // Ctrl+Enter to submit
-      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-        e.preventDefault();
-        onSubmit?.();
-      }
-    },
-    [showMentions, filteredMentions, mentionIndex, handleSelectMention, onSubmit],
-  );
-
-  return (
-    <div className={cn('border rounded-md', className)}>
-      {/* Toolbar */}
-      <div className="flex items-center gap-0.5 px-2 py-1.5 border-b bg-muted/30">
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={handleBold}
-          disabled={disabled || isPreview}
-          title={t('detail.bold')}
-        >
-          <Bold className="h-3.5 w-3.5" />
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={handleItalic}
-          disabled={disabled || isPreview}
-          title={t('detail.italic')}
-        >
-          <Italic className="h-3.5 w-3.5" />
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={handleList}
-          disabled={disabled || isPreview}
-          title={t('detail.listFormat')}
-        >
-          <List className="h-3.5 w-3.5" />
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={handleCode}
-          disabled={disabled || isPreview}
-          title={t('detail.inlineCode')}
-        >
-          <Code className="h-3.5 w-3.5" />
-        </Button>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={handleMentionTrigger}
-          disabled={disabled || isPreview}
-          title={t('detail.mentionSomeone')}
-        >
-          <AtSign className="h-3.5 w-3.5" />
-        </Button>
-
-        <div className="flex-1" />
-
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-7 w-7"
-          onClick={() => setIsPreview(!isPreview)}
-          title={isPreview ? t('detail.edit') : t('detail.preview')}
-        >
-          {isPreview ? (
-            <Edit className="h-3.5 w-3.5" />
-          ) : (
-            <Eye className="h-3.5 w-3.5" />
-          )}
-        </Button>
-
-        {onSubmit && (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={onSubmit}
-            disabled={disabled || !value.trim()}
-            title={t('detail.submitComment')}
-          >
-            <Send className="h-3.5 w-3.5" />
-          </Button>
-        )}
-      </div>
-
-      {/* Editor / Preview */}
-      <div className="relative">
-        {isPreview ? (
-          <div
-            className="min-h-[80px] px-3 py-2 text-sm prose prose-sm max-w-none"
-            dangerouslySetInnerHTML={{ __html: renderMarkdown(value) }}
-          />
-        ) : (
-          <>
-            <textarea
-              ref={textareaRef}
-              className="w-full min-h-[80px] px-3 py-2 text-sm bg-transparent resize-none focus:outline-none placeholder:text-muted-foreground"
-              placeholder={placeholder ?? t('detail.writeComment')}
-              value={value}
-              onChange={handleTextChange}
-              onKeyDown={handleKeyDown}
-              disabled={disabled}
-            />
-
-            {/* @mention dropdown */}
-            {showMentions && filteredMentions.length > 0 && (
-              <div className="absolute left-2 bottom-full mb-1 w-56 bg-popover border rounded-md shadow-md z-50 max-h-40 overflow-y-auto">
-                {filteredMentions.map((suggestion, index) => (
-                  <button
-                    key={suggestion.id}
-                    type="button"
-                    className={cn(
-                      'w-full text-left px-3 py-1.5 text-sm flex items-center gap-2 hover:bg-accent transition-colors',
-                      index === mentionIndex && 'bg-accent',
-                    )}
-                    onMouseDown={(e) => {
-                      e.preventDefault();
-                      handleSelectMention(suggestion);
-                    }}
-                  >
-                    {suggestion.avatarUrl ? (
-                      <img
-                        src={suggestion.avatarUrl}
-                        alt={suggestion.label}
-                        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">
-                        {suggestion.label.charAt(0).toUpperCase()}
-                      </div>
-                    )}
-                    <span>{suggestion.label}</span>
-                  </button>
-                ))}
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/SectionGroup.tsx

@@ -1,101 +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,
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from '@object-ui/components';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import { DetailSection } from './DetailSection';
-import type { SectionGroup as SectionGroupType } from '@object-ui/types';
-
-export interface SectionGroupProps {
-  group: SectionGroupType;
-  data?: any;
-  className?: string;
-  objectSchema?: any;
-  /** Object name for i18n field label resolution */
-  objectName?: string;
-  isEditing?: boolean;
-  onFieldChange?: (field: string, value: any) => void;
-}
-
-export const SectionGroup: React.FC<SectionGroupProps> = ({
-  group,
-  data,
-  className,
-  objectSchema,
-  objectName,
-  isEditing = false,
-  onFieldChange,
-}) => {
-  const collapsible = group.collapsible ?? true;
-  const [isCollapsed, setIsCollapsed] = React.useState(group.defaultCollapsed ?? false);
-
-  const sectionsContent = (
-    <div className="space-y-3 sm:space-y-4">
-      {group.sections.map((section, index) => (
-        <DetailSection
-          key={index}
-          section={section}
-          data={data}
-          objectSchema={objectSchema}
-          objectName={objectName}
-          isEditing={isEditing}
-          onFieldChange={onFieldChange}
-        />
-      ))}
-    </div>
-  );
-
-  if (!collapsible) {
-    return (
-      <div className={cn('space-y-3', className)}>
-        <div className="flex items-center gap-2 pb-2 border-b">
-          {group.icon && <span className="text-muted-foreground">{group.icon}</span>}
-          <h3 className="text-lg font-semibold">{group.title}</h3>
-        </div>
-        {group.description && (
-          <p className="text-sm text-muted-foreground">{group.description}</p>
-        )}
-        {sectionsContent}
-      </div>
-    );
-  }
-
-  return (
-    <Collapsible
-      open={!isCollapsed}
-      onOpenChange={(open) => setIsCollapsed(!open)}
-      className={className}
-    >
-      <CollapsibleTrigger asChild>
-        <div className="flex items-center gap-2 pb-2 border-b cursor-pointer hover:bg-muted/50 transition-colors rounded-t-md px-2 py-1.5">
-          {isCollapsed ? (
-            <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
-          ) : (
-            <ChevronDown className="h-4 w-4 text-muted-foreground shrink-0" />
-          )}
-          {group.icon && <span className="text-muted-foreground">{group.icon}</span>}
-          <h3 className="text-lg font-semibold">{group.title}</h3>
-        </div>
-      </CollapsibleTrigger>
-      {group.description && !isCollapsed && (
-        <p className="text-sm text-muted-foreground mt-1">{group.description}</p>
-      )}
-      <CollapsibleContent>
-        <div className="mt-3">
-          {sectionsContent}
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-};

package/src/SubscriptionToggle.tsx

@@ -1,62 +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 { Bell, BellOff } from 'lucide-react';
-import type { RecordSubscription } from '@object-ui/types';
-import { useDetailTranslation } from './useDetailTranslation';
-
-export interface SubscriptionToggleProps {
-  /** Current subscription state */
-  subscription: RecordSubscription;
-  /** Called when user toggles subscription */
-  onToggle?: (subscribed: boolean) => void | Promise<void>;
-  className?: string;
-}
-
-/**
- * SubscriptionToggle — Bell icon toggle for record notification subscriptions.
- * Aligned with @objectstack/spec RecordSubscriptionSchema.
- */
-export const SubscriptionToggle: React.FC<SubscriptionToggleProps> = ({
-  subscription,
-  onToggle,
-  className,
-}) => {
-  const { t } = useDetailTranslation();
-  const [isLoading, setIsLoading] = React.useState(false);
-
-  const handleToggle = React.useCallback(async () => {
-    if (!onToggle) return;
-    setIsLoading(true);
-    try {
-      await onToggle(!subscription.subscribed);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [onToggle, subscription.subscribed]);
-
-  return (
-    <Button
-      variant="ghost"
-      size="icon"
-      className={cn('h-8 w-8', className)}
-      onClick={handleToggle}
-      disabled={isLoading || !onToggle}
-      aria-label={subscription.subscribed ? t('detail.unsubscribeAriaLabel') : t('detail.subscribeAriaLabel')}
-      title={subscription.subscribed ? t('detail.subscribedTooltip') : t('detail.unsubscribedTooltip')}
-    >
-      {subscription.subscribed ? (
-        <Bell className="h-4 w-4 text-primary" />
-      ) : (
-        <BellOff className="h-4 w-4 text-muted-foreground" />
-      )}
-    </Button>
-  );
-};

package/src/ThreadedReplies.tsx

@@ -1,163 +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 { MessageSquare, ChevronDown, ChevronRight, Send } from 'lucide-react';
-import type { FeedItem } from '@object-ui/types';
-import { useDetailTranslation } from './useDetailTranslation';
-
-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 { t } = useDetailTranslation();
-  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 === 1 ? t('detail.replyCount', { count: replies.length }) : t('detail.replyCountPlural', { count: replies.length })}</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={t('detail.replyPlaceholder')}
-            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>
-  );
-};