@edux-design/comments 0.1.1

package/src/elements/Comment.jsx

@@ -0,0 +1,234 @@
+import React, {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+  createContext,
+  useContext,
+  isValidElement,
+} from "react";
+import { cx } from "@edux-design/utils";
+import { Avatar } from "@edux-design/avatars";
+
+const VARIANT_STYLES = {
+  default: "border-border-minimal bg-bg-base",
+  resolved: "border-border-success-base bg-bg-success-subtle",
+};
+
+const CommentContext = createContext({
+  editable: true,
+  onResolve: undefined,
+});
+
+const useCommentContext = () => useContext(CommentContext);
+
+/**
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   author?: React.ReactNode,
+ *   timestamp?: React.ReactNode,
+ *   avatar?: React.ReactNode,
+ *   avatarName?: string,
+ *   avatarProps?: import("@edux-design/avatars").AvatarProps,
+ *   body?: React.ReactNode,
+ *   replies?: React.ReactNode,
+ *   variant?: "default" | "resolved",
+ *   resolved?: boolean,
+ *   onResolve?: (event: React.MouseEvent<HTMLButtonElement>) => void,
+ *   editable?: boolean,
+ *   children?: React.ReactNode,
+ * }} CommentProps
+ */
+
+/**
+ * Flexible comment surface with optional avatar, metadata, actions, and replies.
+ */
+export const Comment = forwardRef(function Comment(
+  {
+    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) =>
+      isValidElement(child) &&
+      (child.type === CommentActions ||
+        child.type?.displayName === "Comment.Actions")
+  );
+  const bodyNodes = childArray.filter((child) => child !== actionsSlot);
+  const bodyContent = body ?? bodyNodes;
+  const hasBodyContent =
+    body !== undefined ? 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 : undefined);
+  const shouldRenderAvatar = Boolean(avatar || avatarProps || resolvedAvatarName);
+  const replyItems = useMemo(
+    () =>
+      React.Children.toArray(replies).filter(
+        (reply) => reply !== null && reply !== undefined && 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 (
+    <CommentContext.Provider value={{ editable, onResolve }}>
+      <div
+        ref={ref}
+        className={cx(
+          "flex gap-12 rounded-default border p-12",
+          resolvedVariant,
+          className
+        )}
+        data-variant={variant}
+        {...props}
+      >
+        {shouldRenderAvatar && (
+          <div className="shrink-0">
+            {avatar ?? (
+              <Avatar name={resolvedAvatarName} size="small" {...avatarProps} />
+            )}
+          </div>
+        )}
+
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-6">
+            <span className="truncate text-sm font-semibold text-fg-base">
+              {author}
+            </span>
+            {timestamp && (
+              <span className="text-xs text-fg-subtle">{timestamp}</span>
+            )}
+          </div>
+
+          {hasBodyContent && !isResolved ? (
+            <div className="mt-6 text-sm leading-relaxed text-fg-base">
+              {bodyContent}
+            </div>
+          ) : null}
+
+          {isResolved ? (
+            <div className="mt-6 text-xs font-semibold uppercase tracking-wide text-fg-success-base">
+              Resolved
+            </div>
+          ) : null}
+
+          {actionsSlot ? (
+            <div className="mt-8">{actionsSlot}</div>
+          ) : null}
+
+          {replies && !isResolved ? (
+            <div className="mt-10 border-l border-border-minimal pl-12">
+              {shouldCollapseReplies && !showAllReplies && (
+                <button
+                  type="button"
+                  className="mb-8 text-xs font-semibold text-fg-info-base"
+                  onClick={() => setShowAllReplies(true)}
+                  aria-expanded={showAllReplies}
+                >
+                  Show all {replyCount} replies
+                </button>
+              )}
+              {visibleReplies}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </CommentContext.Provider>
+  );
+});
+
+export const CommentActions = ({ children, className, ...props }) => (
+  <div
+    className={cx(
+      "flex flex-wrap items-center gap-8 text-xs text-fg-subtle",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export const CommentReply = ({ className, ...props }) => (
+  <button
+    type="button"
+    className={cx("text-xs text-fg-info-base cursor-pointer", className)}
+    {...props}
+  >
+    Reply
+  </button>
+);
+
+export const CommentEdit = ({ className, ...props }) => (
+  <button
+    type="button"
+    className={cx("text-xs text-fg-info-base cursor-pointer", className)}
+    {...props}
+  >
+    Edit
+  </button>
+);
+
+export const CommentResolve = ({
+  className,
+  disabled,
+  onClick,
+  ...props
+}) => {
+  const { editable, onResolve } = useCommentContext();
+  const isDisabled = disabled || !editable;
+  const handleClick = onClick ?? onResolve;
+
+  return (
+    <button
+      type="button"
+      className={cx(
+        "text-xs font-semibold text-fg-success-base cursor-pointer",
+        className
+      )}
+      onClick={handleClick}
+      disabled={isDisabled}
+      aria-disabled={isDisabled}
+      {...props}
+    >
+      Resolve
+    </button>
+  );
+};
+
+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";

package/src/elements/Comment.test.jsx

@@ -0,0 +1,137 @@
+import React, { createRef } from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+vi.mock("@edux-design/utils", () => ({
+  cx: (...args) => args.filter(Boolean).join(" "),
+}));
+
+vi.mock("@edux-design/avatars", () => ({
+  Avatar: (props) => (
+    <div data-testid="avatar" data-name={props.name} data-size={props.size} />
+  ),
+}));
+
+import { Comment } from "./Comment";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("Comment", () => {
+  it("renders the avatar using the Avatar package by default", () => {
+    render(<Comment author="Alex Johnson" body="Hello" />);
+
+    const avatar = screen.getByTestId("avatar");
+    expect(avatar).toBeInTheDocument();
+    expect(avatar).toHaveAttribute("data-name", "Alex Johnson");
+  });
+
+  it("uses the provided avatar node when supplied", () => {
+    render(
+      <Comment
+        author="Alex"
+        body="Hi"
+        avatar={<span data-testid="custom-avatar" />}
+      />
+    );
+
+    expect(screen.getByTestId("custom-avatar")).toBeInTheDocument();
+    expect(screen.queryByTestId("avatar")).not.toBeInTheDocument();
+  });
+
+  it("renders actions below the body content", () => {
+    render(
+      <Comment author="Alex" body="Body copy">
+        <Comment.Actions>
+          <Comment.Reply>Reply</Comment.Reply>
+        </Comment.Actions>
+      </Comment>
+    );
+
+    const body = screen.getByText("Body copy");
+    const actions = screen.getByRole("button", { name: "Reply" });
+
+    expect(body.compareDocumentPosition(actions)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    );
+  });
+
+  it("renders nested replies", () => {
+    render(
+      <Comment
+        author="Alex"
+        body="Root"
+        replies={<Comment author="Jamie" body="Nested" />}
+      />
+    );
+
+    expect(screen.getByText("Root")).toBeInTheDocument();
+    expect(screen.getByText("Nested")).toBeInTheDocument();
+  });
+
+  it("shows a show-all control and expands to reveal all replies", () => {
+    render(
+      <Comment
+        author="Alex"
+        body="Root"
+        replies={
+          <>
+            <Comment author="Jamie" body="First reply" />
+            <Comment author="Riley" body="Second reply" />
+            <Comment author="Casey" body="Last reply" />
+          </>
+        }
+      />
+    );
+
+    expect(screen.getByText("Show all 3 replies")).toBeInTheDocument();
+    expect(screen.queryByText("First reply")).not.toBeInTheDocument();
+    expect(screen.queryByText("Second reply")).not.toBeInTheDocument();
+    expect(screen.getByText("Last reply")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByText("Show all 3 replies"));
+
+    expect(screen.getByText("First reply")).toBeInTheDocument();
+    expect(screen.getByText("Second reply")).toBeInTheDocument();
+    expect(screen.getByText("Last reply")).toBeInTheDocument();
+  });
+
+  it("applies the resolved variant", () => {
+    const { container } = render(
+      <Comment author="Alex" body="Resolved" variant="resolved" />
+    );
+
+    expect(container.firstChild).toHaveAttribute("data-variant", "resolved");
+    expect(container.firstChild).toHaveClass("border-border-success-base");
+  });
+
+  it("shows resolved state and hides body when resolved", () => {
+    render(<Comment author="Alex" body="Hidden body" resolved />);
+    expect(screen.getByText("Resolved")).toBeInTheDocument();
+    expect(screen.queryByText("Hidden body")).not.toBeInTheDocument();
+  });
+
+  it("fires onResolve when resolve button is clicked", () => {
+    const handleResolve = vi.fn();
+    render(
+      <Comment author="Alex" body="Body" onResolve={handleResolve}>
+        <Comment.Actions>
+          <Comment.Resolve />
+        </Comment.Actions>
+      </Comment>
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Resolve" }));
+    expect(handleResolve).toHaveBeenCalledTimes(1);
+  });
+
+  it("forwards the ref to the root element", () => {
+    const ref = createRef();
+    render(<Comment ref={ref} author="Alex" body="Ref" />);
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+    expect(ref.current.tagName.toLowerCase()).toBe("div");
+  });
+});

package/src/elements/CommentComposer.jsx

@@ -0,0 +1,184 @@
+import React, {
+  forwardRef,
+  useMemo,
+  useRef,
+  createContext,
+  useContext,
+  useEffect,
+} from "react";
+import { cx } from "@edux-design/utils";
+import { Avatar } 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";
+import { CommentMentionExtension } from "./CommentMentionExtension";
+
+const CommentComposerContext = createContext(null);
+
+export const useCommentComposer = () => {
+  const context = useContext(CommentComposerContext);
+  if (!context) {
+    throw new Error(
+      "CommentComposer components must be used within a <CommentComposer />."
+    );
+  }
+  return context;
+};
+
+/**
+ * @typedef {React.FormHTMLAttributes<HTMLFormElement> & {
+ *   value?: string,
+ *   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void,
+ *   onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void,
+ *   onCancel?: (event: React.MouseEvent<HTMLButtonElement>) => void,
+ *   placeholder?: string,
+ *   rows?: number,
+ *   disabled?: boolean,
+ *   isSubmitting?: boolean,
+ *   submitLabel?: string,
+ *   cancelLabel?: string,
+ *   avatar?: React.ReactNode,
+ *   avatarProps?: import("@edux-design/avatars").AvatarProps,
+ *   actions?: React.ReactNode,
+ *   children?: React.ReactNode,
+ * }} CommentComposerProps
+ */
+
+/**
+ * Comment composer with avatar, textarea, and action buttons.
+ */
+export const CommentComposer = forwardRef(function CommentComposer(
+  {
+    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 === undefined ? 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: 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 }) => {
+      onChange?.({ target: { value: editor.getText() } });
+    },
+  });
+
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (typeof ref === "function") {
+      ref(containerRef.current);
+    } else if (ref) {
+      ref.current = containerRef.current;
+    }
+  }, [ref]);
+
+  useEffect(() => {
+    if (!editor) return;
+    if (value === "") {
+      editor.commands.clearContent();
+    }
+  }, [editor, value]);
+
+  const contextValue = useMemo(
+    () => ({
+      editor,
+      placeholder,
+      editorContainerRef: containerRef,
+    }),
+    [editor, placeholder]
+  );
+
+  return (
+    <CommentComposerContext.Provider value={contextValue}>
+      <form
+        className={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?.(event);
+        }}
+        {...props}
+      >
+        {(avatar || avatarProps) && (
+          <div className="shrink-0">
+            {avatar ?? <Avatar size="small" {...avatarProps} />}
+          </div>
+        )}
+
+        <div className="min-w-0 flex-1">
+          <div ref={containerRef} className="relative">
+            <EditorContent editor={editor} />
+          </div>
+
+          <div className="mt-8 flex flex-wrap items-center justify-between gap-8">
+            {actions ? (
+              <div className="flex flex-wrap items-center gap-8 text-xs text-fg-subtle">
+                {actions}
+              </div>
+            ) : (
+              <span />
+            )}
+
+            <div className="flex items-center gap-8">
+              {onCancel && (
+                <Button
+                  type="button"
+                  size="small"
+                  isSecondary
+                  onClick={onCancel}
+                  disabled={disabled || isSubmitting}
+                >
+                  {cancelLabel}
+                </Button>
+              )}
+              <Button type="submit" size="small" disabled={isSubmitDisabled}>
+                {isSubmitting ? "Posting..." : submitLabel}
+              </Button>
+            </div>
+          </div>
+        </div>
+        {children}
+      </form>
+    </CommentComposerContext.Provider>
+  );
+});

