@edux-design/comments 0.1.1

package/dist/index.js

@@ -0,0 +1,579 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Comment: () => Comment,
+  CommentComposer: () => CommentComposer,
+  CommentMention: () => CommentMention
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/elements/Comment.jsx
+var import_react = __toESM(require("react"));
+var import_utils = require("@edux-design/utils");
+var import_avatars = require("@edux-design/avatars");
+var import_jsx_runtime = require("react/jsx-runtime");
+var VARIANT_STYLES = {
+  default: "border-border-minimal bg-bg-base",
+  resolved: "border-border-success-base bg-bg-success-subtle"
+};
+var CommentContext = (0, import_react.createContext)({
+  editable: true,
+  onResolve: void 0
+});
+var useCommentContext = () => (0, import_react.useContext)(CommentContext);
+var Comment = (0, import_react.forwardRef)(function Comment2({
+  author = "Author",
+  timestamp,
+  avatar,
+  avatarName,
+  avatarProps,
+  body,
+  replies,
+  variant = "default",
+  resolved = false,
+  onResolve,
+  editable = true,
+  children,
+  className,
+  ...props
+}, ref) {
+  const childArray = import_react.default.Children.toArray(children);
+  const actionsSlot = childArray.find(
+    (child) => {
+      var _a;
+      return (0, import_react.isValidElement)(child) && (child.type === CommentActions || ((_a = child.type) == null ? void 0 : _a.displayName) === "Comment.Actions");
+    }
+  );
+  const bodyNodes = childArray.filter((child) => child !== actionsSlot);
+  const bodyContent = body ?? bodyNodes;
+  const hasBodyContent = body !== void 0 ? Boolean(body) : bodyNodes.length > 0;
+  const isResolved = resolved || variant === "resolved";
+  const resolvedVariant = VARIANT_STYLES[isResolved ? "resolved" : variant] ?? VARIANT_STYLES.default;
+  const resolvedAvatarName = avatarName ?? (typeof author === "string" ? author : void 0);
+  const shouldRenderAvatar = Boolean(avatar || avatarProps || resolvedAvatarName);
+  const replyItems = (0, import_react.useMemo)(
+    () => import_react.default.Children.toArray(replies).filter(
+      (reply) => reply !== null && reply !== void 0 && reply !== false
+    ),
+    [replies]
+  );
+  const replyCount = replyItems.length;
+  const shouldCollapseReplies = replyCount > 2;
+  const [showAllReplies, setShowAllReplies] = (0, import_react.useState)(!shouldCollapseReplies);
+  (0, import_react.useEffect)(() => {
+    setShowAllReplies(!shouldCollapseReplies);
+  }, [shouldCollapseReplies]);
+  const visibleReplies = shouldCollapseReplies && !showAllReplies ? [replyItems[replyCount - 1]] : replyItems;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentContext.Provider, { value: { editable, onResolve }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_utils.cx)(
+        "flex gap-12 rounded-default border p-12",
+        resolvedVariant,
+        className
+      ),
+      "data-variant": variant,
+      ...props,
+      children: [
+        shouldRenderAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatars.Avatar, { name: resolvedAvatarName, size: "small", ...avatarProps }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-sm font-semibold text-fg-base", children: author }),
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-fg-subtle", children: timestamp })
+          ] }),
+          hasBodyContent && !isResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-6 text-sm leading-relaxed text-fg-base", children: bodyContent }) : null,
+          isResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-6 text-xs font-semibold uppercase tracking-wide text-fg-success-base", children: "Resolved" }) : null,
+          actionsSlot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-8", children: actionsSlot }) : null,
+          replies && !isResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-10 border-l border-border-minimal pl-12", children: [
+            shouldCollapseReplies && !showAllReplies && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: "mb-8 text-xs font-semibold text-fg-info-base",
+                onClick: () => setShowAllReplies(true),
+                "aria-expanded": showAllReplies,
+                children: [
+                  "Show all ",
+                  replyCount,
+                  " replies"
+                ]
+              }
+            ),
+            visibleReplies
+          ] }) : null
+        ] })
+      ]
+    }
+  ) });
+});
+var CommentActions = ({ children, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "div",
+  {
+    className: (0, import_utils.cx)(
+      "flex flex-wrap items-center gap-8 text-xs text-fg-subtle",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CommentReply = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "button",
+  {
+    type: "button",
+    className: (0, import_utils.cx)("text-xs text-fg-info-base cursor-pointer", className),
+    ...props,
+    children: "Reply"
+  }
+);
+var CommentEdit = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "button",
+  {
+    type: "button",
+    className: (0, import_utils.cx)("text-xs text-fg-info-base cursor-pointer", className),
+    ...props,
+    children: "Edit"
+  }
+);
+var CommentResolve = ({
+  className,
+  disabled,
+  onClick,
+  ...props
+}) => {
+  const { editable, onResolve } = useCommentContext();
+  const isDisabled = disabled || !editable;
+  const handleClick = onClick ?? onResolve;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      className: (0, import_utils.cx)(
+        "text-xs font-semibold text-fg-success-base cursor-pointer",
+        className
+      ),
+      onClick: handleClick,
+      disabled: isDisabled,
+      "aria-disabled": isDisabled,
+      ...props,
+      children: "Resolve"
+    }
+  );
+};
+Comment.Actions = CommentActions;
+Comment.Reply = CommentReply;
+Comment.Edit = CommentEdit;
+Comment.Resolve = CommentResolve;
+CommentActions.displayName = "Comment.Actions";
+CommentReply.displayName = "Comment.Reply";
+CommentEdit.displayName = "Comment.Edit";
+CommentResolve.displayName = "Comment.Resolve";
+
+// src/elements/CommentComposer.jsx
+var import_react4 = __toESM(require("react"));
+var import_utils2 = require("@edux-design/utils");
+var import_avatars2 = require("@edux-design/avatars");
+var import_buttons = require("@edux-design/buttons");
+var import_react5 = require("@tiptap/react");
+var import_starter_kit = __toESM(require("@tiptap/starter-kit"));
+var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"));
+
+// src/elements/CommentMentionExtension.jsx
+var import_react2 = __toESM(require("react"));
+var import_core = require("@tiptap/core");
+var import_react3 = require("@tiptap/react");
+var import_mentions = require("@edux-design/mentions");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MentionNodeView = ({ node }) => {
+  var _a, _b;
+  const handle = ((_a = node.attrs) == null ? void 0 : _a.handle) ?? "";
+  const label = ((_b = node.attrs) == null ? void 0 : _b.label) ?? "";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react3.NodeViewWrapper,
+    {
+      as: "span",
+      className: "inline-flex items-center align-middle -translate-y-2",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_mentions.Mention, { handle, size: "small", children: [
+        "@",
+        handle,
+        " \xB7 ",
+        label
+      ] })
+    }
+  );
+};
+var CommentMentionExtension = import_core.Node.create({
+  name: "commentMention",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: false,
+  addAttributes() {
+    return {
+      id: { default: null },
+      handle: { default: "" },
+      label: { default: "" }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-comment-mention]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    const handle = HTMLAttributes.handle || "";
+    const label = HTMLAttributes.label || `@${handle}`;
+    return [
+      "span",
+      (0, import_core.mergeAttributes)(HTMLAttributes, {
+        "data-comment-mention": "true",
+        "data-handle": handle
+      }),
+      label
+    ];
+  },
+  addNodeView() {
+    return (0, import_react3.ReactNodeViewRenderer)(MentionNodeView);
+  }
+});
+
+// src/elements/CommentComposer.jsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CommentComposerContext = (0, import_react4.createContext)(null);
+var useCommentComposer = () => {
+  const context = (0, import_react4.useContext)(CommentComposerContext);
+  if (!context) {
+    throw new Error(
+      "CommentComposer components must be used within a <CommentComposer />."
+    );
+  }
+  return context;
+};
+var CommentComposer = (0, import_react4.forwardRef)(function CommentComposer2({
+  value,
+  onChange,
+  onSubmit,
+  onCancel,
+  placeholder = "Write a comment...",
+  rows = 4,
+  disabled = false,
+  isSubmitting = false,
+  submitLabel = "Post",
+  cancelLabel = "Cancel",
+  avatar,
+  avatarProps,
+  actions,
+  className,
+  children,
+  ...props
+}, ref) {
+  const hasValue = value === void 0 ? true : Boolean(value && value.trim().length);
+  const isSubmitDisabled = disabled || isSubmitting || !hasValue;
+  const editor = (0, import_react5.useEditor)({
+    extensions: [
+      import_starter_kit.default,
+      CommentMentionExtension,
+      import_extension_placeholder.default.configure({
+        placeholder
+      })
+    ],
+    content: value ?? "",
+    editable: !disabled,
+    editorProps: {
+      attributes: {
+        class: (0, import_utils2.cx)(
+          "w-full bg-white border-2 rounded-md border-border-base",
+          "outline-none transition-all duration-300 ease-in-out",
+          "pl-5 py-3 font-normal text-base leading-relaxed",
+          "h-[120px] overflow-y-auto",
+          "focus:shadow-focus focus-visible:shadow-focus",
+          disabled && "bg-bg-subtle border-border-subtle text-fg-inactive"
+        )
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      onChange == null ? void 0 : onChange({ target: { value: editor2.getText() } });
+    }
+  });
+  const containerRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (typeof ref === "function") {
+      ref(containerRef.current);
+    } else if (ref) {
+      ref.current = containerRef.current;
+    }
+  }, [ref]);
+  (0, import_react4.useEffect)(() => {
+    if (!editor) return;
+    if (value === "") {
+      editor.commands.clearContent();
+    }
+  }, [editor, value]);
+  const contextValue = (0, import_react4.useMemo)(
+    () => ({
+      editor,
+      placeholder,
+      editorContainerRef: containerRef
+    }),
+    [editor, placeholder]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CommentComposerContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "form",
+    {
+      className: (0, import_utils2.cx)(
+        "relative flex gap-12 rounded-default border border-border-minimal bg-bg-base p-12",
+        className
+      ),
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (isSubmitDisabled) return;
+        onSubmit == null ? void 0 : onSubmit(event);
+      },
+      ...props,
+      children: [
+        (avatar || avatarProps) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_avatars2.Avatar, { size: "small", ...avatarProps }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react5.EditorContent, { editor }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mt-8 flex flex-wrap items-center justify-between gap-8", children: [
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-wrap items-center gap-8 text-xs text-fg-subtle", children: actions }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-8", children: [
+              onCancel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                import_buttons.Button,
+                {
+                  type: "button",
+                  size: "small",
+                  isSecondary: true,
+                  onClick: onCancel,
+                  disabled: disabled || isSubmitting,
+                  children: cancelLabel
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_buttons.Button, { type: "submit", size: "small", disabled: isSubmitDisabled, children: isSubmitting ? "Posting..." : submitLabel })
+            ] })
+          ] })
+        ] }),
+        children
+      ]
+    }
+  ) });
+});
+
+// src/elements/CommentMention.jsx
+var import_react6 = __toESM(require("react"));
+var import_menus = require("@edux-design/menus");
+var import_avatars3 = require("@edux-design/avatars");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CommentMention = ({
+  peopleList = []
+}) => {
+  const { editor, editorContainerRef } = useCommentComposer();
+  const [menuOpen, setMenuOpen] = (0, import_react6.useState)(false);
+  const [query, setQuery] = (0, import_react6.useState)("");
+  const [range, setRange] = (0, import_react6.useState)(null);
+  const [anchorStyle, setAnchorStyle] = (0, import_react6.useState)({ left: 0, top: 0 });
+  const menuListRef = (0, import_react6.useRef)(null);
+  const rangeRef = (0, import_react6.useRef)(null);
+  const peopleByHandle = (0, import_react6.useMemo)(
+    () => new Map(peopleList.map((person) => [person.handle.toLowerCase(), person])),
+    [peopleList]
+  );
+  const filteredPeople = (0, import_react6.useMemo)(() => {
+    if (!query) return peopleList;
+    const lowered = query.toLowerCase();
+    return peopleList.filter(
+      (person) => person.handle.toLowerCase().startsWith(lowered)
+    );
+  }, [peopleList, query]);
+  const updateMenuState = (0, import_react6.useCallback)(() => {
+    var _a, _b;
+    if (!editor) return;
+    const { from } = editor.state.selection;
+    const { parent, parentOffset, pos } = editor.state.selection.$from;
+    if (!parent.isTextblock) {
+      setMenuOpen(false);
+      setQuery("");
+      setRange(null);
+      return;
+    }
+    const textBefore = parent.textBetween(0, parentOffset, "\n", "\0");
+    const match = textBefore.match(/@([\w-]*)$/);
+    if (match) {
+      const handleQuery = match[1] ?? "";
+      setQuery(handleQuery);
+      setMenuOpen(true);
+      const fromPos = pos - match[0].length;
+      const nextRange = { from: fromPos, to: pos };
+      setRange(nextRange);
+      rangeRef.current = nextRange;
+      const coords = editor.view.coordsAtPos(fromPos);
+      const containerRect = (_b = (_a = editorContainerRef == null ? void 0 : editorContainerRef.current) == null ? void 0 : _a.getBoundingClientRect) == null ? void 0 : _b.call(_a);
+      if (containerRect) {
+        setAnchorStyle({
+          left: coords.left - containerRect.left + 12,
+          top: coords.bottom - containerRect.top + 4
+        });
+      }
+      return;
+    }
+    setMenuOpen(false);
+    setQuery("");
+    setRange(null);
+    rangeRef.current = null;
+  }, [editor]);
+  const handleSelectPerson = (0, import_react6.useCallback)(
+    (person) => {
+      if (!editor || !rangeRef.current) return;
+      const selectionRange = rangeRef.current;
+      editor.commands.focus();
+      editor.commands.setTextSelection(selectionRange);
+      editor.commands.insertContentAt(
+        selectionRange,
+        [
+          {
+            type: "commentMention",
+            attrs: {
+              id: person.id,
+              handle: person.handle,
+              label: person.name
+            }
+          },
+          { type: "text", text: " " }
+        ],
+        { updateSelection: false }
+      );
+      const nextPos = selectionRange.from + 2;
+      requestAnimationFrame(() => {
+        editor.commands.setTextSelection(nextPos);
+        editor.view.focus();
+        setTimeout(() => editor.view.focus(), 0);
+      });
+      setMenuOpen(false);
+      setQuery("");
+      setRange(null);
+      rangeRef.current = null;
+    },
+    [editor]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (!editor) return;
+    updateMenuState();
+    editor.on("transaction", updateMenuState);
+    editor.on("selectionUpdate", updateMenuState);
+    return () => {
+      editor.off("transaction", updateMenuState);
+      editor.off("selectionUpdate", updateMenuState);
+    };
+  }, [editor, updateMenuState]);
+  (0, import_react6.useEffect)(() => {
+    var _a;
+    if (!editor) return;
+    const handleKeyDown = (event) => {
+      var _a2;
+      if (!menuOpen) return;
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      event.preventDefault();
+      const list = menuListRef.current;
+      const items = list == null ? void 0 : list.querySelectorAll("[data-menu-item]");
+      if (!list || !(items == null ? void 0 : items.length)) return;
+      list.focus();
+      const direction = event.key === "ArrowDown" ? 1 : -1;
+      const targetIndex = direction === 1 ? 0 : items.length - 1;
+      (_a2 = items[targetIndex]) == null ? void 0 : _a2.focus();
+    };
+    const dom = (_a = editor.view) == null ? void 0 : _a.dom;
+    dom == null ? void 0 : dom.addEventListener("keydown", handleKeyDown);
+    return () => dom == null ? void 0 : dom.removeEventListener("keydown", handleKeyDown);
+  }, [editor, menuOpen]);
+  const menuContent = (0, import_react6.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_menus.Menu,
+      {
+        open: menuOpen && filteredPeople.length > 0,
+        onOpenChange: setMenuOpen,
+        button: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-hidden": true,
+            className: "absolute h-1 w-1 opacity-0",
+            style: {
+              left: `${anchorStyle.left}px`,
+              top: `${anchorStyle.top}px`,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        align: "start",
+        side: "bottom",
+        trapFocus: false,
+        disableOutsidePointerEvents: false,
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        contentProps: {
+          sideOffset: 4,
+          avoidCollisions: true,
+          collisionPadding: 12,
+          onCloseAutoFocus: (event) => event.preventDefault()
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_menus.MenuList, { ref: menuListRef, className: "min-w-[220px]", children: filteredPeople.map((person) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_menus.MenuItem,
+          {
+            onMouseDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              handleSelectPerson(person);
+            },
+            onClick: () => handleSelectPerson(person),
+            onPointerDown: (event) => event.preventDefault(),
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center gap-8", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_avatars3.Avatar, { size: "small", ...person.avatarProps }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex flex-col", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm text-fg-base", children: person.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs text-fg-subtle", children: [
+                  "@",
+                  person.handle
+                ] })
+              ] })
+            ] })
+          },
+          person.id
+        )) })
+      }
+    ),
+    [filteredPeople, handleSelectPerson, menuOpen]
+  );
+  if (!editor) return null;
+  return menuContent;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Comment,
+  CommentComposer,
+  CommentMention
+});