upgrade emotion and antd

Author: Lucas Bento

package.json

@@ -15,9 +15,9 @@
   },
   "dependencies": {
     "@ant-design/icons": "4.0.3",
-    "@emotion/core": "10.0.28",
-    "@emotion/styled": "10.0.27",
-    "antd": "4.0.3",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "antd": "5.2.3",
     "date-fns": "^2.29.3",
     "framer-motion": "^2.9.5",
     "markdown-to-jsx": "7.1.9",
@@ -35,7 +35,8 @@
     "use-persisted-state": "^0.3.3"
   },
   "devDependencies": {
-    "@emotion/babel-preset-css-prop": "10.0.27",
+    "@emotion/babel-preset-css-prop": "^11.10.0",
+    "@emotion/eslint-plugin": "^11.10.0",
     "@testing-library/react": "^14.0.0",
     "customize-cra": "^1.0.0",
     "eslint": "^8.35.0",
@@ -65,7 +66,8 @@
       "react-app"
     ],
     "plugins": [
-      "prettier"
+      "prettier",
+      "@emotion"
     ],
     "rules": {
       "prettier/prettier": "error",

src/components/common/BinaryDownload.js

@@ -39,7 +39,7 @@ const BinaryList = ({ binaryFiles, toVersion, appName, packageName }) =>
         {removeAppPathPrefix(newPath, appName)}
 
         <DownloadFileButton
-          visible={true}
+          open={true}
           version={toVersion}
           path={newPath}
           packageName={packageName}

src/components/common/CompletedFilesCounter.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { keyframes, css } from '@emotion/core'
+import { keyframes, css } from '@emotion/react'
 import Confetti from 'react-dom-confetti'
 import { Popover } from 'antd'
 

src/components/common/Diff/DiffComment.js

@@ -10,17 +10,17 @@ const lineColors = {
   neutral: '#ffffff',
 }
 
-const Container = styled(({ isCommentVisible, children, ...props }) => (
+const Container = styled(({ isCommentOpen, children, ...props }) => (
   <motion.div
     {...props}
     variants={{
-      visible: {
+      open: {
         height: 'auto',
       },
       hidden: { height: 10 },
     }}
-    initial={isCommentVisible ? 'visible' : 'hidden'}
-    animate={isCommentVisible ? 'visible' : 'hidden'}
+    initial={isCommentOpen ? 'open' : 'hidden'}
+    animate={isCommentOpen ? 'open' : 'hidden'}
     transition={{
       duration: 0.5,
     }}
@@ -48,20 +48,20 @@ const ContentContainer = styled.div`
   user-select: none;
 `
 
-const ShowButton = styled(({ isCommentVisible, ...props }) => (
+const ShowButton = styled(({ isCommentOpen, ...props }) => (
   <motion.div
     {...props}
     variants={{
-      visible: {
+      open: {
         scaleX: 1,
       },
       hidden: { scaleX: 10 },
     }}
     whileHover={{
       scale: 2,
     }}
-    initial={isCommentVisible ? 'visible' : 'hidden'}
-    animate={isCommentVisible ? 'visible' : 'hidden'}
+    initial={isCommentOpen ? 'open' : 'hidden'}
+    animate={isCommentOpen ? 'open' : 'hidden'}
     transition={{
       duration: 0.25,
     }}
@@ -75,8 +75,8 @@ const ShowButton = styled(({ isCommentVisible, ...props }) => (
 
 const Content = styled(Markdown)`
   opacity: 1;
-  ${({ isCommentVisible }) =>
-    !isCommentVisible &&
+  ${({ isCommentOpen }) =>
+    !isCommentOpen &&
     `
       opacity: 0;
     `}
@@ -131,21 +131,21 @@ const getComments = ({ packageName, newPath, fromVersion, toVersion }) => {
 }
 
 const DiffComment = ({ content, lineChangeType }) => {
-  const [isCommentVisible, setIsCommentVisible] = useState(true)
+  const [isCommentOpen, setIsCommentOpen] = useState(true)
 
   return (
     <Container
-      isCommentVisible={isCommentVisible}
+      isCommentOpen={isCommentOpen}
       lineChangeType={lineChangeType}
-      onClick={() => setIsCommentVisible(!isCommentVisible)}
+      onClick={() => setIsCommentOpen(!isCommentOpen)}
     >
       <ShowButton
-        isCommentVisible={isCommentVisible}
-        onClick={() => setIsCommentVisible(!isCommentVisible)}
+        isCommentOpen={isCommentOpen}
+        onClick={() => setIsCommentOpen(!isCommentOpen)}
       />
 
       <ContentContainer>
-        <Content isCommentVisible={isCommentVisible}>
+        <Content isCommentOpen={isCommentOpen}>
           {content.props.children}
         </Content>
       </ContentContainer>

src/components/common/Diff/DiffCommentReminder.js

@@ -7,16 +7,16 @@ import { getTransitionDuration } from '../../../utils'
 const DiffCommentReminder = styled(
   ({ comments, isDiffCollapsed, uncollapseDiff, ...props }) => {
     const numberOfComments = Object.keys(comments).length
-    const isVisible = isDiffCollapsed && numberOfComments > 0
+    const isOpen = isDiffCollapsed && numberOfComments > 0
 
     return (
       <motion.div
         {...props}
         variants={{
-          visible: { opacity: 1, cursor: 'pointer' },
-          invisible: { opacity: 0, cursor: 'initial' },
+          open: { opacity: 1, cursor: 'pointer' },
+          closed: { opacity: 0, cursor: 'initial' },
         }}
-        animate={isVisible > 0 ? 'visible' : 'invisible'}
+        animate={isOpen > 0 ? 'open' : 'closed'}
         transition={{
           duration: getTransitionDuration(0.5),
         }}

src/components/common/Diff/DiffHeader.js

@@ -79,8 +79,8 @@ const FileStatus = ({ type, ...props }) => {
   )
 }
 
-const BinaryBadge = ({ visible, ...props }) =>
-  visible ? (
+const BinaryBadge = ({ open, ...props }) =>
+  open ? (
     <Tag {...props} color="cyan">
       BINARY
     </Tag>
@@ -96,8 +96,8 @@ const defaultIconButtonStyle = `
   border-radius: 50%;
 `
 
-const CompleteDiffButton = styled(({ visible, onClick, ...props }) =>
-  visible ? (
+const CompleteDiffButton = styled(({ open, onClick, ...props }) =>
+  open ? (
     <Button
       {...props}
       type="ghost"
@@ -161,8 +161,8 @@ const CollapseClickableArea = styled.div`
   }
 `
 
-const CollapseDiffButton = styled(({ visible, isDiffCollapsed, ...props }) =>
-  visible ? <Button {...props} type="link" icon={<DownOutlined />} /> : null
+const CollapseDiffButton = styled(({ open, isDiffCollapsed, ...props }) =>
+  open ? <Button {...props} type="link" icon={<DownOutlined />} /> : null
 )`
   color: #24292e;
   margin-right: 2px;
@@ -208,7 +208,7 @@ const DiffHeader = ({
           onClick={({ altKey }) => setIsDiffCollapsed(!isDiffCollapsed, altKey)}
         >
           <CollapseDiffButton
-            visible={hasDiff}
+            open={hasDiff}
             isDiffCollapsed={isDiffCollapsed}
           />
           <FileName
@@ -218,7 +218,7 @@ const DiffHeader = ({
             appName={appName}
           />{' '}
           <FileStatus type={type} />
-          <BinaryBadge visible={!hasDiff} />
+          <BinaryBadge open={!hasDiff} />
         </CollapseClickableArea>
         <CopyPathToClipboardButton
           oldPath={sanitizedFilePaths.oldPath}
@@ -238,19 +238,19 @@ const DiffHeader = ({
       <div>
         <Fragment>
           <ViewFileButton
-            visible={hasDiff && type !== 'delete'}
+            open={hasDiff && type !== 'delete'}
             version={toVersion}
             path={newPath}
             packageName={packageName}
           />
           <DownloadFileButton
-            visible={!hasDiff && type !== 'delete'}
+            open={!hasDiff && type !== 'delete'}
             version={toVersion}
             path={newPath}
             packageName={packageName}
           />
           <CompleteDiffButton
-            visible={isDiffCompleted}
+            open={isDiffCompleted}
             onClick={() => onCompleteDiff(diffKey)}
           />
         </Fragment>

src/components/common/DownloadFileButton.js

@@ -5,9 +5,8 @@ import { DownloadOutlined } from '@ant-design/icons'
 import { getBinaryFileURL } from '../../utils'
 
 const DownloadFileButton = styled(
-  ({ visible, version, path, packageName, ...props }) => {
-    console.info(visible, version, path, packageName)
-    return visible ? (
+  ({ open, version, path, packageName, ...props }) => {
+    return open ? (
       <Button
         {...props}
         type="ghost"

src/components/common/Settings.js

@@ -124,8 +124,8 @@ const Settings = ({
         </>
       }
       trigger="click"
-      visible={popoverVisibility}
-      onVisibleChange={handleClickChange}
+      open={popoverVisibility}
+      onOpenChange={handleClickChange}
     >
       <SettingsButton icon={<SettingsIcon />} />
     </Popover>

src/components/common/TroubleshootingGuides.js

@@ -31,8 +31,8 @@ const ListContainer = styled.ul`
   list-style: disc;
 `
 
-const TroubleshootingGuides = ({ isTooltipVisible }) => {
-  const willHaveAnimation = useRef(isTooltipVisible)
+const TroubleshootingGuides = ({ isTooltipOpen }) => {
+  const willHaveAnimation = useRef(isTooltipOpen)
 
   const containerAnimation = useAnimation()
 

src/components/common/TroubleshootingGuidesButton.js

@@ -42,10 +42,10 @@ const TroubleshootingGuidesButton = () => {
   return (
     <Popover
       placement="bottomRight"
-      content={<TroubleshootingGuides isTooltipVisible={showContent} />}
+      content={<TroubleshootingGuides isTooltipOpen={showContent} />}
       trigger="click"
-      visible={showContent}
-      onVisibleChange={handlePopoverVisibilityChange}
+      open={showContent}
+      onOpenChange={handlePopoverVisibilityChange}
     >
       <Button
         data-testid={testIDs.troubleshootingGuidesButton}