keyboard shortcut

declarations.d.ts

@@ -0,0 +1 @@
+declare module "*.module.scss";

package-lock.json

@@ -12,7 +12,8 @@
         "classnames": "^2.3.2",
         "date-fns": "^2.30.0",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-keybind": "^0.9.4"
       },
       "devDependencies": {
         "@logseq/libs": "^0.0.1-alpha.29",
@@ -1460,6 +1461,11 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-keybind": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/react-keybind/-/react-keybind-0.9.4.tgz",
+      "integrity": "sha512-JVlXJ4ONQFQtEDZqXpc5NZ3oLEJtj7lKCPMLsbAO6FfkXJ21VHKyDtiLUIMio3d3oSC8QfxDOQtUEeVrMW6HfQ=="
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",

package.json

@@ -7,6 +7,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite",
+    "watch": "vite build --watch",
     "build": "vite build"
   },
   "devDependencies": {
@@ -30,6 +31,7 @@
     "classnames": "^2.3.2",
     "date-fns": "^2.30.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-keybind": "^0.9.4"
   }
 }

src/App.tsx

@@ -1,7 +1,7 @@
 import { endOfMonth, format, startOfMonth } from "date-fns";
 import styles from "./App.module.scss";
 import Calendar from "./calendar/Calendar";
-import { useEffect } from "react";
+import KeyboardShortcutWrapper from "./KeyboardShortcutWrapper";
 
 export default function App() {
   const onDateClick = async (date: Date) => {
@@ -41,14 +41,18 @@ export default function App() {
     logseq.hideMainUI();
   };
 
-  return (
-    <main className={styles.app}>
-      <div className="header">
-        Header
-        <button onClick={() => logseq.hideMainUI()}>Close</button>
-      </div>
+  const exit = () => logseq.hideMainUI();
 
-      <Calendar onDateClick={onDateClick} />
-    </main>
+  return (
+    <KeyboardShortcutWrapper onExit={exit}>
+      <main className={styles.app}>
+        <div className="header">
+          Header
+          <button onClick={exit}>Close</button>
+        </div>
+
+        <Calendar onDateClick={onDateClick} />
+      </main>
+    </KeyboardShortcutWrapper>
   );
 }

src/KeyboardShortcutWrapper.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+
+interface KeyboardShortcutWrapperProps {
+  onExit?: () => void;
+  children: JSX.Element;
+}
+
+export default function KeyboardShortcutWrapper({
+  onExit,
+  children,
+}: KeyboardShortcutWrapperProps) {
+  useEffect(() => {
+    const cb = (evt: KeyboardEvent) => {
+      console.log("hellosu", evt);
+
+      if (evt.key === "Escape") {
+        onExit?.();
+      }
+    };
+    document.addEventListener("keyup", cb);
+    return () => {
+      document.removeEventListener("keyup", cb);
+    };
+  }, []);
+
+  return children;
+}

src/calendar/Calendar.module.scss

@@ -30,5 +30,15 @@
 
 .scrollyPart {
   flex-grow: 1;
-  overflow: auto;
+
+  overflow-y: scroll; /* Add the ability to scroll the y axis */
+
+  /* Hide the scrollbar for Internet Explorer, Edge and Firefox */
+  -ms-overflow-style: none; /* Internet Explorer and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  /* Hide the scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }

tsconfig.json

@@ -75,5 +75,6 @@
     /* Skip type checking of declaration files. */
     "forceConsistentCasingInFileNames": true
     /* Disallow inconsistently-cased references to the same file. */
-  }
+  },
+  "include": ["./declarations.d.ts", "**/*.ts", "**/*.tsx"]
 }

vite.config.ts

@@ -2,4 +2,8 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
 
-export default defineConfig({ base: "", plugins: [react(), tsconfigPaths()] });
+export default defineConfig({
+  base: "",
+  build: { sourcemap: true },
+  plugins: [react(), tsconfigPaths()],
+});