Merge pull request #305 from AppQuality/develop

Minor changes

.storybook/main.js

@@ -6,6 +6,7 @@ const config = {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "@storybook/preset-create-react-app",
+    "@storybook/addon-a11y"
   ],
   framework: {
     name: "@storybook/react-webpack5",

package.json

@@ -73,6 +73,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@rollup/plugin-image": "^3.0.2",
+    "@storybook/addon-a11y": "^7.6.10",
     "@storybook/addon-essentials": "^7.0.9",
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-links": "^7.0.9",

src/stories/chat/_types.tsx

@@ -3,7 +3,7 @@ import { BubbleMenuProps, EditorOptions } from "@tiptap/react";
 
 type validationStatus = "success" | "warning" | "error";
 
-export type SuggestedUser = { id: number; name: string; };
+export type SuggestedUser = { id: number; name: string; email:string };
 
 export interface ChatEditorArgs extends Partial<EditorOptions> {
   placeholderOptions?: Partial<PlaceholderOptions>;
@@ -17,6 +17,9 @@ export interface ChatEditorArgs extends Partial<EditorOptions> {
       italic?: string;
       mention?: string;
     };
+    mention?: {
+      noResults?: string;
+    };
   };
 }
 

src/stories/chat/context/chatContext.tsx

@@ -6,7 +6,7 @@ export type ChatContextType = {
   triggerSave: () => void;
   editor?: Editor;
   setEditor: React.Dispatch<React.SetStateAction<Editor | undefined>>;
-  mentionableUsers: (props: { query: string }) => Promise<SuggestedUser[]>;
+  mentionableUsers: (props: { query: string }) => SuggestedUser[];
 };
 
 export const ChatContext = createContext<ChatContextType | null>(null);
@@ -18,7 +18,7 @@ export const ChatContextProvider = ({
 }: {
   onSave?: (editor: Editor, mentions: SuggestedUser[]) => void;
   children: React.ReactNode;
-  setMentionableUsers: (props: { query: string }) => Promise<SuggestedUser[]>;
+  setMentionableUsers: (props: { query: string }) => SuggestedUser[];
 }) => {
   const [editor, setEditor] = useState<Editor | undefined>();
 
@@ -31,7 +31,8 @@ export const ChatContextProvider = ({
         if (!result.some((r) => r.id === node.attrs.id))
           result.push({
             id: node.attrs.id,
-            name: node.attrs.name
+            name: node.attrs.name,
+            email: node.attrs.email
           });
       }
     });
