Skip to content

Commit b6bbf79

Browse files
authored
Merge pull request #375 from markrickert/typescript
2 parents 6c353da + 6a52fc6 commit b6bbf79

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+2551
-1060
lines changed

.eslintrc.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
root: true,
3+
parser: '@typescript-eslint/parser',
4+
extends: ['react-app'],
5+
plugins: ['prettier', '@emotion'],
6+
rules: {
7+
'prettier/prettier': 'error',
8+
'jsx-a11y/accessible-emoji': 'off',
9+
'import/no-anonymous-default-export': 'off',
10+
'react-hooks/exhaustive-deps': 'off',
11+
},
12+
overrides: [
13+
{
14+
files: ['src/__tests__/**/*'],
15+
env: {
16+
jest: true,
17+
},
18+
},
19+
],
20+
}

.github/workflows/push.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ jobs:
4646
- name: Run lint
4747
run: yarn lint
4848

49+
- name: Run typecheck
50+
run: yarn typecheck
51+
4952
test:
5053
needs: [setup, install]
5154
runs-on: ubuntu-latest

@types/emotion.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import '@emotion/react'
2+
3+
import { Theme as EmotionTheme } from '../src/theme'
4+
5+
export {}
6+
7+
declare module '@emotion/react' {
8+
export interface Theme extends EmotionTheme {}
9+
}

@types/global.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
interface Window {}
2+
3+
interface Process {
4+
env: {
5+
PUBLIC_URL: string
6+
NODE_ENV: 'development' | 'production'
7+
}
8+
}

config-overrides.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
11
const { override, addBabelPreset } = require('customize-cra')
22

3-
module.exports = override(addBabelPreset('@emotion/babel-preset-css-prop'))
3+
const ignoreWarnings = (value) => (config) => {
4+
config.ignoreWarnings = value
5+
return config
6+
}
7+
8+
module.exports = override(
9+
addBabelPreset('@emotion/babel-preset-css-prop'),
10+
11+
// Ignore warnings about the react-diff-view sourcemap files.
12+
ignoreWarnings([/Failed to parse source map/])
13+
)

jest.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
preset: 'ts-jest',
3+
testEnvironment: 'node',
4+
transform: {
5+
'^.+\\.(js|jsx|ts|tsx)?$': 'ts-jest',
6+
},
7+
transformIgnorePatterns: ['<rootDir>/node_modules/'],
8+
testMatch: ['<rootDir>>/__tests__/**/*.spec.(js|jsx|ts|tsx)'],
9+
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
10+
}

package.json

