feat: add tailwind-merge, combine with clsx to form new helper

ably · Nov 29, 2024 · aac4e3e · aac4e3e
1 parent 380a473
commit aac4e3e
Show file tree

Hide file tree

Showing 16 changed files with 66 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -93,7 +93,8 @@
     "react-dom": "^18.3.1",
     "redux": "^4.0.5",
     "scroll-lock": "^2.1.4",
-    "swr": "^2.2.5"
+    "swr": "^2.2.5",
+    "tailwind-merge": "^2.5.5"
   },
   "bugs": {
     "url": "https://github.com/ably/ably-ui/issues"

diff --git a/src/core/Accordion.tsx b/src/core/Accordion.tsx
@@ -5,7 +5,6 @@ import {
   AccordionTrigger,
   Accordion as RadixAccordion,
 } from "@radix-ui/react-accordion";
-import clsx from "clsx";
 
 import Icon from "./Icon";
 import type { IconName } from "./Icon/types";
@@ -20,6 +19,7 @@ import {
   isNonTransparentTheme,
   isStaticTheme,
 } from "./Accordion/utils";
+import cn from "./utils/cn";
 
 type AccordionRowProps = {
   children: ReactNode;
@@ -85,13 +85,13 @@ const AccordionRow = ({
   return (
     <AccordionItem
       value={rowKey}
-      className={clsx({
+      className={cn({
         [`${border}`]: border && !options?.hideBorders,
       })}
     >
       <AccordionTrigger
         onClick={onClick}
-        className={clsx({
+        className={cn({
           "flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors":
             true,
           "px-16 mb-16 rounded-lg": isNonTransparentTheme(theme),
@@ -125,7 +125,7 @@ const AccordionRow = ({
         ) : null}
       </AccordionTrigger>
       <AccordionContent
-        className={clsx({
+        className={cn({
           "ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down":
             true,
           [options?.contentCSS ?? ""]: options?.contentCSS,

diff --git a/src/core/Button.tsx b/src/core/Button.tsx
@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { IconName } from "./Icon/types";
 import Icon from "./Icon";
-import clsx from "clsx";
+import cn from "./utils/cn";
 
 export type ButtonType = "priority" | "primary" | "secondary";
 
@@ -73,7 +73,7 @@ const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
 }) => {
   return (
     <button
-      className={clsx(
+      className={cn(
         buttonClasses[variant][size ?? "md"],
         { [iconModifierClasses[size ?? "md"].left]: leftIcon },
         { [iconModifierClasses[size ?? "md"].right]: rightIcon },

diff --git a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
@@ -21,7 +21,7 @@ exports[`Components/Featured Link Disabled smoke-test 1`] = `
    style="--featured-link-icon-size: var(--fs-p2);"
 >
   Featured link
-  <svg class="align-middle ml-8 relative -top-1 -left-4 transition-[left] "
+  <svg class="align-middle ml-8 relative -top-1 -left-4 transition-[left]"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">

diff --git a/src/core/Footer/__snapshots__/Footer.stories.tsx.snap b/src/core/Footer/__snapshots__/Footer.stories.tsx.snap
@@ -483,7 +483,7 @@ exports[`Components/Footer Default smoke-test 1`] = `
         </div>
       </div>
       <div class="flex mr-24 md:col-start-3">
-        <svg class="text-active-orange bg-white rounded-full mr-12  ui-footer-tick-icon"
+        <svg class="text-active-orange bg-white rounded-full mr-12 ui-footer-tick-icon"
              style="width: 1.5rem; height: 1.5rem;"
         >
           <use xlink:href="#sprite-icon-gui-tick">
@@ -499,7 +499,7 @@ exports[`Components/Footer Default smoke-test 1`] = `
         </div>
       </div>
       <div class="flex mr-24 md:col-start-4">
-        <svg class="text-active-orange bg-white rounded-full mr-12  ui-footer-tick-icon"
+        <svg class="text-active-orange bg-white rounded-full mr-12 ui-footer-tick-icon"
              style="width: 1.5rem; height: 1.5rem;"
         >
           <use xlink:href="#sprite-icon-gui-tick">

diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx
@@ -1,10 +1,10 @@
 import React, { CSSProperties, useCallback } from "react";
-import clsx from "clsx";
 
 import { defaultIconSecondaryColor } from "./Icon/secondary-colors";
 import { IconName, IconSize } from "./Icon/types";
 import { ColorClass, ColorThemeSet } from "./styles/colors/types";
 import { convertTailwindClassToVar } from "./styles/colors/utils";
+import cn from "./utils/cn";
 
 export type IconProps = {
   name: IconName;
@@ -39,7 +39,7 @@ const Icon = ({
 
       return (
         <svg
-          className={clsx(
+          className={cn(
             { [`${color}`]: color },
             { [`${additionalCSS}`]: additionalCSS },
             {

diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
@@ -1,11 +1,11 @@
 import React, { Fragment, useEffect, useRef, useState } from "react";
-import clsx from "clsx";
 import throttle from "lodash.throttle";
 import type { PricingDataFeature } from "./types";
 import Icon from "../Icon";
 import FeaturedLink from "../FeaturedLink";
 import { IconName } from "../Icon/types";
 import Tooltip from "../Tooltip";
+import cn from "../utils/cn";
 
 export type PricingCardsProps = {
   data: PricingDataFeature[];
@@ -42,10 +42,9 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
   const delimiterColumn = (index: number) =>
     delimiter && index % 2 === 1 ? (
       <div
-        className={clsx(
-          "flex items-center justify-center w-full @[920px]:w-20",
-          { "m-8": delimiter !== "blank" },
-        )}
+        className={cn("flex items-center justify-center w-full @[920px]:w-20", {
+          "m-8": delimiter !== "blank",
+        })}
       >
         {delimiter !== "blank" ? (
           <Icon
@@ -97,7 +96,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
       }
     >
       <div
-        className={clsx(
+        className={cn(
           "gap-8",
           delimiter ? gridRules.delimited : gridRules.nonDelimited,
         )}
@@ -107,7 +106,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
             <Fragment key={title.content}>
               {delimiterColumn(index)}
               <div
-                className={clsx(
+                className={cn(
                   "relative border flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group min-w-[272px] backdrop-blur",
                   borderClasses(border?.color)?.border ??
                     "border-neutral-200 dark:border-neutral-1100",
@@ -120,7 +119,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
               >
                 {border ? (
                   <div
-                    className={clsx(
+                    className={cn(
                       "flex items-center absolute z-10 -top-12 self-center font-semibold uppercase text-neutral-000 font-sans h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1",
                       borderClasses(border?.color)?.border,
                       borderClasses(border?.color)?.bg,
@@ -130,7 +129,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
                   </div>
                 ) : null}
                 <div
-                  className={clsx(
+                  className={cn(
                     "absolute z-0 top-0 left-0 w-full h-full rounded-2xl bg-neutral-000 dark:bg-neutral-1300 transition-[colors,opacity] opacity-25",
                     {
                       "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-1200 group-hover:opacity-100":
@@ -139,13 +138,13 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
                   )}
                 ></div>
                 <div
-                  className={clsx(`relative z-10 flex flex-col gap-24`, {
+                  className={cn(`relative z-10 flex flex-col gap-24`, {
                     "@[520px]:flex-1 @[920px]:flex-none": delimiter,
                   })}
                 >
                   <div>
                     <div className="flex items-center mb-12">
-                      <p className={clsx(title.className, title.color)}>
+                      <p className={cn(title.className, title.color)}>
                         {title.content}
                       </p>
                       {title.tooltip ? (
@@ -157,7 +156,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
                       ) : null}
                     </div>
                     <p
-                      className={clsx(
+                      className={cn(
                         "ui-text-p1 min-h-[20px]",
                         description.className,
                         description.color,
@@ -170,7 +169,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
                     </p>
                   </div>
                   <div
-                    className={clsx("flex items-end gap-8", {
+                    className={cn("flex items-end gap-8", {
                       "@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":
                         delimiter,
                     })}
@@ -185,7 +184,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
                   {cta ? (
                     <div className="group">
                       <FeaturedLink
-                        additionalCSS={clsx(
+                        additionalCSS={cn(
                           "text-center px-24 !py-12 hover:text-neutral-000 cursor-pointer",
                           cta.className ??
                             "ui-btn bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300",
@@ -210,13 +209,13 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
                         {title}
                       </p>
                       <div
-                        className={clsx({ "flex flex-col gap-4": !delimiter })}
+                        className={cn({ "flex flex-col gap-4": !delimiter })}
                       >
                         {items.map((item, index) =>
                           Array.isArray(item) ? (
                             <div
                               key={item[0]}
-                              className={clsx(
+                              className={cn(
                                 "flex justify-between gap-16 px-8 -mx-8",
                                 index === 0 ? "py-8" : "py-4",
                                 index > 0 && index % 2 === 0
@@ -227,7 +226,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
                               {item.map((subItem, subIndex) => (
                                 <span
                                   key={subItem}
-                                  className={clsx(
+                                  className={cn(
                                     "ui-text-p3",
                                     index === 0 ? "font-bold" : "font-medium",
                                     "text-neutral-1000 dark:text-neutral-300",
@@ -250,7 +249,7 @@ const PricingCards = ({ data, delimiter }: PricingCardsProps) => {
                                 />
                               ) : null}
                               <div
-                                className={clsx(
+                                className={cn(
                                   `flex-1 font-medium text-neutral-1000 dark:text-neutral-300`,
                                   listItemColors ? "ui-text-p3" : "ui-text-p2",
                                 )}

diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import clsx from "clsx";
 import EncapsulatedIcon from "./Icon/EncapsulatedIcon";
 import FeaturedLink from "./FeaturedLink";
 import { ProductName, products } from "./ProductTile/data";
+import cn from "./utils/cn";
 
 type ProductTileProps = {
   name: ProductName;
@@ -23,7 +23,7 @@ const ProductTile = ({
 
   return (
     <div
-      className={clsx(
+      className={cn(
         "rounded-lg p-12 flex flex-col gap-8 transition-colors",
         { "bg-neutral-1200 dark:bg-neutral-100": selected },
         {
@@ -51,14 +51,14 @@ const ProductTile = ({
           />
         ) : null}
         <div
-          className={clsx(
+          className={cn(
             "flex",
             { "flex-row items-center gap-4": unavailable },
             { "flex-col justify-center": !unavailable },
           )}
         >
           <p
-            className={clsx(
+            className={cn(
               "font-medium",
               { "text-neutral-300 dark:text-neutral-1000": selected },
               { "text-neutral-1000 dark:text-neutral-300": !selected },
@@ -69,7 +69,7 @@ const ProductTile = ({
             Ably{" "}
           </p>
           <p
-            className={clsx(
+            className={cn(
               "ui-text-p2 font-bold",
               { "text-neutral-000 dark:text-neutral-1300": selected },
               { "text-neutral-1300 dark:text-neutral-000": !selected },
@@ -88,7 +88,7 @@ const ProductTile = ({
         </div>
       ) : null}
       <p
-        className={clsx(
+        className={cn(
           "ui-text-p3 font-medium leading-snug",
           { "text-neutral-300 dark:text-neutral-1000": selected },
           { "text-neutral-800 dark:text-neutral-500": !selected },

diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = `
-<div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100 dark:bg-neutral-1200 hover:bg-neutral-200 dark:hover:bg-neutral-1100 bg-pink-200 dark:bg-pink-800 hover:bg-pink-600 dark:hover:bg-pink-400 cursor-pointer">
+<div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-pink-200 dark:bg-pink-800 hover:bg-pink-600 dark:hover:bg-pink-400 cursor-pointer">
   <div class="flex gap-12 items-center">
     <div class="p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b from-neutral-400 dark:from-neutral-900"
          style="width: 40px; height: 40px;"

diff --git a/src/core/Status.tsx b/src/core/Status.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import useSWR from "swr";
-import clsx from "clsx";
+import cn from "./utils/cn";
 
 // Our SWR fetcher function
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
@@ -35,7 +35,7 @@ export const StatusIcon = ({
 
   return (
     <span
-      className={clsx(
+      className={cn(
         "inline-flex h-[1rem] aspect-square m-[0.25rem] rounded-full",
         indicatorClass(data?.status?.indicator),
         { "animate-pulse": isLoading || error },

diff --git a/src/core/Toggle.tsx b/src/core/Toggle.tsx
@@ -1,6 +1,6 @@
 import * as Switch from "@radix-ui/react-switch";
-import clsx from "clsx";
 import React from "react";
+import cn from "./utils/cn";
 
 type ToggleProps = {
   id: string;
@@ -12,7 +12,7 @@ const Toggle: React.FC<ToggleProps> = ({ id, label, className, ...props }) => {
   return (
     <div className="flex items-center">
       <Switch.Root
-        className={clsx(
+        className={cn(
           "p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-gui-focus",
           className,
         )}

diff --git a/src/core/styles/Button.stories.tsx b/src/core/styles/Button.stories.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import clsx from "clsx";
 import Button, { ButtonType, iconModifierClasses } from "../Button";
 import Tooltip from "../Tooltip";
+import cn from "../utils/cn";
 
 export default {
   title: "Components/Button",
@@ -60,7 +60,7 @@ const buttonSet = (type: ButtonType) => (
               triggerElement={
                 <button
                   type="button"
-                  className={clsx(
+                  className={cn(
                     size.className[type],
                     {
                       [iconModifierClasses[size.key ?? "md"].left]: index === 1,
@@ -86,7 +86,7 @@ const buttonSet = (type: ButtonType) => (
                 </button>
               }
             >
-              {clsx(
+              {cn(
                 size.className[type],
                 {
                   [iconModifierClasses[size.key ?? "md"].left]: index === 1,

diff --git a/src/core/styles/Typography.stories.tsx b/src/core/styles/Typography.stories.tsx
@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import React from "react";
+import cn from "../utils/cn";
 
 export default {
   title: "Styles/Typography",
@@ -53,7 +53,7 @@ const styles = {
 const fontCell = (style) => (
   <div
     key={style.label}
-    className={clsx(
+    className={cn(
       "rounded-lg p-16 flex flex-col gap-8 bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-000",
       style.className,
     )}