dev-tools

Author: juliuxu

packages/dev-tools/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @julianjark/dev-tools
 
+## 0.13.0
+
+### Minor Changes
+
+- don't trigger shortcuts on input fields
+
 ## 0.12.0
 
 ### Minor Changes

packages/dev-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@julianjark/dev-tools",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Helper tools for development",
   "author": "Julian Jark",
   "license": "ISC",

packages/dev-tools/src/dev-tools-trigger.tsx

@@ -0,0 +1,42 @@
+import { useRef } from "react";
+
+interface DevToolsTriggerProps {
+  onTrigger: () => void;
+}
+
+/**
+ * Trigger dev tools by clicking 5 times on the bottom right corner of the screen
+ * Allows devtools to be opened on mobile
+ */
+export function DevToolsTrigger({ onTrigger }: DevToolsTriggerProps) {
+  const clickRef = useRef({ clicks: 0, lastClicked: 0 });
+  const onClick = () => {
+    const now = Date.now();
+    const { clicks, lastClicked } = clickRef.current;
+    if (now - lastClicked > 500) {
+      clickRef.current = { clicks: 1, lastClicked: now };
+    } else {
+      clickRef.current = { clicks: clicks + 1, lastClicked: now };
+    }
+
+    if (clickRef.current.clicks > 5) {
+      clickRef.current = { clicks: 0, lastClicked: 0 };
+      onTrigger();
+    }
+  };
+  return (
+    <div style={{ position: "relative" }}>
+      <button
+        onClick={onClick}
+        style={{
+          height: 160,
+          width: 160,
+          position: "absolute",
+          bottom: 0,
+          right: 0,
+          opacity: 0,
+        }}
+      />
+    </div>
+  );
+}

packages/dev-tools/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./preview-mode.ui";
 export * from "./use-shortcut";
+export * from "./dev-tools-trigger";

packages/dev-tools/src/use-shortcut.ts

@@ -3,6 +3,15 @@ import { useCallback, useEffect, useRef } from "react";
 export const useShortcut = (keys: string, onTrigger: () => unknown) => {
   const pressedKeysRef = useRef("");
   const handleKeyPress = useCallback((event: KeyboardEvent) => {
+    const target = (event.target || {}) as HTMLElement;
+    if (
+      target.isContentEditable ||
+      target.nodeName === "INPUT" ||
+      target.nodeName === "TEXTAREA"
+    ) {
+      return;
+    }
+
     pressedKeysRef.current += event.key;
     if (pressedKeysRef.current === keys) {
       pressedKeysRef.current = "";

packages/eslint-config-custom/index.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: ["turbo", "prettier"],
+  rules: {
+    "@next/next/no-img-element": "off",
+  },
 };