Lines changed: 28 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,28 @@
55
"homepage": "https://react-native-community.github.io/upgrade-helper",
66
"scripts": {
77
"build": "EXTEND_ESLINT=true react-app-rewired build",
8-
"docker-test-e2e": "yarn start-and-wait && react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/.*(\\.|).e2e.spec.js?$'",
8+
"docker-test-e2e": "yarn start-and-wait && react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/.*(\\.|).e2e.spec.(js|jsx|ts|tsx)?$'",
99
"lint": "eslint . --cache --report-unused-disable-directives",
10+
"typecheck": "tsc --noEmit",
1011
"prepare": "husky install",
1112
"start": "EXTEND_ESLINT=true react-app-rewired start",
1213
"start-and-wait": "yarn start & wget --retry-connrefused --waitretry=1 --read-timeout=20 --timeout=15 -t 30 http://localhost:3000/",
13-
"test": "react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/((?!e2e).)*.spec.js?$'",
14+
"test": "react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/((?!e2e).)*.spec.(js|jsx|ts|tsx)?$'",
1415
"test-e2e": "docker-compose run tests"
1516
},
1617
"dependencies": {
17-
"@ant-design/icons": "4.0.3",
18-
"@emotion/react": "^11.10.6",
19-
"@emotion/styled": "^11.10.6",
20-
"antd": "5.2.3",
18+
"@ant-design/icons": "^5.3.0",
19+
"@emotion/react": "^11.11.3",
20+
"@emotion/styled": "^11.11.0",
21+
"antd": "^5.14.0",
2122
"date-fns": "^2.29.3",
22-
"framer-motion": "^2.9.5",
23+
"framer-motion": "^11.0.3",
2324
"markdown-to-jsx": "7.1.9",
2425
"query-string": "8.1.0",
2526
"react": "18.2.0",
2627
"react-content-loader": "6.2.0",
2728
"react-copy-to-clipboard": "5.1.0",
28-
"react-diff-view": "2.4.2",
29+
"react-diff-view": "^3.2.0",
2930
"react-dom": "18.2.0",
3031
"react-dom-confetti": "0.2.0",
3132
"react-ga": "3.3.1",
@@ -35,19 +36,33 @@
3536
"use-persisted-state": "^0.3.3"
3637
},
3738
"devDependencies": {
38-
"@emotion/babel-preset-css-prop": "^11.10.0",
39-
"@emotion/eslint-plugin": "^11.10.0",
39+
"@emotion/babel-preset-css-prop": "^11.11.0",
40+
"@emotion/eslint-plugin": "^11.11.0",
41+
"@jest/globals": "^29.7.0",
4042
"@testing-library/react": "^14.0.0",
43+
"@types/jest": "^29.5.12",
44+
"@types/jest-image-snapshot": "^6.4.0",
45+
"@types/markdown-to-jsx": "^7.0.1",
46+
"@types/node": "^20.11.16",
47+
"@types/react": "18.2.0",
48+
"@types/react-copy-to-clipboard": "^5.0.7",
49+
"@types/react-dom": "^18.2.18",
50+
"@types/semver": "^7.5.6",
51+
"@types/use-persisted-state": "^0.3.4",
52+
"@typescript-eslint/eslint-plugin": "^6.20.0",
53+
"@typescript-eslint/parser": "^6.20.0",
4154
"customize-cra": "^1.0.0",
4255
"eslint": "^8.35.0",
4356
"eslint-plugin-prettier": "^4.2.1",
4457
"gh-pages": "5.0.0",
4558
"husky": "8.0.3",
46-
"jest-image-snapshot": "6.1.0",
59+
"jest-image-snapshot": "6.4.0",
4760
"prettier": "2.8.4",
4861
"pretty-quick": "3.1.3",
4962
"puppeteer": "10.0.0",
50-
"react-app-rewired": "^2.2.1"
63+
"react-app-rewired": "^2.2.1",
64+
"ts-jest": "^29.1.2",
65+
"typescript": "^5.3.3"
5166
},
5267
"browserslist": {
5368
"production": [
@@ -61,33 +76,10 @@
6176
"last 1 safari version"
6277
]
6378
},
64-
"eslintConfig": {
65-
"extends": [
66-
"react-app"
67-
],
68-
"plugins": [
69-
"prettier",
70-
"@emotion"
71-
],
72-
"rules": {
73-
"prettier/prettier": "error",
74-
"jsx-a11y/accessible-emoji": "off",
75-
"import/no-anonymous-default-export": "off",
76-
"react-hooks/exhaustive-deps": "off"
77-
}
78-
},
7979
"husky": {
8080
"hooks": {
81-
"pre-commit": "pretty-quick --staged --pattern \"src/**/*.*(js|jsx)\"",
81+
"pre-commit": "pretty-quick --staged --pattern \"src/**/*.*(js|jsx|ts|tsx)\"",
8282
"pre-push": "yarn run lint"
8383
}
84-
},
85-
"jest": {
86-
"testMatch": [
87-
"**/__tests__/**/*.spec.js"
88-
],
89-
"setupFilesAfterEnv": [
90-
"<rootDir>/jest.setup.js"
91-
]
9284
}
9385
}

src/App.jsx renamed to src/App.tsx

File renamed without changes.
File renamed without changes.

src/__tests__/components/common/CompletedFilesCounter.spec.js renamed to src/__tests__/components/common/CompletedFilesCounter.spec.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
import React from 'react'
22
import { render } from '@testing-library/react'
33
import CompletedFilesCounter from '../../../components/common/CompletedFilesCounter'
4+
import { lightTheme } from '../../../theme'
45

