@edux-design/comments 0.1.1

package/dist/index.mjs

@@ -0,0 +1,556 @@
+// src/elements/Comment.jsx
+import React, {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+  createContext,
+  useContext,
+  isValidElement
+} from "react";
+import { cx } from "@edux-design/utils";
+import { Avatar } from "@edux-design/avatars";
+import { jsx, jsxs } from "react/jsx-runtime";
+var VARIANT_STYLES = {
+  default: "border-border-minimal bg-bg-base",
+  resolved: "border-border-success-base bg-bg-success-subtle"
+};
+var CommentContext = createContext({
+  editable: true,
+  onResolve: void 0
+});
+var useCommentContext = () => useContext(CommentContext);
+var Comment = forwardRef(function Comment2({
+  author = "Author",
+  timestamp,
+  avatar,
+  avatarName,
+  avatarProps,
+  body,
+  replies,
+  variant = "default",
+  resolved = false,
+  onResolve,
+  editable = true,
+  children,
+  className,
+  ...props
+}, ref) {
+  const childArray = React.Children.toArray(children);
+  const actionsSlot = childArray.find(
+    (child) => {
+      var _a;
+      return 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 = useMemo(
+    () => React.Children.toArray(replies).filter(
+      (reply) => reply !== null && reply !== void 0 && reply !== false
+    ),
+    [replies]
+  );
+  const replyCount = replyItems.length;
+  const shouldCollapseReplies = replyCount > 2;
+  const [showAllReplies, setShowAllReplies] = useState(!shouldCollapseReplies);
+  useEffect(() => {
+    setShowAllReplies(!shouldCollapseReplies);
+  }, [shouldCollapseReplies]);
+  const visibleReplies = shouldCollapseReplies && !showAllReplies ? [replyItems[replyCount - 1]] : replyItems;
+  return /* @__PURE__ */ jsx(CommentContext.Provider, { value: { editable, onResolve }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx(
+        "flex gap-12 rounded-default border p-12",
+        resolvedVariant,
+        className
+      ),
+      "data-variant": variant,
+      ...props,
+      children: [
+        shouldRenderAvatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ jsx(Avatar, { name: resolvedAvatarName, size: "small", ...avatarProps }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-fg-base", children: author }),
+            timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-subtle", children: timestamp })
+          ] }),
+          hasBodyContent && !isResolved ? /* @__PURE__ */ jsx("div", { className: "mt-6 text-sm leading-relaxed text-fg-base", children: bodyContent }) : null,
+          isResolved ? /* @__PURE__ */ jsx("div", { className: "mt-6 text-xs font-semibold uppercase tracking-wide text-fg-success-base", children: "Resolved" }) : null,
+          actionsSlot ? /* @__PURE__ */ jsx("div", { className: "mt-8", children: actionsSlot }) : null,
+          replies && !isResolved ? /* @__PURE__ */ jsxs("div", { className: "mt-10 border-l border-border-minimal pl-12", children: [
+            shouldCollapseReplies && !showAllReplies && /* @__PURE__ */ 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__ */ jsx(
+  "div",
+  {
+    className: cx(
+      "flex flex-wrap items-center gap-8 text-xs text-fg-subtle",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CommentReply = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    className: cx("text-xs text-fg-info-base cursor-pointer", className),
+    ...props,
+    children: "Reply"
+  }
+);
+var CommentEdit = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    className: 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__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: 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
+import React3, {
+  forwardRef as forwardRef2,
+  useMemo as useMemo2,
+  useRef,
+  createContext as createContext2,
+  useContext as useContext2,
+  useEffect as useEffect2
+} from "react";
+import { cx as cx2 } from "@edux-design/utils";
+import { Avatar as Avatar2 } from "@edux-design/avatars";
+import { Button } from "@edux-design/buttons";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+
+// src/elements/CommentMentionExtension.jsx
+import React2 from "react";
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer, NodeViewWrapper } from "@tiptap/react";
+import { Mention } from "@edux-design/mentions";
+import { jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsx2(
+    NodeViewWrapper,
+    {
+      as: "span",
+      className: "inline-flex items-center align-middle -translate-y-2",
+      children: /* @__PURE__ */ jsxs2(Mention, { handle, size: "small", children: [
+        "@",
+        handle,
+        " \xB7 ",
+        label
+      ] })
+    }
+  );
+};
+var CommentMentionExtension = 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",
+      mergeAttributes(HTMLAttributes, {
+        "data-comment-mention": "true",
+        "data-handle": handle
+      }),
+      label
+    ];
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(MentionNodeView);
+  }
+});
+
+// src/elements/CommentComposer.jsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CommentComposerContext = createContext2(null);
+var useCommentComposer = () => {
+  const context = useContext2(CommentComposerContext);
+  if (!context) {
+    throw new Error(
+      "CommentComposer components must be used within a <CommentComposer />."
+    );
+  }
+  return context;
+};
+var CommentComposer = forwardRef2(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 = useEditor({
+    extensions: [
+      StarterKit,
+      CommentMentionExtension,
+      Placeholder.configure({
+        placeholder
+      })
+    ],
+    content: value ?? "",
+    editable: !disabled,
+    editorProps: {
+      attributes: {
+        class: cx2(
+          "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 = useRef(null);
+  useEffect2(() => {
+    if (typeof ref === "function") {
+      ref(containerRef.current);
+    } else if (ref) {
+      ref.current = containerRef.current;
+    }
+  }, [ref]);
+  useEffect2(() => {
+    if (!editor) return;
+    if (value === "") {
+      editor.commands.clearContent();
+    }
+  }, [editor, value]);
+  const contextValue = useMemo2(
+    () => ({
+      editor,
+      placeholder,
+      editorContainerRef: containerRef
+    }),
+    [editor, placeholder]
+  );
+  return /* @__PURE__ */ jsx3(CommentComposerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs3(
+    "form",
+    {
+      className: cx2(
+        "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__ */ jsx3("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ jsx3(Avatar2, { size: "small", ...avatarProps }) }),
+        /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx3("div", { ref: containerRef, className: "relative", children: /* @__PURE__ */ jsx3(EditorContent, { editor }) }),
+          /* @__PURE__ */ jsxs3("div", { className: "mt-8 flex flex-wrap items-center justify-between gap-8", children: [
+            actions ? /* @__PURE__ */ jsx3("div", { className: "flex flex-wrap items-center gap-8 text-xs text-fg-subtle", children: actions }) : /* @__PURE__ */ jsx3("span", {}),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-8", children: [
+              onCancel && /* @__PURE__ */ jsx3(
+                Button,
+                {
+                  type: "button",
+                  size: "small",
+                  isSecondary: true,
+                  onClick: onCancel,
+                  disabled: disabled || isSubmitting,
+                  children: cancelLabel
+                }
+              ),
+              /* @__PURE__ */ jsx3(Button, { type: "submit", size: "small", disabled: isSubmitDisabled, children: isSubmitting ? "Posting..." : submitLabel })
+            ] })
+          ] })
+        ] }),
+        children
+      ]
+    }
+  ) });
+});
+
+// src/elements/CommentMention.jsx
+import React4, { useMemo as useMemo3, useState as useState2, useCallback, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { Menu, MenuList, MenuItem } from "@edux-design/menus";
+import { Avatar as Avatar3 } from "@edux-design/avatars";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var CommentMention = ({
+  peopleList = []
+}) => {
+  const { editor, editorContainerRef } = useCommentComposer();
+  const [menuOpen, setMenuOpen] = useState2(false);
+  const [query, setQuery] = useState2("");
+  const [range, setRange] = useState2(null);
+  const [anchorStyle, setAnchorStyle] = useState2({ left: 0, top: 0 });
+  const menuListRef = useRef2(null);
+  const rangeRef = useRef2(null);
+  const peopleByHandle = useMemo3(
+    () => new Map(peopleList.map((person) => [person.handle.toLowerCase(), person])),
+    [peopleList]
+  );
+  const filteredPeople = useMemo3(() => {
+    if (!query) return peopleList;
+    const lowered = query.toLowerCase();
+    return peopleList.filter(
+      (person) => person.handle.toLowerCase().startsWith(lowered)
+    );
+  }, [peopleList, query]);
+  const updateMenuState = 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 = 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]
+  );
+  useEffect3(() => {
+    if (!editor) return;
+    updateMenuState();
+    editor.on("transaction", updateMenuState);
+    editor.on("selectionUpdate", updateMenuState);
+    return () => {
+      editor.off("transaction", updateMenuState);
+      editor.off("selectionUpdate", updateMenuState);
+    };
+  }, [editor, updateMenuState]);
+  useEffect3(() => {
+    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 = useMemo3(
+    () => /* @__PURE__ */ jsx4(
+      Menu,
+      {
+        open: menuOpen && filteredPeople.length > 0,
+        onOpenChange: setMenuOpen,
+        button: /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(MenuList, { ref: menuListRef, className: "min-w-[220px]", children: filteredPeople.map((person) => /* @__PURE__ */ jsx4(
+          MenuItem,
+          {
+            onMouseDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              handleSelectPerson(person);
+            },
+            onClick: () => handleSelectPerson(person),
+            onPointerDown: (event) => event.preventDefault(),
+            children: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-8", children: [
+              /* @__PURE__ */ jsx4(Avatar3, { size: "small", ...person.avatarProps }),
+              /* @__PURE__ */ jsxs4("span", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx4("span", { className: "text-sm text-fg-base", children: person.name }),
+                /* @__PURE__ */ jsxs4("span", { className: "text-xs text-fg-subtle", children: [
+                  "@",
+                  person.handle
+                ] })
+              ] })
+            ] })
+          },
+          person.id
+        )) })
+      }
+    ),
+    [filteredPeople, handleSelectPerson, menuOpen]
+  );
+  if (!editor) return null;
+  return menuContent;
+};
+export {
+  Comment,
+  CommentComposer,
+  CommentMention
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@edux-design/comments",
+  "version": "0.1.1",
+  "private": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "build": "tsup src/index.js --format esm,cjs --dts",
+    "dev": "tsup src/index.js --watch --format esm,cjs --dts",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.2",
+    "tailwindcss": "^4.1.12",
+    "postcss": "^8.5.6",
+    "tsup": "^8.5.0",
+    "@tailwindcss/cli": "^4.1.12",
+    "@tailwindcss/postcss": "^4.1.12",
+    "@tiptap/core": "^2.14.0",
+    "@tiptap/react": "^2.14.0",
+    "@tiptap/starter-kit": "^2.14.0",
+    "@tiptap/extension-placeholder": "^2.14.0"
+  },
+  "dependencies": {
+    "@edux-design/avatars": "*",
+    "@edux-design/buttons": "*",
+    "@edux-design/forms": "*",
+    "@edux-design/mentions": "*",
+    "@edux-design/menus": "*",
+    "@edux-design/utils": "*"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "@tiptap/core": "^2.14.0",
+    "@tiptap/react": "^2.14.0",
+    "@tiptap/starter-kit": "^2.14.0",
+    "@tiptap/extension-placeholder": "^2.14.0"
+  }
+}