feat: cn util with clsx

apps/dashboard/package.json

@@ -16,12 +16,14 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@resvg/resvg-wasm": "^2.6.0",
+    "clsx": "^2.1.0",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
     "react-promise-suspense": "^0.3.4",
     "satori": "^0.10.11",
     "sonner": "^1.3.1",
+    "tailwind-merge": "^2.2.0",
     "zundo": "^2.0.3",
     "zustand": "^4.4.7"
   },

apps/dashboard/src/components/Element.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react"
 import type { OGElement } from "../lib/types";
 import { createElementStyle } from "../lib/elements";
 import { useElementsStore } from "../stores/elementsStore";
+import { cn } from "../lib/cn";
 
 interface ElementProps {
   element: OGElement
@@ -240,11 +241,19 @@ export function Element({ element }: ElementProps) {
 
   return (
     <Tag
+      className={cn(
+        "element cursor-default select-none outline-1 outline-offset-[3px] hover:outline",
+        { "outline-blue-500": isSelected },
+        { "outline cursor-move": isSelected },
+        { "outline-dashed": element.tag === "span" },
+        { "outline-none": isEditing },
+        { "cursor-text": isEditing },
+        { "cursor-move": isSelected },
+      )}
       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

@@ -9,6 +9,7 @@ import { CircleIcon } from "../icons/CircleIcon"
 import { ImageIcon } from "../icons/ImageIcon"
 import { MagicWandIcon } from "../icons/MagicWandIcon"
 import { useElementsStore } from "../../stores/elementsStore";
+import { cn } from "../../lib/cn";
 
 interface ElementRowProps {
   element: OGElement
@@ -34,7 +35,11 @@ export function ElementRow({ element }: ElementRowProps) {
   return (
     <div className="flex justify-between items-center cursor-auto group" ref={setNodeRef} style={style} {...attributes} {...listeners}>
       <button
-        className={`flex gap-2 select-none py-1 text-gray-600 hover:text-gray-900 w-full ${selectedElementId === element.id ? '!text-blue-500' : ''} ${!element.visible ? '!text-gray-300' : ''}`}
+        className={cn(
+          "flex gap-2 select-none py-1 text-gray-600 hover:text-gray-900 w-full",
+          { "text-blue-500": selectedElementId === element.id },
+          { "text-gray-300": !element.visible },
+        )}
         onClick={() => { setSelectedElementId(element.id); }}
         type="button"
       >

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react"
+import { cn } from "../../lib/cn"
 
 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={cn(
+        "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 { cn } from "../../lib/cn";
 
 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={cn(
+      "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}

apps/dashboard/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}