From 77aa9c4112d12342e4fb96ee0620d17fd4f2310d Mon Sep 17 00:00:00 2001
From: Marco Bonomo <marco.bonomo@unguess.io>
Date: Tue, 23 Jan 2024 16:41:47 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(bar.tsx):=20Replace=20E?=
 =?UTF-8?q?ditorButton=20component=20with=20IconButton=20component=20?=
 =?UTF-8?q?=F0=9F=94=A5=20chore(editorButton.tsx):=20Remove=20unused=20Edi?=
 =?UTF-8?q?torButton=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stories/chat/parts/bar.tsx          | 68 +++++++++++++++++++++++--
 src/stories/chat/parts/editorButton.tsx | 51 -------------------
 2 files changed, 63 insertions(+), 56 deletions(-)
 delete mode 100644 src/stories/chat/parts/editorButton.tsx

diff --git a/src/stories/chat/parts/bar.tsx b/src/stories/chat/parts/bar.tsx
index a2063004..04317479 100644
--- a/src/stories/chat/parts/bar.tsx
+++ b/src/stories/chat/parts/bar.tsx
@@ -2,8 +2,11 @@ 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.xs} 0;
@@ -30,23 +33,69 @@ 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"} ${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"} ${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
@@ -54,8 +103,17 @@ const CommentBar = ({
         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>
   );
diff --git a/src/stories/chat/parts/editorButton.tsx b/src/stories/chat/parts/editorButton.tsx
deleted file mode 100644
index 7b84e905..00000000
--- a/src/stories/chat/parts/editorButton.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Editor } from "@tiptap/react";
-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";
-
-export const EditorButton = ({
-  editor,
-  type,
-}: {
-  editor: Editor;
-  type: "bold" | "italic" | "mention";
-}) => {
-  const isActive = editor.isActive(type);
-
-  const getIcon = () => {
-    switch (type) {
-      case "bold":
-        return <BoldIcon />;
-      case "italic":
-        return <ItalicIcon />;
-      case "mention":
-        return <MentionIcon />;
-    }
-  };
-
-  const handleClick = () => {
-    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);
-    }
-  };
-
-  return (
-    <IconButton
-      size={"small"}
-      isBasic={!isActive}
-      isPrimary={isActive}
-      isPill={false}
-      onClick={handleClick}
-    >
-      {getIcon()}
-    </IconButton>
-  );
-};