refactor: simplify classNames and remove unused component

package.json

@@ -43,6 +43,7 @@
     "@vitejs/plugin-react-swc": "^3.0.1",
     "archiver": "^6.0.0",
     "autoprefixer": "^10.4.13",
+    "clsx": "^2.0.0",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
@@ -56,11 +57,12 @@
     "postcss": "^8.4.31",
     "prettier": "^2.8.8",
     "semantic-release": "^21.1.1",
+    "tailwind-merge": "^2.0.0",
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
     "vite": "^4.0.4",
     "zod": "^3.22.3",
     "zod-error": "^1.5.0"
   }
-}
+}

src/components/Inputs/CheckBox/CheckBox.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/src/utils/utilities";
 import React, { type ChangeEvent } from "react";
 
 interface CheckboxProps {
@@ -11,7 +12,7 @@ interface CheckboxProps {
 
 const Checkbox: React.FC<CheckboxProps> = ({ label, checked, onChange, className, id, title }) => {
 	return (
-		<div className={`flex items-center${className ? ` ${className}` : ""} pb-1`} title={title}>
+		<div className={cn("flex items-center pb-1", className)} title={title}>
 			<input
 				type="checkbox"
 				id={id}

src/components/Inputs/Number/Arrow.tsx

@@ -1,19 +1,16 @@
+import { cn } from "@/src/utils/utilities";
+
 type RotationDirection = "down" | "up" | "left" | "right";
 export default function Arrow({ rotation }: { rotation: RotationDirection }) {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
-			className={`h-4 w-4 transition-transform duration-300 transform ${
-				rotation === "down"
-					? "rotate-0"
-					: rotation === "up"
-					? "rotate-180"
-					: rotation === "left"
-					? "rotate-90"
-					: rotation === "right"
-					? "rotate-270"
-					: ""
-			}`}
+			className={cn("h-4 w-4 transition-transform duration-300 transform", {
+				"rotate-0": rotation === "down",
+				"rotate-90": rotation === "left",
+				"rotate-180": rotation === "up",
+				"rotate-270": rotation === "right"
+			})}
 			fill="none"
 			viewBox="0 0 24 24"
 			stroke="currentColor"

src/components/Inputs/Number/Number.tsx

@@ -2,6 +2,8 @@ import React, { useRef } from "react";
 import type { ChangeEvent, MutableRefObject } from "react";
 import "./Number.css";
 import Arrow from "./Arrow";
+import { cn } from "@/src/utils/utilities";
+import type { ClassValue } from "clsx";
 interface NumberInputProps {
 	id?: string;
 	className?: string;
@@ -40,15 +42,25 @@ const NumberInput: React.FC<NumberInputProps> = ({ value, min = 0, max = undefin
 		}
 	};
 
+	const disabledButtonClasses = {
+		"cursor-pointer": !disabled,
+		"hover:bg-transparent": disabled,
+		"dark:hover:bg-transparent": disabled,
+		"text-[#4b5563]": disabled,
+		"dark:text-[#4b5563]": disabled
+	} satisfies ClassValue;
 	return (
-		<div className={`${className ? `${className} ` : ""} relative flex mb-2 gap-4 items-baseline justify-between flex-row`} ref={inputDiv}>
+		<div className={cn("relative flex mb-2 gap-4 items-baseline justify-between flex-row", className)} ref={inputDiv}>
 			<label htmlFor={id} className="mb-1">
 				{label}
 			</label>
 			<div className="relative flex flex-row">
 				<input
 					type="number"
-					className={`number border border-gray-300 bg-white text-black px-2 py-2 rounded-md flex items-center justify-between w-40 h-10 focus:outline-none dark:bg-[#23272a] dark:text-white dark:border-gray-700`}
+					className={cn(
+						"number border border-gray-300 bg-white text-black px-2 py-2 rounded-md flex items-center justify-between w-40 h-10 focus:outline-none dark:bg-[#23272a] dark:text-white dark:border-gray-700",
+						{ "text-[#4b5563]": disabled, "dark:text-[#4b5563]": disabled }
+					)}
 					ref={inputElement}
 					aria-hidden={true}
 					value={value}
@@ -60,22 +72,21 @@ const NumberInput: React.FC<NumberInputProps> = ({ value, min = 0, max = undefin
 						WebkitAppearance: "none",
 						MozAppearance: "textfield",
 						borderTopLeftRadius: "0.375rem",
-						borderBottomLeftRadius: "0.375rem",
-						...(disabled ? { color: "#4b5563" } : {})
+						borderBottomLeftRadius: "0.375rem"
 					}}
 					disabled={disabled}
 				></input>
 				<div className="flex flex-col absolute right-1 bottom-1 h-[35px]">
 					<button
 						type="button"
 						aria-label="Add one"
-						className={`flex text-black dark:text-white round-r dark:bg-[#23272a] dark:hover:bg-[rgba(24,26,27,0.5)] w-full h-1/2 p-1 justify-center ${
-							!disabled ? "cursor-pointer" : "cursor-default"
-						}`}
+						className={cn(
+							"flex text-black dark:text-white round-r dark:bg-[#23272a] dark:hover:bg-[rgba(24,26,27,0.5)] w-full h-1/2 p-1 justify-center cursor-default",
+							disabledButtonClasses
+						)}
 						style={{
 							transition: "all linear 0.1s",
-							borderTopRightRadius: "0.375rem",
-							...(disabled ? { color: "#4b5563", backgroundColor: "transparent" } : {})
+							borderTopRightRadius: "0.375rem"
 						}}
 						aria-hidden={true}
 						onClick={NumberPlus}
@@ -86,13 +97,13 @@ const NumberInput: React.FC<NumberInputProps> = ({ value, min = 0, max = undefin
 					<button
 						type="button"
 						aria-label="Subtract one"
-						className={`flex text-black dark:text-white round-r dark:bg-[#23272a] dark:hover:bg-[rgba(24,26,27,0.5)] w-full h-1/2 p-1 justify-center ${
-							!disabled ? "cursor-pointer" : "cursor-default"
-						}`}
+						className={cn(
+							"flex text-black dark:text-white round-r dark:bg-[#23272a] dark:hover:bg-[rgba(24,26,27,0.5)] w-full h-1/2 p-1 justify-center cursor-default",
+							disabledButtonClasses
+						)}
 						style={{
 							transition: "all linear 0.1s",
-							borderTopRightRadius: "0.375rem",
-							...(disabled ? { color: "#4b5563", backgroundColor: "transparent" } : {})
+							borderTopRightRadius: "0.375rem"
 						}}
 						aria-hidden={true}
 						onClick={NumberMinus}

src/components/Inputs/Select/Select.tsx

@@ -2,27 +2,20 @@ import { useComponentVisible } from "@/hooks";
 import React from "react";
 import type { ChangeEvent, Dispatch, SetStateAction } from "react";
 import Arrow from "../Number/Arrow";
+import { cn } from "@/src/utils/utilities";
+import type { ClassValue } from "clsx";
 
-interface OptionProps {
-	value: string;
+interface SelectOptionProps {
 	id?: string;
+	value: string;
 	className?: string;
 	children: React.ReactNode;
 }
 
-const Option: React.FC<OptionProps> = ({ value, children }) => {
-	return (
-		<div className={`flex items-center ${value === "light" ? "text-gray-900" : "text-gray-100"}`}>
-			<div className={`rounded-full h-4 w-4 mr-2 bg-[${value}]`}></div>
-			<span>{children}</span>
-		</div>
-	);
-};
-
 export type SelectOption = {
 	value: string;
 	label: string;
-	element?: React.ReactElement<OptionProps>;
+	element?: React.ReactElement<SelectOptionProps>;
 };
 
 interface SelectProps {
@@ -53,58 +46,34 @@ const Select: React.FC<SelectProps> = ({ onChange, options, className, id, selec
 		onChange({ currentTarget: { value: option } } as ChangeEvent<HTMLSelectElement>);
 	};
 
+	const disabledButtonClasses = { "text-[#4b5563]": disabled, "dark:text-[#4b5563]": disabled } satisfies ClassValue;
 	return (
-		<div
-			className={`relative flex flex-row${className ? ` ${className}` : ""} mb-2 gap-4 flex-row items-baseline justify-between`}
-			id={id}
-			ref={selectRef}
-		>
+		<div className={cn("relative flex mb-2 gap-4 flex-row items-baseline justify-between", className)} id={id} ref={selectRef}>
 			<label htmlFor={id}>{label}</label>
 			<div className="relative inline-block">
 				<button
 					type="button"
-					className="border border-gray-300 bg-white text-black px-2 py-2 rounded-md flex items-center justify-between w-40 h-10 focus:outline-none dark:bg-[#23272a] dark:text-white dark:border-gray-700"
+					className={cn(
+						"border border-gray-300 bg-white text-black px-2 py-2 rounded-md flex items-center justify-between w-40 h-10 focus:outline-none dark:bg-[#23272a] dark:text-white dark:border-gray-700",
+						disabledButtonClasses
+					)}
 					onClick={toggleSelect}
 					key={selectedOption}
 					disabled={disabled}
-					style={{
-						...(disabled ? { color: "#4b5563" } : {})
-					}}
 				>
 					{selectedOption ? (
 						options.find((option) => option.value === selectedOption)?.element ? (
 							<div className="flex items-center pr-4 justify-between w-full">
-								<span
-									className="text-white"
-									style={{
-										...(disabled ? { color: "#4b5563" } : {})
-									}}
-								>
-									{options.find((option) => option.value === selectedOption)?.label}
-								</span>
+								<span className={cn("text-white", disabledButtonClasses)}>{options.find((option) => option.value === selectedOption)?.label}</span>
 								{options.find((option) => option.value === selectedOption)?.element}
 							</div>
 						) : (
 							<div className="flex items-center pr-2 justify-between w-full">
-								<span
-									className="text-white"
-									style={{
-										...(disabled ? { color: "#4b5563" } : {})
-									}}
-								>
-									{options.find((option) => option.value === selectedOption)?.label}
-								</span>
+								<span className={cn("text-white", disabledButtonClasses)}>{options.find((option) => option.value === selectedOption)?.label}</span>
 							</div>
 						)
 					) : (
-						<span
-							className="text-white"
-							style={{
-								...(disabled ? { color: "#4b5563" } : {})
-							}}
-						>
-							Select an option
-						</span>
+						<span className={cn("text-white", disabledButtonClasses)}>Select an option</span>
 					)}
 					<Arrow rotation={isSelectVisible ? "up" : "down"} />
 				</button>
@@ -113,11 +82,14 @@ const Select: React.FC<SelectProps> = ({ onChange, options, className, id, selec
 						{options.map((option, index) => (
 							<div
 								key={option.value}
-								className={`px-2 py-2 hover:bg-gray-100 dark:hover:bg-[rgba(24,26,27,0.5)] cursor-pointer${
-									selectedOption === option.value ? " bg-gray-100 dark:bg-[#2c2f33] " : ""
-								}flex items-center justify-between w-40 focus:outline-none${
-									index === 0 ? " rounded-t-md" : index === options.length - 1 ? " rounded-b-md" : ""
-								}`}
+								className={cn(
+									"px-2 py-2 hover:bg-gray-100 dark:hover:bg-[rgba(24,26,27,0.5)] cursor-pointer flex items-center justify-between w-40 focus:outline-none",
+									{
+										"bg-gray-100 dark:bg-[#2c2f33]": selectedOption === option.value,
+										"rounded-t-md": index === 0,
+										"rounded-b-md": index === options.length - 1
+									}
+								)}
 								onClick={() => handleOptionSelect(option.value)}
 							>
 								<div className="flex items-center pr-8 justify-between w-full">
@@ -132,5 +104,4 @@ const Select: React.FC<SelectProps> = ({ onChange, options, className, id, selec
 		</div>
 	);
 };
-
-export { Option, Select };
+export { Select };

src/components/Inputs/Select/index.tsx

@@ -1,3 +1,3 @@
-import { Option, Select } from "./Select";
+import { Select } from "./Select";
 
-export { Option, Select };
+export { Select };

src/components/Inputs/index.tsx

@@ -1,7 +1,7 @@
 import { Checkbox } from "./CheckBox";
 import { NumberInput } from "./Number";
-import { Option, Select } from "./Select";
+import { Select } from "./Select";
 import { Slider } from "./Slider";
 import type { SelectOption } from "./Select/Select";
 
-export { Checkbox, NumberInput, Slider, Option, Select, type SelectOption };
+export { Checkbox, NumberInput, Slider, Select, type SelectOption };

src/components/Settings/Settings.tsx

@@ -8,7 +8,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import React, { useEffect, useState } from "react";
 import type { ChangeEvent, Dispatch, SetStateAction } from "react";
 import { Checkbox, NumberInput, Select, type SelectOption } from "../Inputs";
-import { settingsAreDefault } from "@/src/utils/utilities";
+import { cn, settingsAreDefault } from "@/src/utils/utilities";
 import { configurationSchema } from "@/src/utils/constants";
 import { generateErrorMessage } from "zod-error";
 import { formatDateForFileName } from "../../utils/utilities";
@@ -105,42 +105,42 @@ export default function Settings({
 		{
 			value: "red",
 			label: "Red",
-			element: <div className={`m-2 h-2 w-2 rounded-[50%] bg-[red]`}></div>
+			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[red]")}></div>
 		},
 		{
 			value: "green",
 			label: "Green",
-			element: <div className={`m-2 h-2 w-2 rounded-[50%] bg-[green]`}></div>
+			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[green]")}></div>
 		},
 		{
 			value: "blue",
 			label: "Blue",
-			element: <div className={`m-2 h-2 w-2 rounded-[50%] bg-[blue]`}></div>
+			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[blue]")}></div>
 		},
 		{
 			value: "yellow",
 			label: "Yellow",
-			element: <div className={`m-2 h-2 w-2 rounded-[50%] bg-[yellow]`}></div>
+			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[yellow]")}></div>
 		},
 		{
 			value: "orange",
 			label: "Orange",
-			element: <div className={`m-2 h-2 w-2 rounded-[50%] bg-[orange]`}></div>
+			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[orange]")}></div>
 		},
 		{
 			value: "purple",
 			label: "Purple",
-			element: <div className={`m-2 h-2 w-2 rounded-[50%] bg-[purple]`}></div>
+			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[purple]")}></div>
 		},
 		{
 			value: "pink",
 			label: "Pink",
-			element: <div className={`m-2 h-2 w-2 rounded-[50%] bg-[pink]`}></div>
+			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[pink]")}></div>
 		},
 		{
 			value: "white",
 			label: "White",
-			element: <div className={`m-2 h-2 w-2 rounded-[50%] bg-[white]`}></div>
+			element: <div className={cn("m-2 h-2 w-2 rounded-[50%]", "bg-[white]")}></div>
 		}
 	];
 	const OSD_DisplayTypeOptions: SelectOption[] = [
@@ -571,17 +571,12 @@ export default function Settings({
 				<div id="notifications" ref={parentRef}>
 					{notifications.map((notification, index) => (
 						<div
-							className={`relative notification ${
-								notification.type === "success"
-									? "bg-green-600"
-									: notification.type === "error"
-									? "bg-red-600"
-									: notification.type === "info"
-									? "bg-blue-600"
-									: notification.type === "warning"
-									? "bg-yellow-600"
-									: "bg-teal-600"
-							} inverse`}
+							className={cn("relative notification inverse bg-teal-600", {
+								"bg-green-600": notification.type === "success",
+								"bg-red-600": notification.type === "error",
+								"bg-blue-600": notification.type === "info",
+								"bg-yellow-600": notification.type === "warning"
+							})}
 							key={index}
 						>
 							{notification.action ? (

src/utils/utilities.ts

@@ -1,3 +1,5 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 import type {
 	configuration,
 	ContentSendOnlyMessageMappings,
@@ -471,3 +473,7 @@ export function createTooltip({ element, text, id, featureName }: { text?: strin
 		}
 	};
 }
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}