feat: add useInteractions hook

package.json

@@ -72,7 +72,8 @@
     "storybook-addon-locale": "^0.3.6",
     "storybook-addon-themes": "^6.1.0",
     "storybook-rtl-addon": "^0.3.3",
-    "typescript": "^4.3.5"
+    "typescript": "^4.3.5",
+    "@use-gesture/react": "^10.1.5"
   },
   "keywords": [],
   "author": "[email protected]",

packages/core/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./useElementLayout";
+export * from "./useInteractions";

packages/core/src/hooks/useInteractions/index.ts

@@ -0,0 +1,70 @@
+import { useGesture } from "@use-gesture/react";
+import { useState } from "react";
+
+/**
+ * @example
+ *   const { isTabFocused, eventHandlers } = useInteractions();
+ *
+ *   return <button {...eventHandlers()} />;
+ */
+function useInteractions() {
+  const usedProperty: string[] = [];
+  const [isFocused, setFocused] = useState(false);
+  const [isHovered, setHovered] = useState(false);
+  const [isActive, setActive] = useState(false);
+  const [isTabFocused, setTabFocused] = useState(false);
+
+  const eventHandlers = useGesture({
+    // focus
+    onFocus() {
+      usedProperty.includes("isFocused") && setFocused(true);
+    },
+    onBlur() {
+      usedProperty.includes("isFocused") && setFocused(false);
+      usedProperty.includes("isTabFocused") &&
+        isTabFocused &&
+        setTabFocused(false);
+    },
+    // Hover
+    onHover(onHover) {
+      const { hovering: isHovering } = onHover;
+      usedProperty.includes("isHovered") && setHovered(Boolean(isHovering));
+    },
+    // Active
+    onMouseDown() {
+      usedProperty.includes("isActive") && setActive(true);
+    },
+    onMouseUp() {
+      usedProperty.includes("isActive") && setActive(false);
+    },
+    onMouseLeave() {
+      usedProperty.includes("isActive") && setActive(false);
+    },
+    onKeyUp({ event }) {
+      if ((event as any).key === "Tab") {
+        usedProperty.includes("isTabFocused") && setTabFocused(true);
+      }
+    },
+  });
+
+  const target = {
+    eventHandlers,
+    isFocused,
+    isHovered,
+    isActive,
+    isTabFocused,
+  };
+
+  const handler3 = {
+    get: function (target: any, prop: string) {
+      usedProperty.push(prop);
+      return target[prop];
+    },
+  };
+
+  const proxy3 = new Proxy<typeof target>(target, handler3);
+
+  return proxy3;
+}
+
+export { useInteractions };

yarn.lock

@@ -4665,6 +4665,18 @@
     "@typescript-eslint/types" "4.33.0"
     eslint-visitor-keys "^2.0.0"
 
+"@use-gesture/[email protected]":
+  version "10.1.5"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.1.5.tgz#4b956bc8aa6354c20c668930c5cacb16fe4415e4"
+  integrity sha512-Kr3POvOFEfyHyC3MStavQdXdXg8Ys3elJBpxty9tFhNQwOC0+hK/ZHp9vABkre9PCBB/4rtk5Y2t0RG4YUhCpw==
+
+"@use-gesture/react@^10.1.5":
+  version "10.1.5"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.1.5.tgz#078d2c4f399e6451ee9ff169d447b543397d0e67"
+  integrity sha512-Lg3LcQa93MmBt+r2HzmtM+OCWsZ2oOE7jpwfHjXZGlhUWHnv5ZhLrtvNr8rAV2GlKRIjbF8q4BQmP7ahpIlZSQ==
+  dependencies:
+    "@use-gesture/core" "10.1.5"
+
 "@webassemblyjs/[email protected]":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"