Tailwind merge

.eslintrc.cjs

@@ -1,6 +1,7 @@
 module.exports = {
 	rules: {
-		"react-refresh/only-export-components": "warn"
+		"react-refresh/only-export-components": "warn",
+		"react/prop-types": "off"
 	},
 	reportUnusedDisableDirectives: true,
 	ignorePatterns: [

components.json

@@ -12,7 +12,7 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils",
+    "utils": "@/lib/tailwind-utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"

package.json

@@ -60,6 +60,7 @@
 		"react-dom": "^19.0.0",
 		"react-streaming": "^0.3.46",
 		"sirv": "^2.0.3",
+		"tailwind-merge": "^3.3.1",
 		"tailwindcss": "^3.4.17",
 		"tailwindcss-animate": "^1.0.7",
 		"ts-node": "^10.9.2",
@@ -73,7 +74,9 @@
 		"@testing-library/jest-dom": "^6.6.1",
 		"@testing-library/react": "^16.0.1",
 		"@testing-library/user-event": "^14.5.2",
+		"@types/cookie-parser": "^1.4.9",
 		"@vitest/coverage-v8": "2.1.3",
+		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-prettier": "^5.5.3",
 		"fake-indexeddb": "^6.0.0",
 		"husky": "^9.1.6",

src/components/ColorThumb/ColorThumb.tsx

@@ -1,14 +1,14 @@
 // Components
 import { ColorThumb as AriaColorThumb } from "react-aria-components";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Types
 import type { ComponentProps, ReactNode } from "react";
 
 function ColorThumb({ className, ...props }: ComponentProps<"div">): ReactNode {
 	return (
 		<AriaColorThumb
-			className={clsx(
+			className={cn(
 				"border-2 border-white shadow-[0_0_0_1px_black,inset_0_0_0_1px_black] w-5 h-5 rounded-full box-border data-[focus-visible]:w-6 data-[focus-visible]:h-6",
 				className
 			)}

src/components/ColorWheel/ColorWheel.tsx

@@ -29,7 +29,7 @@ function ColorWheel(props: ColorWheelProps): ReactNode {
 		}))
 	);
 
-	const onChange = (color: Color) => changeColor(color.toString('hex'));
+	const onChange = (color: Color) => changeColor(color.toString("hex"));
 	const wheelColor = parseColor(color).toString("hsl");
 
 	const COLOR_WHEEL_OUTER_RADIUS = 80;

src/components/DrawingToolbar/DrawingToolbar.tsx

@@ -3,7 +3,7 @@ import { SHAPES } from "@/state/store";
 import { memo, Fragment } from "react";
 import useStore from "@/state/hooks/useStore";
 import { useShallow } from "zustand/react/shallow";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Type
 import type { ReactNode, ChangeEvent, MouseEvent, ReactElement } from "react";
@@ -86,7 +86,7 @@ function DrawingToolbar(): ReactNode {
 		>
 			<button
 				onClick={() => changeShapeMode("fill")}
-				className={clsx(
+				className={cn(
 					"border-none inline-flex justify-center w-full text-sm items-center bg-transparent h-[30px] mx-[0.5em] px-1 rounded-sm my-0 cursor-pointer transition-colors duration-100 hover:bg-[#505050]",
 					{
 						"bg-[#505050] outline outline-[3px] outline-[#7e83da] outline-offset-[2px]":
@@ -98,7 +98,7 @@ function DrawingToolbar(): ReactNode {
 			</button>
 			<button
 				onClick={() => changeShapeMode("stroke")}
-				className={clsx(
+				className={cn(
 					"border-none inline-flex justify-center w-full text-sm items-center bg-transparent h-[30px] mx-[0.5em] px-1 rounded-sm my-0 cursor-pointer transition-colors duration-100 hover:bg-[#505050]",
 					{
 						"bg-[#505050] outline outline-[3px] outline-[#7e83da] outline-offset-[2px]":

src/components/LayerInfo/LayerInfo.tsx

@@ -1,6 +1,6 @@
 // Lib
 import { useState, memo } from "react";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 import useStore from "@/state/hooks/useStore";
 import { useShallow } from "zustand/react/shallow";
 import LayersStore from "@/state/stores/LayersStore";
@@ -122,7 +122,7 @@ function LayerInfo({
 	return (
 		<label
 			htmlFor={"layer-" + id}
-			className={clsx(
+			className={cn(
 				"flex items-center w-full max-w-full h-[2.6rem] py-[0.2rem] px-[0.5rem] whitespace-nowrap border border-[rgb(56,55,55)] last:rounded-b-[5px]",
 				"group",
 				{
@@ -212,7 +212,7 @@ function LayerInfo({
 				<div>
 					<Tooltip text={editingTooltipText}>
 						<button
-							className={clsx(
+							className={cn(
 								"hidden bg-transparent text-lg py-0 px-[0.2em] border-none rounded-full transition-opacity disabled:opacity-50 group-hover:inline group-focus:inline hover:bg-[rgba(255,255,255,0.1)]",
 								{
 									block: isEditing

src/components/LayerPane/LayerPane.tsx

@@ -77,7 +77,6 @@ function LayerPane(): ReactNode {
 						key={layer.id}
 						canMoveUp={i > 0}
 						canMoveDown={i < totalLayers - 1}
-						idx={i}
 					/>
 				))}
 			</div>

src/components/ReferenceWindow/ReferenceWindow.tsx

@@ -1,6 +1,6 @@
 // Lib
 import { useState, memo, useRef } from "react";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Components
 import ReferenceWindowHeader from "@/components/ReferenceWindowHeader/ReferenceWindowHeader";
@@ -68,7 +68,7 @@ function ReferenceWindow(): ReactNode {
 	const controlsHeight = "70px";
 	const controlsPadding = "10px";
 
-	const cn = clsx(
+	const className = cn(
 		"fixed min-w-[300px] max-w-[60vw] min-h-[40px] max-h-full bg-[rgb(36,36,36)] border border-[rgb(56,55,55)] rounded-[5px] z-[100] overflow-hidden",
 		{
 			"relative border-none top-0 left-0 resize-none max-w-[300px]": pinned,
@@ -78,7 +78,7 @@ function ReferenceWindow(): ReactNode {
 
 	return (
 		<div
-			className={cn}
+			className={className}
 			data-testid="reference-window"
 			ref={windowRef}
 			style={{

src/components/ReferenceWindowContent/ReferenceWindowContent.tsx

@@ -2,7 +2,7 @@
 import { useState } from "react";
 
 // Types
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 import type {
 	ReactNode,
 	DragEvent,
@@ -82,7 +82,7 @@ function ReferenceWindowContent({
 
 	return (
 		<section
-			className={clsx(
+			className={cn(
 				"flex justify-center items-center m-[5px] border border-[rgb(56,55,55)] rounded-[5px] overflow-hidden text-sm",
 				{
 					"border-dashed border-white": isDraggingOver,

src/components/ResizeGrid/ResizeGrid.tsx

@@ -1,6 +1,6 @@
 // Lib
 import { useCallback, useState, forwardRef } from "react";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Types
 import type { CSSProperties, ReactNode } from "react";
@@ -119,7 +119,7 @@ const ResizeGrid = forwardRef<HTMLDivElement, ResizeGridProps>(
 			<div
 				ref={ref}
 				tabIndex={0}
-				className={clsx("absolute outline-none hover:cursor-move", {
+				className={cn("absolute outline-none hover:cursor-move", {
 					"outline-dotted outline-[#d1836a]": focused
 				})}
 				data-testid="resize-grid"

src/components/ScaleIndicator/ScaleIndicator.tsx

@@ -1,6 +1,6 @@
 // Lib
 import { useRef, useState, useEffect } from "react";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Types
 import type { ReactNode } from "react";
@@ -29,7 +29,7 @@ function ScaleIndicator({ scale }: ScaleIndicatorProps): ReactNode {
 
 	return (
 		<div
-			className={clsx(
+			className={cn(
 				"absolute left-2.5 bottom-2.5 p-1.5 z-10 bg-black rounded-md",
 				"transition-opacity duration-150 pointer-events-none",
 				{ "opacity-100": visible, "opacity-20": !visible }

src/components/ShapeOption/ShapeOption.tsx

@@ -1,6 +1,6 @@
 // Lib
 import * as Utils from "@/lib/utils";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 import useStore from "@/state/hooks/useStore";
 
 // Types
@@ -29,7 +29,7 @@ function ShapeOption({ icon, name, isActive }: ShapeOptionProps) {
 			position="bottom"
 		>
 			<button
-				className={clsx(
+				className={cn(
 					"border-none inline-flex justify-center items-center bg-transparent w-[30px] h-[30px] rounded-full mx-[0.5em] my-0 cursor-pointer transition-colors duration-100 hover:bg-[#505050]",
 					{
 						"bg-[#505050] outline outline-[3px] outline-[#7e83da] outline-offset-[2px]":

src/components/ThemeProvider/ThemeProvider.tsx

@@ -62,7 +62,7 @@ function ThemeProvider({
 		return () => {
 			root.classList.remove("light", "dark", "system");
 		};
-	}, []);
+	}, [theme]);
 
 	const updateTheme = useCallback(
 		(theme: Theme) => {

src/components/ToolbarButton/ToolbarButton.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect } from "react";
 import useStore from "@/state/hooks/useStore";
 import { useShallow } from "zustand/react/shallow";
 import * as UTILS from "@/lib/utils";
-import clsx from "clsx";
+import cn from "@/lib/tailwind-utils";
 
 // Types
 import type { Mode, ToolbarMode } from "@/types";
@@ -112,7 +112,7 @@ function ToolbarButton({
 			position="right"
 		>
 			<button
-				className={clsx(
+				className={cn(
 					"p-[0.2em] text-2xl text-center cursor-pointer transition-colors duration-100",
 					"inline-flex justify-center",
 					"disabled:text-[#3b3b3b] disabled:cursor-not-allowed disabled:hover:bg-transparent",