Merge pull request #284 from AppQuality/develop

Add refactored chat component

src/stories/chat/_types.tsx

@@ -1,18 +1,23 @@
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
-import { BubbleMenuProps, Editor, EditorOptions } from "@tiptap/react";
+import { BubbleMenuProps, EditorOptions } from "@tiptap/react";
 
 type validationStatus = "success" | "warning" | "error";
 
-export interface ChatArgs extends Partial<EditorOptions> {
+export interface ChatEditorArgs extends Partial<EditorOptions> {
   placeholderOptions?: Partial<PlaceholderOptions>;
   hasInlineMenu?: boolean;
   bubbleOptions?: any;
-  author: {
-    avatar: string;
-    avatarType?: "icon" | "image" | "text" /* default: text */;
-  };
-  onSave?: (editor: Editor) => void;
-  triggerSave?: () => void;
+  author: Author;
+}
+
+export interface Author {
+  avatar: string;
+  name?: string;
+  avatarType?: "icon" | "image" | "text" /* default: text */;
+}
+
+export interface ChatArgs {
+  chatBkg?: string;
 }
 
 export interface EditorHeaderArgs {

src/stories/chat/index.stories.tsx

@@ -4,11 +4,12 @@ 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 { ChatArgs, ChatEditorArgs } from "./_types";
 import { Button } from "../buttons/button";
 import { Comment } from "./parts/comment";
+import { PlaceholderOptions } from "@tiptap/extension-placeholder";
 
-interface EditorStoryArgs extends ChatArgs {
+interface EditorStoryArgs extends ChatEditorArgs {
   children?: any;
   comments?: {
     author: {
@@ -18,26 +19,25 @@ interface EditorStoryArgs extends ChatArgs {
     message: string;
     date: string;
   }[];
+  editorText?: string;
+  background?: string;
+  onSave: (editor: TipTapEditor) => void;
+  placeholderOptions?: Partial<PlaceholderOptions>;
 }
 
-const ChatPanel = (args: EditorStoryArgs) => {
+const ChatPanel = ({ background, ...args }: EditorStoryArgs) => {
   const { triggerSave } = useChatContext();
   return (
-    <Chat {...args}>
+    <Chat>
       <Chat.Header>Titolone</Chat.Header>
-      <Chat.Comments>
+      <Chat.Comments chatBkg={background}>
         {args.comments?.map((comment, index) => (
-          <Comment author={comment.author.name}>
-            {comment.message}<br/>
+          <Comment {...comment}>
+            <>altre cose</>
           </Comment>
         ))}
       </Chat.Comments>
-      <Chat.Input
-        author={args.author}
-        onSave={(editor) => console.log(editor.getHTML())}
-      >
-        default text if needed
-      </Chat.Input>
+      <Chat.Input {...args}>{args.editorText}</Chat.Input>
       <Chat.Footer>
         <Button isBasic>Cancel</Button>
         <Button onClick={triggerSave}>Save</Button>
@@ -85,7 +85,7 @@ const defaultArgs: EditorStoryArgs = {
       },
     },
     {
-      message: "Hi, I'm a comment too",
+      message: "Hi, I'm a comment too but with <strong>bold</strong>",
       date: "2021-04-20T11:02:00.000Z",
       author: {
         name: "Marco B.",
@@ -108,43 +108,27 @@ Default.parameters = {
 export const Placeholder = Template.bind({});
 Placeholder.args = {
   ...defaultArgs,
-  children: `<h3>Embrace Markdown</h3>
-  <p>
-    Markdown shortcuts make it easy to format the text while typing.
-  </p>
-  <p>
-    To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
-  </p>
-  <h3>Smart Editor</h3>
-  <p>
-   Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code or <code>~~tildes~~</code> to strike text.
-  </p>
-  <p>
-    Try typing <code>(c)</code> to see how it’s converted to a proper © character. You can also try <code>-></code>, <code>>></code>, <code>1/2</code>, <code>!=</code>, or <code>--</code>.
-  </p>`,
   placeholderOptions: {
     placeholder: ({ node }) => {
       if (node.type.name === "heading") {
         return "What do you want to do?";
       }
 
-      return "Can you add some further context?";
+      return "What do you want to say?";
     },
   },
 };
 
 export const BubbleMenu = Template.bind({});
 BubbleMenu.args = {
   ...defaultArgs,
-  children: `<p>Hey, try to select some text here. There will popup a menu for selecting some inline styles.<br><strong>Remember:</strong> you have full control about content and styling of this menu.</p>`,
   hasInlineMenu: true,
 };
 
-export const ReadOnly = Template.bind({});
-ReadOnly.args = {
+export const CustomBackground = Template.bind({});
+CustomBackground.args = {
   ...defaultArgs,
-  children: `<p>Hey, try to select some text here. There will popup a menu for selecting some inline styles.<br><strong>Remember:</strong> you have full control about content and styling of this menu.</p>`,
-  editable: false,
+  background: "#BE3455",
 };
 
 export default {

src/stories/chat/index.tsx

@@ -12,7 +12,7 @@ import { CommentBox } from "./parts/commentBox";
 import { Comment } from "./parts/comment";
 
 /**
- * CommentBox is a wrapper around Editor component 
+ * Chat is a wrapper around Editor component 
  * <br>
  * It's a rich text WYSIWYG editors.
  * <hr>
@@ -24,9 +24,7 @@ import { Comment } from "./parts/comment";
     - Simple text input, use textarea instead.
  */
 const Chat = (props: PropsWithChildren<ChatArgs>) => (
-  // <ChatProvider onSave={onSave}>
   <ChatContainer>{props.children}</ChatContainer>
-  // </ChatProvider>
 );
 
 Chat.Header = ChatTitle;

src/stories/chat/parts/comment.tsx

@@ -2,19 +2,61 @@ import { PropsWithChildren } from "react";
 import { Title } from "../../title";
 import { Card } from "../../cards";
 import { styled } from "styled-components";
+import { Editor } from "../../editor";
+import { Author } from "../_types";
+import { Avatar } from "../../avatar";
 
 const CommentCard = styled(Card)`
   padding: ${({ theme }) => `${theme.space.base * 3}px ${theme.space.sm}`};
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+  &:hover {
+    box-shadow: none;
+  }
+  border-radius: 8px;
+`;
+
+const ReadOnly = styled.div`
+  > div {
+    background-color: ${({ theme }) => theme.palette.grey[100]};
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+    padding: 0;
+  }
+`;
+
+const AuthorContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.space.sm};
+`;
+
+const Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: ${({ theme }) => theme.space.xs};
 `;
 
 export const Comment = ({
   author,
+  message,
   children,
-}: PropsWithChildren<{ author: string }>) => {
+}: PropsWithChildren<{ author: Author; message: string }>) => {
   return (
     <CommentCard>
-      <Title>{author}</Title>
-      {children}
+      <AuthorContainer>
+        <Avatar avatarType={author.avatarType ?? "text"}>
+          {author.avatar}
+        </Avatar>
+        <div>
+          <Title>{author.name ?? "User"}</Title>
+          <ReadOnly>
+            <Editor editable={false}>{message}</Editor>
+          </ReadOnly>
+        </div>
+      </AuthorContainer>
+      <Footer>{children}</Footer>
     </CommentCard>
   );
 };

src/stories/chat/parts/commentBox.tsx

@@ -13,7 +13,7 @@ import Placeholder from "@tiptap/extension-placeholder";
 import CharacterCount from "@tiptap/extension-character-count";
 
 import { editorStyle } from "../../shared/editorStyle";
-import { ChatArgs } from "../_types";
+import { ChatArgs, ChatEditorArgs } from "../_types";
 import { KeyboardEvent as ReactKeyboardEvent, PropsWithChildren } from "react";
 import { FloatingMenu } from "../../editor/floatingMenu";
 import { FauxInput } from "@zendeskgarden/react-forms";
@@ -54,10 +54,9 @@ const EditorContainer = styled(FauxInput)<ChatArgs>`
     - Simple text input, use textarea instead.
  */
 export const CommentBox = ({
-  onSave,
   placeholderOptions,
   ...props
-}: PropsWithChildren<ChatArgs>) => {
+}: PropsWithChildren<ChatEditorArgs>) => {
   const { children, hasInlineMenu, bubbleOptions, author } = props;
 
   const { setEditor, triggerSave } = useChatContext();

src/stories/chat/parts/containers.tsx

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { Card } from "../../cards";
+import { ChatArgs } from "../_types";
 
 export const ChatContainer = styled(Card)`
   padding: ${({ theme }) => theme.space.md};
@@ -9,9 +10,11 @@ export const ChatContainer = styled(Card)`
   cursor: default;
 `;
 
-export const MessagesContainer = styled.div`
-  padding: ${({ theme }) => `${theme.space.md} 0`};
+export const MessagesContainer = styled.div<ChatArgs>`
+  padding: ${({ theme }) => theme.space.md};
+  margin: ${({ theme }) => `0 -${theme.space.md}`};
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.space.sm};
+  background: ${({ chatBkg }) => chatBkg ?? `#fff`};
 `;

yarn.lock

@@ -5473,9 +5473,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
-  version "1.0.30001486"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz#56a08885228edf62cbe1ac8980f2b5dae159997e"
-  integrity sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==
+  version "1.0.30001572"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz"
+  integrity sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==
 
 case-anything@^2.1.10:
   version "2.1.11"