@object-ui/plugin-detail 3.0.3 → 3.1.1

package/src/RichTextCommentInput.tsx

@@ -0,0 +1,348 @@
+/**
+ * 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';
+
+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 = 'Write a comment…',
+  className,
+  disabled = false,
+}) => {
+  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="Bold (Ctrl+B)"
+        >
+          <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="Italic (Ctrl+I)"
+        >
+          <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="List"
+        >
+          <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="Inline code"
+        >
+          <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="Mention someone"
+        >
+          <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 ? 'Edit' : '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="Submit (Ctrl+Enter)"
+          >
+            <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}
+              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

@@ -0,0 +1,101 @@
+/**
+ * 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

@@ -0,0 +1,60 @@
+/**
+ * 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';
+
+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 [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 ? 'Unsubscribe from notifications' : 'Subscribe to notifications'}
+      title={subscription.subscribed ? 'Subscribed — click to unsubscribe' : 'Subscribe to notifications'}
+    >
+      {subscription.subscribed ? (
+        <Bell className="h-4 w-4 text-primary" />
+      ) : (
+        <BellOff className="h-4 w-4 text-muted-foreground" />
+      )}
+    </Button>
+  );
+};

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>
+  );
+};