Fix dependency

Author: haldarmahesh

.babelrc

@@ -1 +1,4 @@
-{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
+
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+  }

.eslintrc.json

@@ -1,34 +1,14 @@
 {
-  "extends": "airbnb",
+  "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
   "parserOptions": {
-    "sourceType": "module",
-    "parser": "babel-eslint"
+    "ecmaVersion": 2020, // Allows for the parsing of modern ECMAScript features
+    "sourceType": "module" // Allows for the use of imports
   },
+  "extends": [
+    "plugin:@typescript-eslint/recommended" // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+  ],
   "rules": {
-    "arrow-parens": ["off"],
-    "prefer-template": "off",
-    "no-console": "off",
-    "compat/compat": 2,
-    "consistent-return": "off",
-    "comma-dangle": "off",
-    "generator-star-spacing": "off",
-    "import/no-unresolved": "off",
-    "import/no-extraneous-dependencies": "off",
-    "no-use-before-define": "off",
-    "promise/param-names": 2,
-    "promise/always-return": 2,
-    "promise/catch-or-return": 2,
-    "promise/no-native": 0,
-    "react/jsx-no-bind": "off",
-    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
-    "react/prefer-stateless-function": "off",
-    "rules": {
-      "curly": ["error", "all"]
-    }
-  },
-  "plugins": ["promise", "compat", "react"],
-  "env": {
-    "jest": true,
-    "browser": true
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
   }
-}
+}

.prettierrc

@@ -1,9 +1,10 @@
 {
   "printWidth": 120,
- "singleQuote": true,
- "useTabs": false,
- "tabWidth": 2,
- "semi": true,
- "bracketSpacing": true,
- "brace_style": "collapse,preserve-inline"
-}
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "brace_style": "collapse,preserve-inline"
+ }
+ 

babel.config.js

@@ -0,0 +1,8 @@
+interface IParamType {
+    detectKeys: Array<string | number>;
+    keyevent: string;
+}
+declare const useKey: (callback: (currentKeyCode: number, event: Event) => unknown, { detectKeys, keyevent }?: IParamType, { dependencies }?: {
+    dependencies?: never[] | undefined;
+}) => any;
+export { useKey };

build/index.d.ts

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKey = void 0;
+const react_1 = require("react");
+const invariant_1 = __importDefault(require("invariant"));
+const keys_js_1 = require("./keys.js");
+const VALID_KEY_EVENTS = ['keydown', 'keyup', 'keypress'];
+const useKey = (callback, { detectKeys, keyevent } = { detectKeys: [], keyevent: 'keydown' }, { dependencies = [] } = {}) => {
+    const isKeyeventValid = VALID_KEY_EVENTS.indexOf(keyevent) > -1;
+    invariant_1.default(isKeyeventValid, 'keyevent is not valid: ' + keyevent);
+    invariant_1.default(callback != null, 'callback needs to be defined');
+    invariant_1.default(Array.isArray(dependencies), 'dependencies need to be an array');
+    let allowedKeys = detectKeys;
+    if (!Array.isArray(detectKeys)) {
+        allowedKeys = [];
+        // eslint-disable-next-line no-console
+        console.warn('Keys should be array!');
+    }
+    allowedKeys = keys_js_1.convertToAsciiEquivalent(allowedKeys);
+    const handleEvent = (event) => {
+        const asciiCode = keys_js_1.getAsciiCode(event);
+        return keys_js_1.onKeyPress(asciiCode, callback, allowedKeys, event);
+    };
+    react_1.useEffect(() => {
+        const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+        if (!canUseDOM) {
+            console.error('Window is not defined');
+            return () => {
+                // returning null
+            };
+        }
+        window.document.addEventListener(keyevent, handleEvent);
+        return () => {
+            window.document.removeEventListener(keyevent, handleEvent);
+        };
+    }, dependencies);
+};
+exports.useKey = useKey;

build/index.js

