feat: cn util with clsx (#31)

* chore(deps): add `clsx` & `tailwind-merge`

* refactor: implement cn util

* refactor: remove tailwind-merge, use `clsx` directly

* fix: use tailwind important to override in conditionals

apps/dashboard/package.json

@@ -18,6 +18,7 @@
     "@resvg/resvg-wasm": "^2.6.0",
     "@vercel/analytics": "^1.1.1",
     "@vercel/speed-insights": "^1.0.2",
+    "clsx": "^2.1.0",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",

apps/dashboard/src/components/Element.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react"
+import { clsx } from "clsx";
 import type { OGElement } from "../lib/types";
 import { createElementStyle } from "../lib/elements";
 import { useElementsStore } from "../stores/elementsStore";
@@ -240,11 +241,16 @@ export function Element({ element }: ElementProps) {
 
   return (
     <Tag
+      className={clsx(
+        "element cursor-default select-none outline-1 outline-offset-[3px] hover:outline",
+        { "outline outline-blue-500 cursor-move": isSelected },
+        { "outline-dashed": element.tag === "span" },
+        { "!outline-none !cursor-text": isEditing },
+      )}
       id={`element-${element.id}`}
-      style={style}
-      className={`element cursor-default select-none !outline-blue-500 outline-1 outline-offset-[3px] hover:outline ${isSelected ? 'outline cursor-move' : ''} ${isEditing ? '!outline !cursor-text' : ''} ${element.tag === 'span' ? '!outline-dashed' : ''}`}
       // @ts-expect-error wtf?
       ref={elementRef}
+      style={style}
     >
       {element.tag === 'p' ? element.content : null}
       {element.tag === 'span' ? '[dynamic text]' : null}

apps/dashboard/src/components/LeftPanel/ElementRow.tsx

@@ -1,3 +1,4 @@
+import { clsx } from "clsx";
 import { useSortable } from "@dnd-kit/sortable"
 import { CSS } from '@dnd-kit/utilities';
 import { useRef, useState } from "react";
@@ -67,7 +68,11 @@ export function ElementRow({ element }: ElementRowProps) {
   return (
     <div className="flex justify-between items-center cursor-auto group h-7" ref={setNodeRef} style={style} {...attributes} {...listeners}>
       <button
-        className={`flex items-center gap-2 select-none text-gray-600 hover:text-gray-900 w-full ${selectedElementId === element.id ? '!text-blue-500' : ''} ${!element.visible ? '!text-gray-300' : ''}`}
+        className={clsx(
+          "flex items-center gap-2 select-none text-gray-600 hover:text-gray-900 w-full",
+          { "!text-blue-500": selectedElementId === element.id },
+          { "!text-gray-300": !element.visible },
+        )}
         onClick={() => { setSelectedElementId(element.id); }}
         onDoubleClick={() => {
           if (isEditing)

apps/dashboard/src/components/forms/Button.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react"
+import { clsx } from "clsx"
 
 interface ButtonProps {
   icon?: ReactNode
@@ -11,9 +12,21 @@ interface ButtonProps {
 
 export function Button({ icon, variant, onClick, isLoading, className, children }: ButtonProps) {
   return (
-    <button className={`flex gap-3 items-center px-3 py-1 border rounded select-none ${variant === 'danger' ? 'text-red-900 bg-red-50 border-red-200 hover:border-red-300' : variant === 'success' ? 'text-green-900 bg-green-50 border-green-200 hover:border-green-300' : 'text-gray-900 bg-gray-50 border-gray-200 hover:border-gray-300'} ${isLoading ? 'cursor-not-allowed opacity-60' : ''} ${className}`} onClick={isLoading ? undefined : onClick} type="button">
-      {icon}
-      {children}
+    <button 
+      className={clsx(
+        "flex gap-3 items-center px-3 py-1 border rounded select-none",
+        {
+          "text-red-900 bg-red-50 border-red-200 hover:border-red-300": variant === "danger",
+          "text-green-900 bg-green-50 border-green-200 hover:border-green-300": variant === "success",
+          "text-gray-900 bg-gray-50 border-gray-200 hover:border-gray-300": !variant,
+          "cursor-not-allowed opacity-60": isLoading,
+        },
+        className
+      )}
+      onClick={isLoading ? undefined : onClick} 
+      type="button">
+        {icon}
+        {children}
     </button>
   )
 }

apps/dashboard/src/components/forms/Input.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { useId } from "react"
+import { clsx } from "clsx";
 
 type InputType = 'text' | 'color' | 'number' | 'textarea'
 type InputTypeToValue<Type extends InputType> = Type extends 'number' ? number : string
@@ -20,7 +21,11 @@ export function Input<Type extends InputType>({ type, value, min, max, suffix, o
   const Tag = type === 'textarea' ? 'textarea' : 'input'
 
   return (
-    <div className={`border border-gray-200 rounded bg-gray-50 flex items-center gap-1 hover:border-gray-300 relative ${children ? 'pl-1.5' : ''} ${className}`}>
+    <div className={clsx(
+      "border border-gray-200 rounded bg-gray-50 flex items-center gap-1 hover:border-gray-300 relative",
+      { "pl-1.5": children },
+      className
+    )}>
       {children ? (
         <label className="text-gray-700 text-sm whitespace-nowrap" htmlFor={id}>
           {children}