chore: fix linting errors

kitsonk · kitsonk · commit 362ac6ec71fd · 2025-04-30T19:30:44.000+10:00
diff --git a/components/AddButton.tsx b/components/AddButton.tsx
@@ -6,7 +6,7 @@ export function AddButton(
     type = "submit",
     children,
     ...props
-  }: JSX.HTMLAttributes<HTMLButtonElement>,
+  }: JSX.ButtonHTMLAttributes<HTMLButtonElement>,
 ) {
   return (
     <button
diff --git a/components/AppFrame.tsx b/components/AppFrame.tsx
@@ -20,7 +20,7 @@ export function AppFrame(
   },
 ) {
   return (
-    <div class={"antialiased bg-gray-50 dark:bg-gray-900"}>
+    <div class="antialiased bg-gray-50 dark:bg-gray-900">
       <nav class="bg-white border-b border-gray-200 px-4 py-2.5 dark:bg-gray-800 dark:border-gray-700 fixed left-0 right-0 top-0 z-50">
         <div class="flex flex-wrap justify-between items-center">
           <div class="flex justify-start items-center">
diff --git a/components/CloseButton.tsx b/components/CloseButton.tsx
@@ -6,7 +6,7 @@ export function CloseButton(
     class: className,
     type = "button",
     ...props
-  }: JSX.HTMLAttributes<HTMLButtonElement>,
+  }: JSX.ButtonHTMLAttributes<HTMLButtonElement>,
 ) {
   return (
     <button
diff --git a/components/DbList.tsx b/components/DbList.tsx
@@ -10,7 +10,7 @@ export function DbList({ project, dbs }: { project: string; dbs: DashDb[] }) {
     <div>
       <h1 class="text-xl font-bold py-2">KV Databases</h1>
       <ul class="space-y-2">
-        {dbs.map((db) => <Db project={project} db={db} />)}
+        {dbs.map((db, idx) => <Db key={idx} project={project} db={db} />)}
       </ul>
     </div>
   );
diff --git a/components/Dialog.tsx b/components/Dialog.tsx
@@ -3,7 +3,7 @@ import { useSignalEffect } from "@preact/signals";
 import { useRef } from "preact/hooks";
 import { asSignal } from "$utils/signals.ts";
 
-interface DialogProps extends JSX.HTMLAttributes<HTMLDialogElement> {
+interface DialogProps extends JSX.DialogHTMLAttributes<HTMLDialogElement> {
   returnValue?: JSX.SignalLike<string>;
 }
 
diff --git a/components/DialogAddUpdateLocal.tsx b/components/DialogAddUpdateLocal.tsx
@@ -93,8 +93,7 @@ export function DialogAddUpdateLocal(
                 class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 md:w-96"
                 placeholder="Path (on server) to local store"
                 required
-              >
-              </input>
+              />
             </div>
           )}
           <div class="sm:col-span-2">
@@ -107,8 +106,7 @@ export function DialogAddUpdateLocal(
               value={store?.name}
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 md:w-96"
               placeholder="Friendly name (optional)"
-            >
-            </input>
+            />
           </div>
         </div>
         <div class="w-full my-2 md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center md:space-x-3 flex-shrink-0">
diff --git a/components/DialogAddUpdateRemote.tsx b/components/DialogAddUpdateRemote.tsx
@@ -114,8 +114,7 @@ export function DialogAddUpdateRemote(
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
               placeholder="Location of remote store"
               required
-            >
-            </input>
+            />
           </div>
           <div>
             <Label for="name">Name</Label>
@@ -127,8 +126,7 @@ export function DialogAddUpdateRemote(
               value={store?.name}
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
               placeholder="Label for URL (optional)"
-            >
-            </input>
+            />
           </div>
           <div>
             <Label for="access_token">Access Token</Label>
@@ -140,8 +138,7 @@ export function DialogAddUpdateRemote(
               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
               placeholder="Token to access remote store"
               required
-            >
-            </input>
+            />
           </div>
         </div>
         <div class="w-full my-2 md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center md:space-x-3 flex-shrink-0">
diff --git a/components/DialogDeleteEntries.tsx b/components/DialogDeleteEntries.tsx
@@ -30,9 +30,6 @@ export function DialogDeleteEntries(
     loadKeys(): void;
   },
 ) {
-  if (!databaseId) {
-    return null;
-  }
   const form = useRef<HTMLFormElement>(null);
   const alert = useSignal<ComponentChildren>(undefined);
   const loading = useSignal(false);
@@ -67,6 +64,10 @@ export function DialogDeleteEntries(
 
   useSignalEffect(loadTree);
 
+  if (!databaseId) {
+    return null;
+  }
+
   return (
     <Dialog
       class="p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5 md:w-1/2 xl:w-1/3"
diff --git a/components/DialogEditValue.tsx b/components/DialogEditValue.tsx
@@ -37,9 +37,6 @@ export function DialogEditValue(
     loadValue(): void;
   },
 ) {
-  if (!entry.value) {
-    return null;
-  }
   const form = useRef<HTMLFormElement>(null);
   const alert = useSignal<ComponentChildren>(undefined);
 
@@ -50,6 +47,10 @@ export function DialogEditValue(
   );
   const key = useComputed(() => entry.value!.key);
 
+  if (!entry.value) {
+    return null;
+  }
+
   return (
     <Dialog
       class="p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
diff --git a/components/DialogExport.tsx b/components/DialogExport.tsx
@@ -13,14 +13,14 @@ export function DialogExport(
     prefix: Signal<KvKeyJSON>;
   },
 ) {
-  if (!databaseId) {
-    return null;
-  }
-
   const href = useComputed(() =>
     `/api/kv/${databaseId}/_bulk/${keyJsonToPath(prefix.value)}`
   );
 
+  if (!databaseId) {
+    return null;
+  }
+
   return (
     <Dialog
       class="p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
diff --git a/components/DialogImport.tsx b/components/DialogImport.tsx
@@ -19,17 +19,17 @@ export function DialogImport(
     href?: string;
   },
 ) {
-  if (!databaseId) {
-    return null;
-  }
-
   const target = useComputed(() =>
     `/api/kv/${databaseId}/_bulk/${keyJsonToPath(prefix.value)}`
   );
   const form = useRef<HTMLFormElement>(null);
   const alert = useSignal<ComponentChildren>(undefined);
   const uploading = useSignal(false);
 
+  if (!databaseId) {
+    return null;
+  }
+
   return (
     <Dialog
       class="p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5"
diff --git a/components/DialogQuery.tsx b/components/DialogQuery.tsx
@@ -16,11 +16,9 @@ export function DialogQuery(
   },
 ) {
   const form = useRef<HTMLFormElement>(null);
-  const localFilters = filters.peek().length
-    ? useSignal<(KvFilterJSON | KvFilterIndeterminateJSON)[]>(
-      [...filters.value],
-    )
-    : useSignal<(KvFilterJSON | KvFilterIndeterminateJSON)[]>([{ kind: "" }]);
+  const localFilters = useSignal<(KvFilterJSON | KvFilterIndeterminateJSON)[]>(
+    filters.peek().length ? [...filters.value] : [{ kind: "" }],
+  );
 
   const handleFilterOnChange = (index: number, value: KvFilterJSON) =>
     localFilters.value = localFilters.value.map((filter, i) =>
diff --git a/components/HexViewer.tsx b/components/HexViewer.tsx
@@ -1,3 +1,4 @@
+// deno-lint-ignore-file react-no-danger
 import { type Signal, useSignal } from "@preact/signals";
 import { decodeBase64Url } from "@std/encoding/base64url";
 
diff --git a/components/Jobs.tsx b/components/Jobs.tsx
@@ -118,7 +118,7 @@ function JobItem(
 export function Jobs() {
   const jobs = getJobs();
   if (jobs.length) {
-    return <>{jobs.map((job) => <JobItem job={job} />)}</>;
+    return <>{jobs.map((job, idx) => <JobItem key={idx} job={job} />)}</>;
   } else {
     return (
       <div class="col-span-3 p-8 flex justify-center">
diff --git a/components/KvEntry.tsx b/components/KvEntry.tsx
@@ -59,15 +59,17 @@ export function KvEntry(
     loadKeys(): void;
   },
 ) {
+  const editDialogOpen = useSignal(false);
+  const addEntryDialogOpen = useSignal(false);
+  const deleteEntryDialogOpen = useSignal(false);
+  const currentKey = useComputed(() => entry.value?.key);
+
   if (!entry.value) {
     return null;
   }
   const { versionstamp, value, meta, key } = entry.value;
   const editable = isEditable(value ?? meta);
-  const editDialogOpen = useSignal(false);
-  const addEntryDialogOpen = useSignal(false);
-  const deleteEntryDialogOpen = useSignal(false);
-  const currentKey = useComputed(() => entry.value?.key);
+
   return (
     <>
       {editable && (
diff --git a/components/KvSimpleValueEditor.tsx b/components/KvSimpleValueEditor.tsx
@@ -185,7 +185,9 @@ export function KvSimpleValueEditor(
       >
         {TYPE_OPTIONS
           .filter(([type]) => only ? only.includes(type) : true)
-          .map(([type, label]) => <option value={type}>{label}</option>)}
+          .map(([type, label], idx) => (
+            <option key={idx} value={type}>{label}</option>
+          ))}
       </select>
       <Editor
         id={id}
diff --git a/components/KvValue.tsx b/components/KvValue.tsx
@@ -1,3 +1,4 @@
+// deno-lint-ignore-file react-no-danger
 import { type ComponentChildren } from "preact";
 import { type BlobMeta } from "@kitsonk/kv-toolbox/blob";
 import { type KvKeyJSON, type KvValueJSON, toValue } from "@deno/kv-utils/json";
diff --git a/components/Markdown.tsx b/components/Markdown.tsx
@@ -1,3 +1,4 @@
+// deno-lint-ignore-file react-no-danger
 import { render } from "@deno/gfm";
 
 import "prismjs/components/prism-json.js";
diff --git a/components/OrgList.tsx b/components/OrgList.tsx
@@ -32,7 +32,7 @@ export function OrgList(
     <div>
       <h1 class="text-xl font-bold py-2">Organizations</h1>
       <ul class="space-y-2">
-        {organizations.map((org) => <Org data={org} />)}
+        {organizations.map((org, idx) => <Org key={idx} data={org} />)}
       </ul>
     </div>
   );
diff --git a/components/ProjectList.tsx b/components/ProjectList.tsx
@@ -10,7 +10,12 @@ export function ProjectList({ projects }: { projects: DashProject[] }) {
     <>
       <h1 class="text-xl font-bold py-2">Projects</h1>
       <ul class="space-y-2">
-        {projects.map((project) => <Project project={project} />)}
+        {projects.map((project, idx) => (
+          <Project
+            key={idx}
+            project={project}
+          />
+        ))}
       </ul>
     </>
   );
diff --git a/components/QueryFilter.tsx b/components/QueryFilter.tsx
@@ -185,9 +185,9 @@ function SubFilters(
     onChange: (index: number, value: KvFilterJSON) => void;
   },
 ) {
-  const localFilters = filter.filters.length
-    ? useSignal<(KvFilterJSON | KvFilterIndeterminateJSON)[]>(filter.filters)
-    : useSignal<(KvFilterJSON | KvFilterIndeterminateJSON)[]>([{ kind: "" }]);
+  const localFilters = useSignal<(KvFilterJSON | KvFilterIndeterminateJSON)[]>(
+    filter.filters.length ? filter.filters : [{ kind: "" }],
+  );
   const handleFilterOnChange = (localIndex: number, value: KvFilterJSON) => {
     localFilters.value = localFilters.value.map((filter, i) =>
       i === localIndex ? value : filter
@@ -457,6 +457,7 @@ export function QueryFilter(
           {valueEditor}
         </div>
         <button
+          type="button"
           class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
           onClick={() => onRemove(index)}
         >
diff --git a/components/Toaster.tsx b/components/Toaster.tsx
@@ -3,7 +3,7 @@ import { state } from "$utils/state.ts";
 
 export function Toaster() {
   const children = state
-    .notifications.value.map((props) => <Toast {...props} />);
+    .notifications.value.map((props, idx) => <Toast key={idx} {...props} />);
   return (
     <div class="fixed right-5 bottom-5 md:w-72">
       {children}
diff --git a/islands/LocalKvList.tsx b/islands/LocalKvList.tsx
@@ -7,19 +7,19 @@ import { type KvLocalInfo } from "$utils/kv.ts";
 export default function LocalKvList(
   { stores }: { stores?: KvLocalInfo[] | undefined },
 ) {
+  const addDialogOpen = useSignal(false);
+
   if (!stores) {
     return null;
   }
 
-  const addDialogOpen = useSignal(false);
-
   return (
     <>
       <DialogAddUpdateLocal open={addDialogOpen} />
       <div>
         <h1 class="text-xl font-bold py-2">Local</h1>
         <ul class="space-y-2">
-          {stores.map((db) => <LocalKv db={db} />)}
+          {stores.map((db, idx) => <LocalKv key={idx} db={db} />)}
         </ul>
         <div class="w-full my-2 md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
           <AddButton onClick={() => addDialogOpen.value = true}>
diff --git a/islands/RemoteKvList.tsx b/islands/RemoteKvList.tsx
@@ -30,7 +30,9 @@ export default function RemoteKvList(
         {remoteStores.value.length
           ? (
             <ul class="space-y-2">
-              {remoteStores.value.map((db) => <RemoteKv db={db} />)}
+              {remoteStores.value.map((db, idx) => (
+                <RemoteKv key={idx} db={db} />
+              ))}
             </ul>
           )
           : (
diff --git a/utils/signals.ts b/utils/signals.ts
@@ -10,5 +10,6 @@ export function isSignalLike<T>(value: unknown): value is JSX.SignalLike<T> {
 }
 
 export function asSignal<T>(value: JSX.Signalish<T>): JSX.SignalLike<T> {
+  // deno-lint-ignore react-rules-of-hooks
   return isSignalLike(value) ? value : useSignal(value);
 }

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { useSignalEffect } from "@preact/signals";`
`3`	`3`	`import { useRef } from "preact/hooks";`
`4`	`4`	`import { asSignal } from "$utils/signals.ts";`
`5`	`5`
`6`		`-interface DialogProps extends JSX.HTMLAttributes<HTMLDialogElement> {`
	`6`	`+interface DialogProps extends JSX.DialogHTMLAttributes<HTMLDialogElement> {`
`7`	`7`	`returnValue?: JSX.SignalLike<string>;`
`8`	`8`	`}`
`9`	`9`