Merge pull request #213 from bmv437/feature/enforce-biome

Update biome, fix and enforce recommended rules
meshtastic · Jun 24, 2024 · 0dddf6a · 0dddf6a
2 parents 8942468 + b24c931
commit 0dddf6a
Show file tree

Hide file tree

Showing 45 changed files with 317 additions and 180 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,7 @@
 {
-    "editor.defaultFormatter": "biomejs.biome",
-    "editor.formatOnSave": true
-}
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit"
+  },
+  "editor.formatOnSave": true
+}
diff --git a/biome.json b/biome.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.6.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
   "organizeImports": {
     "enabled": true
   },
@@ -20,7 +20,7 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "all": true
+      "recommended": true
     }
   }
 }
diff --git a/package.json b/package.json
@@ -6,8 +6,9 @@
   "license": "GPL-3.0-only",
   "scripts": {
     "dev": "vite --host",
-    "build": "tsc && vite build",
+    "build": "tsc && pnpm check && vite build ",
     "check": "biome check .",
+    "check:fix": "pnpm check --write",
     "preview": "vite preview",
     "package": "gzipper c -i html,js,css,png,ico,svg,webmanifest,txt dist dist/output && tar -cvf dist/build.tar -C ./dist/output/ $(ls ./dist/output/)"
   },
@@ -60,7 +61,7 @@
     "zustand": "4.5.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.6.3",
