Merge pull request #375 from markrickert/typescript

Author: pvinis

.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/App.jsx src/App.tsxsrc/App.jsx renamed to src/App.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;"