Added usehotkeys hook

.eslintrc.js

@@ -6,6 +6,9 @@ module.exports = mergeDeepLeft(
   {
     rules: {
       "@bigbinary/neeto/no-missing-localization": "off",
+      "@bigbinary/neeto/webpack-aliases-and-jsconfig-paths-should-be-in-sync":
+        "off",
+      "@bigbinary/neeto/ensure-compact-objects": "off",
     },
   },
   defaultConfig

.npmignore

@@ -0,0 +1,15 @@
+# Development and build-related files
+node_modules/
+.eslintignore
+.eslintrc
+.prettierignore
+.prettierrc
+babel.config.js
+webpack.config.js
+
+# Editor-specific files and directories
+.vscode/
+
+# Documentation and configuration files not needed for users
+README.md
+.editorconfig

package.json

@@ -1,12 +1,16 @@
 {
-  "name": "@bigbinary/neeto-hotkeys",
+  "name": "@bigbinary/neeto-usehotkeys",
   "version": "1.0.0",
   "description": "React hook for handling keyboard shortcuts, offering a customizable and platform-aware solution, supporting global and scoped modes.",
+  "main": "src/index.js",
   "scripts": {
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "build": "NODE_ENV=production webpack --config webpack.config.js"
   },
   "engines": {
-    "node": ">=18.12"
+    "node": ">=18.12",
+    "npm": ">=9",
+    "yarn": ">=1.22"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,json}": [
@@ -32,13 +36,23 @@
     "url": "https://github.com/bigbinary/neeto-hotkeys/issues"
   },
   "homepage": "https://github.com/bigbinary/neeto-hotkeys#readme",
+  "dependencies": {
+    "mousetrap": "^1.6.5",
+    "mousetrap-global-bind": "^1.1.0",
+    "platform": "^1.3.6",
+    "ramda": "^0.29.1",
+    "react": "^18.2.0"
+  },
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.3",
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
+    "@bigbinary/babel-preset-neeto": "^1.0.7",
     "@bigbinary/eslint-plugin-neeto": "^1.1.31",
     "@bigbinary/neeto-cist": "^1.0.4",
     "@bigbinary/neeto-commons-frontend": "^2.1.38",
+    "babel-plugin-preval": "^5.1.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.29.0",
@@ -55,11 +69,12 @@
     "husky": "^8.0.0",
     "lint-staged": "^15.1.0",
     "prettier": "^3.1.0",
-    "ramda": "^0.29.1"
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "yalc": "^1.0.0-pre.53"
   },
   "peerDependencies": {
     "@bigbinary/neeto-cist": "latest",
-    "@bigbinary/neeto-commons-frontend": "latest",
-    "ramda": "^0.29.1"
+    "@bigbinary/neeto-commons-frontend": "latest"
   }
 }

src/constants.js

@@ -0,0 +1,28 @@
+export const MODES = {
+  default: "default",
+  global: "global",
+  scoped: "scoped",
+};
+
+export const DEFAULT_CONFIG = {
+  mode: MODES.default,
+  unbindOnUnmount: true,
+  enabled: true,
+};
+
+export const MAC_TO_WINDOWS_KEYS_MAP = {
+  option: "alt",
+  command: "ctrl",
+  return: "enter",
+  delete: "backspace",
+};
+
+export const OS = {
+  mac: "OS X",
+  windows: "Windows",
+};
+
+export const KEY_NAMES = {
+  delete: "delete",
+  backspace: "backspace",
+};

src/index.js

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+
+import Mousetrap from "mousetrap";
+import "mousetrap-global-bind";
+import { mergeLeft } from "ramda";
+
+import { DEFAULT_CONFIG, MODES } from "./constants";
+import { convertHotkeyToUsersPlatform } from "./utils";
+
+const useHotKeys = (hotkey, handler, userConfig) => {
+  const ref = useRef(null);
+  const convertedHotkey = convertHotkeyToUsersPlatform(hotkey);
+  const config = mergeLeft(userConfig, DEFAULT_CONFIG);
+
+  if (!handler) {
+    throw new Error("You must provide a handler function to useHotKeys");
+  }
+
+  useEffect(() => {
+    if (!config.enabled) return undefined;
+
+    const mousetrapInstance = bindHotKey({
+      mode: config.mode,
+      hotkey: convertedHotkey,
+      handler,
+      ref,
+    });
+
+    return () => {
+      unBindHotKey({
+        mousetrapInstance,
+        mode: config.mode,
+        hotkey: convertedHotkey,
+      });
+    };
+  }, [handler, config.mode, convertedHotkey, config]);
+
+  return config.mode === MODES.scoped ? ref : null;
+};
+
+const bindHotKey = ({ mode, hotkey, handler, ref }) => {
+  let mousetrapInstance;
+
+  switch (mode) {
+    case MODES.global:
+      Mousetrap.bindGlobal(hotkey, handler);
+      break;
+    case MODES.scoped:
+      mousetrapInstance = Mousetrap(ref.current).bind(hotkey, handler);
+      break;
+    default:
+      mousetrapInstance = Mousetrap.bind(hotkey, handler);
+  }
+
+  return mousetrapInstance;
+};
+
+const unBindHotKey = ({ mousetrapInstance, mode, hotkey }) =>
+  mode === MODES.global
+    ? Mousetrap.unbindGlobal(hotkey)
+    : mousetrapInstance?.unbind(hotkey);
+
+export default useHotKeys;

src/utils.js

@@ -0,0 +1,27 @@
+import platform from "platform";
+import { toPairs } from "ramda";
+
+import { MAC_TO_WINDOWS_KEYS_MAP, OS, KEY_NAMES } from "./constants";
+
+const isMultipleHotkey = hotkey => Array.isArray(hotkey);
+
+const replaceKeys = (hotkey, keyName, replaceWith) =>
+  isMultipleHotkey(hotkey)
+    ? hotkey.map(item => item.replaceAll(keyName, replaceWith))
+    : hotkey.replaceAll(keyName, replaceWith);
+
+const convertHotKeyToWindows = hotkey => {
+  toPairs(MAC_TO_WINDOWS_KEYS_MAP).forEach(([macKey, windowsKey]) => {
+    hotkey = replaceKeys(hotkey, macKey, windowsKey);
+  });
+
+  return hotkey;
+};
+
+export const convertHotkeyToUsersPlatform = hotkey => {
+  const platformInfo = platform.parse(navigator.userAgent);
+  const isOSX = platformInfo.os?.family?.includes(OS.mac);
+  if (isOSX) return replaceKeys(hotkey, KEY_NAMES.delete, KEY_NAMES.backspace);
+
+  return convertHotKeyToWindows(hotkey);
+};

webpack.config.js

@@ -0,0 +1,25 @@
+const path = require("path");
+
+module.exports = {
+  entry: "./src/index.js",
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "index.js",
+    libraryTarget: "commonjs2",
+  },
+  mode: "production",
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env", "@babel/preset-react"],
+          },
+        },
+      },
+    ],
+  },
+};