elseware-ui 2.31.0 → 2.31.1

package/dist/index.js

@@ -24,6 +24,7 @@ var reactBeautifulDnd = require('react-beautiful-dnd');
 var md = require('react-icons/md');
 require('@mdxeditor/editor/style.css');
 var editor = require('@mdxeditor/editor');
+var bi = require('react-icons/bi');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -3131,7 +3132,7 @@ var ShapeSwitch = () => {
     {
       value: currentShape,
       onChange: handleChange,
-      className: "\n          px-3 py-2 rounded-md border border-gray-300\n          bg-white dark:bg-gray-800\n          text-sm shadow-sm\n          focus:outline-none\n        ",
+      className: "\r\n          px-3 py-2 rounded-md border border-gray-300\r\n          bg-white dark:bg-gray-800\r\n          text-sm shadow-sm\r\n          focus:outline-none\r\n        ",
       children: Object.keys(Shape).map((shape) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: shape, children: shape }, shape))
     }
   ) });
@@ -15741,7 +15742,7 @@ function Tags({
 var Tags_default = Tags;
 function TextArea({
   placeholder,
-  limit,
+  limit = 1e3,
   styles,
   shape,
   ...props
@@ -16125,7 +16126,7 @@ function MarkdownTOC({ title = "Table of Contents" }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
       {
-        className: "\n            text-sm\n            font-semibold\n            uppercase\n            tracking-wide\n            text-gray-900\n            dark:text-gray-100\n          ",
+        className: "\r\n            text-sm\r\n            font-semibold\r\n            uppercase\r\n            tracking-wide\r\n            text-gray-900\r\n            dark:text-gray-100\r\n          ",
         children: title
       }
     ) }),
@@ -17454,7 +17455,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
+            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -17485,6 +17486,436 @@ function ShowMore({ text, limit }) {
   ] });
 }
 var ShowMore_default = ShowMore;