56
it('renders without crashing', () => {
6-
const { container } = render(<CompletedFilesCounter />)
7+
const { container } = render(
8+
<CompletedFilesCounter
9+
completed={10}
10+
total={11}
11+
popoverContent=""
12+
popoverCursorType="pointer"
13+
theme={lightTheme}
14+
/>
15+
)
716

817
expect(container).toMatchInlineSnapshot(`
918
<div>
1019
<div
11-
class="css-11o7zpc"
20+
class="css-cs3rl"
1221
>
1322
<span>
1423
<span
1524
class="completedAmount"
16-
/>
25+
>
26+
10
27+
</span>
1728
1829
/
30+
11
1931
</span>
2032
<div
2133
style="position: relative;"
File renamed without changes.

src/components/common/BinaryDownload.js renamed to src/components/common/BinaryDownload.tsx

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
import React from 'react'
22
import { Button, Popover as AntdPopover, Tooltip } from 'antd'
3+
import type { PopoverProps as AntdPopoverProps } from 'antd'
34
import styled from '@emotion/styled'
45
import DownloadFileButton from './DownloadFileButton'
56
import { removeAppPathPrefix } from '../../utils'
7+
import type { Theme } from '../../theme'
8+
import type { File } from 'gitdiff-parser'
69

710
const Container = styled.div`
811
padding-right: 10px;
912
`
1013

11-
const BinaryRow = styled.div`
14+
interface BinaryRowProps {
15+
index: number
16+
theme?: Theme
17+
}
18+
19+
const BinaryRow = styled.div<BinaryRowProps>`
1220
display: flex;
1321
justify-content: space-between;
1422
align-items: center;
@@ -22,38 +30,64 @@ const BinaryRow = styled.div`
2230
padding: 10px 15px;
2331
border-bottom: 1px solid ${({ theme }) => theme.border};
2432
`
25-
26-
const Popover = styled(({ className, ...props }) => (
33+
interface PopoverProps extends Omit<AntdPopoverProps, 'overlayClassName'> {
34+
className?: string
35+
}
36+
const Popover = styled(({ className, ...props }: PopoverProps) => (
2737
<AntdPopover overlayClassName={className} {...props} />
2838
))`
2939
.ant-popover-inner-content {
3040
padding: 0;
3141
}
3242
`
3343

34-
const BinaryList = ({ binaryFiles, toVersion, appName, packageName }) =>
35-
binaryFiles.map(({ newPath }, index) => {
36-
return (
37-
<BinaryRow key={index} index={index}>
38-
{removeAppPathPrefix(newPath, appName)}
44+
interface BinaryListProps {
45+
binaryFiles: File[]
46+
toVersion: string
47+
appName: string
48+
packageName: string
49+
}
3950

40-
<DownloadFileButton
41-
open={true}
42-
version={toVersion}
43-
path={newPath}
44-
packageName={packageName}
45-
/>
46-
</BinaryRow>
47-
)
48-
})
51+
const BinaryList: React.FC<BinaryListProps> = ({
52+
binaryFiles,
53+
toVersion,
54+
appName,
55+
packageName,
56+
}) => {
57+
return (
58+
<>
59+
{binaryFiles.map(({ newPath }, index) => {
60+
return (
61+
<BinaryRow key={index} index={index}>
62+
{removeAppPathPrefix(newPath, appName)}
4963

64+
<DownloadFileButton
65+
open={true}
66+
version={toVersion}
67+
path={newPath}
68+
packageName={packageName}
69+
/>
70+
</BinaryRow>
71+
)
72+
})}
73+
</>
74+
)
75+
}
76+
77+
interface BinaryDownloadProps {
78+
diff: File[]
79+
fromVersion: string
80+
toVersion: string
81+
appName: string
82+
packageName: string
83+
}
5084
const BinaryDownload = ({
5185
diff,
5286
fromVersion,
5387
toVersion,
5488
appName,
5589
packageName,
56-
}) => {
90+
}: BinaryDownloadProps) => {
5791
const binaryFiles = diff.filter(
5892
({ hunks, type }) => hunks.length === 0 && type !== 'delete'
5993
)

src/components/common/CompletedFilesCounter.js renamed to src/components/common/CompletedFilesCounter.tsx

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
33
import { keyframes, css } from '@emotion/react'
44
import Confetti from 'react-dom-confetti'
55
import { Popover } from 'antd'
6+
import type { Theme } from '../../theme'
67

78
const shake = keyframes`
89
0% {
@@ -26,8 +27,23 @@ const shake = keyframes`
2627
}
2728
`
2829

30+
interface CompletedFilesCounterProps
31+
extends React.HTMLAttributes<HTMLDivElement> {
32+
completed: number
33+
total: number
34+
popoverContent: string
35+
popoverCursorType: React.CSSProperties['cursor']
36+
theme?: Theme
37+
}
38+
2939
const CompletedFilesCounter = styled(
30-
({ completed, total, popoverContent, popoverCursorType, ...props }) => (
40+
({
41+
completed,
42+
total,
43+
popoverContent,
44+
popoverCursorType,
45+
...props
46+
}: CompletedFilesCounterProps) => (
3147
<div {...props}>
3248
<Popover
3349
content={popoverContent}

0 commit comments

Comments
 (0)