chore: Upgrades app to modern Typescript

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  extends: ['react-app'],
+  plugins: ['prettier', '@emotion'],
+  rules: {
+    'prettier/prettier': 'error',
+    'jsx-a11y/accessible-emoji': 'off',
+    'import/no-anonymous-default-export': 'off',
+    'react-hooks/exhaustive-deps': 'off',
+  },
+  overrides: [
+    {
+      files: ['src/__tests__/**/*'],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+}

.github/workflows/push.yml

@@ -46,6 +46,9 @@ jobs:
       - name: Run lint
         run: yarn lint
 
+      - name: Run typecheck
+        run: yarn typecheck
+
   test:
     needs: [setup, install]
     runs-on: ubuntu-latest

@types/emotion.d.ts

@@ -0,0 +1,9 @@
+import '@emotion/react'
+
+import { Theme as EmotionTheme } from '../src/theme'
+
+export {}
+
+declare module '@emotion/react' {
+  export interface Theme extends EmotionTheme {}
+}

@types/global.d.ts

@@ -0,0 +1,8 @@
+interface Window {}
+
+interface Process {
+  env: {
+    PUBLIC_URL: string
+    NODE_ENV: 'development' | 'production'
+  }
+}

config-overrides.js

@@ -1,3 +1,13 @@
 const { override, addBabelPreset } = require('customize-cra')
 
-module.exports = override(addBabelPreset('@emotion/babel-preset-css-prop'))
+const ignoreWarnings = (value) => (config) => {
+  config.ignoreWarnings = value
+  return config
+}
+
+module.exports = override(
+  addBabelPreset('@emotion/babel-preset-css-prop'),
+
+  // Ignore warnings about the react-diff-view sourcemap files.
+  ignoreWarnings([/Failed to parse source map/])
+)

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)?$': 'ts-jest',
+  },
+  transformIgnorePatterns: ['<rootDir>/node_modules/'],
+  testMatch: ['<rootDir>>/__tests__/**/*.spec.(js|jsx|ts|tsx)'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+}

package.json

@@ -5,27 +5,28 @@
   "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?$'",
+    "docker-test-e2e": "yarn start-and-wait && react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/.*(\\.|).e2e.spec.(js|jsx|ts|tsx)?$'",
     "lint": "eslint . --cache --report-unused-disable-directives",
+    "typecheck": "tsc --noEmit",
     "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": "react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/((?!e2e).)*.spec.(js|jsx|ts|tsx)?$'",
     "test-e2e": "docker-compose run tests"
   },
   "dependencies": {
-    "@ant-design/icons": "4.0.3",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "antd": "5.2.3",
+    "@ant-design/icons": "^5.3.0",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "antd": "^5.14.0",
     "date-fns": "^2.29.3",
-    "framer-motion": "^2.9.5",
+    "framer-motion": "^11.0.3",
     "markdown-to-jsx": "7.1.9",
     "query-string": "8.1.0",
     "react": "18.2.0",
     "react-content-loader": "6.2.0",
     "react-copy-to-clipboard": "5.1.0",
-    "react-diff-view": "2.4.2",
+    "react-diff-view": "^3.2.0",
     "react-dom": "18.2.0",
     "react-dom-confetti": "0.2.0",
     "react-ga": "3.3.1",
@@ -35,19 +36,33 @@
     "use-persisted-state": "^0.3.3"
   },
   "devDependencies": {
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/eslint-plugin": "^11.10.0",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/eslint-plugin": "^11.11.0",
+    "@jest/globals": "^29.7.0",
     "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.12",
+    "@types/jest-image-snapshot": "^6.4.0",
+    "@types/markdown-to-jsx": "^7.0.1",
+    "@types/node": "^20.11.16",
+    "@types/react": "18.2.0",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "@types/react-dom": "^18.2.18",
+    "@types/semver": "^7.5.6",
+    "@types/use-persisted-state": "^0.3.4",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "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",
+    "jest-image-snapshot": "6.4.0",
     "prettier": "2.8.4",
     "pretty-quick": "3.1.3",
     "puppeteer": "10.0.0",
-    "react-app-rewired": "^2.2.1"
+    "react-app-rewired": "^2.2.1",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.3.3"
   },
   "browserslist": {
     "production": [
@@ -61,33 +76,10 @@
       "last 1 safari version"
     ]
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ],
-    "plugins": [
-      "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-commit": "pretty-quick --staged --pattern \"src/**/*.*(js|jsx|ts|tsx)\"",
       "pre-push": "yarn run lint"
     }
-  },
-  "jest": {
-    "testMatch": [
-      "**/__tests__/**/*.spec.js"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest.setup.js"
-    ]
   }
 }

src/__tests__/components/common/CompletedFilesCounter.spec.js → src/__tests__/components/common/CompletedFilesCounter.spec.tsx