+function CommentComposer({
+  placeholder = "Add a comment...",
+  submitLabel = "Comment",
+  onSubmit
+}) {
+  const [value, setValue] = React4.useState("");
+  const [focused, setFocused] = React4.useState(false);
+  async function handleSubmit() {
+    if (!value.trim()) return;
+    await onSubmit?.(value);
+    setValue("");
+    setFocused(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size: "md" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          value,
+          placeholder,
+          onFocus: () => setFocused(true),
+          onChange: (e) => setValue(e.target.value),
+          className: "w-full min-h-[48px] bg-transparent border-b border-gray-300 dark:border-neutral-700 outline-none resize-none pb-2 text-sm"
+        }
+      ),
+      (focused || value.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button_default,
+          {
+            variant: "secondary",
+            appearance: "ghost",
+            text: "Cancel",
+            onClick: () => {
+              setValue("");
+              setFocused(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button_default,
+          {
+            variant: "primary",
+            text: submitLabel,
+            onClick: handleSubmit
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var CommentComposer_default = CommentComposer;
+
+// src/compositions/comment-thread/utils/formatCommentDate.ts
+function formatCommentDate(date) {
+  const now = /* @__PURE__ */ new Date();
+  const target = new Date(date);
+  const seconds = Math.floor((now.getTime() - target.getTime()) / 1e3);
+  const intervals = [
+    { label: "year", seconds: 31536e3 },
+    { label: "month", seconds: 2592e3 },
+    { label: "day", seconds: 86400 },
+    { label: "hour", seconds: 3600 },
+    { label: "minute", seconds: 60 }
+  ];
+  for (const interval of intervals) {
+    const count = Math.floor(seconds / interval.seconds);
+    if (count >= 1) {
+      return `${count} ${interval.label}${count > 1 ? "s" : ""} ago`;
+    }
+  }
+  return "Just now";
+}
+function CommentHeader({
+  avatar,
+  username,
+  createdAt,
+  edited
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatar, size: "sm" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm flex-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900 dark:text-gray-100", children: [
+        "@",
+        username
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500 dark:text-gray-400", children: formatCommentDate(createdAt) }),
+      edited && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-400", children: "edited" })
+    ] })
+  ] });
+}
+var CommentHeader_default = CommentHeader;
+function CommentContent({ content }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-relaxed whitespace-pre-wrap text-gray-700 dark:text-gray-300", children: content });
+}
+var CommentContent_default = CommentContent;
+function CommentActions({
+  likes = 0,
+  dislikes = 0,
+  onLike,
+  onDislike,
+  onReply
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-5 text-sm text-gray-500 dark:text-gray-400", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onLike,
+        className: "inline-flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(bi.BiLike, { size: 18 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: likes })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onDislike,
+        className: "inline-flex items-center gap-1 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(bi.BiDislike, { size: 18 }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: dislikes })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onReply,
+        className: "font-medium hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        children: "Reply"
+      }
+    )
+  ] });
+}
+var CommentActions_default = CommentActions;
+function CommentMenu({
+  canEdit,
+  canDelete,
+  canReport,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const [open, setOpen] = React4.useState(false);
+  const ref = React4.useRef(null);
+  React4.useEffect(() => {
+    function handleOutsideClick(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "relative", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => setOpen((prev) => !prev),
+        className: "text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+        children: /* @__PURE__ */ jsxRuntime.jsx(bi.BiDotsVerticalRounded, { size: 18 })
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "\r\n            absolute\r\n            right-0\r\n            top-full\r\n            mt-2\r\n            min-w-[160px]\r\n            overflow-hidden\r\n            rounded-xl\r\n            border\r\n            border-gray-200\r\n            dark:border-neutral-800\r\n            bg-white\r\n            dark:bg-neutral-900\r\n            shadow-xl\r\n            z-50\r\n          ",
+        children: [
+          canEdit && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                setOpen(false);
+                onEdit?.();
+              },
+              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(bi.BiEdit, {}),
+                "Edit"
+              ]
+            }
+          ),
+          canDelete && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                setOpen(false);
+                onDelete?.();
+              },
+              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(bi.BiTrash, {}),
+                "Delete"
+              ]
+            }
+          ),
+          canReport && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                setOpen(false);
+                onReport?.();
+              },
+              className: "w-full flex items-center gap-2 px-4 py-3 text-sm hover:bg-gray-100 dark:hover:bg-neutral-800",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(bi.BiFlag, {}),
+                "Report"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var CommentMenu_default = CommentMenu;
+function CommentRepliesToggle({
+  repliesCount,
+  collapsed,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: onToggle,
+      className: "inline-flex items-center gap-1 text-sm font-medium text-blue-500 hover:text-blue-400 transition-colors w-fit",
+      children: [
+        collapsed ? /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronDown, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronUp, { size: 18 }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: collapsed ? `View ${repliesCount} repl${repliesCount > 1 ? "ies" : "y"}` : "Hide replies" })
+      ]
+    }
+  );
+}
+var CommentRepliesToggle_default = CommentRepliesToggle;
+function ReplyComposer({ username, onSubmit }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+    CommentComposer_default,
+    {
+      placeholder: `Reply to @${username}`,
+      submitLabel: "Reply",
+      onSubmit
+    }
+  ) });
+}
+var ReplyComposer_default = ReplyComposer;
+
+// src/compositions/comment-thread/constants/comment.constants.ts
+var MAX_COMMENT_DEPTH = 5;
+var COMMENT_INDENTATION = 0;
+function CommentItem({
+  comment,
+  depth = 0,
+  onLike,
+  onDislike,
+  onReply,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const [collapsed, setCollapsed] = React4.useState(false);
+  const [isReplying, setIsReplying] = React4.useState(false);
+  const resolvedDepth = Math.min(depth, MAX_COMMENT_DEPTH);
+  async function handleReply(content) {
+    console.log(content);
+    setIsReplying(false);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex flex-col gap-4",
+      style: {
+        paddingLeft: `${resolvedDepth * COMMENT_INDENTATION}px`
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-3 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CommentHeader_default,
+              {
+                avatar: comment.author.avatar,
+                username: comment.author.username,
+                createdAt: comment.createdAt,
+                edited: comment.edited
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CommentMenu_default,
+              {
+                canEdit: comment.permissions?.canEdit,
+                canDelete: comment.permissions?.canDelete,
+                canReport: comment.permissions?.canReport,
+                onEdit: () => onEdit?.(comment),
+                onDelete: () => onDelete?.(comment),
+                onReport: () => onReport?.(comment)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(CommentContent_default, { content: comment.content }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CommentActions_default,
+            {
+              likes: comment.likes,
+              dislikes: comment.dislikes,
+              onLike: () => onLike?.(comment),
+              onDislike: () => onDislike?.(comment),
+              onReply: () => {
+                setIsReplying((prev) => !prev);
+                onReply?.(comment);
+              }
+            }
+          ),
+          isReplying && /* @__PURE__ */ jsxRuntime.jsx(
+            ReplyComposer_default,
+            {
+              username: comment.author.username,
+              onSubmit: handleReply
+            }
+          ),
+          !!comment.replies?.length && /* @__PURE__ */ jsxRuntime.jsx(
+            CommentRepliesToggle_default,
+            {
+              collapsed,
+              repliesCount: comment.replies.length,
+              onToggle: () => setCollapsed((prev) => !prev)
+            }
+          )
+        ] }) }),
+        !collapsed && !!comment.replies?.length && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "border-l border-gray-200 dark:border-neutral-800",
+              "pl-4 ml-5"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              CommentList_default,
+              {
+                comments: comment.replies,
+                depth: depth + 1,
+                onLike,
+                onDislike,
+                onReply,
+                onEdit,
+                onDelete,
+                onReport
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var CommentItem_default = CommentItem;
+function CommentList({
+  comments,
+  depth = 0,
+  onLike,
+  onDislike,
+  onReply,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-8", children: comments.map((comment) => /* @__PURE__ */ jsxRuntime.jsx(
+    CommentItem_default,
+    {
+      comment,
+      depth,
+      onLike,
+      onDislike,
+      onReply,
+      onEdit,
+      onDelete,
+      onReport
+    },
+    comment.id
+  )) });
+}
+var CommentList_default = CommentList;
+var CommentThreadContext = React4.createContext(null);
+function useCommentThread(initialComments) {
+  const [comments, setComments] = React4.useState(initialComments);
+  return {
+    comments,
+    setComments
+  };
+}
+function CommentThread({
+  comments: initialComments = [],
+  onCommentCreate,
+  onLike,
+  onDislike,
+  onReply,
+  onEdit,
+  onDelete,
+  onReport
+}) {
+  const { comments, setComments } = useCommentThread(initialComments);
+  async function handleCreateComment(content) {
+    await onCommentCreate?.(content);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CommentThreadContext.Provider,
+    {
+      value: {
+        comments,
+        setComments
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(CommentComposer_default, { onSubmit: handleCreateComment }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CommentList_default,
+          {
+            comments,
+            onLike,
+            onDislike,
+            onReply,
+            onEdit,
+            onDelete,
+            onReport
+          }
+        )
+      ] })
+    }
+  );
+}
+var CommentThread_default = CommentThread;
 function DataViewTable({
   title,
   columns,
@@ -18322,6 +18753,7 @@ exports.CloudinaryImage = CloudinaryImage_default;
 exports.CloudinaryProvider = CloudinaryProvider;
 exports.CloudinaryVideo = CloudinaryVideo_default;
 exports.Code = Code;
+exports.CommentThread = CommentThread_default;
 exports.Content = Content;
 exports.ContentArea = ContentArea_default;
 exports.DataView = DataView;