Switch all classNames helpers to clsx

src/components/common/Property.tsx

@@ -1,6 +1,6 @@
 import type { FunctionComponent, ReactFragment, ReactNode } from "react";
 import React from "react";
-import { classNames } from "@/helpers";
+import clsx from "clsx";
 
 type PropertyProps = {
   title: string | ReactNode | ReactFragment;
@@ -17,8 +17,8 @@ const Property: FunctionComponent<PropertyProps> = ({
 }) => {
   return (
     <>
-      <dt className={classNames("font-medium", titleClass)}>{title}:</dt>
+      <dt className={clsx("font-medium", titleClass)}>{title}:</dt>
-      <dd className={classNames("mt-2 mb-2 ml-6", valueClass)}>{children}</dd>
+      <dd className={clsx("mt-2 mb-2 ml-6", valueClass)}>{children}</dd>
     </>
   );
 };

src/components/form/LookupInput.tsx

@@ -1,15 +1,16 @@
 import { useForm } from "react-hook-form";
 import type { FunctionComponent } from "react";
 import { Fragment, useState } from "react";
-import { classNames, onPromise, preventDefault } from "@/helpers";
+import { onPromise, preventDefault } from "@/helpers";
 import type { SubmitProps, TargetType } from "@/types";
-import { ObjectType } from "@/types";
+import type { ObjectType } from "@/types";
 import {
   CheckIcon,
   ChevronUpDownIcon,
   MagnifyingGlassIcon,
 } from "@heroicons/react/20/solid";
 import { Listbox, Transition } from "@headlessui/react";
+import clsx from "clsx";
 
 type LookupInputProps = {
   isLoading?: boolean;
@@ -84,7 +85,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
             />
           </div>
           <input
-            className={classNames(
+            className={clsx(
               "lg:py-4.5 custom-select block w-full rounded-l-md border border-transparent",
               "bg-zinc-700 py-2 pl-10 pr-3 text-sm placeholder-zinc-400 placeholder:translate-y-2 focus:text-zinc-200",
               " focus:outline-none sm:text-sm md:py-3 md:text-base lg:text-lg"
@@ -116,9 +117,9 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
             }}
             disabled={isLoading}
           >
-            <div className="relative min-w-[10rem]">
+            <div className="relative md:min-w-[10rem]">
               <Listbox.Button
-                className={classNames(
+                className={clsx(
                   "relative h-full w-full cursor-default rounded-r-lg bg-zinc-700 py-2 pl-3 pr-10",
                   "text-left focus:outline-none focus-visible:border-indigo-500 sm:text-sm",
                   "focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 "
@@ -142,7 +143,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
                 leaveTo="opacity-0"
               >
                 <Listbox.Options
-                  className={classNames(
+                  className={clsx(
                     "scrollbar-thin absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-700 py-1",
                     "text-zinc-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                   )}
@@ -151,7 +152,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
                     <Listbox.Option
                       key={key}
                       className={({ active }) =>
-                        classNames(
+                        clsx(
                           "relative cursor-default select-none py-2 pl-10 pr-4",
                           active ? "bg-zinc-800 text-zinc-300" : null
                         )
@@ -161,7 +162,7 @@ const LookupInput: FunctionComponent<LookupInputProps> = ({
                       {({ selected }) => (
                         <>
                           <span
-                            className={classNames(
+                            className={clsx(
                               "block",
                               selected ? "font-medium" : null
                             )}

src/helpers.ts

@@ -30,14 +30,6 @@ export function truncated(input: string, maxLength: number, ellipsis = "...") {
   );
 }
 
-/**
- * A helper method for combining strings of classes in React.
- * @param classes
- */
-export function classNames(...classes: (string | null | undefined)[]) {
-  return classes.filter(Boolean).join(" ");
-}
-
 export function preventDefault(event: SyntheticEvent | Event) {
   event.preventDefault();
 }

src/hooks/useLookup.tsx

@@ -21,7 +21,6 @@ import { truncated } from "@/helpers";
 import type { ZodSchema } from "zod";
 import type { ParsedGeneric } from "@/components/lookup/Generic";
 import { Maybe, Result } from "true-myth";
-import { err } from "true-myth/dist/es/result";
 
 export type WarningHandler = (warning: { message: string }) => void;