+    "@biomejs/biome": "^1.8.1",
     "@buf/meshtastic_protobufs.bufbuild_es": "1.8.0-20240325205556-b11811405eea.2",
     "@types/chrome": "^0.0.263",
     "@types/node": "^20.11.30",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 };
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
@@ -19,7 +19,7 @@ import {
   LayersIcon,
   LayoutIcon,
   LinkIcon,
-  LucideIcon,
+  type LucideIcon,
   MapIcon,
   MessageSquareIcon,
   MoonIcon,
@@ -350,7 +350,7 @@ export const CommandPalette = (): JSX.Element => {
 
     window.addEventListener("keydown", handleKeydown);
     return () => window.removeEventListener("keydown", handleKeydown);
-  }, []);
+  }, [setCommandPaletteOpen]);
 
   return (
     <CommandDialog

diff --git a/src/components/DeviceSelector.tsx b/src/components/DeviceSelector.tsx
@@ -9,8 +9,8 @@ import {
   LanguagesIcon,
   MoonIcon,
   PlusIcon,
-  SunIcon,
   SearchIcon,
+  SunIcon,
 } from "lucide-react";
 
 export const DeviceSelector = (): JSX.Element => {

diff --git a/src/components/Dialog/DialogManager.tsx b/src/components/Dialog/DialogManager.tsx
@@ -1,9 +1,9 @@
+import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.js";
 import { DeviceNameDialog } from "@components/Dialog/DeviceNameDialog.js";
 import { ImportDialog } from "@components/Dialog/ImportDialog.js";
 import { QRDialog } from "@components/Dialog/QRDialog.js";
 import { RebootDialog } from "@components/Dialog/RebootDialog.js";
 import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.js";
-import { RemoveNodeDialog } from "@app/components/Dialog/RemoveNodeDialog.js"
 import { useDevice } from "@core/stores/deviceStore.js";
 
 export const DialogManager = (): JSX.Element => {

diff --git a/src/components/Dialog/QRDialog.tsx b/src/components/Dialog/QRDialog.tsx
@@ -9,10 +9,10 @@ import {
 } from "@components/UI/Dialog.js";
 import { Input } from "@components/UI/Input.js";
 import { Label } from "@components/UI/Label.js";
-import { Protobuf, Types } from "@meshtastic/js";
+import { Protobuf, type Types } from "@meshtastic/js";
 import { fromByteArray } from "base64-js";
 import { ClipboardIcon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { QRCode } from "react-qrcode-logo";
 
 export interface QRDialogProps {
@@ -32,7 +32,7 @@ export const QRDialog = ({
   const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
   const [qrCodeAdd, setQrCodeAdd] = useState<boolean>();
 
-  const allChannels = Array.from(channels.values());
+  const allChannels = useMemo(() => Array.from(channels.values()), [channels]);
 
   useEffect(() => {
     const channelsToEncode = allChannels
@@ -50,8 +50,10 @@ export const QRDialog = ({
       .replace(/\+/g, "-")
       .replace(/\//g, "_");
 
-    setQrCodeUrl(`https://meshtastic.org/e/#${base64}${qrCodeAdd ? "?add=true" : ""}`);
-  }, [channels, selectedChannels, qrCodeAdd, loraConfig]);
+    setQrCodeUrl(
+      `https://meshtastic.org/e/#${base64}${qrCodeAdd ? "?add=true" : ""}`,
+    );
+  }, [allChannels, selectedChannels, qrCodeAdd, loraConfig]);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -97,18 +99,26 @@ export const QRDialog = ({
           </div>
           <div className="flex justify-center">
             <button
-              type="button" 
-              className={ "border-black border-t border-l border-b rounded-l h-10 px-7 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 " + (qrCodeAdd ? "focus:ring-green-800 bg-green-800 text-white" : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600") }
+              type="button"
+              className={`border-black border-t border-l border-b rounded-l h-10 px-7 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 ${
+                qrCodeAdd
+                  ? "focus:ring-green-800 bg-green-800 text-white"
+                  : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
+              }`}
               onClick={() => setQrCodeAdd(true)}
-              >
-                Add Channels
+            >
+              Add Channels
             </button>
             <button
-              type="button" 
-              className={ "border-black border-t border-r border-b rounded-r h-10 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 " + (!qrCodeAdd ? "focus:ring-green-800 bg-green-800 text-white" : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600") }
+              type="button"
+              className={`border-black border-t border-r border-b rounded-r h-10 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 ${
+                !qrCodeAdd
+                  ? "focus:ring-green-800 bg-green-800 text-white"
+                  : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600"
+              }`}
               onClick={() => setQrCodeAdd(false)}
-              >
-                Replace Channels
+            >
+              Replace Channels
             </button>
           </div>
         </div>

diff --git a/src/components/Dialog/RebootDialog.tsx b/src/components/Dialog/RebootDialog.tsx
@@ -37,7 +37,7 @@ export const RebootDialog = ({
           <Input
             type="number"
             value={time}
-            onChange={(e) => setTime(parseInt(e.target.value))}
+            onChange={(e) => setTime(Number.parseInt(e.target.value))}
             action={{
               icon: ClockIcon,
               onClick() {

diff --git a/src/components/Dialog/RemoveNodeDialog.tsx b/src/components/Dialog/RemoveNodeDialog.tsx
@@ -44,7 +44,9 @@ export const RemoveNodeDialog = ({
           </form>
         </div>
         <DialogFooter>
-          <Button variant="destructive" onClick={() => onSubmit()}>Remove</Button>
+          <Button variant="destructive" onClick={() => onSubmit()}>
+            Remove
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

diff --git a/src/components/Dialog/ShutdownDialog.tsx b/src/components/Dialog/ShutdownDialog.tsx
@@ -38,7 +38,7 @@ export const ShutdownDialog = ({
           <Input
             type="number"
             value={time}
-            onChange={(e) => setTime(parseInt(e.target.value))}
+            onChange={(e) => setTime(Number.parseInt(e.target.value))}
             suffix="Minutes"
           />
           <Button

diff --git a/src/components/Form/DynamicForm.tsx b/src/components/Form/DynamicForm.tsx
@@ -1,17 +1,17 @@
 import {
   DynamicFormField,
-  FieldProps,
+  type FieldProps,
 } from "@components/Form/DynamicFormField.js";
 import { FieldWrapper } from "@components/Form/FormWrapper.js";
 import { Button } from "@components/UI/Button.js";
 import { H4 } from "@components/UI/Typography/H4.js";
 import { Subtle } from "@components/UI/Typography/Subtle.js";
 import {
-  Control,
-  DefaultValues,
-  FieldValues,
-  Path,
-  SubmitHandler,
+  type Control,
+  type DefaultValues,
+  type FieldValues,
+  type Path,
+  type SubmitHandler,
   useForm,
 } from "react-hook-form";
 
@@ -26,7 +26,7 @@ export interface BaseFormBuilderProps<T> {
   disabledBy?: DisabledBy<T>[];
   label: string;
   description?: string;
-  properties?: {};
+  properties?: Record<string, unknown>;
 }
 
 export interface GenericFormElementProps<T extends FieldValues, Y> {
@@ -94,9 +94,12 @@ export function DynamicForm<T extends FieldValues>({
           </div>
 
           {fieldGroup.fields.map((field) => (
-            <FieldWrapper label={field.label} description={field.description}>
+            <FieldWrapper
+              key={field.label}
+              label={field.label}
+              description={field.description}
+            >
               <DynamicFormField
-                key={field.label}
                 field={field}
                 control={control}
                 disabled={isDisabled(field.disabledBy)}

diff --git a/src/components/Form/DynamicFormField.tsx b/src/components/Form/DynamicFormField.tsx
@@ -1,6 +1,15 @@
-import { GenericInput, InputFieldProps } from "@components/Form/FormInput.js";
-import { SelectFieldProps, SelectInput } from "@components/Form/FormSelect.js";
-import { ToggleFieldProps, ToggleInput } from "@components/Form/FormToggle.js";
+import {
+  GenericInput,
+  type InputFieldProps,
+} from "@components/Form/FormInput.js";
+import {
+  type SelectFieldProps,
+  SelectInput,
+} from "@components/Form/FormSelect.js";
+import {
+  type ToggleFieldProps,
+  ToggleInput,
+} from "@components/Form/FormToggle.js";
 import type { Control, FieldValues } from "react-hook-form";
 
 export type FieldProps<T> =

diff --git a/src/components/Form/FormInput.tsx b/src/components/Form/FormInput.tsx
@@ -4,7 +4,7 @@ import type {
 } from "@components/Form/DynamicForm.js";
 import { Input } from "@components/UI/Input.js";
 import type { LucideIcon } from "lucide-react";
-import { Controller, FieldValues } from "react-hook-form";
+import { Controller, type FieldValues } from "react-hook-form";
 
 export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "text" | "number" | "password";

diff --git a/src/components/Form/FormSelect.tsx b/src/components/Form/FormSelect.tsx
@@ -9,7 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@components/UI/Select.js";
-import { Controller, FieldValues } from "react-hook-form";
+import { Controller, type FieldValues } from "react-hook-form";
 
 export interface SelectFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "select" | "multiSelect";
@@ -40,7 +40,7 @@ export function SelectInput<T extends FieldValues>({
           : [];
         return (
           <Select
-            onValueChange={(e) => onChange(parseInt(e))}
+            onValueChange={(e) => onChange(Number.parseInt(e))}
             disabled={disabled}
             value={value?.toString()}
             {...remainingProperties}

diff --git a/src/components/Form/FormToggle.tsx b/src/components/Form/FormToggle.tsx
@@ -3,8 +3,8 @@ import type {
   GenericFormElementProps,
 } from "@components/Form/DynamicForm.js";
 import { Switch } from "@components/UI/Switch.js";
-import { ChangeEvent } from "react";
-import { Controller, FieldValues } from "react-hook-form";
+import type { ChangeEvent } from "react";
+import { Controller, type FieldValues } from "react-hook-form";
 
 export interface ToggleFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "toggle";

diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx
@@ -1,4 +1,4 @@
-import type{ ChannelValidation } from "@app/validation/channel.js";
+import type { ChannelValidation } from "@app/validation/channel.js";
 import { DynamicForm } from "@components/Form/DynamicForm.js";
 import { useToast } from "@core/hooks/useToast.js";
 import { useDevice } from "@core/stores/deviceStore.js";
@@ -20,8 +20,12 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
         ...data.settings,
         psk: toByteArray(data.settings.psk ?? ""),
         moduleSettings: {
-          positionPrecision: data.settings.positionEnabled ? data.settings.preciseLocation ? 32 : data.settings.positionPrecision : 0,
-        }
+          positionPrecision: data.settings.positionEnabled
+            ? data.settings.preciseLocation
+              ? 32
+              : data.settings.positionPrecision
+            : 0,
+        },
       },
     });
     connection?.setChannel(channel).then(() => {
@@ -43,9 +47,16 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
           settings: {
             ...channel?.settings,
             psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)),
-            positionEnabled: channel?.settings?.moduleSettings?.positionPrecision != undefined && channel?.settings?.moduleSettings?.positionPrecision > 0,
-            preciseLocation: channel?.settings?.moduleSettings?.positionPrecision == 32,
-            positionPrecision: channel?.settings?.moduleSettings?.positionPrecision == undefined ? 10 : channel?.settings?.moduleSettings?.positionPrecision
+            positionEnabled:
+              channel?.settings?.moduleSettings?.positionPrecision !==
+                undefined &&
+              channel?.settings?.moduleSettings?.positionPrecision > 0,
+            preciseLocation:
+              channel?.settings?.moduleSettings?.positionPrecision === 32,
+            positionPrecision:
+              channel?.settings?.moduleSettings?.positionPrecision === undefined
+                ? 10
+                : channel?.settings?.moduleSettings?.positionPrecision,
           },
         },
       }}
@@ -111,9 +122,32 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
               description:
                 "If not sharing precise location, position shared on channel will be accurate within this distance",
               properties: {
-                enumValue: config.display?.units == 0 ?
-                { "Within 23 km":10, "Within 12 km":11, "Within 5.8 km":12, "Within 2.9 km":13, "Within 1.5 km":14, "Within 700 m":15, "Within 350 m":16, "Within 200 m":17, "Within 90 m":18, "Within 50 m":19 } :
-                { "Within 15 miles":10, "Within 7.3 miles":11, "Within 3.6 miles":12, "Within 1.8 miles":13, "Within 0.9 miles":14, "Within 0.5 miles":15, "Within 0.2 miles":16, "Within 600 feet":17, "Within 300 feet":18, "Within 150 feet":19 }
+                enumValue:
+                  config.display?.units === 0
+                    ? {
+                        "Within 23 km": 10,
+                        "Within 12 km": 11,
+                        "Within 5.8 km": 12,
+                        "Within 2.9 km": 13,
+                        "Within 1.5 km": 14,
+                        "Within 700 m": 15,
+                        "Within 350 m": 16,
+                        "Within 200 m": 17,
+                        "Within 90 m": 18,
+                        "Within 50 m": 19,
+                      }
+                    : {
+                        "Within 15 miles": 10,
+                        "Within 7.3 miles": 11,
+                        "Within 3.6 miles": 12,
+                        "Within 1.8 miles": 13,
+                        "Within 0.9 miles": 14,
+                        "Within 0.5 miles": 15,
+                        "Within 0.2 miles": 16,
+                        "Within 600 feet": 17,
+                        "Within 300 feet": 18,
+                        "Within 150 feet": 19,
+                      },
               },
             },
           ],

diff --git a/src/components/PageComponents/Config/LoRa.tsx b/src/components/PageComponents/Config/LoRa.tsx
@@ -41,7 +41,7 @@ export const LoRa = (): JSX.Element => {
               label: "Hop Limit",
               description: "Maximum number of hops",
               properties: {
-                enumValue: {1:1, 2:2, 3:3, 4:4, 5:5, 6:6, 7:7}
+                enumValue: { 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7 },
               },
             },
             {