pixel-react 1.6.5 → 1.6.7

package/src/components/Comment/Comments.scss

@@ -0,0 +1,166 @@
+@use '../../assets/styles/fonts';
+.ff-comments-container {
+  display: flex;
+  flex-direction: column;
+
+  .comment-wrapper-one {
+    position: relative;
+    padding-left: 20px;
+  }
+  .comment-wrapper {
+    position: relative;
+    margin-bottom: 10px;
+  }
+
+  .commentContainer {
+    margin-bottom: 10px;
+    width: 75vw;
+    max-width: fit-content;
+    border-radius: 5px;
+  }
+
+  .commentContainer__avatar {
+    background-color: var(--ff-comment-input-border-color);
+    color: var(--ff-comment-avatar-text-color);
+    font-weight: bold;
+    border-radius: 4px;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+    position: absolute;
+    top: -5px;
+    left: -40px;
+    z-index: 1;
+    @extend .fontSm;
+  }
+
+  .comment-actions {
+    display: flex;
+  }
+  .first-comment {
+    min-width: 632px;
+    min-height: 74px;
+    border-radius: 8px;
+    border: 1px solid var(--ff-comment-border-color);
+    @extend .fontSm;
+  }
+  .first-comment-heading {
+    margin: 5px;
+  }
+  .input-wrapper {
+    position: relative;
+    display: flex;
+    padding-top: 6px;
+    padding-bottom: 10px;
+  }
+
+  .inputContainer__input {
+    padding: 5px;
+    border: 1px solid var(--ff-comment-border-color);
+    border-radius: 4px;
+    resize: none;
+    margin: 0 10px;
+    outline: none;
+    &:focus,
+    &:focus-visible {
+      outline: 1px solid var(--ff-comment-input-border-color);
+    }
+  }
+  .inputEditContainer__input {
+    padding: 5px;
+    border: 1px solid var(--ff-comment-border-color);
+    border-radius: 4px;
+    width: 100%;
+    outline: none;
+    &:focus,
+    &:focus-visible {
+      outline: 1px solid var(--ff-comment-input-border-color);
+    }
+  }
+
+  .reply {
+    margin-right: 5px;
+    cursor: pointer;
+  }
+  .reply-comment {
+    right: 2%;
+    bottom: 15%;
+    position: absolute;
+    background: var(--ff-comment-avatar-text-color);
+    height: 20px;
+    width: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+  }
+  .child-comments {
+    position: relative;
+    margin-left: 15px;
+    margin-top: 10px;
+    padding-left: 20px;
+    border-left: 1px solid var(--ff-comment-border-color);
+    border-bottom-left-radius: 15px;
+    padding-top: 10px;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -2px;
+      width: 2px;
+      height: 15px;
+      background-color: var(--ff-comment-border-color);
+      border-radius: 15px 0 0 15px;
+    }
+  }
+  .reply-text {
+    display: flex;
+  }
+  .ff-message-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .ff-message {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+  .ff-message-name {
+    @extend .fontSm;
+  }
+  .ff-message-time {
+    @extend .fontXs;
+  }
+  .editable-text {
+    word-wrap: break-word;
+    color: var(--ff-comment-text-color);
+    &:focus,
+    &:focus-visible {
+      outline: 1px solid var(--ff-comment-input-border-color);
+    }
+    @extend .fontSm;
+  }
+  .adding-text,
+  .editable-text {
+    width: 95%;
+  }
+
+  .first_input {
+    width: 100%;
+    &:focus {
+      outline: none;
+      border-color: var(--ff-comment-input-border-color);
+    }
+    &::-webkit-scrollbar {
+      width: 3px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--ff-comment-text-color);
+      border-radius: 4px;
+    }
+  }
+}