@@ -44,7 +45,7 @@ export const ChatContextProvider = ({
       editor,
       setEditor,
       triggerSave: () => {
-        if (editor && onSave) {
+        if (editor && onSave && !editor.isEmpty) {
           onSave(editor, getMentions(editor));
           editor.commands.clearContent();
         }

src/stories/chat/index.stories.tsx

@@ -9,6 +9,7 @@ import { Grid } from "../grid/grid";
 import { Row } from "../grid/row";
 import { ChatEditorArgs, SuggestedUser } from "./_types";
 import { Comment } from "./parts/comment";
+import { theme } from "../theme";
 
 const ButtonsContainer = styled.div`
   padding: 0px 16px;
@@ -46,63 +47,72 @@ const ChatPanel = ({ background, ...args }: EditorStoryArgs) => {
       <Chat.Input {...args}>{args.editorText}</Chat.Input>
       <Chat.Footer showShortcut>
         <ButtonsContainer>
-          <Button isBasic onClick={() => editor?.commands.clearContent()}>
+          <Button size="small" style={{fontSize:theme.fontSizes.sm}} isBasic onClick={() => editor?.commands.clearContent()}>
             Cancel
           </Button>
-          <Button onClick={triggerSave}>Save</Button>
+          <Button size="small" style={{fontSize:theme.fontSizes.sm}} isAccent isPrimary onClick={triggerSave}>Save</Button>
         </ButtonsContainer>
       </Chat.Footer>
     </Chat>
   );
 };
 
 const Template: StoryFn<EditorStoryArgs> = ({ children, ...args }) => {
-  const getUsers = async ({ query }: { query: string }) => {
+  const getUsers = ({ query }: { query: string }) => {
     return [
       {
         id: 1,
         name: "John Doe",
         avatar: "https://i.pravatar.cc/150?img=1",
+        email:"test@gmail.com"
       },
       {
         id: 2,
         name: "Jane Doe",
         avatar: "https://i.pravatar.cc/150?img=2",
+        email:"test@gmail.com"
       },
       {
         id: 3,
         name: "John Smith",
         avatar: "https://i.pravatar.cc/150?img=3",
+        email:"test@gmail.com"
       },
       {
         id: 4,
         name: "Jane Smith",
         avatar: "https://i.pravatar.cc/150?img=4",
+        email:"test@gmail.com"
       },
       {
         id: 5,
         name: "Pippo Baudo",
         avatar: "https://i.pravatar.cc/150?img=5",
+        email:"test@gmail.com"
       },
       {
         id: 6,
         name: "Pippo Franco",
         avatar: "https://i.pravatar.cc/150?img=6",
+        email:"test@gmail.com"
       },
       {
         id: 7,
         name: "Pippo Inzaghi",
         avatar: "https://i.pravatar.cc/150?img=7",
+        email:"test@gmail.com"
       },
       {
         id: 8,
         name: "Pippo Civati",
         avatar: "https://i.pravatar.cc/150?img=8",
+        email:"test@gmail.com"
       },
       {
         id: 9,
         name: "Pippo Delbono",
         avatar: "https://i.pravatar.cc/150?img=9",
+        email:"test@gmail.com"
       },
     ].filter((item) => {
       if (!query) return item;
@@ -203,6 +213,9 @@ Menus.args = {
       italic: "Corsivo",
       mention: "Menziona",
     },
+    mention: {
+      noResults: "Nessun risultato. Vai su \"Invita\" per aggiungere nuove persone alla campagna.",
+    },
   },
 };
 

src/stories/chat/parts/bar.tsx

@@ -2,14 +2,19 @@ import styled from "styled-components";
 import { Tooltip } from "../../tooltip";
 import { ChatEditorArgs } from "../_types";
 import { Editor } from "@tiptap/react";
-import { EditorButton } from "./editorButton";
+import { isMac } from "../../theme/utils";
+import { ReactComponent as BoldIcon } from "../../../assets/icons/bold-fill.svg";
+import { ReactComponent as ItalicIcon } from "../../../assets/icons/italic-fill.svg";
+import { ReactComponent as MentionIcon } from "../../../assets/icons/at-fill.svg";
+import { IconButton } from "../../buttons/icon-button";
 
 const MenuContainer = styled.div`
-  padding: ${({ theme }) => theme.space.xxs} 0;
+  padding: ${({ theme }) => theme.space.xs} 0;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
+  gap: ${({ theme }) => theme.space.xxs};
 `;
 
 const VerticalDivider = styled.div`
@@ -28,32 +33,87 @@ const CommentBar = ({
 
   if(!editor) return null;
 
+  const getIcon = (type: "bold" | "italic" | "mention") => {
+    switch (type) {
+      case "bold":
+        return <BoldIcon />;
+      case "italic":
+        return <ItalicIcon />;
+      case "mention":
+        return <MentionIcon />;
+      default:
+        return null;
+    }
+  };
+
+  const handleClick = (type: "bold" | "italic" | "mention") => {
+    switch (type) {
+      case "bold":
+        return editor.chain().focus().toggleBold().run();
+      case "italic":
+        return editor.chain().focus().toggleItalic().run();
+      case "mention":
+        const { from } = editor.state.selection;
+        const char = from > 1 ? " @" : "@";
+        return editor.commands.insertContent(char);
+      default:
+        return;
+    }
+  };
+
   return (
-    <MenuContainer>
+    <MenuContainer id="menu-container">
       <Tooltip
-        content={i18n?.menu?.bold ?? "Bold text"}
+        content={`${i18n?.menu?.bold ?? "Bold text"} ${isMac() ? "Cmd" : "Ctrl"} + B`}
         placement="top"
         type="light"
         size="small"
+        hasArrow={false}
       >
-        <EditorButton editor={editor} type="bold" />
+        <IconButton
+          size={"small"}
+          isBasic={!editor.isActive("bold")}
+          isPrimary={editor.isActive("bold")}
+          isPill={false}
+          onClick={() => handleClick("bold")}
+        >
+          {getIcon("bold")}
+        </IconButton>
       </Tooltip>
       <Tooltip
-        content={i18n?.menu?.italic ?? "Italic text"}
+        content={`${i18n?.menu?.italic ?? "Italic text"} ${isMac() ? "Cmd" : "Ctrl"} + I`}
         placement="top"
         type="light"
         size="small"
+        hasArrow={false}
       >
-        <EditorButton editor={editor} type="italic" />
+        <IconButton
+          size={"small"}
+          isBasic={!editor.isActive("italic")}
+          isPrimary={editor.isActive("italic")}
+          isPill={false}
+          onClick={() => handleClick("italic")}
+        >
+          {getIcon("italic")}
+        </IconButton>
       </Tooltip>
       <VerticalDivider />
       <Tooltip
         content={i18n?.menu?.mention ?? "Add a mention"}
         placement="top"
         type="light"
         size="small"
+        hasArrow={false}
       >
-        <EditorButton editor={editor} type="mention" />
+        <IconButton
+          size={"small"}
+          isBasic={!editor.isActive("mention")}
+          isPrimary={editor.isActive("mention")}
+          isPill={false}
+          onClick={() => handleClick("mention")}
+        >
+          {getIcon("mention")}
+        </IconButton>
       </Tooltip>
     </MenuContainer>
   );

src/stories/chat/parts/commentBox.tsx

@@ -58,8 +58,8 @@ export const CommentBox = ({
     ...props,
   });
 
-  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
-    if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => { 
+    if ((event.ctrlKey || event.metaKey) && event.key === "Enter" ) {
       triggerSave();
       editor?.commands.clearContent();
     }

src/stories/chat/parts/extensions.tsx

@@ -37,7 +37,7 @@ export const editorExtensions = ({
   placeholderOptions,
   mentionableUsers,
 }: {
-  mentionableUsers: (props: { query: string }) => Promise<SuggestedUser[]>;
+  mentionableUsers: (props: { query: string }) => SuggestedUser[];
   placeholderOptions?: Partial<PlaceholderOptions>;
 }) => {
   return [

src/stories/chat/parts/footer.tsx

@@ -5,7 +5,7 @@ import { SendShortcut } from "./sendShortcut";
 const Footer = styled.div<{ showShortcut?: boolean }>`
   display: flex;
   flex-direction: row;
-  padding: ${({ theme }) => `${theme.space.sm} 0px`};
+  padding: ${({ theme }) => `${theme.space.xs} 0px ${theme.space.sm}`};
   align-items: center;
   margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
   justify-content: ${({ showShortcut }) =>