@etus/ui 0.1.0

package/src/components/workflow/CommentSystem/CommentSystem.types.ts

@@ -0,0 +1,290 @@
+import type { commentSystemVariants } from "./CommentSystem.variants"
+import type { VariantProps } from "class-variance-authority"
+
+/**
+ * User data structure for comment system
+ */
+export interface CommentUser {
+  /** Avatar URL (optional) */
+  avatar?: string
+  /** Email address (optional) */
+  email?: string
+  /** Unique identifier */
+  id: string
+  /** Display name */
+  name: string
+  /** Role or title (optional) */
+  role?: string
+}
+
+/**
+ * Attachment data structure
+ */
+export interface CommentAttachment {
+  /** Unique identifier */
+  id: string
+  /** File name */
+  name: string
+  /** File size in bytes (optional) */
+  size?: number
+  /** Thumbnail URL for images (optional) */
+  thumbnail?: string
+  /** Type of attachment */
+  type: "file" | "image" | "link"
+  /** File URL */
+  url: string
+}
+
+/**
+ * Reaction on a comment
+ */
+export interface CommentReaction {
+  /** Number of users who reacted */
+  count: number
+  /** Emoji character */
+  emoji: string
+  /** Whether current user has reacted */
+  hasReacted?: boolean
+  /** IDs of users who reacted */
+  users: string[]
+}
+
+/**
+ * Available reaction configuration
+ */
+export interface Reaction {
+  /** Emoji character */
+  emoji: string
+  /** Display label */
+  label: string
+  /** Shortcode identifier */
+  shortcode: string
+}
+
+/**
+ * Comment data structure
+ */
+export interface Comment {
+  /** Attachments on this comment (optional) */
+  attachments?: CommentAttachment[]
+  /** Author of the comment */
+  author: CommentUser
+  /** Comment content (supports basic markdown) */
+  content: string
+  /** When the comment was created */
+  createdAt: Date
+  /** Unique identifier */
+  id: string
+  /** Whether the comment has been deleted (soft delete) */
+  isDeleted?: boolean
+  /** Whether the comment has been edited */
+  isEdited?: boolean
+  /** Whether the comment is pinned */
+  isPinned?: boolean
+  /** User IDs mentioned in this comment (optional) */
+  mentions?: string[]
+  /** Parent comment ID for replies (optional) */
+  parentId?: string
+  /** Reactions on this comment (optional) */
+  reactions?: CommentReaction[]
+  /** Nested replies (optional) */
+  replies?: Comment[]
+  /** When the comment was last updated (optional) */
+  updatedAt?: Date
+}
+
+/**
+ * Default reactions available in the system
+ */
+export const defaultReactions: Reaction[] = [
+  { emoji: "👍", label: "Curtir", shortcode: "thumbsup" },
+  { emoji: "❤️", label: "Amei", shortcode: "heart" },
+  { emoji: "😄", label: "Haha", shortcode: "smile" },
+  { emoji: "🎉", label: "Celebrar", shortcode: "tada" },
+  { emoji: "🤔", label: "Pensativo", shortcode: "thinking" },
+  { emoji: "👀", label: "Olhando", shortcode: "eyes" },
+]
+
+/**
+ * Payload for onSubmit event
+ */
+export interface CommentSubmitPayload {
+  /** Attachments (when allowAttachments is true) */
+  attachments?: CommentAttachment[]
+  /** Comment content */
+  content: string
+  /** User IDs mentioned in the comment */
+  mentions: string[]
+  /** Parent comment ID if replying */
+  parentId?: string
+}
+
+/**
+ * Payload for onEdit event
+ */
+export interface CommentEditPayload {
+  /** New content */
+  content: string
+  /** ID of the comment being edited */
+  id: string
+}
+
+/**
+ * Payload for onDelete event
+ */
+export interface CommentDeletePayload {
+  /** ID of the comment being deleted */
+  id: string
+}
+
+/**
+ * Payload for onReact event
+ */
+export interface CommentReactPayload {
+  /** ID of the comment being reacted to */
+  commentId: string
+  /** Reaction emoji or shortcode */
+  reaction: string
+}
+
+/**
+ * Payload for onMention event
+ */
+export interface CommentMentionPayload {
+  /** ID of the user being mentioned */
+  userId: string
+}
+
+/**
+ * Payload for onLoadMore event
+ */
+export interface CommentLoadMorePayload {
+  /** Load comments before this ID (for pagination) */
+  before?: string
+}
+
+/**
+ * Props for CommentSystem component
+ */
+export interface CommentSystemProps
+  extends Omit<React.ComponentProps<"div">, "children" | "onSubmit">,
+    VariantProps<typeof commentSystemVariants> {
+  /** Allow file attachments @default false */
+  allowAttachments?: boolean
+  /** Allow deleting own comments @default true */
+  allowDeleting?: boolean
+  /** Allow editing own comments @default true */
+  allowEditing?: boolean
+  /** Allow @mentions @default true */
+  allowMentions?: boolean
+  /** Allow reactions on comments @default true */
+  allowReactions?: boolean
+  /** Allow replies to comments @default true */
+  allowReplies?: boolean
+  /** Array of comments to display */
+  comments: Comment[]
+  /** Currently logged in user (required for posting) */
+  currentUser?: CommentUser
+  /** Error state message */
+  error?: string
+  /** Loading state */
+  isLoading?: boolean
+  /** Maximum thread depth @default 3 */
+  maxDepth?: number
+  /** Users available for @mention */
+  mentionableUsers?: CommentUser[]
+  /** Called when a comment is deleted */
+  onDelete?: (payload: CommentDeletePayload) => void
+  /** Called when a comment is edited */
+  onEdit?: (payload: CommentEditPayload) => void
+  /** Called when more comments should be loaded */
+  onLoadMore?: (payload: CommentLoadMorePayload) => void
+  /** Called when a user is mentioned */
+  onMention?: (payload: CommentMentionPayload) => void
+  /** Called when a reaction is added/removed */
+  onReact?: (payload: CommentReactPayload) => void
+  /** Called when a new comment is submitted */
+  onSubmit?: (payload: CommentSubmitPayload) => void
+  /** Placeholder text for input */
+  placeholder?: string
+  /** Available reactions */
+  reactions?: Reaction[]
+  /** Read-only mode (no input, no actions) @default false */
+  readOnly?: boolean
+}
+
+/**
+ * Props for CommentItem component
+ */
+export interface CommentItemProps
+  extends Omit<React.ComponentProps<"article">, "children"> {
+  /** Allow deleting */
+  allowDeleting?: boolean
+  /** Allow editing */
+  allowEditing?: boolean
+  /** Allow mentions */
+  allowMentions?: boolean
+  /** Allow reactions */
+  allowReactions?: boolean
+  /** Allow replies */
+  allowReplies?: boolean
+  /** The comment to display */
+  comment: Comment
+  /** Current user for permission checks */
+  currentUser?: CommentUser
+  /** Current depth in thread */
+  depth?: number
+  /** Layout style */
+  layout?: "chat" | "list" | "timeline"
+  /** Maximum thread depth */
+  maxDepth?: number
+  /** Mentionable users */
+  mentionableUsers?: CommentUser[]
+  /** Called when comment is deleted */
+  onDelete?: (payload: CommentDeletePayload) => void
+  /** Called when comment is edited */
+  onEdit?: (payload: CommentEditPayload) => void
+  /** Called when reaction is added/removed */
+  onReact?: (payload: CommentReactPayload) => void
+  /** Called when reply is submitted */
+  onReply?: (payload: CommentSubmitPayload) => void
+  /** Available reactions */
+  reactions?: Reaction[]
+  /** Read-only mode */
+  readOnly?: boolean
+}
+
+/**
+ * Props for CommentInput component
+ */
+export interface CommentInputProps
+  extends Omit<React.ComponentProps<"div">, "children" | "onSubmit"> {
+  /** Allow attachments */
+  allowAttachments?: boolean
+  /** Allow mentions */
+  allowMentions?: boolean
+  /** Cancel button label (for editing/replying) */
+  cancelLabel?: string
+  /** Initial content (for editing) */
+  initialContent?: string
+  /** Whether in edit mode */
+  isEditing?: boolean
+  /** Whether currently submitting */
+  isSubmitting?: boolean
+  /** Mentionable users */
+  mentionableUsers?: CommentUser[]
+  /** Called when cancel is clicked */
+  onCancel?: () => void
+  /** Called when a mention is triggered */
+  onMention?: (payload: CommentMentionPayload) => void
+  /** Called when form is submitted */
+  onSubmit?: (payload: CommentSubmitPayload) => void
+  /** Parent comment ID if replying */
+  parentId?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Show cancel button */
+  showCancel?: boolean
+  /** Submit button label */
+  submitLabel?: string
+}