package/src/components/Comment/Comments.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Comments from './Comments';
+import '../../assets/styles/_colors.scss';
+import './Comments.scss';
+import React from 'react';
+
+const meta: Meta<typeof Comments> = {
+  title: 'Components/Comments',
+  component: Comments,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Comments>;
+export const basicCommentWithOutData: Story = {
+  render: () => {
+    const handleCommentsDataChange = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.info('Confirmed input value:', inputValue);
+    };
+    return (
+      <Comments
+        onCommentsDataChange={handleCommentsDataChange}
+        commentsData={{
+          comments: [],
+        }}
+        handleAddComment={() => {}}
+        handleEditComment={() => {}}
+        handleDeleteComment={() => {}}
+      />
+    );
+  },
+};
+
+export const basicCommentWithData: Story = {
+  render: () => {
+    const handleCommentsDataChange = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.info('Confirmed input value:', inputValue);
+    };
+    return (
+      <Comments
+        onCommentsDataChange={handleCommentsDataChange}
+        commentsData={{
+          createdBy: 'USR29890',
+          modifiedBy: 'USR29890',
+          createdByUname: 'Asha',
+          modifiedByUname: 'Asha',
+          createdOn: '13 Nov 2024 06:05 PM',
+          modifiedOn: '13 Nov 2024 06:05 PM',
+          id: 1,
+          name: 'Asha',
+          emailId: [],
+          description: 'Comment 1',
+          commentParentId: '',
+          comments: [
+            {
+              createdBy: 'USR29890',
+              modifiedBy: 'USR29890',
+              createdByUname: 'Asha',
+              modifiedByUname: 'Asha',
+              createdOn: '13 Nov 2024 06:08 PM',
+              modifiedOn: '13 Nov 2024 06:08 PM',
+              id: 2,
+              name: 'Asha',
+              emailId: [],
+              description: 'Reply 1',
+              commentParentId: 'b995a9a0-a88e-4950-bb7e-1e2e820eca59',
+              comments: [
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:08 PM',
+                  modifiedOn: '13 Nov 2024 06:08 PM',
+                  id: 3,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Sub Reply 1.1',
+                  commentParentId: '5142f486-bde3-4fca-9a1c-541cdad7422c',
+                  comments: [],
+                },
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:09 PM',
+                  modifiedOn: '13 Nov 2024 06:09 PM',
+                  id: 4,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Sub Reply 1.2',
+                  commentParentId: '5142f486-bde3-4fca-9a1c-541cdad7422c',
+                  comments: [],
+                },
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:12 PM',
+                  modifiedOn: '13 Nov 2024 06:12 PM',
+                  id: 5,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 1.3',
+                  commentParentId: '5142f486-bde3-4fca-9a1c-541cdad7422c',
+                  comments: [],
+                },
+              ],
+            },
+            {
+              createdBy: 'USR29890',
+              modifiedBy: 'USR29890',
+              createdByUname: 'Asha',
+              modifiedByUname: 'Asha',
+              createdOn: '13 Nov 2024 06:09 PM',
+              modifiedOn: '13 Nov 2024 06:09 PM',
+              id: 6,
+              name: 'Asha',
+              emailId: [],
+              description: 'Reply 2',
+              commentParentId: 'b995a9a0-a88e-4950-bb7e-1e2e820eca59',
+              comments: [
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:10 PM',
+                  modifiedOn: '13 Nov 2024 06:10 PM',
+                  id: 7,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 2.1',
+                  commentParentId: '90fddbe9-f661-4dad-9a10-79160b5b8c5e',
+                  comments: [],
+                },
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:10 PM',
+                  modifiedOn: '13 Nov 2024 06:10 PM',
+                  id: 8,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 2.2',
+                  commentParentId: '90fddbe9-f661-4dad-9a10-79160b5b8c5e',
+                  comments: [],
+                },
+              ],
+            },
+            {
+              createdBy: 'USR29890',
+              modifiedBy: 'USR29890',
+              createdByUname: 'Asha',
+              modifiedByUname: 'Asha',
+              createdOn: '13 Nov 2024 06:11 PM',
+              modifiedOn: '13 Nov 2024 06:11 PM',
+              id: 9,
+              name: 'Asha',
+              emailId: [],
+              description: 'Reply 3',
+              commentParentId: 'b995a9a0-a88e-4950-bb7e-1e2e820eca59',
+              comments: [
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:11 PM',
+                  modifiedOn: '13 Nov 2024 06:11 PM',
+                  id: 10,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 3.1',
+                  commentParentId: '12c3d310-33a3-458a-9b76-e295f067fd44',
+                  comments: [],
+                },
+                {
+                  createdBy: 'USR29890',
+                  modifiedBy: 'USR29890',
+                  createdByUname: 'Asha',
+                  modifiedByUname: 'Asha',
+                  createdOn: '13 Nov 2024 06:11 PM',
+                  modifiedOn: '13 Nov 2024 06:11 PM',
+                  id: 11,
+                  name: 'Asha',
+                  emailId: [],
+                  description: 'Reply 3.2',
+                  commentParentId: '12c3d310-33a3-458a-9b76-e295f067fd44',
+                  comments: [],
+                },
+              ],
+            },
+          ],
+        }}
+        handleAddComment={() => {}}
+        handleEditComment={() => {}}
+        handleDeleteComment={() => {}}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/Comment/Comments.tsx

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import Comment from './comment/Comment';
+import useNode from './comment/useNode';
+import './Comments.scss';
+import { CommentType, HandleNodeFunction, CommentsProps } from './type';
+
+const initialComments: CommentType = {
+  comments: [],
+};
+
+const Comments = ({
+  commentsData,
+
+  onCommentsDataChange,
+}: CommentsProps) => {
+  const [commentData, setCommentsData] = useState(
+    commentsData ?? initialComments
+  );
+  const { insertNode, editNode, deleteNode } = useNode();
+
+  const handleInsertNode: HandleNodeFunction = (commentId, item) => {
+    const updatedTree = insertNode(commentData, commentId, item);
+    setCommentsData({ ...updatedTree });
+  };
+
+  const handleEditNode: HandleNodeFunction = (commentId, value) => {
+    const updatedTree = editNode(commentData, commentId, value);
+    setCommentsData({ ...updatedTree });
+  };
+
+  const handleDeleteNode = (commentId: number) => {
+    const updatedTree = deleteNode(commentData, commentId);
+    setCommentsData({ ...updatedTree });
+  };
+  useEffect(() => {
+    onCommentsDataChange(commentData);
+  }, [commentData, onCommentsDataChange]);
+
+  return (
+    <div className="ff-comments-container">
+      <Comment
+        handleInsertNode={handleInsertNode}
+        handleEditNode={handleEditNode}
+        handleDeleteNode={handleDeleteNode}
+        comment={commentData}
+      />
+    </div>
+  );
+};
+
+export default Comments;

