From 4114f2981849c33506f2974ef518974c5caf47e2 Mon Sep 17 00:00:00 2001
From: rusconn <rusconn3@gmail.com>
Date: Fri, 29 Mar 2024 21:33:45 +0900
Subject: [PATCH] refactor: drop tailwind-merge

---
 app/converters/number-base/page.tsx |  8 +++----
 app/generators/hash/page.tsx        |  8 +++----
 app/generators/uuid/page.tsx        |  7 +-----
 components/buttons/base.tsx         |  2 +-
 components/sidebar/search-bar.tsx   | 11 ++++++---
 components/theme-toggle.tsx         |  3 ++-
 components/ui/button.tsx            |  4 +++-
 components/ui/input.tsx             | 37 ++++++++++++++++-------------
 components/ui/select.tsx            |  2 +-
 lib/style.ts                        |  5 ++--
 package.json                        |  1 -
 pnpm-lock.yaml                      |  7 ------
 12 files changed, 47 insertions(+), 48 deletions(-)

diff --git a/app/converters/number-base/page.tsx b/app/converters/number-base/page.tsx
index 093284e..9ef8536 100644
--- a/app/converters/number-base/page.tsx
+++ b/app/converters/number-base/page.tsx
@@ -90,16 +90,16 @@ export default function Page() {
       </PageSection>
       <div className="flex flex-col gap-3">
         <PageSection title="Decimal" control={decControl}>
-          <Input value={dec} onChange={onDecChange} />
+          <Input fontMono value={dec} onChange={onDecChange} />
         </PageSection>
         <PageSection title="Hexadecimal" control={hexControl}>
-          <Input value={hex} onChange={onHexChange} />
+          <Input fontMono value={hex} onChange={onHexChange} />
         </PageSection>
         <PageSection title="Octal" control={octControl}>
-          <Input value={oct} onChange={onOctChange} />
+          <Input fontMono value={oct} onChange={onOctChange} />
         </PageSection>
         <PageSection title="Binary" control={binControl}>
-          <Input value={bin} onChange={onBinChange} />
+          <Input fontMono value={bin} onChange={onBinChange} />
         </PageSection>
       </div>
     </PageRootSection>
diff --git a/app/generators/hash/page.tsx b/app/generators/hash/page.tsx
index 7ac38d9..a647ede 100644
--- a/app/generators/hash/page.tsx
+++ b/app/generators/hash/page.tsx
@@ -75,25 +75,25 @@ export default function Page() {
       <div className="flex flex-col gap-3">
         <PageSection title="MD5">
           <div className="flex gap-2">
-            <Input className="flex-1" value={md5} readOnly />
+            <Input fontMono className="flex-1" value={md5} readOnly />
             <ControlMenu list={[md5CopyButton]} />
           </div>
         </PageSection>
         <PageSection title="SHA1">
           <div className="flex gap-2">
-            <Input className="flex-1" value={sha1} readOnly />
+            <Input fontMono className="flex-1" value={sha1} readOnly />
             <ControlMenu list={[sha1CopyButton]} />
           </div>
         </PageSection>
         <PageSection title="SHA256">
           <div className="flex gap-2">
-            <Input className="flex-1" value={sha256} readOnly />
+            <Input fontMono className="flex-1" value={sha256} readOnly />
             <ControlMenu list={[sha256CopyButton]} />
           </div>
         </PageSection>
         <PageSection title="SHA512">
           <div className="flex gap-2">
-            <Input className="flex-1" value={sha512} readOnly />
+            <Input fontMono className="flex-1" value={sha512} readOnly />
             <ControlMenu list={[sha512CopyButton]} />
           </div>
         </PageSection>
diff --git a/app/generators/uuid/page.tsx b/app/generators/uuid/page.tsx
index abe996c..dd43dd8 100644
--- a/app/generators/uuid/page.tsx
+++ b/app/generators/uuid/page.tsx
@@ -132,12 +132,7 @@ export default function Page() {
             Generate UUID(s)
           </Button>
           <span>×</span>
-          <Input
-            className="w-24 font-sans"
-            type="number"
-            value={generates}
-            onChange={onGeneratesChange}
-          />
+          <Input className="w-24" type="number" value={generates} onChange={onGeneratesChange} />
         </div>
       </PageSection>
       <PageSection className="-mt-3" title="UUID(s)" control={uuidsControl}>
diff --git a/components/buttons/base.tsx b/components/buttons/base.tsx
index 5b01384..9bdff83 100644
--- a/components/buttons/base.tsx
+++ b/components/buttons/base.tsx
@@ -9,7 +9,7 @@ export type BaseProps = ButtonProps & {
 
 export function Base({ icon, iconOnly, labelText, ...props }: BaseProps) {
   const button = (
-    <Button className="border" {...props}>
+    <Button className="inline-flex items-center border" {...props}>
       {icon}
       {!iconOnly && <span className="ml-1">{labelText}</span>}
     </Button>
diff --git a/components/sidebar/search-bar.tsx b/components/sidebar/search-bar.tsx
index 5bae650..67b19fc 100644
--- a/components/sidebar/search-bar.tsx
+++ b/components/sidebar/search-bar.tsx
@@ -44,18 +44,23 @@ export function SearchBar() {
     <div className="relative flex items-center">
       <Input
         ref={inputRef}
-        className="w-full pr-16 font-sans"
+        className="w-full pr-16"
         value={text}
         onChange={changeText}
         onKeyDown={searchIfEnter}
         placeholder="Type to search for tools…"
       />
       <div className="absolute right-1 flex gap-1">
-        <Button className={cn("h-6 p-0", !text && "hidden")} variant="ghost" onClick={clearText}>
+        <Button
+          className={cn(!text && "hidden")}
+          variant="ghost"
+          size="shorter"
+          onClick={clearText}
+        >
           <icons.X className="p-1 text-muted-foreground" />
           <span className="sr-only">Clear search text</span>
         </Button>
-        <Button className="h-6 p-0" variant="ghost" onClick={search} aria-label="search">
+        <Button variant="ghost" size="shorter" onClick={search} aria-label="search">
           <icons.Search className="-scale-x-100 p-1 text-muted-foreground" />
           <span className="sr-only">Search tools</span>
         </Button>
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
index b4dbe8d..b6da07d 100644
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -10,8 +10,9 @@ export function ThemeToggle() {
 
   return (
     <Button
-      className="h-10 w-10 p-0"
+      className="inline-flex aspect-square items-center justify-center"
       variant="ghost"
+      size="taller"
       onClick={() => setTheme(resolvedTheme === "light" ? "dark" : "light")}
     >
       <icons.Sun className="h-7 w-7 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index d06b3e6..587449e 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -4,7 +4,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/style";
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-50",
+  "transition-colors disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -14,6 +14,8 @@ export const buttonVariants = cva(
       },
       size: {
         default: "h-9 rounded-md px-3 py-2",
+        taller: "h-10 rounded-md",
+        shorter: "h-6 rounded-md",
       },
     },
     defaultVariants: {
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index a9307a6..94d26d1 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -3,23 +3,28 @@ import equal from "react-fast-compare";
 
 import { cn } from "@/lib/style";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  fontMono?: true;
+};
 
-const RawInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => (
-  <input
-    {...{ ref }}
-    className={cn(
-      "border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 font-mono outline-none",
-      "placeholder:text-muted-foreground",
-      "hover:bg-input-hover",
-      "focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
-      "disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    )}
-    spellCheck="false"
-    {...props}
-  />
-));
+const RawInput = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, fontMono, ...props }, ref) => (
+    <input
+      {...{ ref }}
+      className={cn(
+        "border-b-1 h-9 rounded border border-b-muted-foreground bg-input px-3 py-2 outline-none",
+        "placeholder:text-muted-foreground",
+        "hover:bg-input-hover",
+        "focus:border-b-2 focus:border-b-indicator focus:bg-input-focus focus:pb-[7px]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        fontMono && "font-mono",
+        className
+      )}
+      spellCheck="false"
+      {...props}
+    />
+  )
+);
 RawInput.displayName = "RawInput";
 
 export const Input = React.memo(RawInput, equal);
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index a27f550..9787bc2 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -18,7 +18,7 @@ export const Trigger = React.forwardRef<
   <SelectPrimitive.Trigger
     {...{ ref }}
     className={cn(
-      "flex h-9 w-full items-center justify-between rounded-md border bg-select px-2.5 py-1.5",
+      "flex h-9 items-center justify-between rounded-md border bg-select px-2.5 py-1.5",
       "placeholder:text-muted-foreground",
       "hover:bg-select-hover",
       "disabled:cursor-not-allowed disabled:opacity-50",
diff --git a/lib/style.ts b/lib/style.ts
index a500a73..bb57543 100644
--- a/lib/style.ts
+++ b/lib/style.ts
@@ -1,4 +1,3 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx } from "clsx";
 
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+export const cn = clsx;
diff --git a/package.json b/package.json
index 8bce879..bdabebf 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,6 @@
     "react-dom": "18.2.0",
     "react-fast-compare": "^3.2.2",
     "sharp": "^0.32.1",
-    "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5",
     "uuid": "^9.0.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c284e3..95701e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,9 +79,6 @@ dependencies:
   sharp:
     specifier: ^0.32.1
     version: 0.32.1
-  tailwind-merge:
-    specifier: ^1.12.0
-    version: 1.12.0
   tailwindcss-animate:
     specifier: ^1.0.5
     version: 1.0.5(tailwindcss@3.3.2)
@@ -4968,10 +4965,6 @@ packages:
       tslib: 2.6.1
     dev: true
 
-  /tailwind-merge@1.12.0:
-    resolution: {integrity: sha512-Y17eDp7FtN1+JJ4OY0Bqv9OA41O+MS8c1Iyr3T6JFLnOgLg3EvcyMKZAnQ8AGyvB5Nxm3t9Xb5Mhe139m8QT/g==}
-    dev: false
-
   /tailwindcss-animate@1.0.5(tailwindcss@3.3.2):
     resolution: {integrity: sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==}
     peerDependencies: