replace react-transition-group with framer-motion

package.json

@@ -37,6 +37,7 @@
     "fast-exif": "^1.0.1",
     "feather-icons": "^4.29.0",
     "fraction.js": "^4.2.0",
+    "framer-motion": "^7.6.7",
     "gatsby": "^5.0.1",
     "gatsby-plugin-catch-links": "^5.0.0",
     "gatsby-plugin-feed": "^5.0.0",
@@ -65,7 +66,6 @@
     "react": "^18.2.0",
     "react-clipboard.js": "^2.0.16",
     "react-dom": "^18.2.0",
-    "react-transition-group": "^4.4.5",
     "rehype-react": "^7.1.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
@@ -79,21 +79,21 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/fs-extra": "^9.0.13",
-    "@types/jest": "^29.2.2",
+    "@types/jest": "^29.2.3",
     "@types/lunr": "^2.3.4",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
+    "@types/react-dom": "^18.0.9",
     "@types/react-transition-group": "^4.4.5",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
     "babel-preset-gatsby": "^3.0.0",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-testing-library": "^5.9.1",
     "fs-extra": "^10.1.0",
     "identity-obj-proxy": "^3.0.0",
@@ -106,13 +106,13 @@
     "polar": "https://gitpkg.now.sh/mtyn/polar/vscode?master",
     "postcss": "^8.4.19",
     "prettier": "^2.7.1",
-    "stylelint": "^14.14.1",
+    "stylelint": "^14.15.0",
     "stylelint-config-css-modules": "^4.1.0",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-prettier": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.3",
     "typescript-plugin-css-modules": "^3.4.0"
   },
   "overrides": {

src/components/atoms/Transitions.ts

@@ -0,0 +1,32 @@
+export const moveInTop = {
+  initial: {
+    opacity: 0,
+    y: -100,
+    transition: { type: 'spring' }
+  },
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: 'spring',
+      duration: 0.2,
+      stiffness: 120
+    }
+  },
+  exit: {
+    opacity: 0,
+    y: -100,
+    transition: {
+      type: 'spring',
+      duration: 0.2
+    }
+  }
+}
+
+export function getAnimationProps(shouldReduceMotion: boolean) {
+  return {
+    initial: `${shouldReduceMotion ? 'enter' : 'initial'}`,
+    animate: `${shouldReduceMotion ? null : 'enter'}`,
+    exit: `${shouldReduceMotion ? null : 'exit'}`
+  }
+}

src/components/molecules/Search/index.tsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect, ReactElement } from 'react'
-import { CSSTransition } from 'react-transition-group'
+import { LazyMotion, domAnimation, m, useReducedMotion } from 'framer-motion'
 import SearchInput from './SearchInput'
 import SearchButton from './SearchButton'
 import SearchResults from './SearchResults'
 import * as styles from './index.module.css'
+import { getAnimationProps, moveInTop } from '../../atoms/Transitions'
 
 export default function Search(): ReactElement {
+  const shouldReduceMotion = useReducedMotion()
   const [searchOpen, setSearchOpen] = useState(false)
   const [query, setQuery] = useState('')
   const [results, setResults] = useState([])
@@ -43,20 +45,19 @@ export default function Search(): ReactElement {
 
       {searchOpen && (
         <>
-          <CSSTransition
-            appear={searchOpen}
-            in={searchOpen}
-            timeout={200}
-            classNames={styles}
-          >
-            <section className={styles.search}>
+          <LazyMotion features={domAnimation}>
+            <m.section
+              variants={moveInTop}
+              {...getAnimationProps(shouldReduceMotion)}
+              className={styles.search}
+            >
               <SearchInput
                 value={query}
                 onChange={(e: any) => setQuery(e.target.value)}
                 onToggle={toggleSearch}
               />
-            </section>
-          </CSSTransition>
+            </m.section>
+          </LazyMotion>
 
           <SearchResults
             searchQuery={query}