refactor: Improve class name handling with cn utility function

exaby73 · exaby73 · commit 7c60dc8408da · 2025-02-12T20:21:27.000+05:30
diff --git a/packages/firebaseui-react/package.json b/packages/firebaseui-react/package.json
@@ -15,10 +15,12 @@
     "@nanostores/react": "^0.8.4",
     "@tailwindcss/vite": "^4.0.0",
     "@tanstack/react-form": "^0.41.3",
+    "clsx": "^2.1.1",
     "firebase": "^11.2.0",
     "nanostores": "^0.11.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.0",
     "zod": "^3.24.1"
   },
diff --git a/packages/firebaseui-react/src/auth/custom-sign-in-screen.tsx b/packages/firebaseui-react/src/auth/custom-sign-in-screen.tsx
@@ -1,3 +1,5 @@
+import { cn } from "~/utils/cn";
+
 interface CustomSignInScreenProps {
   children: React.ReactNode;
   className?: string;
@@ -7,5 +9,5 @@ export function CustomSignInScreen({
   children,
   className,
 }: CustomSignInScreenProps) {
-  return <div className={`fui-screen ${className || ""}`}>{children}</div>;
+  return <div className={cn("fui-screen", className)}>{children}</div>;
 }
diff --git a/packages/firebaseui-react/src/auth/email-password-form.tsx b/packages/firebaseui-react/src/auth/email-password-form.tsx
@@ -12,6 +12,7 @@ import { useAuth, useConfig, useTranslations } from "~/hooks";
 import { useMemo, useState } from "react";
 import { Button } from "../components/button";
 import { FieldInfo } from "../components/field-info";
+import { cn } from "~/utils/cn";
 
 export function EmailPasswordForm({
   onForgotPasswordClick,
@@ -77,9 +78,10 @@ export function EmailPasswordForm({
                 )}
               </label>
               <input
-                className={`fui-form__input ${
-                  field.state.meta.errors.length ? "fui-form__input--error" : ""
-                }`}
+                className={cn(
+                  "fui-form__input",
+                  field.state.meta.errors.length && "fui-form__input--error"
+                )}
                 id={field.name}
                 name={field.name}
                 type="email"
@@ -125,9 +127,10 @@ export function EmailPasswordForm({
                 )}
               </div>
               <input
-                className={`fui-form__input ${
-                  field.state.meta.errors.length ? "fui-form__input--error" : ""
-                }`}
+                className={cn(
+                  "fui-form__input",
+                  field.state.meta.errors.length && "fui-form__input--error"
+                )}
                 id={field.name}
                 name={field.name}
                 type="password"
diff --git a/packages/firebaseui-react/src/auth/phone-form.tsx b/packages/firebaseui-react/src/auth/phone-form.tsx
@@ -14,6 +14,7 @@ import {
 import { Button } from "../components/button";
 import { FieldInfo } from "../components/field-info";
 import { z } from "zod";
+import { cn } from "~/utils/cn";
 
 export function PhoneForm() {
   const auth = useAuth();
@@ -143,11 +144,10 @@ export function PhoneForm() {
                   )}
                 </label>
                 <input
-                  className={`fui-form__input ${
-                    field.state.meta.errors.length
-                      ? "fui-form__input--error"
-                      : ""
-                  }`}
+                  className={cn(
+                    "fui-form__input",
+                    field.state.meta.errors.length && "fui-form__input--error"
+                  )}
                   id={field.name}
                   name={field.name}
                   type="tel"
@@ -204,9 +204,10 @@ export function PhoneForm() {
                 )}
               </label>
               <input
-                className={`fui-form__input ${
-                  field.state.meta.errors.length ? "fui-form__input--error" : ""
-                }`}
+                className={cn(
+                  "fui-form__input",
+                  field.state.meta.errors.length && "fui-form__input--error"
+                )}
                 id={field.name}
                 name={field.name}
                 type="text"
diff --git a/packages/firebaseui-react/src/auth/register-form.tsx b/packages/firebaseui-react/src/auth/register-form.tsx
@@ -12,6 +12,7 @@ import { useAuth, useConfig, useTranslations } from "~/hooks";
 import { useMemo, useState } from "react";
 import { Button } from "../components/button";
 import { FieldInfo } from "../components/field-info";
+import { cn } from "~/utils/cn";
 
 export function RegisterForm({
   onBackToSignInClick,
@@ -80,9 +81,10 @@ export function RegisterForm({
                 )}
               </label>
               <input
-                className={`fui-form__input ${
-                  field.state.meta.errors.length ? "fui-form__input--error" : ""
-                }`}
+                className={cn(
+                  "fui-form__input",
+                  field.state.meta.errors.length && "fui-form__input--error"
+                )}
                 id={field.name}
                 name={field.name}
                 type="email"
@@ -105,9 +107,10 @@ export function RegisterForm({
                 {getTranslation("labels", "password", translations, language)}
               </label>
               <input
-                className={`fui-form__input ${
-                  field.state.meta.errors.length ? "fui-form__input--error" : ""
-                }`}
+                className={cn(
+                  "fui-form__input",
+                  field.state.meta.errors.length && "fui-form__input--error"
+                )}
                 id={field.name}
                 name={field.name}
                 type="password"
diff --git a/packages/firebaseui-react/src/components/button.tsx b/packages/firebaseui-react/src/components/button.tsx
@@ -1,4 +1,5 @@
-import { type ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes } from "react";
+import { cn } from "~/utils/cn";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "primary" | "secondary";
@@ -12,9 +13,11 @@ export function Button({
 }: ButtonProps) {
   return (
     <button
-      className={`fui-form__button ${
-        variant === "secondary" ? "fui-form__button--secondary" : ""
-      } ${className}`}
+      className={cn(
+        "fui-form__button",
+        variant === "secondary" && "fui-form__button--secondary",
+        className
+      )}
       {...props}
     >
       {children}
diff --git a/packages/firebaseui-react/src/components/card-header.tsx b/packages/firebaseui-react/src/components/card-header.tsx
@@ -1,5 +1,6 @@
 import { CardTitle } from "./card-title";
 import { CardSubtitle } from "./card-subtitle";
+import { cn } from "~/utils/cn";
 
 interface CardHeaderProps {
   title?: string;
@@ -9,7 +10,7 @@ interface CardHeaderProps {
 
 export function CardHeader({ title, subtitle, className }: CardHeaderProps) {
   return (
-    <div className={`fui-card__header ${className || ""}`}>
+    <div className={cn("fui-card__header", className)}>
       <CardTitle text={title} />
       <CardSubtitle text={subtitle} />
     </div>
diff --git a/packages/firebaseui-react/src/components/card-subtitle.tsx b/packages/firebaseui-react/src/components/card-subtitle.tsx
@@ -1,5 +1,6 @@
 import { useConfig, useTranslations } from "~/hooks";
 import { getTranslation } from "@firebase-ui/core";
+import { cn } from "~/utils/cn";
 
 interface CardSubtitleProps {
   text?: string;
@@ -14,7 +15,5 @@ export function CardSubtitle({ text, className }: CardSubtitleProps) {
     text ||
     getTranslation("prompts", "signInToAccount", translations, language);
 
-  return (
-    <p className={`fui-card__subtitle ${className || ""}`}>{subtitleText}</p>
-  );
+  return <p className={cn("fui-card__subtitle", className)}>{subtitleText}</p>;
 }
diff --git a/packages/firebaseui-react/src/components/card-title.tsx b/packages/firebaseui-react/src/components/card-title.tsx
@@ -1,5 +1,6 @@
 import { useConfig, useTranslations } from "~/hooks";
 import { getTranslation } from "@firebase-ui/core";
+import { cn } from "~/utils/cn";
 
 interface CardTitleProps {
   text?: string;
@@ -13,5 +14,5 @@ export function CardTitle({ text, className }: CardTitleProps) {
   const titleText =
     text || getTranslation("labels", "signIn", translations, language);
 
-  return <h2 className={`fui-card__title ${className || ""}`}>{titleText}</h2>;
+  return <h2 className={cn("fui-card__title", className)}>{titleText}</h2>;
 }
diff --git a/packages/firebaseui-react/src/components/card.tsx b/packages/firebaseui-react/src/components/card.tsx
@@ -1,11 +1,13 @@
+import { cn } from "~/utils/cn";
+
 interface CardProps {
   children: React.ReactNode;
   className?: string;
 }
 
 export function Card({ children, className }: CardProps) {
   return (
-    <div className={`fui-card ${className || ""}`}>
+    <div className={cn("fui-card", className)}>
       <div className="fui-card__container">{children}</div>
     </div>
   );
diff --git a/packages/firebaseui-react/src/components/divider.tsx b/packages/firebaseui-react/src/components/divider.tsx
@@ -1,3 +1,5 @@
+import { cn } from "~/utils/cn";
+
 interface DividerProps {
   text?: string;
   className?: string;
@@ -6,14 +8,14 @@ interface DividerProps {
 export function Divider({ text, className }: DividerProps) {
   if (!text) {
     return (
-      <div className={`fui-divider ${className || ""}`}>
+      <div className={cn("fui-divider", className)}>
         <div className="fui-divider__line" />
       </div>
     );
   }
 
   return (
-    <div className={`fui-divider ${className || ""}`}>
+    <div className={cn("fui-divider", className)}>
       <div className="fui-divider__line" />
       <div className="fui-divider__text">{text}</div>
       <div className="fui-divider__line" />
diff --git a/packages/firebaseui-react/src/components/field-info.tsx b/packages/firebaseui-react/src/components/field-info.tsx
@@ -1,4 +1,5 @@
 import type { FieldApi } from "@tanstack/react-form";
+import { cn } from "~/utils/cn";
 
 interface FieldInfoProps<TData> {
   field: FieldApi<TData, any>;
@@ -9,7 +10,7 @@ export function FieldInfo<TData>({ field, className }: FieldInfoProps<TData>) {
   return (
     <>
       {field.state.meta.isTouched && field.state.meta.errors.length ? (
-        <div className={`fui-form__error ${className || ""}`}>
+        <div className={cn("fui-form__error", className)}>
           {field.state.meta.errors.join(", ")}
         </div>
       ) : null}
diff --git a/packages/firebaseui-react/src/main.tsx b/packages/firebaseui-react/src/main.tsx
@@ -138,7 +138,6 @@ function App() {
     );
   }
 
-  // Handle forms for both anonymous and not signed-in users
   const getFormContent = () => {
     switch (path) {
       case "/signin":
diff --git a/packages/firebaseui-react/src/utils/cn.ts b/packages/firebaseui-react/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { twMerge } from "tailwind-merge";
+import { clsx } from "clsx";
+
+export function cn(...inputs: Parameters<typeof clsx>) {
+  return twMerge(clsx(...inputs));
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