package/src/elements/CommentComposer.test.jsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+vi.mock("@edux-design/utils", () => ({
+  cx: (...args) => args.filter(Boolean).join(" "),
+}));
+
+vi.mock("@edux-design/avatars", () => ({
+  Avatar: (props) => (
+    <div data-testid="avatar" data-name={props.name} data-size={props.size} />
+  ),
+}));
+
+vi.mock("@edux-design/buttons", () => ({
+  Button: ({ children, ...props }) => <button {...props}>{children}</button>,
+}));
+
+const mockEditor = {
+  isEmpty: true,
+  getText: () => "",
+  on: vi.fn(),
+  off: vi.fn(),
+  commands: {
+    clearContent: vi.fn(),
+  },
+  state: {
+    selection: {
+      from: 0,
+      $from: {
+        parent: { isTextblock: true, textBetween: () => "" },
+        parentOffset: 0,
+        pos: 0,
+      },
+    },
+  },
+  chain: () => ({
+    focus: () => ({
+      deleteRange: () => ({
+        insertContent: () => ({ run: vi.fn() }),
+      }),
+    }),
+  }),
+};
+
+vi.mock("@tiptap/react", async () => {
+  const React = await import("react");
+  return {
+    useEditor: vi.fn(() => mockEditor),
+    EditorContent: () => <div data-testid="editor" />,
+    ReactNodeViewRenderer: (Component) => Component,
+    NodeViewWrapper: ({ children }) => <span>{children}</span>,
+  };
+});
+
+vi.mock("@tiptap/starter-kit", () => ({
+  default: {},
+}));
+
+vi.mock("@tiptap/extension-placeholder", () => ({
+  default: {
+    configure: () => ({}),
+  },
+}));
+
+vi.mock("@tiptap/core", () => ({
+  Node: {
+    create: (config) => config,
+  },
+  mergeAttributes: (...args) => Object.assign({}, ...args),
+}));
+
+import { CommentComposer } from "./CommentComposer";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("CommentComposer", () => {
+  it("renders avatar and editor", () => {
+    render(
+      <CommentComposer
+        value=""
+        onChange={() => {}}
+        avatarProps={{ name: "Alex" }}
+      />
+    );
+
+    expect(screen.getByTestId("avatar")).toBeInTheDocument();
+    expect(screen.getByTestId("editor")).toBeInTheDocument();
+  });
+
+  it("disables submit when value is empty", () => {
+    render(<CommentComposer value="" onChange={() => {}} />);
+
+    const submitButton = screen.getByRole("button", { name: "Post" });
+    expect(submitButton).toBeDisabled();
+  });
+
+  it("submits when value is present", () => {
+    const handleSubmit = vi.fn();
+    render(
+      <CommentComposer value="Hello" onChange={() => {}} onSubmit={handleSubmit} />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Post" }));
+    expect(handleSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onCancel when cancel button is clicked", () => {
+    const handleCancel = vi.fn();
+    render(
+      <CommentComposer
+        value="Hello"
+        onChange={() => {}}
+        onCancel={handleCancel}
+      />
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(handleCancel).toHaveBeenCalledTimes(1);
+  });
+});