chore(refactor): modernizing SearchBox forwardRef behavior

- removed `React` import from type utils

Author: kuroji-fusky

apps/web/src/components/Forms/SearchBox.tsx

@@ -1,33 +1,28 @@
-import type { MapElement } from "@/types/utils"
-import { forwardRef } from "react"
+import { ReactForwardRef } from "@mav/shared/types"
 import { LuSearch as SearchIcon } from "react-icons/lu"
 
-const SearchBox = forwardRef(
-  (
-    {
-      placeholder
-    }: {
-      placeholder?: string
-    },
-    ref: React.ForwardedRef<MapElement<"input">>
-  ) => {
-    return (
-      <div className="relative w-full">
-        <div className="pointer-events-none absolute left-3.5 flex h-full items-center justify-center">
-          <SearchIcon size={18} />
-        </div>
-        <input
-          ref={ref}
-          type="search"
-          name="Search"
-          className="bg-200 font-inter h-full w-full rounded-md border-none py-2 pl-10 pr-1 text-sm"
-          placeholder={placeholder}
-        />
-      </div>
-    )
-  }
-)
+interface SearchBoxProps {
+  placeholder?: string
+}
 
-SearchBox.displayName = "SearchBox"
+export function SearchBox({
+  ref,
+  ...props
+}: ReactForwardRef<HTMLInputElement, SearchBoxProps>) {
+  const { placeholder } = props
 
-export default SearchBox
+  return (
+    <div className="relative w-full">
+      <div className="pointer-events-none absolute left-3.5 flex h-full items-center justify-center">
+        <SearchIcon size={18} />
+      </div>
+      <input
+        ref={ref}
+        type="search"
+        name="Search"
+        className="bg-200 font-inter h-full w-full rounded-md border-none py-2 pl-10 pr-1 text-sm"
+        placeholder={placeholder}
+      />
+    </div>
+  )
+}

apps/web/src/components/Forms/index.tsx

@@ -1,5 +1,4 @@
-import RichTextField from "./RichTextField"
-import SearchBox from "./SearchBox"
-import SelectField from "./SelectField"
-
-export { RichTextField, SearchBox, SelectField }
+export * from "./RichTextField"
+export * from "./SearchBox"
+export * from "./SelectField"
+export * from "./Checkbox"

apps/web/src/types/utils.ts

@@ -1,4 +1,3 @@
-import type React from "react"
 import { Artwork, Character } from "./characters"
 import { UserType } from "./users"