Skip to content

Commit 7ee9921

Browse files
andrewsantarinandrewsantarin
authored
refactor: remove tsd integration (patw0929#392)
* refactor: remove tsd usage * build: remove tsd configuration * docs: remove tsd mention * docs: remove complicated TypeScript usage These days, I imagine it's commonly understood how imports in TypeScript work. * chore: allow JSX in TSX * chore: apply eslint config to all TypeScript files * chore: allow console logging in TypeScript tests * chore: use multiline JSX props in TSX * refactor: satisfy eslint and prettier in TypeScript tests * build: bump typescript to 4.4.3 * refactor: remove unnecesary constants test * test: fix getCountryData object equality assertion * test: transfer getCountryData TS tests to JS
1 parent cd9f262 commit 7ee9921

14 files changed

+124
-375
lines changed

‎.eslintrc.js

+21-3
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@ module.exports = {
4343
allowSamePrecedence: true,
4444
},
4545
],
46-
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
46+
'react/jsx-filename-extension': [
47+
'error',
48+
{ extensions: ['.js', '.jsx', '.tsx'] },
49+
],
4750
'react/no-string-refs': 'off',
4851
'no-param-reassign': 'off',
4952
'no-unused-vars': ['error', { ignoreRestSiblings: true }],
@@ -83,14 +86,14 @@ module.exports = {
8386
__DEVTOOLS__: true,
8487
},
8588
overrides: [
86-
// typescript .d.ts config
89+
// typescript common config
8790
{
8891
extends: [
8992
'eslint:recommended',
9093
'plugin:@typescript-eslint/eslint-recommended',
9194
'plugin:@typescript-eslint/recommended',
9295
],
93-
files: ['**/*.d.ts'],
96+
files: ['**/*.d.ts', '**/*.test.ts', '**/*.test.tsx'],
9497
parser: '@typescript-eslint/parser',
9598
plugins: [
9699
'@typescript-eslint',
@@ -111,6 +114,13 @@ module.exports = {
111114
'newlines-between': 'always',
112115
},
113116
],
117+
'react/jsx-first-prop-new-line': [1, 'multiline'],
118+
'react/jsx-max-props-per-line': [
119+
1,
120+
{
121+
maximum: 1,
122+
},
123+
],
114124
'react/sort-comp': [
115125
2,
116126
{
@@ -138,5 +148,13 @@ module.exports = {
138148
'import/resolver': 'eslint-import-resolver-typescript',
139149
},
140150
},
151+
// typescript test-only config
152+
{
153+
files: ['**/*.test.ts', '**/*.test.tsx'],
154+
rules: {
155+
'no-use-before-define': 'off',
156+
'no-console': 'off', // we want to be able to output results for tsc purposes
157+
},
158+
},
141159
],
142160
}

‎README.md

-36
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ yarn add react-intl-tel-input
4848

4949
## Usage
5050

51-
### JavaScript
5251
```javascript
5352
import IntlTelInput from 'react-intl-tel-input';
5453
import 'react-intl-tel-input/dist/main.css';
@@ -59,40 +58,6 @@ import 'react-intl-tel-input/dist/main.css';
5958
/>
6059
```
6160

62-
### TypeScript
63-
```tsx
64-
import * as IntlTelInput from 'react-intl-tel-input';
65-
import 'react-intl-tel-input/dist/main.css';
66-
67-
<IntlTelInput
68-
containerClassName="intl-tel-input"
69-
inputClassName="form-control"
70-
/>
71-
```
72-
73-
If your `tsconfig.json` contains the following config:
74-
75-
**tsconfig.json**
76-
```json
77-
{
78-
"compilerOptions": {
79-
"esModuleInterop": true,
80-
"allowSyntheticDefaultImports": true,
81-
}
82-
}
83-
```
84-
85-
... use the default import workflow instead:
86-
```tsx
87-
import IntlTelInput from 'react-intl-tel-input';
88-
import 'react-intl-tel-input/dist/main.css';
89-
90-
<IntlTelInput
91-
containerClassName="intl-tel-input"
92-
inputClassName="form-control"
93-
/>
94-
```
95-
9661
### Properties
9762

9863
Please see the [Demo Page](https://patw0929.github.io/react-intl-tel-input/)
@@ -113,7 +78,6 @@ To contribute to `react-intl-tel-input`, clone this repo locally and commit your
11378
```bash
11479
yarn test # if you are enhancing the JavaScript modules
11580
yarn test:ts # if you are enhancing the TypeScript type declarations
116-
yarn tsd # in addition to test:ts, also check that the type declarations work as intended
11781
yarn lint
11882
```
11983

‎package.json

+1-6
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,6 @@
3838
"files": [
3939
"dist/**/*"
4040
],
41-
"tsd": {
42-
"directory": "src/components/__tests__"
43-
},
4441
"dependencies": {
4542
"classnames": "^2.2.5",
4643
"libphonenumber-js-utils": "^8.10.5",
@@ -99,8 +96,7 @@
9996
"sass": "^1.37.4",
10097
"semantic-release": "^17.0.4",
10198
"sinon": "^1.17.4",
102-
"tsd": "^0.17.0",
103-
"typescript": "^4.3.5"
99+
"typescript": "^4.4.3"
104100
},
105101
"scripts": {
106102
"prebuild": "yarn run clean",
@@ -120,7 +116,6 @@
120116
"test:watch": "jest src --watchAll --coverage",
121117
"test:ts": "tsc --project ./tsconfig.test.json",
122118
"test:ts-watch": "tsc --watch --project ./tsconfig.test.json",
123-
"tsd": "tsd",
124119
"footprint": "yarn build && yarn packwatch",
125120
"lint:commits": "yarn commitlint --from HEAD --to HEAD --verbose"
126121
},

‎src/components/__tests__/AllCountries.test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import AllCountries from '../../components/AllCountries'
1+
import AllCountries from '../AllCountries'
22

33
console.log(AllCountries.getCountries())

‎src/components/__tests__/CountryList.test.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React from 'react'
2-
import CountryList from '../../components/CountryList'
3-
import AllCountries from '../../components/AllCountries'
42

5-
const App: React.FunctionComponent = () => {
3+
import AllCountries from '../AllCountries'
4+
import CountryList from '../CountryList'
5+
6+
const App = () => {
67
const countryListComponentRef = React.useRef<CountryList | null>(null)
78

89
const init = () => {

‎src/components/__tests__/FlagBox.test.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
2-
import FlagBox from '../../components/FlagBox'
2+
3+
import FlagBox from '../FlagBox'
34

45
const App = () => {
56
const flagRef = React.useRef<HTMLDivElement | null>(null)

‎src/components/__tests__/FlagDropDown.test.tsx

+22-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react'
2-
import FlagDropDown from '../../components/FlagDropDown'
32

4-
const App: React.FunctionComponent = () => {
3+
import FlagDropDown from '../FlagDropDown'
4+
5+
const App = () => {
56
const flagDropDownComponentRef = React.useRef<FlagDropDown | null>(null)
67
const flagDropDownElementRef = React.useRef<HTMLDivElement | null>(null)
78
const refCallback = (instance: HTMLDivElement | null) => {
@@ -20,11 +21,23 @@ const App: React.FunctionComponent = () => {
2021
}
2122

2223
console.log('flagDropDownElement.className', flagDropDownElement.className)
23-
console.log('flagDropDownComponent.countryList', flagDropDownComponent.countryList)
24-
25-
console.log('flagDropDownComponent.genArrow()', flagDropDownComponent.genArrow())
26-
console.log('flagDropDownComponent.genCountryList()', flagDropDownComponent.genCountryList())
27-
console.log('flagDropDownComponent.genSelectedDialCode()', flagDropDownComponent.genSelectedDialCode())
24+
console.log(
25+
'flagDropDownComponent.countryList',
26+
flagDropDownComponent.countryList,
27+
)
28+
29+
console.log(
30+
'flagDropDownComponent.genArrow()',
31+
flagDropDownComponent.genArrow(),
32+
)
33+
console.log(
34+
'flagDropDownComponent.genCountryList()',
35+
flagDropDownComponent.genCountryList(),
36+
)
37+
console.log(
38+
'flagDropDownComponent.genSelectedDialCode()',
39+
flagDropDownComponent.genSelectedDialCode(),
40+
)
2841
}
2942

3043
React.useEffect(() => {
@@ -33,8 +46,10 @@ const App: React.FunctionComponent = () => {
3346

3447
return (
3548
<FlagDropDown
49+
allowDropdown
3650
ref={flagDropDownComponentRef}
3751
refCallback={refCallback}
52+
separateDialCode
3853
/>
3954
)
4055
}

‎src/components/__tests__/IntlTelInput.test.tsx

+42-16
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react'
2-
import IntlTelInput, { CountryData } from '../..'
32

4-
type AppProps = {}
5-
type AppState = {
3+
import { CountryData } from '../../types'
4+
import IntlTelInput from '../IntlTelInput'
5+
6+
interface AppProps {}
7+
interface AppState {
68
value: string
79
fullNumber: string
810
iso2: string
@@ -22,15 +24,20 @@ class App extends React.Component<AppProps, AppState> {
2224
value: string,
2325
seletedCountryData: CountryData,
2426
fullNumber: string,
25-
extension: string
27+
extension: string,
2628
) => {
27-
console.log(value, fullNumber)
29+
console.log('Details:', {
30+
isValid,
31+
value,
32+
fullNumber,
33+
extension,
34+
})
2835
const { iso2 = '' } = seletedCountryData
2936

3037
this.setState({
31-
value: value,
32-
fullNumber: fullNumber,
33-
iso2: iso2
38+
value,
39+
fullNumber,
40+
iso2,
3441
})
3542
}
3643

@@ -40,12 +47,18 @@ class App extends React.Component<AppProps, AppState> {
4047
seletedCountryData: CountryData,
4148
fullNumber: string,
4249
extension: string,
43-
event: React.FocusEvent<HTMLInputElement>
50+
event: React.FocusEvent<HTMLInputElement>,
4451
) => {
4552
console.log('Blur event', event)
4653
console.log('Native event type:', event.type)
47-
console.log('Details:')
48-
console.log({ isValid, value, seletedCountryData, fullNumber, extension, event })
54+
console.log('Details:', {
55+
isValid,
56+
value,
57+
seletedCountryData,
58+
fullNumber,
59+
extension,
60+
event,
61+
})
4962
}
5063

5164
handlePhoneNumberFocus = (
@@ -54,16 +67,22 @@ class App extends React.Component<AppProps, AppState> {
5467
seletedCountryData: CountryData,
5568
fullNumber: string,
5669
extension: string,
57-
event: React.FocusEvent<HTMLInputElement>
70+
event: React.FocusEvent<HTMLInputElement>,
5871
) => {
5972
console.log('Focus event')
6073
console.log('Native event type:', event.type)
61-
console.log('Details:')
62-
console.log({ isValid, value, seletedCountryData, fullNumber, extension, event })
74+
console.log('Details:', {
75+
isValid,
76+
value,
77+
seletedCountryData,
78+
fullNumber,
79+
extension,
80+
event,
81+
})
6382
}
6483

6584
render() {
66-
const { value, fullNumber } = this.state
85+
const { value, fullNumber, iso2 } = this.state
6786

6887
return (
6988
<div>
@@ -74,7 +93,14 @@ class App extends React.Component<AppProps, AppState> {
7493
onPhoneNumberFocus={this.handlePhoneNumberFocus}
7594
value={value}
7695
/>
77-
<div>Full number: {fullNumber}</div>
96+
<div>
97+
<span>Full number:</span>
98+
<span>{fullNumber}</span>
99+
</div>
100+
<div>
101+
<span>ISO-2:</span>
102+
<span>{iso2}</span>
103+
</div>
78104
</div>
79105
)
80106
}

‎src/components/__tests__/RootModal.test.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
2-
import RootModal from '../../components/RootModal'
2+
3+
import RootModal from '../RootModal'
34

45
const App: React.FunctionComponent = () => {
56
const rootModalComponentRef = React.useRef<RootModal | null>(null)
@@ -9,7 +10,7 @@ const App: React.FunctionComponent = () => {
910
if (rootModalComponent == null) {
1011
return
1112
}
12-
13+
1314
const { modalTarget } = rootModalComponent
1415
if (modalTarget == null) {
1516
return

‎src/components/__tests__/TelInput.test.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
2-
import TelInput from '../../components/TelInput'
2+
3+
import TelInput from '../TelInput'
34

45
const App: React.FunctionComponent = () => {
56
const telInputComponentRef = React.useRef<TelInput | null>(null)
@@ -21,7 +22,6 @@ const App: React.FunctionComponent = () => {
2122

2223
inputElement.focus()
2324
console.log('inputElement.focus()')
24-
2525
console.log('telInputComponent.state.hasFocus', telInputComponent.state.hasFocus)
2626
console.log('telInputComponent.tel', telInputComponent.tel)
2727
}

‎src/components/__tests__/constants.test.ts

-4
This file was deleted.

‎src/components/__tests__/utils.test-d.ts

-28
This file was deleted.

0 commit comments

Comments
 (0)