@edux-design/comments 0.1.4 → 0.2.0

package/src/demos/Comment.stories.jsx

@@ -1,593 +0,0 @@
-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.Resolve />
-        <Comment.Edit />
-      </Comment.Actions>
-    </Comment>
-
-    <Comment
-      author="Jordan Lee"
-      timestamp="Yesterday"
-      body="Resolved and ready to re-open if needed."
-      avatarProps={{ name: "Jordan Lee" }}
-      resolved
-    >
-      <Comment.Actions>
-        <Comment.Resolve />
-        <Comment.Resolve label="Re-open thread" />
-      </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 [recentlyResolvedId, setRecentlyResolvedId] = React.useState(null);
-  const [recentlyReopenedId, setRecentlyReopenedId] = 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) => {
-      const next = new Set(prev);
-      if (next.has(commentId)) {
-        next.delete(commentId);
-        setRecentlyReopenedId(commentId);
-      } else {
-        next.add(commentId);
-        setRecentlyResolvedId(commentId);
-      }
-      return next;
-    });
-    setActiveReplyId((prev) => (prev === commentId ? null : prev));
-    setLastAddedId(commentId);
-  };
-
-  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]);
-
-  React.useEffect(() => {
-    if (!recentlyResolvedId) return;
-    const timeout = setTimeout(() => {
-      setRecentlyResolvedId(null);
-    }, 320);
-    return () => clearTimeout(timeout);
-  }, [recentlyResolvedId]);
-
-  React.useEffect(() => {
-    if (!recentlyReopenedId) return;
-    const timeout = setTimeout(() => {
-      setRecentlyReopenedId(null);
-    }, 320);
-    return () => clearTimeout(timeout);
-  }, [recentlyReopenedId]);
-
-  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",
-        id === recentlyResolvedId && "ring-1 ring-border-success-base",
-        id === recentlyReopenedId && "ring-1 ring-border-info-base",
-      ]
-        .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}
-              <Comment.Resolve />
-            </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 [editingId, setEditingId] = React.useState(null);
-  const [editingValue, setEditingValue] = React.useState("");
-  const [recentlyResolvedId, setRecentlyResolvedId] = React.useState(null);
-  const [recentlyReopenedId, setRecentlyReopenedId] = 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) => {
-      const next = new Set(prev);
-      if (next.has(commentId)) {
-        next.delete(commentId);
-        setRecentlyReopenedId(commentId);
-      } else {
-        next.add(commentId);
-        setRecentlyResolvedId(commentId);
-      }
-      return next;
-    });
-    setActiveReplyId((prev) => (prev === commentId ? null : prev));
-    setLastAddedId(commentId);
-  };
-
-  const handleStartEdit = (comment) => {
-    setEditingId(comment.id);
-    setEditingValue(comment.body);
-    setActiveReplyId((prev) => (prev === comment.id ? null : prev));
-  };
-
-  const handleSaveEdit = (commentId) => {
-    const trimmed = editingValue.trim();
-    if (!trimmed) return;
-    setComments((prev) =>
-      prev.map((comment) =>
-        comment.id === commentId ? { ...comment, body: trimmed } : comment
-      )
-    );
-    setEditingId(null);
-    setEditingValue("");
-  };
-
-  const handleCancelEdit = () => {
-    setEditingId(null);
-    setEditingValue("");
-  };
-
-  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]);
-
-  React.useEffect(() => {
-    if (!recentlyResolvedId) return;
-    const timeout = setTimeout(() => {
-      setRecentlyResolvedId(null);
-    }, 320);
-    return () => clearTimeout(timeout);
-  }, [recentlyResolvedId]);
-
-  React.useEffect(() => {
-    if (!recentlyReopenedId) return;
-    const timeout = setTimeout(() => {
-      setRecentlyReopenedId(null);
-    }, 320);
-    return () => clearTimeout(timeout);
-  }, [recentlyReopenedId]);
-
-  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",
-        id === recentlyResolvedId && "ring-1 ring-border-success-base",
-        id === recentlyReopenedId && "ring-1 ring-border-info-base",
-      ]
-        .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={
-              editingId === comment.id ? (
-                <CommentComposer
-                  value={editingValue}
-                  onChange={(event) => setEditingValue(event.target.value)}
-                  onSubmit={(event) => {
-                    event.preventDefault();
-                    handleSaveEdit(comment.id);
-                  }}
-                  onCancel={handleCancelEdit}
-                  submitLabel="Save"
-                  cancelLabel="Cancel"
-                  rows={3}
-                />
-              ) : (
-                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.Edit onClick={() => handleStartEdit(comment)} />
-              ) : null}
-              <Comment.Resolve />
-            </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

@@ -1,66 +0,0 @@
-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("");
-  const [query, setQuery] = 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} onQueryChange={setQuery} />
-      </CommentComposer>
-      <div className="mt-8 text-xs text-fg-subtle">
-        Mention query: <span className="font-semibold">{query || "—"}</span>
-      </div>
-    </div>
-  );
-};