pixel-react 1.10.15 → 1.10.16

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

@@ -1,230 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Comments from './Comments';
-import '../../assets/styles/_colors.scss';
-import './Comments.scss';
-import { CommentType } from './type';
-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 Comment
-      console.info('Confirmed input value:', inputValue);
-    };
-    const handleAddComment = (
-      newComment: CommentType,
-      parentNode: CommentType | null
-    ) => {
-      console.info('Adding', newComment, parentNode);
-    };
-
-    const handleEditComment = (
-      commentId: string,
-      updatedDescription: string,
-      updatedNode: CommentType | null
-    ) => {
-      console.info('Updated', commentId, updatedDescription, updatedNode);
-    };
-    const handleDelete = (id: string | number) => {
-      console.info('Delete Comment ID:', id);
-    };
-    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: [],
-                },
-              ],
-            },
-          ],
-        }}
-        handleEditComment={handleEditComment}
-        handleAddComment={handleAddComment}
-        handleDeleteComment={handleDelete}
-      />
-    );
-  },
-};
-
-export default meta;

package/src/components/Comment/Comments.tsx

@@ -1,70 +0,0 @@
-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,
-  handleAddComment,
-  handleEditComment,
-  handleDeleteComment,
-  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 updatedNode = findNode(updatedTree, commentId);
-    if (handleAddComment) handleAddComment(item, updatedNode);
-  };
-
-  const handleEditNode: HandleNodeFunction = (commentId, value) => {
-    const updatedTree = editNode(commentData, commentId, value);
-    setCommentsData({ ...updatedTree });
-    const updatedNode = findNode(updatedTree, commentId);
-    if (handleEditComment) handleEditComment(commentId, value, updatedNode);
-  };
-
-  const handleDeleteNode = (commentId: number) => {
-    const updatedTree = deleteNode(commentData, commentId);
-    setCommentsData({ ...updatedTree });
-    if (handleDeleteComment) handleDeleteComment(commentId);
-  };
-  useEffect(() => {
-    onCommentsDataChange(commentData);
-  }, [commentData, onCommentsDataChange]);
-  const findNode = (
-    node: CommentType,
-    id: number | string
-  ): CommentType | null => {
-    if (node.id === id) return node;
-
-    for (const child of node.comments) {
-      const found = findNode(child, id);
-      if (found) return found;
-    }
-
-    return null;
-  };
-  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

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

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

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

package/src/components/Comment/type.ts

@@ -1,36 +0,0 @@
-export interface CommentType {
-  id?: string | number;
-  description?: string;
-  createdBy?: string;
-  modifiedBy?: string;
-  createdByUname?: string;
-  modifiedByUname?: string;
-  createdOn?: string;
-  modifiedOn?: string;
-  name?: string;
-  emailId?: string[];
-  commentParentId?: string;
-  comments: CommentType[];
-}
-
-export type HandleAddComment = (
-  newComment: CommentType,
-  parentCommentId?: string
-) => void;
-
-// Handles editing an existing comment
-export type HandleEditComment = (
-  commentId: string,
-  updatedDescription: string
-) => void;
-
-// Handles deleting a comment
-export type HandleDeleteComment = (commentId: string) => void;
-export type HandleNodeFunction = (commentId: string, value: string) => void;
-export interface CommentsProps {
-  commentsData: any;
-  handleAddComment: any;
-  handleEditComment: any;
-  handleDeleteComment: any;
-  onCommentsDataChange: (data: any) => void;
-}