Set ts compiler to strict, refactored a bit

src/components/input.tsx

@@ -1,7 +1,10 @@
 /* @refresh reload */
-import { type Component, createSignal, JSX, Setter } from "solid-js";
+import { type Component, createSignal, JSX, onMount, Setter, Show } from "solid-js";
 import type { InputProps } from "../types/types";
 import Row from "./row";
+import { Icon } from "solid-heroicons";
+import { magnifyingGlass, xMark } from "solid-heroicons/solid";
+import { getElementById } from "../utils/dom";
 
 function setupEventListener(id: string, setIsHover: Setter<boolean>): () => void {
     let isMounted = true;
@@ -12,7 +15,7 @@ function setupEventListener(id: string, setIsHover: Setter<boolean>): () => void
         }
     }
 
-    const el = document.getElementById(id);
+    const el = getElementById(id);
     el?.addEventListener("pointerenter", () => hover(true));
     el?.addEventListener("pointerleave", () => hover(false));
 
@@ -29,7 +32,7 @@ function setupEventListener(id: string, setIsHover: Setter<boolean>): () => void
  */
 function setSetIsText(id: string | undefined, isText: boolean, setIsText: Setter<boolean>): void {
     if (id) {
-        const el = document.getElementById(id) as HTMLInputElement | HTMLTextAreaElement | null;
+        const el = getElementById<HTMLInputElement | HTMLTextAreaElement>(id);
         if (el && el.value !== "" !== isText) {
             setIsText(el.value !== "");
         }
@@ -43,7 +46,7 @@ interface Input<T> extends InputProps<T> {
     inputClass?: string,
 }
 
-export const Input: Component<Input<HTMLInputElement>> = (
+export const Input: Component<Input<HTMLInputElement>> = ( // TODO remove leading and trailing from component
     {
         className,
         id,
@@ -71,7 +74,7 @@ export const Input: Component<Input<HTMLInputElement>> = (
      */
     const [isText, setIsText] = createSignal(false);
 
-    document.addEventListener("DOMContentLoaded", () => {
+    onMount(() => {
         if (id && title) {
             setupEventListener(id, setIsHover);
         }
@@ -102,19 +105,71 @@ export const Input: Component<Input<HTMLInputElement>> = (
     );
 }
 
-function HoverTitle(
+const HoverTitle: Component<{ title?: string, isActive?: boolean, htmlFor?: string }> = (
     {
         title,
         isActive = false,
         htmlFor
-    }: { title?: string | null, isActive?: boolean, htmlFor?: string }): JSX.Element {
-    return (
-        <label class={ `absolute pointer-events-none
+    }) => (
+    <label class={ `absolute pointer-events-none
                  ${ isActive ? "-top-2 left-3 default-bg text-sm" : "left-2 top-1" } 
             transition-all duration-150 text-gray-600 dark:text-gray-400` }
-               for={ htmlFor }>
-            <div class={ "z-50 relative" }>{ title }</div>
-            <div class={ "w-full h-2 default-bg absolute bottom-1/3 z-10" } />
-        </label>
+           for={ htmlFor }>
+        <div class={ "z-50 relative" }>{ title }</div>
+        <div class={ "w-full h-2 default-bg absolute bottom-1/3 z-10" } />
+    </label>
+);
+
+interface SearchProps extends InputProps<HTMLInputElement> {
+    typingDefault?: boolean
+}
+
+export const Search: Component<SearchProps> = (
+    {
+        typingDefault = false,
+        id = "search",
+        className
+    }) => {
+
+    const [typing, setTyping] = createSignal(typingDefault);
+
+    function getInputElement() {
+        return getElementById<HTMLInputElement>(id);
+    }
+
+    function clearSearch(): void {
+        const el = getInputElement();
+        if (el) {
+            el.value = "";
+            setTyping(false);
+            history.replaceState(null, "", location.pathname);
+            el.focus();
+        }
+    }
+
+    function onChange(): void {
+        const el = getInputElement();
+        if (el && (el.value !== "") !== typing()) {
+            setTyping(el.value !== "");
+        }
+    }
+
+    return (
+        <Input inputClass={ `rounded-xl pl-7 h-10 w-full pr-8` } className={ `w-full ${ className }` }
+               id={ id }
+               placeholder={ "¬A & B -> C" }
+               type={ "text" }
+               onChange={ onChange }
+               leading={ <Icon path={ magnifyingGlass } aria-label={ "Magnifying glass" }
+                               class={ "pl-2 absolute" } /> }
+               trailing={ <Show when={ typing() } keyed>
+                   <button class={ "absolute right-2" }
+                           title={ "Clear" }
+                           type={ "reset" }
+                           onClick={ clearSearch }>
+                       <Icon path={ xMark } aria-label={ "The letter X" } />
+                   </button>
+               </Show> }
+        />
     );
 }