package/src/components/Comment/comment/Comment.tsx

@@ -0,0 +1,206 @@
+import { CommentType } from '../type';
+import { useState, useEffect } from 'react';
+import '../Comments.scss';
+import Icon from '../../Icon';
+
+interface CommentProps {
+  handleInsertNode: any;
+  handleEditNode: any;
+  handleDeleteNode: (commentId: any) => any;
+  comment: CommentType;
+  depth?: number;
+}
+
+const Comment = ({
+  handleInsertNode,
+  handleEditNode,
+  handleDeleteNode,
+  comment,
+  depth = 0,
+}: CommentProps) => {
+  const [input, setInput] = useState('');
+  const [editMode, setEditMode] = useState(false);
+  const [showInput, setShowInput] = useState(false);
+  const [expand, setExpand] = useState(true);
+
+  const { modifiedByUname, createdByUname, modifiedOn, createdOn } =
+    comment || {};
+  const randomPastTime = modifiedOn ?? createdOn ?? new Date().toLocaleString();
+  const firstName = modifiedByUname ?? createdByUname ?? 'Anonymous';
+
+  const isDepthLimitReached = depth > 2;
+  const avatar = firstName ? firstName.charAt(0).toUpperCase() : 'A';
+
+  useEffect(() => {
+    if (editMode && comment.description) {
+      setInput(comment.description);
+    }
+  }, [editMode, comment.description]);
+
+  const handleNewComment = () => {
+    setExpand(!expand);
+    setShowInput(true);
+  };
+
+  const onAddComment = () => {
+    if (input.length === 0) return;
+    if (editMode) {
+      handleEditNode(comment.id, input);
+    } else {
+      setExpand(true);
+      handleInsertNode(comment.id, input);
+      setShowInput(false);
+      setInput('');
+    }
+    if (editMode) setEditMode(false);
+  };
+  return (
+    <div className="commentsContainer">
+      <div className={depth === 0 ? 'comment-wrapper-one' : 'comment-wrapper'}>
+        <div className={depth === 0 ? 'inputContainer' : 'commentContainer'}>
+          {depth === 0 ? (
+            <div className="first-comment">
+              <h5 className="first-comment-heading">Comments</h5>
+              <div className="input-wrapper">
+                <textarea
+                  className="inputContainer__input first_input"
+                  rows={3}
+                  autoFocus
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder={'Add a comment'}
+                />
+                <span className="reply comment reply-comment">
+                  <Icon
+                    name="send_to_steps"
+                    onClick={onAddComment}
+                    color="71347B"
+                  />
+                </span>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="commentContainer__avatar">{avatar}</div>
+              <div className="ff-message-container">
+                <div className="ff-message">
+                  <div className="ff-message-name" style={{ fontWeight: 700 }}>
+                    {firstName}
+                  </div>
+                  <div className="ff-message-time">{randomPastTime}</div>
+                </div>
+
+                <div className="editable-text">{comment.description}</div>
+              </div>
+            </>
+          )}
+        </div>
+
+        {editMode && (
+          <div className="inputContainer">
+            <input
+              type="text"
+              className="editable-text inputContainer__input"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              autoFocus
+            />
+          </div>
+        )}
+        {depth > 0 && (
+          <div className="comment-actions">
+            {editMode ? (
+              <>
+                <div
+                  className="reply"
+                  onClick={() => {
+                    onAddComment();
+                    setEditMode(false);
+                  }}
+                >
+                  <Icon name="save_as_step" width={12} height={12} />
+                </div>
+                <div
+                  className="reply"
+                  onClick={() => {
+                    setEditMode(false);
+                  }}
+                >
+                  <Icon name="close" color="#A91224" width={10} height={10} />
+                </div>
+              </>
+            ) : (
+              <>
+                {!isDepthLimitReached && (
+                  <div className="reply" onClick={handleNewComment}>
+                    {expand ? (
+                      <Icon name="window_minimize" width={12} height={12} />
+                    ) : (
+                      <>
+                        <Icon name="plus_icon" width={12} height={12} />
+                        <Icon name="add_page" width={12} height={12} />
+                      </>
+                    )}
+                  </div>
+                )}
+                <div className="reply" onClick={() => setEditMode(true)}>
+                  <Icon name="edit" width={12} height={12} />
+                </div>
+                <div
+                  className="reply"
+                  onClick={() => handleDeleteNode(comment.id)}
+                >
+                  <Icon name="delete" color="#A91224" width={12} height={12} />
+                </div>
+              </>
+            )}
+          </div>
+        )}
+        <div
+          className={comment?.comments?.length > 0 ? 'child-comments' : ''}
+          style={{
+            display: expand ? 'block' : 'none',
+            paddingLeft: 25,
+          }}
+        >
+          {showInput && (
+            <div className="inputContainer">
+              <input
+                type="text"
+                className="inputContainer__input adding-text"
+                autoFocus
+                onChange={(e) => setInput(e.target.value)}
+              />
+              <div className="reply-text">
+                <div className="reply" onClick={onAddComment}>
+                  <Icon name="send_to_steps" width={12} height={12} />
+                </div>
+                <div
+                  className="reply"
+                  onClick={() => {
+                    setShowInput(false);
+                    if (!comment?.comments?.length) setExpand(false);
+                  }}
+                >
+                  <Icon name="close" width={10} height={10} color="#A91224" />
+                </div>
+              </div>
+            </div>
+          )}
+          {comment?.comments?.map((cmnt) => (
+            <Comment
+              key={cmnt.id}
+              handleInsertNode={handleInsertNode}
+              handleEditNode={handleEditNode}
+              handleDeleteNode={handleDeleteNode}
+              comment={cmnt}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Comment;

package/src/components/Comment/comment/useNode.ts

@@ -0,0 +1,51 @@
+import { CommentType } from '../type';
+
+const useNode = () => {
+  const insertNode = (
+    tree: CommentType,
+    commentId: number | string,
+    item: string
+  ): CommentType => {
+    if (tree.id === commentId) {
+      tree.comments.push({
+        id: Date.now().toString(),
+        description: item,
+        comments: [],
+      });
+      return tree;
+    }
+
+    tree.comments = tree.comments.map((child) =>
+      insertNode(child, commentId, item)
+    );
+    return tree;
+  };
+
+  const editNode = (
+    tree: CommentType,
+    commentId: number | string,
+    value: string
+  ): CommentType => {
+    if (tree.id === commentId) {
+      tree.description = value;
+      return tree;
+    }
+
+    tree.comments = tree.comments.map((child) =>
+      editNode(child, commentId, value)
+    );
+    return tree;
+  };
+
+  const deleteNode = (tree: CommentType, commentId: number): CommentType => {
+    if (!tree) return tree;
+    tree.comments = tree.comments
+      .filter((child) => child.id !== commentId)
+      .map((child) => deleteNode(child, commentId));
+    return tree;
+  };
+
+  return { insertNode, editNode, deleteNode };
+};
+
+export default useNode;

package/src/components/Comment/index.ts

@@ -0,0 +1 @@
+export { default } from './Comments';