chore(lint): fix lint errors+warnings

.eslintrc.cjs

@@ -6,11 +6,25 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "plugin:storybook/recommended",
+    "plugin:tailwindcss/recommended",
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh"],
   rules: {
+    "tailwindcss/no-custom-classname": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        args: "all",
+        argsIgnorePattern: "^_",
+        caughtErrors: "all",
+        caughtErrorsIgnorePattern: "^_",
+        destructuredArrayIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        ignoreRestSiblings: true,
+      },
+    ],
     "react-refresh/only-export-components": [
       "warn",
       { allowConstantExport: true },

.prettierrc

@@ -1 +1,4 @@
-{}
+{
+  "tabWidth": 2,
+  "semi": true
+}

package.json

@@ -48,6 +48,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "postcss": "^8.4.38",
     "prettier": "3.3.2",
     "run-script-os": "^1.1.6",

src/AboutModal.tsx

@@ -179,8 +179,8 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
   const ref = useModalRef(open, true);
 
   return (
-    <GenericModal ref={ref} className="min-w-min w-[70vw]" onClose={onClose}>
-      <div className="flex justify-between items-start">
+    <GenericModal ref={ref} className="w-[70vw] min-w-min" onClose={onClose}>
+      <div className="flex items-start justify-between">
         <p>
           The ZMK Project:{" "}
           <ExternalLink href="https://zmk.dev/">website</ExternalLink>,{" "}
@@ -193,20 +193,20 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
           </ExternalLink>
         </p>
         <button
-          className="p-1.5 rounded-md bg-gray-100 text-black hover:bg-gray-300"
+          className="rounded-md bg-gray-100 p-1.5 text-black hover:bg-gray-300"
           onClick={onClose}
         >
           Close
         </button>
       </div>
       <div>
-        <p className="py-1 mr-2">
+        <p className="mr-2 py-1">
           ZMK Studio is made possible thanks to the generous donation of time
           from our contributors, as well as the financial sponsorship from the
           following vendors:
         </p>
       </div>
-      <div className="grid gap-2 auto-rows-auto grid-cols-[auto_minmax(min-content,1fr)] justify-items-center items-center">
+      <div className="grid auto-rows-auto grid-cols-[auto_minmax(min-content,1fr)] items-center justify-items-center gap-2">
         {sponsors.map((s) => {
           const heightVariants = {
             [SponsorSize.Large]: "h-16",
@@ -218,7 +218,7 @@ export const AboutModal = ({ open, onClose }: AboutModalProps) => {
             <React.Fragment key={s.level}>
               <label>{s.level}</label>
               <div
-                className={`grid grid-rows-1 gap-x-1 auto-cols-fr grid-flow-col justify-items-center items-center ${
+                className={`grid auto-cols-fr grid-flow-col grid-rows-1 items-center justify-items-center gap-x-1 ${
                   heightVariants[s.size]
                 }`}
               >

src/App.tsx

@@ -21,7 +21,7 @@ import {
 } from "./tauri/serial";
 import Keyboard from "./keyboard/Keyboard";
 import { UndoRedoContext, useUndoRedo } from "./undoRedo";
-import { usePub, useSub } from "./usePubSub";
+import { emitter, useSub } from "./usePubSub";
 import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
 import { LockStateContext } from "./rpc/LockStateContext";
 import { UnlockModal } from "./UnlockModal";
@@ -68,19 +68,20 @@ const TRANSPORTS: TransportFactory[] = [
 
 async function listen_for_notifications(
   notification_stream: ReadableStream<Notification>,
-  signal: AbortSignal
+  signal: AbortSignal,
 ): Promise<void> {
-  let reader = notification_stream.getReader();
+  const reader = notification_stream.getReader();
+
   const onAbort = () => {
     reader.cancel();
     reader.releaseLock();
   };
+
   signal.addEventListener("abort", onAbort, { once: true });
-  do {
-    let pub = usePub();
 
+  do {
     try {
-      let { done, value } = await reader.read();
+      const { done, value } = await reader.read();
       if (done) {
         break;
       }
@@ -90,17 +91,16 @@ async function listen_for_notifications(
       }
 
       console.log("Notification", value);
-      pub("rpc_notification", value);
+      emitter.emit("rpc_notification", value);
+
+      const subsystem = Object.entries(value).find(([_, v]) => v !== undefined);
 
-      const subsystem = Object.entries(value).find(
-        ([_k, v]) => v !== undefined
-      );
       if (!subsystem) {
         continue;
       }
 
       const [subId, subData] = subsystem;
-      const event = Object.entries(subData).find(([_k, v]) => v !== undefined);
+      const event = Object.entries(subData).find(([_, v]) => v !== undefined);
 
       if (!event) {
         continue;
@@ -109,12 +109,14 @@ async function listen_for_notifications(
       const [eventName, eventData] = event;
       const topic = ["rpc_notification", subId, eventName].join(".");
 
-      pub(topic, eventData);
+      emitter.emit(topic, eventData);
     } catch (e) {
       signal.removeEventListener("abort", onAbort);
       reader.releaseLock();
       throw e;
     }
+
+    // eslint-disable-next-line
   } while (true);
 
   signal.removeEventListener("abort", onAbort);
@@ -126,11 +128,11 @@ async function connect(
   transport: RpcTransport,
   setConn: Dispatch<ConnectionState>,
   setConnectedDeviceName: Dispatch<string | undefined>,
-  signal: AbortSignal
+  signal: AbortSignal,
 ) {
-  let conn = await create_rpc_connection(transport, { signal });
+  const conn = create_rpc_connection(transport, { signal });
 
-  let details = await Promise.race([
+  const details = await Promise.race([
     call_rpc(conn, { core: { getDeviceInfo: true } })
       .then((r) => r?.core?.getDeviceInfo)
       .catch((e) => {
@@ -151,7 +153,7 @@ async function connect(
       setConnectedDeviceName(undefined);
       setConn({ conn: null });
     })
-    .catch((_e) => {
+    .catch(() => {
       setConnectedDeviceName(undefined);
       setConn({ conn: null });
     });
@@ -171,12 +173,13 @@ function App() {
   const [connectionAbort, setConnectionAbort] = useState(new AbortController());
 
   const [lockState, setLockState] = useState<LockState>(
-    LockState.ZMK_STUDIO_CORE_LOCK_STATE_LOCKED
+    LockState.ZMK_STUDIO_CORE_LOCK_STATE_LOCKED,
   );
 
-  useSub("rpc_notification.core.lockStateChanged", (ls) => {
-    setLockState(ls);
-  });
+  useSub(
+    "rpc_notification.core.lockStateChanged",
+    (ls: unknown) => void setLockState(ls as LockState),
+  );
 
   useEffect(() => {
     if (!conn) {
@@ -189,26 +192,26 @@ function App() {
         return;
       }
 
-      let locked_resp = await call_rpc(conn.conn, {
+      const locked_resp = await call_rpc(conn.conn, {
         core: { getLockState: true },
       });
 
       setLockState(
         locked_resp.core?.getLockState ||
-          LockState.ZMK_STUDIO_CORE_LOCK_STATE_LOCKED
+          LockState.ZMK_STUDIO_CORE_LOCK_STATE_LOCKED,
       );
     }
 
     updateLockState();
-  }, [conn, setLockState]);
+  }, [conn, setLockState, reset]);
 
   const save = useCallback(() => {
     async function doSave() {
       if (!conn.conn) {
         return;
       }
 
-      let resp = await call_rpc(conn.conn, { keymap: { saveChanges: true } });
+      const resp = await call_rpc(conn.conn, { keymap: { saveChanges: true } });
       if (!resp.keymap?.saveChanges || resp.keymap?.saveChanges.err) {
         console.error("Failed to save changes", resp.keymap?.saveChanges);
       }
@@ -223,7 +226,7 @@ function App() {
         return;
       }
 
-      let resp = await call_rpc(conn.conn, {
+      const resp = await call_rpc(conn.conn, {
         keymap: { discardChanges: true },
       });
       if (!resp.keymap?.discardChanges) {
@@ -235,15 +238,15 @@ function App() {
     }
 
     doDiscard();
-  }, [conn]);
+  }, [conn, reset]);
 
   const resetSettings = useCallback(() => {
     async function doReset() {
       if (!conn.conn) {
         return;
       }
 
-      let resp = await call_rpc(conn.conn, {
+      const resp = await call_rpc(conn.conn, {
         core: { resetSettings: true },
       });
       if (!resp.core?.resetSettings) {
@@ -255,7 +258,7 @@ function App() {
     }
 
     doReset();
-  }, [conn]);
+  }, [conn, reset]);
 
   const disconnect = useCallback(() => {
     async function doDisconnect() {
@@ -269,15 +272,15 @@ function App() {
     }
 
     doDisconnect();
-  }, [conn]);
+  }, [conn, connectionAbort]);
 
   const onConnect = useCallback(
     (t: RpcTransport) => {
       const ac = new AbortController();
       setConnectionAbort(ac);
       connect(t, setConn, setConnectedDeviceName, ac.signal);
     },
-    [setConn, setConnectedDeviceName, setConnectedDeviceName]
+    [setConn, setConnectedDeviceName],
   );
 
   return (
@@ -295,7 +298,7 @@ function App() {
             open={showLicenseNotice}
             onClose={() => setShowLicenseNotice(false)}
           />
-          <div className="bg-base-100 text-base-content h-full max-h-[100vh] w-full max-w-[100vw] inline-grid grid-cols-[auto] grid-rows-[auto_1fr_auto] overflow-hidden">
+          <div className="inline-grid size-full max-h-screen max-w-[100vw] grid-cols-[auto] grid-rows-[auto_1fr_auto] overflow-hidden bg-base-100 text-base-content">
             <AppHeader
               connectedDeviceLabel={connectedDeviceName}
               canUndo={canUndo}

src/AppFooter.tsx

@@ -8,14 +8,14 @@ export const AppFooter = ({
   onShowLicenseNotice,
 }: AppFooterProps) => {
   return (
-    <div className="grid justify-center p-1 bg-base-200">
+    <div className="grid justify-center bg-base-200 p-1">
       <div>
         <span>&copy; 2024 - The ZMK Contributors</span> -{" "}
-        <a className="hover:text-primary hover:cursor-pointer" onClick={onShowAbout}>
+        <a className="hover:cursor-pointer hover:text-primary" onClick={onShowAbout}>
           About ZMK Studio
         </a>{" "}
         -{" "}
-        <a className="hover:text-primary hover:cursor-pointer" onClick={onShowLicenseNotice}>
+        <a className="hover:cursor-pointer hover:text-primary" onClick={onShowLicenseNotice}>
           License NOTICE
         </a>
       </div>