@edux-design/comments 0.1.4 → 0.2.0

package/src/elements/Comment.jsx

@@ -1,240 +0,0 @@
-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,
-  resolved: false,
-});
-
-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, resolved: isResolved }}>
-      <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,
-  label,
-  ...props
-}) => {
-  const { editable, onResolve, resolved } = useCommentContext();
-  const isDisabled = disabled || !editable;
-  const handleClick = onClick ?? onResolve;
-  const isResolved = Boolean(resolved);
-  const actionLabel = label ?? (isResolved ? "Re-open" : "Resolve");
-  const toneClass = isResolved ? "text-fg-info-base" : "text-fg-success-base";
-
-  return (
-    <button
-      type="button"
-      className={cx(
-        "text-xs font-semibold cursor-pointer",
-        toneClass,
-        className
-      )}
-      onClick={handleClick}
-      disabled={isDisabled}
-      aria-disabled={isDisabled}
-      {...props}
-    >
-      {actionLabel}
-    </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

@@ -1,151 +0,0 @@
-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("renders a re-open resolve action when resolved", () => {
-    render(
-      <Comment author="Alex" body="Body" resolved>
-        <Comment.Actions>
-          <Comment.Resolve />
-        </Comment.Actions>
-      </Comment>
-    );
-
-    const resolveButton = screen.getByRole("button", { name: "Re-open" });
-    expect(resolveButton).toBeInTheDocument();
-    expect(resolveButton).toHaveClass("text-fg-info-base");
-  });
-
-  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

@@ -1,184 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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);
-  });
-});