Replace clsx with gwMerge (#141)

Ensure support for extension groundwork libraries that will pass through further className modification.
USACE · Dec 10, 2024 · a0c9792 · a0c9792
1 parent cb0cade
commit a0c9792
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 28 deletions.
diff --git a/lib/components/button.jsx b/lib/components/button.jsx
@@ -1,5 +1,5 @@
 import { Button as HeadlessButton } from "@headlessui/react";
-import { clsx } from "clsx";
+import gwMerge from "../gw-merge";
 import React from "react";
 import { Link } from "./link";
 
@@ -201,14 +201,14 @@ export const Button = React.forwardRef(function Button(
   },
   ref
 ) {
-  let classes = clsx(
+  let classes = gwMerge(
     base,
     // styles.base,
     // outline
     //   ? styles.outline
     //   : plain
     //   ? styles.plain
-    //   : clsx(styles.solid, styles.colors[color ?? "dark/zinc"]),
+    //   : gwMerge(styles.solid, styles.colors[color ?? "dark/zinc"]),
     radii[radius],
     sizes[size],
     style === "filled" ? colorsFilled[color] : "",
@@ -224,7 +224,7 @@ export const Button = React.forwardRef(function Button(
   ) : (
     <HeadlessButton
       {...props}
-      className={clsx(classes, "cursor-default")}
+      className={gwMerge(classes, "cursor-default")}
       ref={ref}
     >
       <TouchTarget>{children}</TouchTarget>

diff --git a/lib/components/display/skeleton.jsx b/lib/components/display/skeleton.jsx
@@ -1,10 +1,10 @@
-import { clsx } from "clsx";
+import gwMerge from "../../gw-merge";
 
 const Skeleton = ({ type, className, ...props }) => {
   const baseSize = type === "card" ? "gw-w-80 gw-h-36" : "gw-w-12 gw-h-5";
   return (
     <div
-      className={clsx(
+      className={gwMerge(
         "gw-animate-pulse gw-rounded-md gw-bg-gray-400",
         baseSize,
         className

diff --git a/lib/components/display/text.jsx b/lib/components/display/text.jsx
@@ -1,12 +1,12 @@
-import { clsx } from "clsx";
+import gwMerge from "../../gw-merge";
 import { Link } from "../link";
 
 export function Text({ className, ...props }) {
   return (
     <p
       {...props}
       data-slot="text"
-      className={clsx(
+      className={gwMerge(
         "gw-text-sm/6 gw-text-zinc-500 md:gw-text-base/6 dark:gw-text-zinc-400",
         className
       )}
@@ -18,7 +18,7 @@ export function TextLink({ className, ...props }) {
   return (
     <Link
       {...props}
-      className={clsx(
+      className={gwMerge(
         "gw-text-zinc-950 gw-underline gw-decoration-zinc-950/50 data-[hover]:gw-decoration-zinc-950 dark:gw-text-white dark:gw-decoration-white/50 dark:data-[hover]:decoration-white",
         className
       )}
@@ -30,7 +30,7 @@ export function Strong({ className, ...props }) {
   return (
     <strong
       {...props}
-      className={clsx(
+      className={gwMerge(
         "gw-font-medium gw-text-zinc-950 dark:gw-text-white",
         className
       )}
@@ -42,7 +42,7 @@ export function Code({ className, ...props }) {
   return (
     <code
       {...props}
-      className={clsx(
+      className={gwMerge(
         "gw-rounded gw-border gw-border-zinc-950/10 gw-bg-zinc-950/[2.5%] gw-px-0.5 gw-text-sm gw-font-medium gw-text-zinc-950 sm:gw-text-[0.8125rem] dark:gw-border-white/20 dark:gw-bg-white/5 dark:gw-text-white",
         className
       )}

diff --git a/lib/components/form/input.jsx b/lib/components/form/input.jsx
@@ -1,5 +1,5 @@
 import { Input as HeadlessInput } from "@headlessui/react";
-import { clsx } from "clsx";
+import gwMerge from "../../gw-merge";
 import { forwardRef } from "react";
 
 const dateTypes = ["date", "datetime-local", "month", "time", "week"];
@@ -8,7 +8,7 @@ export const Input = forwardRef(function Input({ className, ...props }, ref) {
   return (
     <span
       data-slot="control"
-      className={clsx([
+      className={gwMerge([
         className,
 
         // Basic layout
@@ -32,7 +32,7 @@ export const Input = forwardRef(function Input({ className, ...props }, ref) {
     >
       <HeadlessInput
         ref={ref}
-        className={clsx([
+        className={gwMerge([
           // Date classes
           props.type &&
             dateTypes.includes(props.type) && [

diff --git a/lib/components/form/textarea.jsx b/lib/components/form/textarea.jsx
@@ -1,5 +1,5 @@
 import { Textarea as HeadlessTextarea } from "@headlessui/react";
-import { clsx } from "clsx";
+import gwMerge from "../../gw-merge";
 import { forwardRef } from "react";
 
 export const Textarea = forwardRef(function Textarea(
@@ -9,7 +9,7 @@ export const Textarea = forwardRef(function Textarea(
   return (
     <span
       data-slot="control"
-      className={clsx([
+      className={gwMerge([
         className,
 
         // Basic layout
@@ -30,7 +30,7 @@ export const Textarea = forwardRef(function Textarea(
     >
       <HeadlessTextarea
         ref={ref}
-        className={clsx([
+        className={gwMerge([
           // Basic layout
           "gw-relative gw-block gw-h-full gw-w-full gw-appearance-none gw-rounded-lg gw-px-[calc(theme(spacing[3.5])-1px)] gw-py-[calc(theme(spacing[2.5])-1px)] sm:gw-px-[calc(theme(spacing.3)-1px)] sm:gw-py-[calc(theme(spacing[1.5])-1px)]",
 

diff --git a/lib/components/table.jsx b/lib/components/table.jsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { clsx } from "clsx";
+import gwMerge from "../gw-merge";
 import { createContext, useContext, useState } from "react";
 import { Link } from "./link";
 
@@ -25,13 +25,13 @@ export function Table({
       <div className="gw-flow-root">
         <div
           {...props}
-          className={clsx(
+          className={gwMerge(
             "gw--mx-[--gutter] gw-overflow-x-auto gw-whitespace-nowrap",
             className
           )}
         >
           <div
-            className={clsx(
+            className={gwMerge(
               "gw-inline-block gw-min-w-full gw-align-middle",
               !bleed && "sm:gw-px-[--gutter]"
             )}
@@ -49,7 +49,7 @@ export function Table({
 export function TableHead({ className, ...props }) {
   return (
     <thead
-      className={clsx("gw-text-zinc-500 dark:gw-text-zinc-400", className)}
+      className={gwMerge("gw-text-zinc-500 dark:gw-text-zinc-400", className)}
       {...props}
     />
   );
@@ -79,7 +79,7 @@ export function TableRow({
     <TableRowContext.Provider value={{ href, target, title }}>
       <tr
         {...props}
-        className={clsx(
+        className={gwMerge(
           href &&
             "has-[[data-row-link][data-focus]]:gw-outline has-[[data-row-link][data-focus]]:gw-outline-2 has-[[data-row-link][data-focus]]:gw--outline-offset-2 has-[[data-row-link][data-focus]]:gw-outline-blue-500 dark:focus-within:gw-bg-white/[2.5%]",
           striped && "even:gw-bg-zinc-950/[2.5%] dark:even:gw-bg-white/[2.5%]",
@@ -102,7 +102,7 @@ export function TableHeader({ className, ...props }) {
   return (
     <th
       {...props}
-      className={clsx(
+      className={gwMerge(
         "gw-border-b gw-border-b-zinc-950/10 gw-px-4 gw-py-2 gw-font-medium first:gw-pl-[var(--gutter,theme(spacing.2))] last:gw-pr-[var(--gutter,theme(spacing.2))] dark:gw-border-b-white/10",
         grid &&
           "gw-border-l gw-border-l-zinc-950/5 first:gw-border-l-0 dark:gw-border-l-white/5",
@@ -124,7 +124,7 @@ export function TableCell({ className, children, ...props }) {
     <td
       ref={href ? setCellRef : undefined}
       {...props}
-      className={clsx(
+      className={gwMerge(
         "gw-relative gw-px-4 first:gw-pl-[var(--gutter,theme(spacing.2))] last:gw-pr-[var(--gutter,theme(spacing.2))]",
         !striped && "gw-border-b gw-border-zinc-950/5 dark:gw-border-white/5",
         grid &&

diff --git a/lib/composite/header/index.jsx b/lib/composite/header/index.jsx
@@ -4,7 +4,7 @@ import usaceLogo from "../../img/usace-logo-color.svg";
 import { Button } from "../../components/button";
 import { GiHamburgerMenu } from "react-icons/gi";
 import { useState } from "react";
-import clsx from "clsx";
+import gwMerge from "../../gw-merge";
 
 function Title({ title = "", subtitle = "" }) {
   return (
@@ -42,7 +42,7 @@ function Logo() {
 
 function Header({ links, title, subtitle, navRight, fluidNav }) {
   const [showOverlayLinks, setShowOverlayLinks] = useState(false);
-  const navContainerClass = clsx(
+  const navContainerClass = gwMerge(
     "gw-w-full gw-mx-auto gw-px-4 gw-box-border",
     fluidNav ? "gw-max-w-screen" : "gw-max-w-screen-2xl"
   );

diff --git a/lib/composite/header/usa-banner/USABanner.jsx b/lib/composite/header/usa-banner/USABanner.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import clsx from "clsx";
+import gwMerge from "../../../gw-merge";
 import "./usa-banner.css";
 import flag from "../../../img/us_flag_small.png";
 import iconDotGov from "../../../img/icon-dot-gov.svg";
@@ -11,7 +11,7 @@ function classNames(...classes) {
 
 const USABanner = ({ fluidNav }) => {
   const [open, setOpen] = useState(false);
-  const headerBannerInnerClass = clsx(
+  const headerBannerInnerClass = gwMerge(
     "header_banner_inner sm:gw-my-0 sm:gw-mx-auto sm:gw-font-sm",
     fluidNav ? "gw-max-w-screen" : "gw-px-4 gw-max-w-screen-2xl"
   );