refactor: unify classnames combination logic

Metaculus · Dec 17, 2024 · 5a56e67 · 5a56e67
1 parent 2655b5f
commit 5a56e67
Show file tree

Hide file tree

Showing 136 changed files with 460 additions and 444 deletions.
diff --git a/front_end/package-lock.json b/front_end/package-lock.json
diff --git a/front_end/package.json b/front_end/package.json
@@ -38,7 +38,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "better-react-mathjax": "^2.0.3",
-    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "d3": "^7.9.0",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",
@@ -65,6 +65,7 @@
     "sass": "^1.77.6",
     "sharp": "^0.33.5",
     "strip-markdown": "^6.0.0",
+    "tailwind-merge": "^2.5.5",
     "ts-invariant": "^0.10.3",
     "victory": "^37.0.2",
     "zod": "^3.23.8"

diff --git a/front_end/src/app/(campaigns-registration)/bridgewater/components/cards.tsx b/front_end/src/app/(campaigns-registration)/bridgewater/components/cards.tsx
@@ -1,10 +1,11 @@
 "use client";
 
-import React, { FC } from "react";
 import { useRouter } from "next/navigation";
+import React, { FC } from "react";
 
 import Button from "@/components/ui/button";
 import { useModal } from "@/contexts/modal_context";
