chore: add typescript to the project

Author: olavoparno

.eslintrc.js

@@ -2,42 +2,39 @@ module.exports = {
   env: {
     browser: true,
     es2020: true,
-    'jest/globals': true
-  },
-  globals: {
-    JestMockFn: true,
   },
   extends: [
     'plugin:react/recommended',
     'airbnb',
     'plugin:prettier/recommended',
-    'plugin:jest/recommended'
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
   ],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 11,
     sourceType: 'module',
   },
-  plugins: ['jest', 'react', 'react-hooks', 'prettier'],
+  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
   settings: {
     'import/resolver': {
       node: {
-        extensions: ['.js', '.jsx', '.json'],
+        extensions: ['.js', '.ts', '.tsx'],
       },
     },
   },
+  ignorePatterns: ["./example/*"],
   rules: {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
-    'react/jsx-filename-extension': [
-      'error',
-      { extensions: ['.js', '.jsx', '.json'] },
-    ],
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    'react/jsx-filename-extension': ['error', { extensions: ['.jsx', '.tsx'] }],
     'react/prop-types': 'off',
     'react/jsx-one-expression-per-line': 'off',
-    'import/extensions': ['off'],
+    'import/extensions': ['error', 'never'],
     'import/prefer-default-export': 'off',
     'import/no-unresolved': ['error', { ignore: ['react-hooks-fetch'] }],
     camelcase: [
@@ -50,5 +47,6 @@ module.exports = {
     ],
     'react/state-in-constructor': 'off',
     'no-console': 'off',
+    'react/react-in-jsx-scope': 'off',
   },
 };

babel.config.js

@@ -5,14 +5,14 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.3",
-    "react": "file:../node_modules/react",
-    "react-dom": "^16.9.0",
-    "react-scripts": "^3.0.1",
+    "@material-ui/core": "^4.12.1",
+    "react": "17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3",
     "react-use-downloader": "file:.."
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

example/package-lock.json

@@ -22,15 +22,8 @@ const useStyles = makeStyles({
 
 export default function App() {
   const classes = useStyles();
-  const {
-    size,
-    elapsed,
-    percentage,
-    download,
-    cancel,
-    error,
-    isInProgress,
-  } = useDownloader();
+  const { size, elapsed, percentage, download, cancel, error, isInProgress } =
+    useDownloader();
 
   const fileUrl =
     'https://upload.wikimedia.org/wikipedia/commons/4/4d/%D0%93%D0%BE%D0%B2%D0%B5%D1%80%D0%BB%D0%B0_%D1%96_%D0%9F%D0%B5%D1%82%D1%80%D0%BE%D1%81_%D0%B2_%D0%BF%D1%80%D0%BE%D0%BC%D1%96%D0%BD%D1%8F%D1%85_%D0%B2%D1%80%D0%B0%D0%BD%D1%96%D1%88%D0%BD%D1%8C%D0%BE%D0%B3%D0%BE_%D1%81%D0%BE%D0%BD%D1%86%D1%8F.jpg';