feat: adopt reactions modal in social-messenger-ts and team-ts (#91)

GetStream · Feb 7, 2024 · 76b1892 · 76b1892
1 parent e8a368d
commit 76b1892
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 126 deletions.
diff --git a/social-messenger-ts/package.json b/social-messenger-ts/package.json
@@ -12,8 +12,9 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-file-utils": "^1.2.0",
-    "stream-chat": "^8.10.1",
-    "stream-chat-react": "^11.0.0"
+    "stream-chat": "^8.16.0",
+    "stream-chat-css": "^1.0.23",
+    "stream-chat-react": "^11.6.0"
   },
   "devDependencies": {
     "@types/jest": "^27.5.2",

diff --git a/social-messenger-ts/yarn.lock b/social-messenger-ts/yarn.lock
@@ -1116,6 +1116,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.6":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.3.3":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1787,11 +1794,6 @@
   resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-2.11.0.tgz#fdf0a3fd557f09ca02a344c7a6b70027df37068c"
   integrity sha512-lsPEWpsB3ygNSO0PrTULgcCyxrCH5NWg0WuCbWP/i7fF5Slqswrs+yF6uEx6tBMW+pBZmOBPvbhHTG+CK2iczg==
 
-"@stream-io/stream-chat-css@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-4.0.0.tgz#78328d73d63d944e56c47b2b73ff9c9c59745573"
-  integrity sha512-FhlrMxCvmd5i7Atpa72tngqT/U4P8mVmlLPdA6Xu0BgnbzVxC5p87zix/wmgxSxcUyL6WHImdWGnnNWwpGbxPA==
-
 "@stream-io/transliterate@^1.5.5":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@stream-io/transliterate/-/transliterate-1.5.5.tgz#38ef7710f0dc85ed3d4e976a00810fd4e00897c7"
@@ -8650,6 +8652,22 @@ react-is@^18.0.0, react-is@^18.1.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-markdown@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-9.0.1.tgz#c05ddbff67fd3b3f839f8c648e6fb35d022397d1"
+  integrity sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    devlop "^1.0.0"
+    hast-util-to-jsx-runtime "^2.0.0"
+    html-url-attributes "^3.0.0"
+    mdast-util-to-hast "^13.0.0"
+    remark-parse "^11.0.0"
+    remark-rehype "^11.0.0"
+    unified "^11.0.0"
+    unist-util-visit "^5.0.0"
+    vfile "^6.0.0"
+
 react-markdown@^5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-5.0.3.tgz#41040ea7a9324b564b328fb81dd6c04f2a5373ac"
@@ -8666,22 +8684,6 @@ react-markdown@^5.0.3:
     unist-util-visit "^2.0.0"
     xtend "^4.0.1"
 
-react-markdown@^9.0.0:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-9.0.1.tgz#c05ddbff67fd3b3f839f8c648e6fb35d022397d1"
-  integrity sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==
-  dependencies:
-    "@types/hast" "^3.0.0"
-    devlop "^1.0.0"
-    hast-util-to-jsx-runtime "^2.0.0"
-    html-url-attributes "^3.0.0"
-    mdast-util-to-hast "^13.0.0"
-    remark-parse "^11.0.0"
-    remark-rehype "^11.0.0"
-    unified "^11.0.0"
-    unist-util-visit "^5.0.0"
-    vfile "^6.0.0"
-
 react-player@2.10.1:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.10.1.tgz#f2ee3ec31393d7042f727737545414b951ffc7e4"
@@ -9458,14 +9460,19 @@ statuses@2.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react/-/stream-chat-react-11.0.0.tgz#ff40da6c0f41ff31c8531dcd8d9ddc3df973a31a"
-  integrity sha512-eKrjD6j4aSOuE0SzBpIfj1YvyQAFRdZmUZe4Npa0u/En3oH0YyJ5RXqEoL24BhLAk3GJi5HI6K7ZybthcVrY/w==
+stream-chat-css@^1.0.23:
+  version "1.0.23"
+  resolved "https://registry.yarnpkg.com/stream-chat-css/-/stream-chat-css-1.0.23.tgz#5016c6d34e2b210bc48893671740abd9be5bf8dd"
+  integrity sha512-ab7NFnFKbhAm8dbCzRPiSyfhGHXlbwro5Q/BxXhjLCdalEUN3dRvHOmW7mqWY7TdloJAs+3QTM9ORNxDTV7usg==
+
+stream-chat-react@^11.6.0:
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react/-/stream-chat-react-11.6.0.tgz#853421b1bfe77398709e0d51925ed58c0987bd25"
+  integrity sha512-CCq0L2hKuH64SlmZYYvnmlObh4Dkfrb96LLDYsMWf2DAbtZ8tJ9l4TQOz/k8MrduQzq21N5DBd/H0jaE3olYqg==
   dependencies:
+    "@babel/runtime" "^7.23.6"
     "@braintree/sanitize-url" "^6.0.4"
     "@popperjs/core" "^2.11.5"
-    "@stream-io/stream-chat-css" "^4.0.0"
     clsx "^2.0.0"
     dayjs "^1.10.4"
     emoji-regex "^9.2.0"
@@ -9483,7 +9490,7 @@ stream-chat-react@^11.0.0:
     react-fast-compare "^3.2.2"
     react-image-gallery "1.2.12"
     react-is "^18.1.0"
-    react-markdown "^9.0.0"
+    react-markdown "9.0.1"
     react-player "2.10.1"
     react-popper "^2.3.0"
     react-textarea-autosize "^8.3.0"
@@ -9497,10 +9504,10 @@ stream-chat-react@^11.0.0:
     "@stream-io/transliterate" "^1.5.5"
     mml-react "^0.4.7"
 
-stream-chat@^8.10.1:
-  version "8.14.1"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.14.1.tgz#f6560c2aa2ce754928d41d6059c61d7cfe770e0a"
-  integrity sha512-7ersgzFLrUlnV5q09SLcJSEkKMEFNl3E7C5Pk48hzzKuY/eRt8+ojka7t17/cRtF84g3XSW0dSl7C/yB9J5ieQ==
+stream-chat@^8.16.0:
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.16.0.tgz#3718812815251315b28f75c4002f0a0d62f73bb8"
+  integrity sha512-j5GDgCmae4k59titjzePvihfVoVSlRW8NvP7uXfxbfMlsmGfcbYl08IaAwSsW6NC44doZyIjOt7v/v2QyCcP4A==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@types/jsonwebtoken" "~9.0.0"

diff --git a/team-ts/package.json b/team-ts/package.json
@@ -23,8 +23,8 @@
     "react-popper": "^2.3.0",
     "react-scripts": "^5.0.1",
     "sass": "^1.55.0",
-    "stream-chat": "^8.10.1",
-    "stream-chat-react": "^11.0.0"
+    "stream-chat": "^8.16.0",
+    "stream-chat-react": "^11.6.0"
   },
   "devDependencies": {
     "@types/emoji-mart": "^3.0.9",

diff --git a/team-ts/src/components/TeamMessage/TeamMessage.tsx b/team-ts/src/components/TeamMessage/TeamMessage.tsx
@@ -22,12 +22,12 @@ import {
   ReactionSelector,
   renderText as defaultRenderText,
   showMessageActionsBox,
-  SimpleReactionsList,
   ThreadIcon,
   useComponentContext,
   useMessageContext,
   useReactionClick,
   useTranslationContext,
+  ReactionsList,
 } from 'stream-chat-react';
 
 import { PinIndicator } from './PinIndicator';
@@ -228,7 +228,7 @@ const MessageTeamWithContext = (
               <Attachment actionHandler={handleAction} attachments={message.attachments} />
             ) : null}
             {message.latest_reactions?.length !== 0 && message.text !== '' && isReactionEnabled && (
-              <SimpleReactionsList />
+              <ReactionsList />
             )}
             {message.status === 'failed' && (
               <button
@@ -250,7 +250,7 @@ const MessageTeamWithContext = (
           {message.latest_reactions &&
             message.latest_reactions.length !== 0 &&
             message.text === '' &&
-            isReactionEnabled && <SimpleReactionsList />}
+            isReactionEnabled && <ReactionsList />}
           {!threadList && (
             <MessageRepliesCountButton
               onClick={handleOpenThread}

diff --git a/team-ts/src/styles/MessageReactions/MessageReactions.layout.scss b/team-ts/src/styles/MessageReactions/MessageReactions.layout.scss
@@ -1,28 +1,3 @@
-.str-chat__message-reactions-container {
-  margin-block-start: 8px;
-
-  .str-chat__simple-reactions-list-item--last-number {
-    display: unset;
-  }
-
-  ul.str-chat__simple-reactions-list {
-    display: flex;
-    align-items: center;
-    width: fit-content;
-    padding: 6px 6px 4px 6px;
-  }
-
-  .str-chat__simple-reactions-list-item span {
-    display: flex;
-    align-items: center;
-  }
-
-  .emoji-mart-emoji-custom span {
-    height: 15px !important;
-    width: 15px !important;
-  }
-}
-
 .str-chat__reaction-selector {
   left: unset;
   top: -60px;

diff --git a/team-ts/src/styles/MessageReactions/MessageReactions.theme.scss b/team-ts/src/styles/MessageReactions/MessageReactions.theme.scss
@@ -1,35 +1,3 @@
-.str-chat__message-reactions-container {
-  .str-chat__simple-reactions-list-item {
-    line-height: 15px;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  ul.str-chat__simple-reactions-list {
-    background: var(--static-background-color);
-    line-height: 12px;
-    border-radius: 50vw;
-    border: 1px solid var(--panel-secondary-background-color);
-  }
-
-  ul.str-chat__simple-reactions-list:hover {
-    border: 1px solid var(--primary-color);
-  }
-
-  .str-chat__simple-reactions-list-item .emoji-mart-emoji:hover {
-    transition: transform .2s ease-in-out;
-    transform: scale(1.2);
-
-  }
-
-  .str-chat__simple-reactions-list-item--last-number {
-    font-size: 11px;
-    color: var(--text-color);
-  }
-}
-
 .str-chat__reaction-selector {
   border: 1px solid var(--panel-secondary-background-color);
   border-radius: var(--str-chat__border-radius-circle);

diff --git a/team-ts/yarn.lock b/team-ts/yarn.lock
@@ -1116,6 +1116,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.6":
+  version "7.23.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+  integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.3.3":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1798,11 +1805,6 @@
   resolved "https://registry.yarnpkg.com/@stream-io/escape-string-regexp/-/escape-string-regexp-5.0.1.tgz#362505c92799fea6afe4e369993fbbda8690cc37"
   integrity sha512-qIaSrzJXieZqo2fZSYTdzwSbZgHHsT3tkd646vvZhh4fr+9nO4NlvqGmPF43Y+OfZiWf+zYDFgNiPGG5+iZulQ==
 
-"@stream-io/stream-chat-css@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-4.0.0.tgz#78328d73d63d944e56c47b2b73ff9c9c59745573"
-  integrity sha512-FhlrMxCvmd5i7Atpa72tngqT/U4P8mVmlLPdA6Xu0BgnbzVxC5p87zix/wmgxSxcUyL6WHImdWGnnNWwpGbxPA==
-
 "@stream-io/transliterate@^1.5.5":
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/@stream-io/transliterate/-/transliterate-1.5.5.tgz#38ef7710f0dc85ed3d4e976a00810fd4e00897c7"
@@ -8738,6 +8740,22 @@ react-is@^18.0.0, react-is@^18.1.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-markdown@9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-9.0.1.tgz#c05ddbff67fd3b3f839f8c648e6fb35d022397d1"
+  integrity sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    devlop "^1.0.0"
+    hast-util-to-jsx-runtime "^2.0.0"
+    html-url-attributes "^3.0.0"
+    mdast-util-to-hast "^13.0.0"
+    remark-parse "^11.0.0"
+    remark-rehype "^11.0.0"
+    unified "^11.0.0"
+    unist-util-visit "^5.0.0"
+    vfile "^6.0.0"
+
 react-markdown@^5.0.3:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-5.0.3.tgz#41040ea7a9324b564b328fb81dd6c04f2a5373ac"
@@ -8754,22 +8772,6 @@ react-markdown@^5.0.3:
     unist-util-visit "^2.0.0"
     xtend "^4.0.1"
 
-react-markdown@^9.0.0:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-9.0.1.tgz#c05ddbff67fd3b3f839f8c648e6fb35d022397d1"
-  integrity sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==
-  dependencies:
-    "@types/hast" "^3.0.0"
-    devlop "^1.0.0"
-    hast-util-to-jsx-runtime "^2.0.0"
-    html-url-attributes "^3.0.0"
-    mdast-util-to-hast "^13.0.0"
-    remark-parse "^11.0.0"
-    remark-rehype "^11.0.0"
-    unified "^11.0.0"
-    unist-util-visit "^5.0.0"
-    vfile "^6.0.0"
-
 react-player@2.10.1:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.10.1.tgz#f2ee3ec31393d7042f727737545414b951ffc7e4"
@@ -9562,14 +9564,14 @@ statuses@2.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react/-/stream-chat-react-11.0.0.tgz#ff40da6c0f41ff31c8531dcd8d9ddc3df973a31a"
-  integrity sha512-eKrjD6j4aSOuE0SzBpIfj1YvyQAFRdZmUZe4Npa0u/En3oH0YyJ5RXqEoL24BhLAk3GJi5HI6K7ZybthcVrY/w==
+stream-chat-react@^11.6.0:
+  version "11.6.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react/-/stream-chat-react-11.6.0.tgz#853421b1bfe77398709e0d51925ed58c0987bd25"
+  integrity sha512-CCq0L2hKuH64SlmZYYvnmlObh4Dkfrb96LLDYsMWf2DAbtZ8tJ9l4TQOz/k8MrduQzq21N5DBd/H0jaE3olYqg==
   dependencies:
+    "@babel/runtime" "^7.23.6"
     "@braintree/sanitize-url" "^6.0.4"
     "@popperjs/core" "^2.11.5"
-    "@stream-io/stream-chat-css" "^4.0.0"
     clsx "^2.0.0"
     dayjs "^1.10.4"
     emoji-regex "^9.2.0"
@@ -9587,7 +9589,7 @@ stream-chat-react@^11.0.0:
     react-fast-compare "^3.2.2"
     react-image-gallery "1.2.12"
     react-is "^18.1.0"
-    react-markdown "^9.0.0"
+    react-markdown "9.0.1"
     react-player "2.10.1"
     react-popper "^2.3.0"
     react-textarea-autosize "^8.3.0"
@@ -9601,10 +9603,10 @@ stream-chat-react@^11.0.0:
     "@stream-io/transliterate" "^1.5.5"
     mml-react "^0.4.7"
 
-stream-chat@^8.10.1:
-  version "8.14.1"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.14.1.tgz#f6560c2aa2ce754928d41d6059c61d7cfe770e0a"
-  integrity sha512-7ersgzFLrUlnV5q09SLcJSEkKMEFNl3E7C5Pk48hzzKuY/eRt8+ojka7t17/cRtF84g3XSW0dSl7C/yB9J5ieQ==
+stream-chat@^8.16.0:
+  version "8.16.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.16.0.tgz#3718812815251315b28f75c4002f0a0d62f73bb8"
+  integrity sha512-j5GDgCmae4k59titjzePvihfVoVSlRW8NvP7uXfxbfMlsmGfcbYl08IaAwSsW6NC44doZyIjOt7v/v2QyCcP4A==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@types/jsonwebtoken" "~9.0.0"