+
 import { HeroSection } from "./hero-section";
 
 export const SucessfullyRegistered = () => {

diff --git a/front_end/src/app/(campaigns-registration)/bridgewater/components/header.tsx b/front_end/src/app/(campaigns-registration)/bridgewater/components/header.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import classNames from "classnames";
 import Link from "next/link";
 import { FC } from "react";
 
 import NavUserButton from "@/components/auth";
-import { useAuth } from "@/contexts/auth_context";
 import ThemeToggle from "@/components/theme_toggle";
+import { useAuth } from "@/contexts/auth_context";
+import cn from "@/utils/cn";
 
 const Header: FC = () => {
   const { user } = useAuth();
@@ -15,7 +15,7 @@ const Header: FC = () => {
       <div className="flex h-full items-center">
         <Link
           href="/"
-          className={classNames(
+          className={cn(
             "inline-flex h-full max-w-60 flex-shrink-0 flex-grow-0 basis-auto flex-col justify-center text-center no-underline lg:bg-blue-800 lg:dark:bg-gray-0-dark"
           )}
         >

diff --git a/front_end/src/app/(campaigns-registration)/bridgewater/components/hero-section.tsx b/front_end/src/app/(campaigns-registration)/bridgewater/components/hero-section.tsx
@@ -1,12 +1,14 @@
 "use client";
 
-import { FC, PropsWithChildren } from "react";
-import clsx from "clsx";
 import Image from "next/image";
-import { XIcon } from "./x-icon";
-import { useModal } from "@/contexts/modal_context";
 import { usePathname } from "next/navigation";
+import { FC, PropsWithChildren } from "react";
+
 import Button from "@/components/ui/button";
+import { useModal } from "@/contexts/modal_context";
+import cn from "@/utils/cn";
+
+import { XIcon } from "./x-icon";
 
 export const ChoicesButtons = () => {
   const { setCurrentModal } = useModal();
@@ -64,7 +66,7 @@ export const HeroSection: FC<PropsWithChildren<{ className?: string }>> = ({
 }) => {
   return (
     <div
-      className={clsx(
+      className={cn(
         "flex flex-col items-center rounded-md bg-gray-0 dark:bg-gray-0-dark",
         className
       )}

diff --git a/front_end/src/app/(main)/(home)/components/focus_area_link.tsx b/front_end/src/app/(main)/(home)/components/focus_area_link.tsx
@@ -1,10 +1,11 @@
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import classNames from "classnames";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { FC } from "react";
 
+import cn from "@/utils/cn";
+
 export type FocusAreaItem = {
   id: string;
   title: string;
@@ -19,7 +20,7 @@ const FocusAreaLink: FC<FocusAreaItem> = ({ title, text, Icon, href, id }) => {
   return (
     <Link
       href={href}
-      className={classNames(
+      className={cn(
         "flex flex-1 flex-col rounded-b-2xl border-t-[1rem] bg-gray-0 p-6 no-underline hover:shadow-lg active:shadow-md dark:bg-gray-0-dark",
         {
           "border-t-[#47ac9ab2] dark:border-t-[#51b3a6]": id === "biosecurity",
@@ -30,7 +31,7 @@ const FocusAreaLink: FC<FocusAreaItem> = ({ title, text, Icon, href, id }) => {
       )}
     >
       <div
-        className={classNames(
+        className={cn(
           "my-2 flex size-16 items-center justify-center rounded-full text-black",
           {
             "bg-[#47ac9a80] dark:bg-[#51b3a6]": id === "biosecurity",

diff --git a/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_table.tsx b/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_table.tsx
@@ -1,7 +1,6 @@
 "use client";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import classNames from "classnames";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import {
@@ -20,6 +19,7 @@ import {
   LeaderboardEntry,
   LeaderboardType,
 } from "@/types/scoring";
+import cn from "@/utils/cn";
 import { abbreviatedNumber } from "@/utils/number_formatters";
 import { isUnsuccessfullyResolved } from "@/utils/questions";
 
@@ -120,7 +120,7 @@ const ContributionsTable: FC<Props> = ({
       <thead>
         <tr className="bg-gray-0 text-gray-800 dark:bg-gray-0-dark dark:text-gray-800-dark">
           <InfoHeaderTd
-            className={classNames(
+            className={cn(
               "text-center font-mono",
               { "w-28": category === "questionWriting" },
               { "w-24": category === "comments" },
@@ -193,7 +193,7 @@ const ContributionsTable: FC<Props> = ({
             className="border-b border-gray-300 bg-gray-0 text-gray-800 dark:border-gray-300-dark dark:bg-gray-0-dark dark:text-gray-800-dark"
           >
             <td
-              className={classNames(
+              className={cn(
                 "flex items-center justify-center px-0 py-1.5 font-mono text-sm font-medium leading-4",
                 {
                   "dark:text-conditionals-green-700-dark text-conditional-green-700":
@@ -266,10 +266,7 @@ const InfoHeaderTd: FC<
     HTMLTableCellElement
   >
 > = ({ className, children, ...props }) => (
-  <td
-    className={classNames("px-4 py-1.5 text-sm leading-4", className)}
-    {...props}
-  >
+  <td className={cn("px-4 py-1.5 text-sm leading-4", className)} {...props}>
     {children}
   </td>
 );
@@ -281,10 +278,7 @@ const HeaderTd: FC<
   >
 > = ({ className, children, ...props }) => (
   <td
-    className={classNames(
-      "cursor-pointer py-4 text-sm font-bold leading-4",
-      className
-    )}
+    className={cn("cursor-pointer py-4 text-sm font-bold leading-4", className)}
     {...props}
   >
     {children}
@@ -294,7 +288,7 @@ const HeaderTd: FC<
 const SortArrow: FC<{ isAsc: boolean }> = ({ isAsc }) => (
   <FontAwesomeIcon
     icon={faCaretDown}
-    className={classNames("ml-2", {
+    className={cn("ml-2", {
       "rotate-180": isAsc,
     })}
   />

diff --git a/..._end/src/app/(main)/(leaderboards)/leaderboard/components/leaderboard_table/table_row.tsx b/..._end/src/app/(main)/(leaderboards)/leaderboard/components/leaderboard_table/table_row.tsx
@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import Link from "next/link";
 import { FC } from "react";
 
@@ -8,6 +7,7 @@ import {
   LeaderboardEntry,
   LeaderboardType,
 } from "@/types/scoring";
+import cn from "@/utils/cn";
 import { abbreviatedNumber } from "@/utils/number_formatters";
 
 import MedalIcon from "../../../components/medal_icon";
@@ -44,7 +44,7 @@ const LeaderboardRow: FC<Props> = ({
 
   return (
     <tr
-      className={classNames(
+      className={cn(
         "border-b border-gray-300 hover:bg-blue-200 dark:border-gray-300-dark dark:hover:bg-blue-200-dark",
         {
           "bg-blue-300 last-of-type:border-t hover:bg-blue-400 dark:bg-blue-300-dark hover:dark:bg-blue-400-dark":
@@ -66,7 +66,7 @@ const LeaderboardRow: FC<Props> = ({
         </Link>
       </td>
       <td
-        className={classNames(
+        className={cn(
           "max-w-full p-0 text-base",
           isUserRow ? "font-bold" : "font-medium"
         )}
@@ -101,7 +101,7 @@ const LeaderboardRow: FC<Props> = ({
         </td>
       )}
       <td
-        className={classNames(
+        className={cn(
           "w-20 p-0 font-mono text-base leading-4",
           !isUserRow && "text-gray-600 dark:text-gray-600-dark"
         )}

diff --git a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx
@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import { getTranslations } from "next-intl/server";
 import { FC } from "react";
 

diff --git a/...p/(main)/(leaderboards)/leaderboard/components/project_leaderboard_table/table_header.tsx b/...p/(main)/(leaderboards)/leaderboard/components/project_leaderboard_table/table_header.tsx
@@ -1,13 +1,14 @@
-import classNames from "classnames";
 import { FC, PropsWithChildren } from "react";
 
+import cn from "@/utils/cn";
+
 type Props = {
   className?: string;
 };
 
 const TableHeader: FC<PropsWithChildren<Props>> = ({ className, children }) => (
   <th
-    className={classNames(
+    className={cn(
       "border-b border-gray-400 bg-gray-0 px-4 py-2.5 text-sm font-bold dark:border-gray-400-dark dark:bg-gray-0-dark",
       className
     )}

diff --git a/.../app/(main)/(leaderboards)/leaderboard/components/project_leaderboard_table/table_row.tsx b/.../app/(main)/(leaderboards)/leaderboard/components/project_leaderboard_table/table_row.tsx
@@ -1,9 +1,9 @@
-import classNames from "classnames";
 import { isNil } from "lodash";
 import Link from "next/link";
 import { FC, PropsWithChildren } from "react";
 
 import { LeaderboardEntry } from "@/types/scoring";
+import cn from "@/utils/cn";
 
 import MedalIcon from "../../../components/medal_icon";
 
@@ -80,7 +80,7 @@ const Td: FC<
   }>
 > = ({ highlight, className, children }) => (
   <td
-    className={classNames(
+    className={cn(
       "px-4 py-2.5 text-sm leading-4",
       highlight
         ? "bg-orange-100 dark:bg-orange-100-dark"

diff --git a/front_end/src/app/(main)/(leaderboards)/leaderboard/page.tsx b/front_end/src/app/(main)/(leaderboards)/leaderboard/page.tsx
@@ -1,9 +1,9 @@
-import classNames from "classnames";
 import { useTranslations } from "next-intl";
 import { FC, Fragment, Suspense } from "react";
 
 import { SearchParams } from "@/types/navigation";
 import { CategoryKey, LeaderboardFilters } from "@/types/scoring";
+import cn from "@/utils/cn";
 
 import LeaderboardCategoriesTabBar from "./components/categories_tab_bar";
 import GlobalLeaderboard from "./components/global_leaderboard";
@@ -66,7 +66,7 @@ export default function GlobalLeaderboards({
         <LeaderboardHeader filters={filters} />
 
         <section
-          className={classNames(
+          className={cn(
             "flex flex-col gap-3 self-stretch overflow-hidden sm:flex-row",
             duration === "1"
               ? "grid-cols-[repeat(auto-fill,minmax(280px,1fr))] sm:grid"
@@ -120,7 +120,7 @@ export default function GlobalLeaderboards({
 
 const Skeleton: FC<{ className?: string }> = ({ className }) => (
   <div
-    className={classNames(
+    className={cn(
       "w-full max-w-3xl animate-pulse rounded bg-gray-0 p-4 shadow-md dark:bg-gray-0-dark",
       className
     )}

diff --git a/front_end/src/app/(main)/(leaderboards)/medals/components/medal_categories.tsx b/front_end/src/app/(main)/(leaderboards)/medals/components/medal_categories.tsx
@@ -1,8 +1,8 @@
-import classNames from "classnames";
 import { useTranslations } from "next-intl";
 import { FC } from "react";
 
 import { MedalEntry } from "@/types/scoring";
+import cn from "@/utils/cn";
 
 import MedalCard from "./medal_card";
 import { CONTRIBUTIONS_USER_FILTER } from "../../contributions/search_params";
@@ -27,7 +27,7 @@ const MedalCategories: FC<Props> = ({ medalEntries, userId }) => {
     <section className="mb-3 flex flex-col gap-12 pt-4 sm:mb-6">
       {categories.map((category) => (
         <div
-          className={classNames(
+          className={cn(
             "flex flex-col items-center justify-center gap-9 px-3",
             { hidden: category.medals.length === 0 }
           )}

diff --git a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx
@@ -1,10 +1,10 @@
-import classNames from "classnames";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { FC } from "react";
 
 import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 import LeaderboardApi from "@/services/leaderboard";
+import cn from "@/utils/cn";
 
 import MedalIcon from "../../components/medal_icon";
 import { RANKING_CATEGORIES } from "../../ranking_categories";
@@ -45,7 +45,7 @@ const MedalsPage: FC<Props> = async ({ profileId }) => {
         {categories?.map((category, index) => (
           <div
             key={index}
-            className={classNames(
+            className={cn(
               "flex w-full flex-col items-center justify-center rounded ",
               { "sm:col-span-2": category.name === "tournament" }
             )}

diff --git a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx
@@ -1,11 +1,11 @@
-import classNames from "classnames";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { FC } from "react";
 
 import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 import Tooltip from "@/components/ui/tooltip";
 import LeaderboardApi from "@/services/leaderboard";
+import cn from "@/utils/cn";
 
 import MedalIcon from "../../components/medal_icon";
 import { RANKING_CATEGORIES } from "../../ranking_categories";
@@ -44,7 +44,7 @@ const MedalsWidget: FC<Props> = async ({ profileId }) => {
         {categories?.map((category, index) => (
           <div
             key={index}
-            className={classNames(
+            className={cn(
               "flex w-full flex-col items-center justify-center rounded  bg-blue-100 dark:bg-blue-950/50",
               { "sm:col-span-2": category.name === "tournament" }
             )}