From c6043cb4887a6ab739a00d1ea3ef43b71a0fafef Mon Sep 17 00:00:00 2001
From: Nikhila C <115739037+NikhilA8606@users.noreply.github.com>
Date: Sat, 15 Feb 2025 09:42:49 +0530
Subject: [PATCH] Replaced all deprecated classNames with cn function (#10605)

---
 src/Utils/utils.ts                              |  3 ---
 src/components/Common/LanguageSelector.tsx      |  6 ++++--
 src/components/Common/LanguageSelectorLogin.tsx |  6 ++++--
 src/components/Common/UpdatableApp.tsx          |  9 +++------
 src/components/Users/UserFormValidations.tsx    |  6 +++---
 src/components/ui/sidebar/patient-switcher.tsx  | 11 +++--------
 src/hooks/useFilters.tsx                        |  6 ++++--
 7 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/Utils/utils.ts b/src/Utils/utils.ts
index add2677343b..7cfcd124993 100644
--- a/src/Utils/utils.ts
+++ b/src/Utils/utils.ts
@@ -104,9 +104,6 @@ export const isAppleDevice = _isAppleDevice();
  *
  * @deprecated Use `cn` from `@/lib/utils` instead.
  */
-export const classNames = (...classes: (string | boolean | undefined)[]) => {
-  return classes.filter(Boolean).join(" ");
-};
 
 export const isUserOnline = (user: { last_login: DateLike }) => {
   return user.last_login
diff --git a/src/components/Common/LanguageSelector.tsx b/src/components/Common/LanguageSelector.tsx
index e1f3446eca0..a3b9d5c3d5d 100644
--- a/src/components/Common/LanguageSelector.tsx
+++ b/src/components/Common/LanguageSelector.tsx
@@ -2,7 +2,9 @@ import careConfig from "@careConfig";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
-import { classNames, keysOf } from "@/Utils/utils";
+import { cn } from "@/lib/utils";
+
+import { keysOf } from "@/Utils/utils";
 import { LANGUAGES } from "@/i18n";
 
 export const LanguageSelector = (props: any) => {
@@ -27,7 +29,7 @@ export const LanguageSelector = (props: any) => {
   return (
     <div className="relative flex items-center">
       <select
-        className={classNames(
+        className={cn(
           props.className,
           "w-full cursor-pointer appearance-none rounded-md py-2 pl-2 pr-10 focus:border-primary-500 focus:outline-none focus:ring-primary-500",
         )}
diff --git a/src/components/Common/LanguageSelectorLogin.tsx b/src/components/Common/LanguageSelectorLogin.tsx
index 1b165885142..11423fabdb8 100644
--- a/src/components/Common/LanguageSelectorLogin.tsx
+++ b/src/components/Common/LanguageSelectorLogin.tsx
@@ -2,7 +2,9 @@ import careConfig from "@careConfig";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
-import { classNames, keysOf } from "@/Utils/utils";
+import { cn } from "@/lib/utils";
+
+import { keysOf } from "@/Utils/utils";
 import { LANGUAGES } from "@/i18n";
 
 export const LanguageSelectorLogin = () => {
@@ -32,7 +34,7 @@ export const LanguageSelectorLogin = () => {
           <button
             key={e}
             onClick={() => handleLanguage(e)}
-            className={classNames(
+            className={cn(
               "text-primary-400 hover:text-primary-600",
               (i18n.language === e ||
                 (i18n.language === "en-US" && e === "en")) &&
diff --git a/src/components/Common/UpdatableApp.tsx b/src/components/Common/UpdatableApp.tsx
index 814779a99d3..3a383d73408 100644
--- a/src/components/Common/UpdatableApp.tsx
+++ b/src/components/Common/UpdatableApp.tsx
@@ -1,12 +1,12 @@
 import { Popover, Transition } from "@headlessui/react";
 import { ReactNode, useEffect, useState } from "react";
 
+import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
 
-import { classNames } from "@/Utils/utils";
-
 const META_URL = "/build-meta.json";
 const APP_VERSION_KEY = "app-version";
 const APP_UPDATED_KEY = "app-updated";
@@ -120,10 +120,7 @@ const UpdateAppPopup = ({ onUpdate }: UpdateAppPopupProps) => {
         <div className="flex items-center gap-4">
           <CareIcon
             icon="l-sync"
-            className={classNames(
-              "care-l-sync text-2xl",
-              isUpdating && "animate-spin",
-            )}
+            className={cn("text-2xl", isUpdating && "animate-spin")}
           />
           <span className="mr-4 flex flex-col">
             <p className="font-semibold">Software Update</p>
diff --git a/src/components/Users/UserFormValidations.tsx b/src/components/Users/UserFormValidations.tsx
index f07e08a9718..f87017fa479 100644
--- a/src/components/Users/UserFormValidations.tsx
+++ b/src/components/Users/UserFormValidations.tsx
@@ -1,8 +1,8 @@
 import { Trans } from "react-i18next";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
+import { cn } from "@/lib/utils";
 
-import { classNames } from "@/Utils/utils";
+import CareIcon from "@/CAREUI/icons/CareIcon";
 
 export type UserType = "doctor" | "nurse" | "staff" | "volunteer";
 
@@ -72,7 +72,7 @@ export const validateRule = (
         <CareIcon icon="l-times-circle" className="text-sm text-red-500" />
       )}{" "}
       <span
-        className={classNames(
+        className={cn(
           isInitialRender
             ? "text-black text-sm"
             : isConditionMet
diff --git a/src/components/ui/sidebar/patient-switcher.tsx b/src/components/ui/sidebar/patient-switcher.tsx
index 6718146ba71..97810946b03 100644
--- a/src/components/ui/sidebar/patient-switcher.tsx
+++ b/src/components/ui/sidebar/patient-switcher.tsx
@@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import {
   Select,
   SelectContent,
@@ -13,8 +15,6 @@ import { Avatar } from "@/components/Common/Avatar";
 
 import { usePatientContext } from "@/hooks/usePatientUser";
 
-import { classNames } from "@/Utils/utils";
-
 interface PatientSwitcherProps {
   className?: string;
 }
@@ -30,12 +30,7 @@ export function PatientSwitcher({ className }: PatientSwitcherProps) {
   }
 
   return (
-    <div
-      className={classNames(
-        "mx-2 mt-4 mb-2 flex flex-wrap flex-row",
-        className,
-      )}
-    >
+    <div className={cn("mx-2 mt-4 mb-2 flex flex-wrap flex-row", className)}>
       <Select
         disabled={patientUserContext.patients?.length === 0}
         value={
diff --git a/src/hooks/useFilters.tsx b/src/hooks/useFilters.tsx
index b6e9022a675..a0c10a7a24e 100644
--- a/src/hooks/useFilters.tsx
+++ b/src/hooks/useFilters.tsx
@@ -2,12 +2,14 @@ import { QueryParam, setQueryParamsOptions, useQueryParams } from "raviger";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import GenericFilterBadge from "@/CAREUI/display/FilterBadge";
 
 import PaginationComponent from "@/components/Common/Pagination";
 
 import FiltersCache from "@/Utils/FiltersCache";
-import { classNames, humanizeStrings } from "@/Utils/utils";
+import { humanizeStrings } from "@/Utils/utils";
 
 export type FilterState = Record<string, unknown>;
 
@@ -222,7 +224,7 @@ export default function useFilters({
     }
     return (
       <div
-        className={classNames(
+        className={cn(
           "flex w-full justify-center",
           totalCount > limit ? "visible" : "invisible",
           !noMargin && "mt-4",