Merge pull request #345 from react-native-community/kelset/bump-tools

chore(dependencies): upgrading the repo to more modern standards

Author: pvinis

config-overrides.js

@@ -1,7 +1,3 @@
 const { override, addBabelPreset } = require('customize-cra')
-const { addReactRefresh } = require('customize-cra-react-refresh')
 
-module.exports = override(
-  addBabelPreset('@emotion/babel-preset-css-prop'),
-  addReactRefresh({ disableRefreshCheck: true })
-)
+module.exports = override(addBabelPreset('@emotion/babel-preset-css-prop'))

package.json

@@ -1,58 +1,53 @@
 {
   "name": "upgrade-helper",
   "version": "0.1.0",
-  "homepage": "https://react-native-community.github.io/upgrade-helper",
   "license": "MIT",
+  "homepage": "https://react-native-community.github.io/upgrade-helper",
+  "scripts": {
+    "build": "EXTEND_ESLINT=true react-app-rewired build",
+    "docker-test-e2e": "yarn start-and-wait && react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/.*(\\.|).e2e.spec.js?$'",
+    "lint": "eslint . --cache --report-unused-disable-directives",
+    "prepare": "husky install",
+    "start": "EXTEND_ESLINT=true react-app-rewired start",
+    "start-and-wait": "yarn start & wget --retry-connrefused --waitretry=1 --read-timeout=20 --timeout=15 -t 30 http://localhost:3000/",
+    "test": "react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/((?!e2e).)*.spec.js?$'",
+    "test-e2e": "docker-compose run tests"
+  },
   "dependencies": {
     "@ant-design/icons": "4.0.3",
-    "@emotion/core": "10.0.28",
-    "@emotion/styled": "10.0.27",
-    "antd": "4.0.3",
-    "date-fns": "^2.23.0",
-    "framer-motion": "^2.0.0-beta.52",
-    "markdown-to-jsx": "6.11.0",
-    "query-string": "6.11.1",
+    "@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",
+    "query-string": "8.1.0",
     "react": "18.2.0",
-    "react-content-loader": "5.0.2",
-    "react-copy-to-clipboard": "5.0.2",
+    "react-content-loader": "6.2.0",
+    "react-copy-to-clipboard": "5.1.0",
     "react-diff-view": "2.4.2",
     "react-dom": "18.2.0",
-    "react-dom-confetti": "0.1.3",
-    "react-ga": "2.7.0",
-    "react-github-btn": "1.1.1",
-    "react-scripts": "3.4.0",
-    "semver": "7.1.3",
+    "react-dom-confetti": "0.2.0",
+    "react-ga": "3.3.1",
+    "react-github-btn": "1.4.0",
+    "react-scripts": "5.0.1",
+    "semver": "7.3.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": "^0.9.1",
-    "customize-cra-react-refresh": "^1.0.1",
-    "eslint": "6.8.0",
-    "eslint-plugin-prettier": "3.1.2",
-    "gh-pages": "2.2.0",
-    "husky": "4.2.3",
-    "jest-image-snapshot": "4.5.0",
-    "prettier": "1.19.1",
-    "pretty-quick": "2.0.1",
+    "customize-cra": "^1.0.0",
+    "eslint": "^8.35.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "gh-pages": "5.0.0",
+    "husky": "8.0.3",
+    "jest-image-snapshot": "6.1.0",
+    "prettier": "2.8.4",
+    "pretty-quick": "3.1.3",
     "puppeteer": "10.0.0",
-    "react-app-rewired": "^2.1.5"
-  },
-  "scripts": {
-    "start": "EXTEND_ESLINT=true react-app-rewired start",
-    "start-and-wait": "yarn start & wget --retry-connrefused --waitretry=1 --read-timeout=20 --timeout=15 -t 30 http://localhost:3000/",
-    "build": "EXTEND_ESLINT=true react-app-rewired build",
-    "test": "react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/((?!e2e).)*.spec.js?$'",
-    "test-e2e": "docker-compose run tests",
-    "docker-test-e2e": "yarn start-and-wait && react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/.*(\\.|).e2e.spec.js?$'",
-    "lint": "eslint . --cache --report-unused-disable-directives"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged --pattern \"src/**/*.*(js|jsx)\"",
-      "pre-push": "yarn run lint"
-    }
+    "react-app-rewired": "^2.2.1"
   },
   "browserslist": {
     "production": [
@@ -66,25 +61,33 @@
       "last 1 safari version"
     ]
   },
-  "jest": {
-    "testMatch": [
-      "**/__tests__/**/*.spec.js"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest.setup.js"
-    ]
-  },
   "eslintConfig": {
     "extends": [
       "react-app"
     ],
     "plugins": [
-      "prettier"
+      "prettier",
+      "@emotion"
     ],
     "rules": {
       "prettier/prettier": "error",
       "jsx-a11y/accessible-emoji": "off",
+      "import/no-anonymous-default-export": "off",
       "react-hooks/exhaustive-deps": "off"
     }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged --pattern \"src/**/*.*(js|jsx)\"",
+      "pre-push": "yarn run lint"
+    }
+  },
+  "jest": {
+    "testMatch": [
+      "**/__tests__/**/*.spec.js"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.js"
+    ]
   }
 }

src/__fixtures__/releases/0.59.js

@@ -4,9 +4,8 @@ export default {
     links: [
       {
         title: 'This is a very cool link to a blog post about 0.59',
-        url:
-          'https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059'
-      }
-    ]
-  }
+        url: 'https://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059',
+      },
+    ],
+  },
 }

src/__tests__/Home.e2e.spec.js