@@ -1,21 +1,33 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import CompletedFilesCounter from '../../../components/common/CompletedFilesCounter'
+import { lightTheme } from '../../../theme'
 
 it('renders without crashing', () => {
-  const { container } = render(<CompletedFilesCounter />)
+  const { container } = render(
+    <CompletedFilesCounter
+      completed={10}
+      total={11}
+      popoverContent=""
+      popoverCursorType="pointer"
+      theme={lightTheme}
+    />
+  )
 
   expect(container).toMatchInlineSnapshot(`
     <div>
       <div
-        class="css-11o7zpc"
+        class="css-cs3rl"
       >
         <span>
           <span
             class="completedAmount"
-          />
+          >
+            10
+          </span>
 
           /
+          11
         </span>
         <div
           style="position: relative;"

src/components/common/BinaryDownload.js → src/components/common/BinaryDownload.tsx

@@ -1,14 +1,22 @@
 import React from 'react'
 import { Button, Popover as AntdPopover, Tooltip } from 'antd'
+import type { PopoverProps as AntdPopoverProps } from 'antd'
 import styled from '@emotion/styled'
 import DownloadFileButton from './DownloadFileButton'
 import { removeAppPathPrefix } from '../../utils'
+import type { Theme } from '../../theme'
+import type { File } from 'gitdiff-parser'
 
 const Container = styled.div`
   padding-right: 10px;
 `
 
-const BinaryRow = styled.div`
+interface BinaryRowProps {
+  index: number
+  theme?: Theme
+}
+
+const BinaryRow = styled.div<BinaryRowProps>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -22,38 +30,64 @@ const BinaryRow = styled.div`
   padding: 10px 15px;
   border-bottom: 1px solid ${({ theme }) => theme.border};
 `
-
-const Popover = styled(({ className, ...props }) => (
+interface PopoverProps extends Omit<AntdPopoverProps, 'overlayClassName'> {
+  className?: string
+}
+const Popover = styled(({ className, ...props }: PopoverProps) => (
   <AntdPopover overlayClassName={className} {...props} />
 ))`
   .ant-popover-inner-content {
     padding: 0;
   }
 `
 
-const BinaryList = ({ binaryFiles, toVersion, appName, packageName }) =>
-  binaryFiles.map(({ newPath }, index) => {
-    return (
-      <BinaryRow key={index} index={index}>
-        {removeAppPathPrefix(newPath, appName)}
+interface BinaryListProps {
+  binaryFiles: File[]
+  toVersion: string
+  appName: string
+  packageName: string
+}
 
-        <DownloadFileButton
-          open={true}
-          version={toVersion}
-          path={newPath}
-          packageName={packageName}
-        />
-      </BinaryRow>
-    )
-  })
+const BinaryList: React.FC<BinaryListProps> = ({
+  binaryFiles,
+  toVersion,
+  appName,
+  packageName,
+}) => {
+  return (
+    <>
+      {binaryFiles.map(({ newPath }, index) => {
+        return (
+          <BinaryRow key={index} index={index}>
+            {removeAppPathPrefix(newPath, appName)}
 
+            <DownloadFileButton
+              open={true}
+              version={toVersion}
+              path={newPath}
+              packageName={packageName}
+            />
+          </BinaryRow>
+        )
+      })}
+    </>
+  )
+}
+
+interface BinaryDownloadProps {
+  diff: File[]
+  fromVersion: string
+  toVersion: string
+  appName: string
+  packageName: string
+}
 const BinaryDownload = ({
   diff,
   fromVersion,
   toVersion,
   appName,
   packageName,
-}) => {
+}: BinaryDownloadProps) => {
   const binaryFiles = diff.filter(
     ({ hunks, type }) => hunks.length === 0 && type !== 'delete'
   )

src/components/common/CompletedFilesCounter.js → src/components/common/CompletedFilesCounter.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import { keyframes, css } from '@emotion/react'
 import Confetti from 'react-dom-confetti'
 import { Popover } from 'antd'
+import type { Theme } from '../../theme'
 
 const shake = keyframes`
   0% {
@@ -26,8 +27,23 @@ const shake = keyframes`
   }
 `
 
+interface CompletedFilesCounterProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  completed: number
+  total: number
+  popoverContent: string
+  popoverCursorType: React.CSSProperties['cursor']
+  theme?: Theme
+}
+
 const CompletedFilesCounter = styled(
-  ({ completed, total, popoverContent, popoverCursorType, ...props }) => (
+  ({
+    completed,
+    total,
+    popoverContent,
+    popoverCursorType,
+    ...props
+  }: CompletedFilesCounterProps) => (
     <div {...props}>
       <Popover
         content={popoverContent}