package/src/components/workflow/CommentSystem/CommentSystem.variants.ts

@@ -0,0 +1,307 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * CommentSystem container variants
+ */
+export const commentSystemVariants = cva(
+  "relative w-full transition-all duration-300",
+  {
+    variants: {
+      variant: {
+        default: "",
+        threaded: "",
+        inline: "border rounded-lg shadow-sm",
+        compact: "",
+      },
+      layout: {
+        list: "flex flex-col gap-4",
+        chat: "flex flex-col gap-2",
+        timeline: "flex flex-col",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      layout: "list",
+    },
+  }
+)
+
+/**
+ * CommentItem variants
+ */
+export const commentItemVariants = cva(
+  "relative transition-all duration-200",
+  {
+    variants: {
+      layout: {
+        list: "rounded-lg border bg-card p-4",
+        chat: "rounded-2xl px-4 py-2 max-w-[85%]",
+        timeline: "relative pl-8 pb-6 border-l-2 border-muted-foreground/20 ml-4",
+      },
+      isOwn: {
+        true: "",
+        false: "",
+      },
+      isPinned: {
+        true: "ring-1 ring-primary/30 bg-primary/5",
+        false: "",
+      },
+      isDeleted: {
+        true: "opacity-60",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        layout: "chat",
+        isOwn: true,
+        className: "ml-auto bg-primary text-primary-foreground",
+      },
+      {
+        layout: "chat",
+        isOwn: false,
+        className: "mr-auto bg-muted",
+      },
+    ],
+    defaultVariants: {
+      layout: "list",
+      isOwn: false,
+      isPinned: false,
+      isDeleted: false,
+    },
+  }
+)
+
+/**
+ * Comment header variants (author info and timestamp)
+ */
+export const commentHeaderVariants = cva(
+  "flex items-center gap-3",
+  {
+    variants: {
+      layout: {
+        list: "",
+        chat: "",
+        timeline: "",
+      },
+    },
+    defaultVariants: {
+      layout: "list",
+    },
+  }
+)
+
+/**
+ * Comment content variants
+ */
+export const commentContentVariants = cva(
+  "text-sm",
+  {
+    variants: {
+      layout: {
+        list: "mt-2",
+        chat: "",
+        timeline: "mt-2",
+      },
+    },
+    defaultVariants: {
+      layout: "list",
+    },
+  }
+)
+
+/**
+ * Comment actions (reply, edit, delete, react)
+ */
+export const commentActionsVariants = cva(
+  "flex items-center gap-2 text-xs",
+  {
+    variants: {
+      layout: {
+        list: "mt-3 pt-3 border-t border-muted",
+        chat: "mt-1",
+        timeline: "mt-2",
+      },
+    },
+    defaultVariants: {
+      layout: "list",
+    },
+  }
+)
+
+/**
+ * Reply thread container variants
+ */
+export const commentRepliesVariants = cva(
+  "relative",
+  {
+    variants: {
+      layout: {
+        list: "pl-8 mt-4 space-y-4",
+        chat: "pl-6 mt-2 space-y-2",
+        timeline: "pl-4 mt-2 space-y-2",
+      },
+    },
+    defaultVariants: {
+      layout: "list",
+    },
+  }
+)
+
+/**
+ * Thread line connector
+ */
+export const commentThreadLineVariants = cva(
+  "absolute left-4 top-0 bottom-0 w-0.5 bg-muted-foreground/20",
+  {
+    variants: {
+      layout: {
+        list: "",
+        chat: "left-3",
+        timeline: "left-0",
+      },
+    },
+    defaultVariants: {
+      layout: "list",
+    },
+  }
+)
+
+/**
+ * Mention highlight in content
+ */
+export const commentMentionVariants = cva(
+  "inline-flex items-center rounded px-1 font-medium cursor-pointer hover:underline",
+  {
+    variants: {
+      style: {
+        default: "bg-primary/10 text-primary",
+        subtle: "text-primary",
+      },
+    },
+    defaultVariants: {
+      style: "default",
+    },
+  }
+)
+
+/**
+ * Reaction badge variants
+ */
+export const commentReactionVariants = cva(
+  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs cursor-pointer transition-colors",
+  {
+    variants: {
+      hasReacted: {
+        true: "bg-primary/10 border-primary/30 text-primary",
+        false: "bg-muted border-transparent text-muted-foreground hover:bg-muted-foreground/10",
+      },
+    },
+    defaultVariants: {
+      hasReacted: false,
+    },
+  }
+)
+
+/**
+ * Comment input container
+ */
+export const commentInputContainerVariants = cva(
+  "relative rounded-md border bg-background transition-all duration-200",
+  {
+    variants: {
+      isFocused: {
+        true: "ring-2 ring-ring ring-offset-2",
+        false: "",
+      },
+      isSubmitting: {
+        true: "opacity-70 pointer-events-none",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      isFocused: false,
+      isSubmitting: false,
+    },
+  }
+)
+
+/**
+ * Mention suggestions popover
+ */
+export const mentionSuggestionsVariants = cva(
+  "absolute z-50 min-w-[200px] overflow-hidden rounded-md border bg-popover p-1 shadow-md",
+  {
+    variants: {
+      position: {
+        above: "bottom-full mb-1",
+        below: "top-full mt-1",
+      },
+    },
+    defaultVariants: {
+      position: "below",
+    },
+  }
+)
+
+/**
+ * Mention suggestion item
+ */
+export const mentionSuggestionItemVariants = cva(
+  "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer transition-colors",
+  {
+    variants: {
+      isSelected: {
+        true: "bg-accent text-accent-foreground",
+        false: "hover:bg-accent hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      isSelected: false,
+    },
+  }
+)
+
+/**
+ * Empty state variants
+ */
+export const commentEmptyStateVariants = cva(
+  "flex flex-col items-center justify-center text-center p-8",
+  {
+    variants: {
+      variant: {
+        default: "",
+        compact: "p-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * Timeline marker for timeline layout
+ */
+export const commentTimelineMarkerVariants = cva(
+  "absolute -left-[9px] top-0 flex h-4 w-4 items-center justify-center rounded-full border-2 bg-background",
+  {
+    variants: {
+      status: {
+        default: "border-muted-foreground/50",
+        active: "border-primary bg-primary",
+      },
+    },
+    defaultVariants: {
+      status: "default",
+    },
+  }
+)
+
+// Export variant prop types
+export type CommentSystemVariantProps = VariantProps<typeof commentSystemVariants>
+export type CommentItemVariantProps = VariantProps<typeof commentItemVariants>
+export type CommentReactionVariantProps = VariantProps<typeof commentReactionVariants>
+export type CommentInputContainerVariantProps = VariantProps<typeof commentInputContainerVariants>
+export type MentionSuggestionsVariantProps = VariantProps<typeof mentionSuggestionsVariants>
+export type MentionSuggestionItemVariantProps = VariantProps<typeof mentionSuggestionItemVariants>