@@ -16,12 +16,12 @@ describe('Home', () => {
 
   afterAll(closeBrowser)
 
-  const selectVersion = async targetVersion => {
-    await page.evaluate(pageTargetVersion => {
+  const selectVersion = async (targetVersion) => {
+    await page.evaluate((pageTargetVersion) => {
       const element = [
         ...document.querySelectorAll(
           '.ant-select-dropdown.ant-select-dropdown-placement-bottomLeft:not(.ant-select-dropdown-hidden) .ant-select-item-option-content'
-        )
+        ),
       ].find(({ innerText: version }) => version === pageTargetVersion)
 
       element.click()
@@ -113,7 +113,7 @@ describe('Home', () => {
   })
 
   it('9. should scroll to the first file in diff', async () => {
-    await page.evaluate(testID => {
+    await page.evaluate((testID) => {
       document
         .querySelector(`[data-testid="${testID}"]`)
         .querySelector('div')

src/__tests__/utils.spec.js

@@ -7,7 +7,7 @@ describe('getVersionsContentInDiff', () => {
     const versions = getVersionsContentInDiff({
       packageName: PACKAGE_NAMES.RN,
       fromVersion: '0.57.0',
-      toVersion: '0.59.0'
+      toVersion: '0.59.0',
     })
 
     expect(versions).toEqual([{ version: '0.59' }, { version: '0.58' }])
@@ -17,21 +17,21 @@ describe('getVersionsContentInDiff', () => {
     const versions = getVersionsContentInDiff({
       packageName: PACKAGE_NAMES.RN,
       fromVersion: '0.56.0',
-      toVersion: '0.59.0-rc.1'
+      toVersion: '0.59.0-rc.1',
     })
 
     expect(versions).toEqual([
       { version: '0.59' },
       { version: '0.58' },
-      { version: '0.57' }
+      { version: '0.57' },
     ])
   })
 
   it('returns the versions in the provided range with patches specified', () => {
     const versions = getVersionsContentInDiff({
       packageName: PACKAGE_NAMES.RN,
       fromVersion: '0.57.2',
-      toVersion: '0.59.9'
+      toVersion: '0.59.9',
     })
 
     expect(versions).toEqual([{ version: '0.59' }, { version: '0.58' }])

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}
@@ -53,7 +53,7 @@ const BinaryDownload = ({
   fromVersion,
   toVersion,
   appName,
-  packageName
+  packageName,
 }) => {
   const binaryFiles = diff.filter(
     ({ hunks, type }) => hunks.length === 0 && type !== 'delete'

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'
 
@@ -34,7 +34,7 @@ const CompletedFilesCounter = styled(
         trigger="hover"
         placement="right"
         overlayStyle={{
-          position: 'fixed'
+          position: 'fixed',
         }}
       >
         <span className="completedAmount">
@@ -47,7 +47,7 @@ const CompletedFilesCounter = styled(
         config={{
           elementCount: 200,
           angle: 130,
-          startVelocity: 30
+          startVelocity: 30,
         }}
       />
     </div>

src/components/common/Diff/Diff.js

@@ -5,15 +5,15 @@ import {
   Hunk,
   markEdits,
   tokenize,
-  Decoration as DiffDecoration
+  Decoration as DiffDecoration,
 } from 'react-diff-view'
 import DiffHeader from './DiffHeader'
 import { getComments } from './DiffComment'
 import { replaceWithProvidedAppName } from '../../../utils'
 
 const copyPathPopoverContentOpts = {
   default: 'Click to copy file path',
-  copied: 'File path copied!'
+  copied: 'File path copied!',
 }
 
 const Container = styled.div`
@@ -101,7 +101,7 @@ const Diff = ({
   areAllCollapsed,
   setAllCollapsed,
   diffViewStyle,
-  appName
+  appName,
 }) => {
   const [isDiffCollapsed, setIsDiffCollapsed] = useState(
     isDiffCollapsedByDefault({ type, hunks })
@@ -122,17 +122,17 @@ const Diff = ({
   }
 
   const getHunksWithAppName = useCallback(
-    originalHunks => {
+    (originalHunks) => {
       if (!appName) {
         return originalHunks
       }
 
-      return originalHunks.map(hunk => ({
+      return originalHunks.map((hunk) => ({
         ...hunk,
-        changes: hunk.changes.map(change => ({
+        changes: hunk.changes.map((change) => ({
           ...change,
-          content: replaceWithProvidedAppName(change.content, appName)
-        }))
+          content: replaceWithProvidedAppName(change.content, appName),
+        })),
       }))
     },
     [appName]
@@ -149,7 +149,7 @@ const Diff = ({
     newPath,
     fromVersion,
     toVersion,
-    appName
+    appName,
   })
 
   return (
@@ -189,16 +189,16 @@ const Diff = ({
           optimizeSelection={true}
           selectedChanges={selectedChanges}
         >
-          {originalHunks => {
+          {(originalHunks) => {
             const updatedHunks = getHunksWithAppName(originalHunks)
 
             const options = {
-              enhancers: [markEdits(updatedHunks)]
+              enhancers: [markEdits(updatedHunks)],
             }
 
             const tokens = tokenize(updatedHunks, options)
 
-            return updatedHunks.map(hunk => [
+            return updatedHunks.map((hunk) => [
               <Decoration key={'decoration-' + hunk.content}>
                 <More>{hunk.content}</More>
               </Decoration>,
@@ -207,7 +207,7 @@ const Diff = ({
                 hunk={hunk}
                 tokens={tokens}
                 gutterEvents={{ onClick: onToggleChangeSelection }}
-              />
+              />,
             ])
           }}
         </DiffView>