feat: add framer-motion

tested out styled components compatbility with the MessageHighlighter component

package.json

@@ -92,6 +92,7 @@
     "emoji-mart": "^5.5.2",
     "filesize": "3.6.1",
     "firstline": "1.2.1",
+    "framer-motion": "^11.0.3",
     "fs-extra": "9.0.0",
     "glob": "7.1.2",
     "image-type": "^4.1.0",

ts/components/basic/SessionToggle.tsx

@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
@@ -51,7 +52,7 @@ type Props = {
 export const SessionToggle = (props: Props) => {
   const dispatch = useDispatch();
 
-  const clickHandler = (event: React.MouseEvent<HTMLDivElement>) => {
+  const clickHandler = (event: MouseEvent<HTMLDivElement>) => {
     const stateManager = (e: any) => {
       e.stopPropagation();
       props.onClick();

ts/components/conversation/message/message-content/MessageHighlighter.tsx

@@ -1,29 +1,29 @@
-import styled, { css, keyframes } from 'styled-components';
+import { motion } from 'framer-motion';
+import { MouseEvent, ReactNode } from 'react';
+import styled from 'styled-components';
 
-const opacityAnimation = keyframes`
-    0% {
-      opacity: 1;
-    }
-    25% {
-      opacity: 0.2;
-    }
-    50% {
-      opacity: 1;
-    }
-    75% {
-      opacity: 0.2;
-    }
-    100% {
-      opacity: 1;
-    }
-`;
+const StyledMessageHighlighter = styled(motion.div)``;
 
-export const MessageHighlighter = styled.div<{
+export function MessageHighlighter(props: {
+  children: ReactNode;
   highlight: boolean;
-}>`
-  ${props =>
-    props.highlight &&
-    css`
-      animation: ${opacityAnimation} 1s linear;
-    `}
-`;
+  role?: string;
+  className?: string;
+  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+}) {
+  const { className, children, highlight, role, onClick } = props;
+
+  return (
+    <StyledMessageHighlighter
+      className={className}
+      role={role}
+      onClick={onClick}
+      animate={{
+        opacity: highlight ? [1, 0.2, 1, 0.2, 1] : undefined,
+        transition: { duration: 1, ease: 'linear', repeat: 0 },
+      }}
+    >
+      {children}
+    </StyledMessageHighlighter>
+  );
+}

yarn.lock

@@ -383,7 +383,7 @@
   resolved "https://registry.yarnpkg.com/@emoji-mart/react/-/react-1.1.1.tgz#ddad52f93a25baf31c5383c3e7e4c6e05554312a"
   integrity sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==
 
-"@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -1039,15 +1039,7 @@
     "@types/prop-types" "*"
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.2":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
-  integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^3.0.2"
-
-"@types/react@^18.2.55":
+"@types/react@*", "@types/react@18.2.55", "@types/react@^18.2.55":
   version "18.2.55"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.55.tgz#38141821b7084404b5013742bc4ae08e44da7a67"
   integrity sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==
@@ -3693,6 +3685,15 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+framer-motion@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.0.3.tgz#b2a87e7ae166a9e27da33da9cfb50a0db5f94fa7"
+  integrity sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fs-extra@9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.0.tgz#b6afc31036e247b2466dc99c29ae797d5d4580a3"
@@ -6265,15 +6266,7 @@ react-virtualized@^9.22.4:
     prop-types "^15.7.2"
     react-lifecycles-compat "^3.0.4"
 
-react@17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-react@^18.2.0:
+react@18.2.0, react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
   integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -7380,7 +7373,7 @@ tsconfig-paths@^3.14.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^2.1.0:
+tslib@^2.1.0, tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==