@@ -0,0 +1,6 @@
+import { EffectCallback } from 'react';
+declare const isKeyFromGivenList: (keyCode: number, allowedKeys?: Array<string | number>) => boolean;
+declare const onKeyPress: (currentKeyCode: number, callback: (currentKeyCode: number, event: Event) => unknown, allowedKeys: Array<string | number>, event: Event) => ReturnType<EffectCallback>;
+declare function getAsciiCode(event: Event): number;
+declare function convertToAsciiEquivalent(inputArray: Array<string | number>): Array<string | number>;
+export { isKeyFromGivenList, onKeyPress, convertToAsciiEquivalent, getAsciiCode };

build/keys.d.ts

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAsciiCode = exports.convertToAsciiEquivalent = exports.onKeyPress = exports.isKeyFromGivenList = void 0;
+const codeLowerCaseA = 65;
+const codeUpperCaseZ = 122;
+const isKeyFromGivenList = (keyCode, allowedKeys = []) => {
+    if (allowedKeys === null || allowedKeys.includes(keyCode) || allowedKeys.length === 0) {
+        return true;
+    }
+    return false;
+};
+exports.isKeyFromGivenList = isKeyFromGivenList;
+const onKeyPress = (currentKeyCode, callback, allowedKeys, event) => {
+    if (isKeyFromGivenList(currentKeyCode, allowedKeys)) {
+        callback(currentKeyCode, event);
+    }
+};
+exports.onKeyPress = onKeyPress;
+function getAsciiCode(event) {
+    let keyCode = event.which;
+    if (keyCode >= codeLowerCaseA && keyCode <= codeUpperCaseZ) {
+        keyCode = event.key.charCodeAt(0);
+    }
+    return keyCode;
+}
+exports.getAsciiCode = getAsciiCode;
+function convertToAsciiEquivalent(inputArray) {
+    return inputArray.map((item) => {
+        const finalVal = item;
+        if (typeof finalVal === 'string') {
+            return finalVal.charCodeAt(0);
+        }
+        return finalVal;
+    });
+}
+exports.convertToAsciiEquivalent = convertToAsciiEquivalent;

build/keys.js

@@ -42,7 +42,7 @@ var useKey = function useKey(callback) {
     return onKeyPress(asciiCode, callback, allowedKeys, event);
   };
 
