refactor: remove tsd integration (#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

.eslintrc.js

@@ -43,7 +43,10 @@ module.exports = {
         allowSamePrecedence: true,
       },
     ],
-    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
+    'react/jsx-filename-extension': [
+      'error',
+      { extensions: ['.js', '.jsx', '.tsx'] },
+    ],
     'react/no-string-refs': 'off',
     'no-param-reassign': 'off',
     'no-unused-vars': ['error', { ignoreRestSiblings: true }],
@@ -83,14 +86,14 @@ module.exports = {
     __DEVTOOLS__: true,
   },
   overrides: [
-    // typescript .d.ts config
+    // typescript common config
     {
       extends: [
         'eslint:recommended',
         'plugin:@typescript-eslint/eslint-recommended',
         'plugin:@typescript-eslint/recommended',
       ],
-      files: ['**/*.d.ts'],
+      files: ['**/*.d.ts', '**/*.test.ts', '**/*.test.tsx'],
       parser: '@typescript-eslint/parser',
       plugins: [
         '@typescript-eslint',
@@ -111,6 +114,13 @@ module.exports = {
             'newlines-between': 'always',
           },
         ],
+        'react/jsx-first-prop-new-line': [1, 'multiline'],
+        'react/jsx-max-props-per-line': [
+          1,
+          {
+            maximum: 1,
+          },
+        ],
         'react/sort-comp': [
           2,
           {
@@ -138,5 +148,13 @@ module.exports = {
         'import/resolver': 'eslint-import-resolver-typescript',
       },
     },
+    // typescript test-only config
+    {
+      files: ['**/*.test.ts', '**/*.test.tsx'],
+      rules: {
+        'no-use-before-define': 'off',
+        'no-console': 'off', // we want to be able to output results for tsc purposes
+      },
+    },
   ],
 }

README.md

@@ -48,7 +48,6 @@ yarn add react-intl-tel-input
 
 ## Usage
 
-### JavaScript
 ```javascript
 import IntlTelInput from 'react-intl-tel-input';
 import 'react-intl-tel-input/dist/main.css';
@@ -59,40 +58,6 @@ import 'react-intl-tel-input/dist/main.css';
 />
 ```
 
-### TypeScript
-```tsx
-import * as IntlTelInput from 'react-intl-tel-input';
-import 'react-intl-tel-input/dist/main.css';
-
-<IntlTelInput
-  containerClassName="intl-tel-input"
-  inputClassName="form-control"
-/>
-```
-
-If your `tsconfig.json` contains the following config:
-
-**tsconfig.json**
-```json
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-  }
-}
-```
-
-... use the default import workflow instead:
-```tsx
-import IntlTelInput from 'react-intl-tel-input';
-import 'react-intl-tel-input/dist/main.css';
-
-<IntlTelInput
-  containerClassName="intl-tel-input"
-  inputClassName="form-control"
-/>
-```
-
 ### Properties
 
 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
 ```bash
 yarn test    # if you are enhancing the JavaScript modules
 yarn test:ts # if you are enhancing the TypeScript type declarations
-yarn tsd     # in addition to test:ts, also check that the type declarations work as intended
 yarn lint
 ```
 

package.json

@@ -38,9 +38,6 @@
   "files": [
     "dist/**/*"
   ],
-  "tsd": {
-    "directory": "src/components/__tests__"
-  },
   "dependencies": {
     "classnames": "^2.2.5",
     "libphonenumber-js-utils": "^8.10.5",
@@ -99,8 +96,7 @@
     "sass": "^1.37.4",
     "semantic-release": "^17.0.4",
     "sinon": "^1.17.4",
-    "tsd": "^0.17.0",
-    "typescript": "^4.3.5"
+    "typescript": "^4.4.3"
   },
   "scripts": {
     "prebuild": "yarn run clean",
@@ -120,7 +116,6 @@
     "test:watch": "jest src --watchAll --coverage",
     "test:ts": "tsc --project ./tsconfig.test.json",
     "test:ts-watch": "tsc --watch --project ./tsconfig.test.json",
-    "tsd": "tsd",
     "footprint": "yarn build && yarn packwatch",
     "lint:commits": "yarn commitlint --from HEAD --to HEAD --verbose"
   },

src/components/__tests__/AllCountries.test.ts

@@ -1,3 +1,3 @@
-import AllCountries from '../../components/AllCountries'
+import AllCountries from '../AllCountries'
 
 console.log(AllCountries.getCountries())

src/components/__tests__/CountryList.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import CountryList from '../../components/CountryList'
-import AllCountries from '../../components/AllCountries'
 
-const App: React.FunctionComponent = () => {
+import AllCountries from '../AllCountries'
+import CountryList from '../CountryList'
+
+const App = () => {
   const countryListComponentRef = React.useRef<CountryList | null>(null)
 
   const init = () => {

src/components/__tests__/FlagBox.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import FlagBox from '../../components/FlagBox'
+
+import FlagBox from '../FlagBox'
 
 const App = () => {
   const flagRef = React.useRef<HTMLDivElement | null>(null)

src/components/__tests__/FlagDropDown.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import FlagDropDown from '../../components/FlagDropDown'
 
-const App: React.FunctionComponent = () => {
+import FlagDropDown from '../FlagDropDown'
+
+const App = () => {
   const flagDropDownComponentRef = React.useRef<FlagDropDown | null>(null)
   const flagDropDownElementRef = React.useRef<HTMLDivElement | null>(null)
   const refCallback = (instance: HTMLDivElement | null) => {
@@ -20,11 +21,23 @@ const App: React.FunctionComponent = () => {
     }
 
     console.log('flagDropDownElement.className', flagDropDownElement.className)
-    console.log('flagDropDownComponent.countryList', flagDropDownComponent.countryList)
-
-    console.log('flagDropDownComponent.genArrow()', flagDropDownComponent.genArrow())
-    console.log('flagDropDownComponent.genCountryList()', flagDropDownComponent.genCountryList())
-    console.log('flagDropDownComponent.genSelectedDialCode()', flagDropDownComponent.genSelectedDialCode())
+    console.log(
+      'flagDropDownComponent.countryList',
+      flagDropDownComponent.countryList,
+    )
+
+    console.log(
+      'flagDropDownComponent.genArrow()',
+      flagDropDownComponent.genArrow(),
+    )
+    console.log(
+      'flagDropDownComponent.genCountryList()',
+      flagDropDownComponent.genCountryList(),
+    )
+    console.log(
+      'flagDropDownComponent.genSelectedDialCode()',
+      flagDropDownComponent.genSelectedDialCode(),
+    )
   }
 
   React.useEffect(() => {
@@ -33,8 +46,10 @@ const App: React.FunctionComponent = () => {
 
   return (
     <FlagDropDown
+      allowDropdown
       ref={flagDropDownComponentRef}
       refCallback={refCallback}
+      separateDialCode
     />
   )
 }

src/components/__tests__/IntlTelInput.test.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
-import IntlTelInput, { CountryData } from '../..'
 
-type AppProps = {}
-type AppState = {
+import { CountryData } from '../../types'
+import IntlTelInput from '../IntlTelInput'
+
+interface AppProps {}
+interface AppState {
   value: string
   fullNumber: string
   iso2: string
@@ -22,15 +24,20 @@ class App extends React.Component<AppProps, AppState> {
     value: string,
     seletedCountryData: CountryData,
     fullNumber: string,
-    extension: string
+    extension: string,
   ) => {
-    console.log(value, fullNumber)
+    console.log('Details:', {
+      isValid,
+      value,
+      fullNumber,
+      extension,
+    })
     const { iso2 = '' } = seletedCountryData
 
     this.setState({
-      value: value,
-      fullNumber: fullNumber,
-      iso2: iso2
+      value,
+      fullNumber,
+      iso2,
     })
   }
 
@@ -40,12 +47,18 @@ class App extends React.Component<AppProps, AppState> {
     seletedCountryData: CountryData,
     fullNumber: string,
     extension: string,
-    event: React.FocusEvent<HTMLInputElement>
+    event: React.FocusEvent<HTMLInputElement>,
   ) => {
     console.log('Blur event', event)
     console.log('Native event type:', event.type)
-    console.log('Details:')
-    console.log({ isValid, value, seletedCountryData, fullNumber, extension, event })
+    console.log('Details:', {
+      isValid,
+      value,
+      seletedCountryData,
+      fullNumber,
+      extension,
+      event,
+    })
   }
 
   handlePhoneNumberFocus = (
@@ -54,16 +67,22 @@ class App extends React.Component<AppProps, AppState> {
     seletedCountryData: CountryData,
     fullNumber: string,
     extension: string,
-    event: React.FocusEvent<HTMLInputElement>
+    event: React.FocusEvent<HTMLInputElement>,
   ) => {
     console.log('Focus event')
     console.log('Native event type:', event.type)
-    console.log('Details:')
-    console.log({ isValid, value, seletedCountryData, fullNumber, extension, event })
+    console.log('Details:', {
+      isValid,
+      value,
+      seletedCountryData,
+      fullNumber,
+      extension,
+      event,
+    })
   }
 
   render() {
-    const { value, fullNumber } = this.state
+    const { value, fullNumber, iso2 } = this.state
 
     return (
       <div>
@@ -74,7 +93,14 @@ class App extends React.Component<AppProps, AppState> {
           onPhoneNumberFocus={this.handlePhoneNumberFocus}
           value={value}
         />
-        <div>Full number: {fullNumber}</div>
+        <div>
+          <span>Full number:</span>
+          <span>{fullNumber}</span>
+        </div>
+        <div>
+          <span>ISO-2:</span>
+          <span>{iso2}</span>
+        </div>
       </div>
     )
   }

src/components/__tests__/RootModal.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import RootModal from '../../components/RootModal'
+
+import RootModal from '../RootModal'
 
 const App: React.FunctionComponent = () => {
   const rootModalComponentRef = React.useRef<RootModal | null>(null)
@@ -9,7 +10,7 @@ const App: React.FunctionComponent = () => {
     if (rootModalComponent == null) {
       return
     }
-  
+
     const { modalTarget } = rootModalComponent
     if (modalTarget == null) {
       return

src/components/__tests__/TelInput.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import TelInput from '../../components/TelInput'
+
+import TelInput from '../TelInput'
 
 const App: React.FunctionComponent = () => {
   const telInputComponentRef = React.useRef<TelInput | null>(null)
@@ -21,7 +22,6 @@ const App: React.FunctionComponent = () => {
 
     inputElement.focus()
     console.log('inputElement.focus()')
-
     console.log('telInputComponent.state.hasFocus', telInputComponent.state.hasFocus)
     console.log('telInputComponent.tel', telInputComponent.tel)
   }