feat(chat): Add Comment component and implement comment func

src/stories/chat/index.stories.tsx

@@ -1,15 +1,23 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { Editor as TipTapEditor, deleteProps } from "@tiptap/react";
+import { Editor as TipTapEditor } from "@tiptap/react";
 import { Chat, ChatProvider, useChatContext } from ".";
 import { Col } from "../grid/col";
 import { Grid } from "../grid/grid";
 import { Row } from "../grid/row";
 import { ChatArgs } from "./_types";
 import { Button } from "../buttons/button";
-import { useContext } from "react";
+import { Comment } from "./parts/comment";
 
 interface EditorStoryArgs extends ChatArgs {
   children?: any;
+  comments?: {
+    author: {
+      name: string;
+      avatar: string;
+    };
+    message: string;
+    date: string;
+  }[];
 }
 
 const ChatPanel = (args: EditorStoryArgs) => {
@@ -18,7 +26,11 @@ const ChatPanel = (args: EditorStoryArgs) => {
     <Chat {...args}>
       <Chat.Header>Titolone</Chat.Header>
       <Chat.Comments>
-        i commenti della peppina non si vedono la mattina
+        {args.comments?.map((comment, index) => (
+          <Comment author={comment.author.name}>
+            {comment.message}<br/>
+          </Comment>
+        ))}
       </Chat.Comments>
       <Chat.Input
         author={args.author}
@@ -27,6 +39,7 @@ const ChatPanel = (args: EditorStoryArgs) => {
         default text if needed
       </Chat.Input>
       <Chat.Footer>
+        <Button isBasic>Cancel</Button>
         <Button onClick={triggerSave}>Save</Button>
       </Chat.Footer>
     </Chat>
@@ -62,6 +75,24 @@ const defaultArgs: EditorStoryArgs = {
       editor.storage.characterCount.characters()
     );
   },
+  comments: [
+    {
+      message: "Hi, I'm a comment",
+      date: "2021-04-20T11:00:00.000Z",
+      author: {
+        name: "Luca C.",
+        avatar: "LC",
+      },
+    },
+    {
+      message: "Hi, I'm a comment too",
+      date: "2021-04-20T11:02:00.000Z",
+      author: {
+        name: "Marco B.",
+        avatar: "MB",
+      },
+    },
+  ],
 };
 
 export const Default = Template.bind({});

src/stories/chat/index.tsx

@@ -9,6 +9,7 @@ import {
 import { ChatContainer, MessagesContainer } from "./parts/containers";
 import { ChatTitle } from "./parts/header";
 import { CommentBox } from "./parts/commentBox";
+import { Comment } from "./parts/comment";
 
 /**
  * CommentBox is a wrapper around Editor component 
@@ -33,4 +34,4 @@ Chat.Comments = MessagesContainer;
 Chat.Input = CommentBox;
 Chat.Footer = ChatFooter;
 
-export { Chat, ChatContext, ChatProvider, useChatContext };
+export { Chat, ChatContext, ChatProvider, useChatContext, Comment };

src/stories/chat/parts/comment.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from "react";
+import { Title } from "../../title";
+import { Card } from "../../cards";
+import { styled } from "styled-components";
+
+const CommentCard = styled(Card)`
+  padding: ${({ theme }) => `${theme.space.base * 3}px ${theme.space.sm}`};
+`;
+
+export const Comment = ({
+  author,
+  children,
+}: PropsWithChildren<{ author: string }>) => {
+  return (
+    <CommentCard>
+      <Title>{author}</Title>
+      {children}
+    </CommentCard>
+  );
+};

src/stories/chat/parts/commentBox.tsx

@@ -18,13 +18,14 @@ import { KeyboardEvent as ReactKeyboardEvent, PropsWithChildren } from "react";
 import { FloatingMenu } from "../../editor/floatingMenu";
 import { FauxInput } from "@zendeskgarden/react-forms";
 import { Avatar } from "../../avatar";
-import { ChatContextProvider, useChatContext } from "../context/chatContext";
-import {
-  ChatBoxContainer,
-  ChatContainer,
-  MessagesContainer,
-} from "./containers";
-import { ChatTitle } from "./header";
+import { useChatContext } from "../context/chatContext";
+
+const ChatBoxContainer = styled.div`
+  display: flex;
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[200]};
+  margin: ${({ theme }) => `0 -${theme.space.md}`};
+  padding: ${({ theme }) => theme.space.md};
+`;
 
 const EditorContainer = styled(FauxInput)<ChatArgs>`
   margin-left: ${({ theme }) => theme.space.sm};
@@ -121,8 +122,6 @@ export const CommentBox = ({
           <EditorContent editor={ed} onKeyDown={onKeyDown} />
         </EditorContainer>
       </ChatBoxContainer>
-
-      {/* <EditorFooter saveText={footerSaveText} /> */}
     </>
   );
 };

src/stories/chat/parts/containers.tsx

@@ -3,10 +3,15 @@ import { Card } from "../../cards";
 
 export const ChatContainer = styled(Card)`
   padding: ${({ theme }) => theme.space.md};
+  &:hover {
+    box-shadow: none;
+  }
+  cursor: default;
 `;
 
-export const ChatBoxContainer = styled.div`
+export const MessagesContainer = styled.div`
+  padding: ${({ theme }) => `${theme.space.md} 0`};
   display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space.sm};
 `;
-
-export const MessagesContainer = styled.div``;

src/stories/chat/parts/footer.tsx

@@ -1,19 +1,12 @@
 import styled from "styled-components";
-import { Tag } from "../../tags";
-import { isMac } from "../../theme/utils";
-import { SM } from "../../typography/typescale";
-import { deleteProps } from "@tiptap/react";
 import { PropsWithChildren } from "react";
 
 const Footer = styled.div`
   display: flex;
   flex-direction: row;
-  padding: ${({ theme }) => theme.space.sm};
-  background-color: ${({ theme }) => theme.palette.grey[100]};
-`;
-
-const Text = styled(SM)`
-  line-height: 1.7;
+  padding: ${({ theme }) => `${theme.space.sm} 0`};
+  justify-content: flex-end;
+  gap: ${({ theme }) => theme.space.xs};
 `;
 
 export const ChatFooter = ({
@@ -22,11 +15,7 @@ export const ChatFooter = ({
 }: PropsWithChildren<{ saveText?: string }>) => {
   return (
     <>
-      <Footer>
-        <Tag>{isMac() ? "Cmd" : "Ctrl"}+enter</Tag>&nbsp;
-        <Text>{saveText || "to save"}</Text>
-      </Footer>
-      {children}
+      <Footer>{children}</Footer>
     </>
   );
 };