-  useEffect(function() {
+  useEffect(function () {
     var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
 
     if (!canUseDOM) {
@@ -51,7 +51,7 @@ var useKey = function useKey(callback) {
     }
 
     window.document.addEventListener(keyevent, handleEvent);
-    return function() {
+    return function () {
       window.document.removeEventListener(keyevent, handleEvent);
     };
   }, dependencies);

dist/index.js

@@ -18,37 +18,41 @@
   },
   "scripts": {
     "build:lib": "cross-env NODE_ENV='production' babel src --out-dir dist --ignore '**/__test__/**'",
-    "test": "jest --coverage",
+    "test": "npm run build && jest --coverage",
     "test-watch": "jest --watchAll --coverage",
     "lint": "./node_modules/eslint/bin/eslint.js --ext js,jsx src",
     "lint-fix": "./node_modules/eslint/bin/eslint.js --ext js,jsx src --fix",
     "format:check": "prettier --config ./.prettierrc --list-different \"src/**/*{.ts,.js,.json,.css,.scss}\"",
-    "format:fix": "pretty-quick --staged"
+    "format:fix": "pretty-quick --staged",
+    "build": "tsc"
   },
   "license": "MIT",
   "peerDependencies": {
     "react": "^16.7.0-alpha.2"
   },
   "devDependencies": {
+    "@types/invariant": "^2.2.34",
+    "@types/jest": "^26.0.19",
+    "@types/react": "^17.0.3",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "cross-env": "^5.2.0",
-    "eslint": "^5.8.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-compat": "^2.6.2",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "eslint-plugin-promise": "^4.0.1",
-    "eslint-plugin-react": "^7.11.1",
+    "eslint": "^7.25.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "husky": "1.1.2",
     "jest": "^26.6.3",
-    "prettier": "1.14.3",
+    "prettier": "^2.2.1",
     "pretty-quick": "^1.8.0",
     "react": "^16.7.0-alpha.2",
     "react-dom": "^16.7.0-alpha.2",
-    "react-test-renderer": "^16.7.0-alpha.2",
+    "react-test-renderer": "^16.14.0",
     "react-testing-library": "5.9.0",
     "regenerator-runtime": "^0.12.1",
     "typescript": "^4.1.3",
-    "@types/jest": "^26.0.19"
+    "@babel/preset-env": "^7.13.15",
+    "@babel/preset-react": "^7.13.13",
+    "babel-jest": "^26.6.3"
   },
   "files": [
     "dist/index.js",

package-lock.json

@@ -3,9 +3,8 @@ import React from 'react';
 // eslint-disable-next-line object-curly-newline
 import { render, cleanup, fireEvent } from 'react-testing-library';
 
-const useKey = require('../');
+import { useKey } from '../../build/index';
 
-// eslint-disable-next-line react/prop-types
 const TestComponent = ({ callback, detectKeys, keyevent }) => {
   useKey(callback, { detectKeys, keyevent });
   return <div />;
@@ -38,7 +37,7 @@ describe('events', () => {
       key: 'ArrowUp',
       bubbles: true,
       which: 38,
-      code: 'ArrowUp'
+      code: 'ArrowUp',
     });
     fireEvent(container, keyDownEvent);
     expect(callback).toHaveBeenCalledWith(38, keyDownEvent);
@@ -52,7 +51,7 @@ describe('events', () => {
       key: 'ArrowUp',
       bubbles: true,
       which: 38,
-      code: 'ArrowUp'
+      code: 'ArrowUp',
     });
     fireEvent(container, keyUpEvent);
     expect(callback).toHaveBeenCalledWith(38, keyUpEvent);
@@ -66,7 +65,7 @@ describe('events', () => {
       key: 'ArrowUp',
       bubbles: true,
       which: 38,
-      code: 'ArrowUp'
+      code: 'ArrowUp',
     });
     fireEvent(container, keyPressEvent);
     expect(callback).toHaveBeenCalledWith(38, keyPressEvent);
@@ -80,7 +79,7 @@ describe('events', () => {
       key: 'ArrowUp',
       bubbles: true,
       which: 38,
-      code: 'ArrowUp'
+      code: 'ArrowUp',
     });
     fireEvent(container, keyDownEvent);
     expect(callback).not.toHaveBeenCalledWith(38, keyDownEvent);

package.json

@@ -1,9 +1,4 @@
-const {
-  isKeyFromGivenList,
-  onKeyPress,
-  convertToAsciiEquivalent,
-  getAsciiCode,
-} = require('../keys');
+import { isKeyFromGivenList, onKeyPress, convertToAsciiEquivalent, getAsciiCode } from '../../build/keys';
 
 describe('keys utils', () => {
   test('isKeyFromGivenList returns true when current key belong to allowed list', () => {

src/__tests__/index.test.js

@@ -1,10 +1,18 @@
-const { useEffect } = require('react');
-const invariant = require('invariant');
-const { onKeyPress, convertToAsciiEquivalent, getAsciiCode } = require('./keys.js');
+import { EffectCallback, useEffect } from 'react';
 
-const VALID_KEY_EVENTS = ['keydown', 'keyup', 'keypress'];
+import invariant from 'invariant';
+import { onKeyPress, convertToAsciiEquivalent, getAsciiCode } from './keys.js';
 
-const useKey = (callback: unknown, { detectKeys = [], keyevent = 'keydown' } = {}, { dependencies = [] } = {}) => {
+const VALID_KEY_EVENTS = ['keydown', 'keyup', 'keypress'];
+interface IParamType {
+  detectKeys: Array<string | number>;
+  keyevent: string;
+}
+const useKey = (
+  callback: (currentKeyCode: number, event: Event) => unknown,
+  { detectKeys, keyevent }: IParamType = { detectKeys: [], keyevent: 'keydown' },
+  { dependencies = [] } = {}
+): any => {
   const isKeyeventValid = VALID_KEY_EVENTS.indexOf(keyevent) > -1;
 
   invariant(isKeyeventValid, 'keyevent is not valid: ' + keyevent);
@@ -21,16 +29,18 @@ const useKey = (callback: unknown, { detectKeys = [], keyevent = 'keydown' } = {
 
   allowedKeys = convertToAsciiEquivalent(allowedKeys);
 
-  const handleEvent = (event: any) => {
+  const handleEvent = (event: Event) => {
     const asciiCode = getAsciiCode(event);
     return onKeyPress(asciiCode, callback, allowedKeys, event);
   };
 
-  useEffect(() => {
+  useEffect((): ReturnType<EffectCallback> => {
     const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
     if (!canUseDOM) {
       console.error('Window is not defined');
-      return null;
+      return (): void => {
+        // returning null
+      };
     }
     window.document.addEventListener(keyevent, handleEvent);
     return () => {
@@ -39,4 +49,4 @@ const useKey = (callback: unknown, { detectKeys = [], keyevent = 'keydown' } = {
   }, dependencies);
 };
 
-module.exports = useKey;
+export { useKey };

src/__tests__/keys.test.js

@@ -1,38 +1,40 @@
+import { EffectCallback } from 'react';
+
 const codeLowerCaseA = 65;
 const codeUpperCaseZ = 122;
-const isKeyFromGivenList = (keyCode: never, allowedKeys = []) => {
+const isKeyFromGivenList = (keyCode: number, allowedKeys: Array<string | number> = []): boolean => {
   if (allowedKeys === null || allowedKeys.includes(keyCode) || allowedKeys.length === 0) {
     return true;
   }
   return false;
 };
-const onKeyPress = (currentKeyCode: never, callback: Function, allowedKeys: any, event: any) => {
+const onKeyPress = (
+  currentKeyCode: number,
+  callback: (currentKeyCode: number, event: Event) => unknown,
+  allowedKeys: Array<string | number>,
+  event: Event
+): ReturnType<EffectCallback> => {
   if (isKeyFromGivenList(currentKeyCode, allowedKeys)) {
     callback(currentKeyCode, event);
   }
 };
 
-function getAsciiCode(event) {
-  let keyCode = event.which;
+function getAsciiCode(event: Event): number {
+  let keyCode = (event as KeyboardEvent).which;
   if (keyCode >= codeLowerCaseA && keyCode <= codeUpperCaseZ) {
-    keyCode = event.key.charCodeAt(0);
+    keyCode = (event as KeyboardEvent).key.charCodeAt(0);
   }
   return keyCode;
 }
 
-function convertToAsciiEquivalent(inputArray) {
-  return inputArray.map(item => {
-    let finalVal = item;
-    if (typeof item === 'string') {
-      finalVal = finalVal.charCodeAt(0);
+function convertToAsciiEquivalent(inputArray: Array<string | number>): Array<string | number> {
+  return inputArray.map((item) => {
+    const finalVal = item;
+    if (typeof finalVal === 'string') {
+      return finalVal.charCodeAt(0);
     }
     return finalVal;
   });
 }
 
-module.exports = {
-  isKeyFromGivenList,
-  onKeyPress,
-  convertToAsciiEquivalent,
-  getAsciiCode
-};
+export { isKeyFromGivenList, onKeyPress, convertToAsciiEquivalent, getAsciiCode };

src/index.ts

@@ -8,7 +8,7 @@
       "removeComments": false,
       "declaration": true,
       "outDir": "build",
-      "lib": ["es6"]
+      "lib": ["es6", "DOM"]
     },
     "include": ["src", "src/index.ts"],
     "exclude": ["node_modules", "**/__tests__/*"]