@edux-design/comments 0.1.1

package/src/demos/Comment.stories.jsx

@@ -0,0 +1,472 @@
+import React from "react";
+import { Comment, CommentComposer, CommentMention } from "../index";
+
+export default {
+  title: "Content/Comment",
+  component: Comment,
+};
+
+export const Basic = (args) => (
+  <div className="max-w-xl space-y-12">
+    <Comment
+      {...args}
+      author="Alex Johnson"
+      timestamp="2h ago"
+      body="Left a few notes on the introduction. Let me know if you want me to draft the edits."
+      avatarProps={{ name: "Alex Johnson" }}
+    >
+      <Comment.Actions>
+        <Comment.Reply />
+        <Comment.Edit />
+      </Comment.Actions>
+    </Comment>
+
+    <Comment
+      author="Priya Singh"
+      timestamp="Yesterday"
+      body="Marked as resolved after the update."
+      avatarProps={{ name: "Priya Singh" }}
+      variant="resolved"
+      replies={
+        <>
+          <Comment
+            author="Taylor"
+            timestamp="2h ago"
+            body="Thanks! I added the sources in section 3."
+            avatarProps={{ name: "Taylor" }}
+          >
+            <Comment.Actions>
+              <Comment.Reply />
+              <Comment.Edit />
+            </Comment.Actions>
+          </Comment>
+          <Comment
+            author="Jordan"
+            timestamp="1h ago"
+            body="Confirmed the citations are correct."
+            avatarProps={{ name: "Jordan" }}
+          />
+          <Comment
+            author="Morgan"
+            timestamp="45m ago"
+            body="All set from my end."
+            avatarProps={{ name: "Morgan" }}
+          />
+        </>
+      }
+    >
+      <Comment.Actions>
+        <Comment.Edit />
+      </Comment.Actions>
+    </Comment>
+  </div>
+);
+
+Basic.args = {};
+
+export const Thread = () => {
+  const [composerValue, setComposerValue] = React.useState("");
+  const [lastAddedId, setLastAddedId] = React.useState(null);
+  const [resolvedIds, setResolvedIds] = React.useState(new Set());
+  const [animationPhase, setAnimationPhase] = React.useState("idle");
+  const [comments, setComments] = React.useState([
+    {
+      id: "c-1",
+      author: "Alex Johnson",
+      timestamp: "2h ago",
+      body: "Left a few notes on the introduction. Let me know if you want me to draft the edits.",
+      replies: [
+        {
+          id: "c-1-1",
+          author: "Taylor",
+          timestamp: "1h ago",
+          body: "Happy to take the edits.",
+        },
+      ],
+    },
+  ]);
+  const [activeReplyId, setActiveReplyId] = React.useState(null);
+
+  const handleAddComment = (event) => {
+    event.preventDefault();
+    const trimmed = composerValue.trim();
+    if (!trimmed) return;
+
+    const newComment = {
+      id: `c-${Date.now()}`,
+      author: "You",
+      timestamp: "Just now",
+      body: trimmed,
+      replies: [],
+    };
+
+    setComments((prev) => [newComment, ...prev]);
+    setLastAddedId(newComment.id);
+    setComposerValue("");
+  };
+
+  const handleAddReply = (commentId, replyText) => {
+    const trimmed = replyText.trim();
+    if (!trimmed) return;
+
+    const replyId = `${commentId}-${Date.now()}`;
+    setComments((prev) =>
+      prev.map((comment) =>
+        comment.id === commentId
+          ? {
+              ...comment,
+              replies: [
+                ...comment.replies,
+                {
+                  id: replyId,
+                  author: "You",
+                  timestamp: "Just now",
+                  body: trimmed,
+                },
+              ],
+            }
+          : comment
+      )
+    );
+    setLastAddedId(replyId);
+  };
+
+  const handleResolve = (commentId) => {
+    setResolvedIds((prev) => new Set(prev).add(commentId));
+    setActiveReplyId((prev) => (prev === commentId ? null : prev));
+  };
+
+  React.useEffect(() => {
+    if (!lastAddedId) return;
+    setAnimationPhase("enter");
+    const raf = requestAnimationFrame(() => {
+      setAnimationPhase("entered");
+    });
+    const timeout = setTimeout(() => {
+      setAnimationPhase("idle");
+      setLastAddedId(null);
+    }, 320);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(timeout);
+    };
+  }, [lastAddedId]);
+
+  const getAnimationProps = (id) => {
+    if (id !== lastAddedId) return {};
+    return {
+      className: [
+        "transition-all duration-300 ease-out",
+        animationPhase === "enter" && "opacity-0 translate-y-2",
+        animationPhase === "entered" && "opacity-100 translate-y-0",
+      ]
+        .filter(Boolean)
+        .join(" "),
+    };
+  };
+
+  return (
+    <div className="max-w-2xl space-y-16">
+      <CommentComposer
+        value={composerValue}
+        onChange={(event) => setComposerValue(event.target.value)}
+        onSubmit={handleAddComment}
+        submitLabel="Add comment"
+        avatarProps={{ name: "You" }}
+        rows={3}
+      />
+
+      <div className="space-y-12">
+        {comments.map((comment) => (
+          <Comment
+            key={comment.id}
+            author={comment.author}
+            timestamp={comment.timestamp}
+            body={comment.body}
+            avatarProps={{ name: comment.author }}
+            resolved={resolvedIds.has(comment.id)}
+            {...getAnimationProps(comment.id)}
+            onResolve={() => handleResolve(comment.id)}
+            replies={
+              <div className="space-y-8">
+                {comment.replies.map((reply) => (
+                  <Comment
+                    key={reply.id}
+                    author={reply.author}
+                    timestamp={reply.timestamp}
+                    body={reply.body}
+                    avatarProps={{ name: reply.author }}
+                    {...getAnimationProps(reply.id)}
+                  />
+                ))}
+                {activeReplyId === comment.id && (
+                  <ReplyComposer
+                    onSubmit={(value) => {
+                      handleAddReply(comment.id, value);
+                      setActiveReplyId(null);
+                    }}
+                  />
+                )}
+              </div>
+            }
+          >
+            <Comment.Actions>
+              {!resolvedIds.has(comment.id) ? (
+                <Comment.Reply
+                  onClick={() =>
+                    setActiveReplyId((prev) =>
+                      prev === comment.id ? null : comment.id
+                    )
+                  }
+                />
+              ) : null}
+              {!resolvedIds.has(comment.id) ? <Comment.Resolve /> : null}
+            </Comment.Actions>
+          </Comment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const PEOPLE = [
+  {
+    id: "alex",
+    name: "Alex Johnson",
+    handle: "alex",
+    avatarProps: { name: "Alex Johnson" },
+  },
+  {
+    id: "priya",
+    name: "Priya Singh",
+    handle: "priya",
+    avatarProps: { name: "Priya Singh" },
+  },
+  {
+    id: "taylor",
+    name: "Taylor Reed",
+    handle: "taylor",
+    avatarProps: { name: "Taylor Reed" },
+  },
+];
+
+export const ThreadInteractive = () => {
+  const [composerValue, setComposerValue] = React.useState("");
+  const [lastAddedId, setLastAddedId] = React.useState(null);
+  const [resolvedIds, setResolvedIds] = React.useState(new Set());
+  const [animationPhase, setAnimationPhase] = React.useState("idle");
+  const [comments, setComments] = React.useState([
+    {
+      id: "c-1",
+      author: "Alex Johnson",
+      timestamp: "2h ago",
+      body: "Left a few notes on the introduction. Let me know if you want me to draft the edits.",
+      replies: [
+        {
+          id: "c-1-1",
+          author: "Taylor",
+          timestamp: "1h ago",
+          body: "Happy to take the edits.",
+        },
+      ],
+    },
+  ]);
+  const [activeReplyId, setActiveReplyId] = React.useState(null);
+
+  const handleAddComment = (event) => {
+    event.preventDefault();
+    const trimmed = composerValue.trim();
+    if (!trimmed) return;
+
+    const newComment = {
+      id: `c-${Date.now()}`,
+      author: "You",
+      timestamp: "Just now",
+      body: trimmed,
+      replies: [],
+    };
+
+    setComments((prev) => [newComment, ...prev]);
+    setLastAddedId(newComment.id);
+    setComposerValue("");
+  };
+
+  const handleAddReply = (commentId, replyText) => {
+    const trimmed = replyText.trim();
+    if (!trimmed) return;
+
+    const replyId = `${commentId}-${Date.now()}`;
+    setComments((prev) =>
+      prev.map((comment) =>
+        comment.id === commentId
+          ? {
+              ...comment,
+              replies: [
+                ...comment.replies,
+                {
+                  id: replyId,
+                  author: "You",
+                  timestamp: "Just now",
+                  body: trimmed,
+                },
+              ],
+            }
+          : comment
+      )
+    );
+    setLastAddedId(replyId);
+  };
+
+  const handleResolve = (commentId) => {
+    setResolvedIds((prev) => new Set(prev).add(commentId));
+    setActiveReplyId((prev) => (prev === commentId ? null : prev));
+  };
+
+  React.useEffect(() => {
+    if (!lastAddedId) return;
+    setAnimationPhase("enter");
+    const raf = requestAnimationFrame(() => {
+      setAnimationPhase("entered");
+    });
+    const timeout = setTimeout(() => {
+      setAnimationPhase("idle");
+      setLastAddedId(null);
+    }, 320);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(timeout);
+    };
+  }, [lastAddedId]);
+
+  const getAnimationProps = (id) => {
+    if (id !== lastAddedId) return {};
+    return {
+      className: [
+        "transition-all duration-300 ease-out",
+        animationPhase === "enter" && "opacity-0 translate-y-2",
+        animationPhase === "entered" && "opacity-100 translate-y-0",
+      ]
+        .filter(Boolean)
+        .join(" "),
+    };
+  };
+
+  return (
+    <div className="max-w-2xl space-y-16">
+      <CommentComposer
+        value={composerValue}
+        onChange={(event) => setComposerValue(event.target.value)}
+        onSubmit={handleAddComment}
+        onCancel={() => setComposerValue("")}
+        submitLabel="Add comment"
+        avatarProps={{ name: "You" }}
+        rows={4}
+      >
+        <CommentMention peopleList={PEOPLE} />
+      </CommentComposer>
+
+      <div className="space-y-12">
+        {comments.map((comment) => (
+          <Comment
+            key={comment.id}
+            author={comment.author}
+            timestamp={comment.timestamp}
+            body={comment.body}
+            avatarProps={{ name: comment.author }}
+            resolved={resolvedIds.has(comment.id)}
+            {...getAnimationProps(comment.id)}
+            onResolve={() => handleResolve(comment.id)}
+            replies={
+              <div className="space-y-8">
+                {comment.replies.map((reply) => (
+                  <Comment
+                    key={reply.id}
+                    author={reply.author}
+                    timestamp={reply.timestamp}
+                    body={reply.body}
+                    avatarProps={{ name: reply.author }}
+                    {...getAnimationProps(reply.id)}
+                  />
+                ))}
+                {activeReplyId === comment.id && (
+                  <ReplyComposerWithMentions
+                    onSubmit={(value) => {
+                      handleAddReply(comment.id, value);
+                      setActiveReplyId(null);
+                    }}
+                    onCancel={() => setActiveReplyId(null)}
+                  />
+                )}
+              </div>
+            }
+          >
+            <Comment.Actions>
+              {!resolvedIds.has(comment.id) ? (
+                <Comment.Reply
+                  onClick={() =>
+                    setActiveReplyId((prev) =>
+                      prev === comment.id ? null : comment.id
+                    )
+                  }
+                />
+              ) : null}
+              {!resolvedIds.has(comment.id) ? <Comment.Resolve /> : null}
+            </Comment.Actions>
+          </Comment>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const ReplyComposerWithMentions = ({ onSubmit, onCancel }) => {
+  const [value, setValue] = React.useState("");
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onSubmit(trimmed);
+    setValue("");
+  };
+
+  return (
+    <CommentComposer
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      onSubmit={handleSubmit}
+      onCancel={() => {
+        setValue("");
+        onCancel?.();
+      }}
+      submitLabel="Add reply"
+      avatarProps={{ name: "You" }}
+      rows={3}
+    >
+      <CommentMention peopleList={PEOPLE} />
+    </CommentComposer>
+  );
+};
+
+const ReplyComposer = ({ onSubmit }) => {
+  const [value, setValue] = React.useState("");
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const trimmed = value.trim();
+    if (!trimmed) return;
+    onSubmit(trimmed);
+    setValue("");
+  };
+
+  return (
+    <CommentComposer
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      onSubmit={handleSubmit}
+      submitLabel="Add reply"
+      avatarProps={{ name: "You" }}
+      rows={2}
+    />
+  );
+};

package/src/demos/CommentComposer.stories.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { CommentComposer, CommentMention } from "../index";
+
+export default {
+  title: "Content/Comment Composer",
+  component: CommentComposer,
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <div className="max-w-xl">
+      <CommentComposer
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        onSubmit={() => setValue("")}
+        onCancel={() => setValue("")}
+        avatarProps={{ name: "Alex Johnson" }}
+        actions={<span className="text-xs text-fg-subtle">Markdown OK</span>}
+      />
+    </div>
+  );
+};
+
+const PEOPLE = [
+  {
+    id: "alex",
+    name: "Alex Johnson",
+    handle: "alex",
+    avatarProps: { name: "Alex Johnson" },
+  },
+  {
+    id: "priya",
+    name: "Priya Singh",
+    handle: "priya",
+    avatarProps: { name: "Priya Singh" },
+  },
+  {
+    id: "taylor",
+    name: "Taylor Reed",
+    handle: "taylor",
+    avatarProps: { name: "Taylor Reed" },
+  },
+];
+
+export const WithMentions = () => {
+  const [value, setValue] = useState("");
+
+  return (
+    <div className="max-w-xl relative">
+      <CommentComposer
+        value={value}
+        onChange={(event) => setValue(event.target.value)}
+        placeholder="Write a comment..."
+        avatarProps={{ name: "Alex Johnson" }}
+      >
+        <CommentMention peopleList={PEOPLE} />
+      </CommentComposer>
+    </div>
+  );
+};