Merge pull request #33 from pyyding/kp-tailwind-class-overrides

make className prop overridable

lib/components/Button/index.tsx

@@ -116,7 +116,7 @@ export const Button = React.forwardRef<
   if (rest.href) {
     return (
       <a
-        className={cx(className, buttonStyle)}
+        className={cx(buttonStyle, className)}
         {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
         ref={ref as React.RefObject<HTMLAnchorElement>}
       >
@@ -133,7 +133,7 @@ export const Button = React.forwardRef<
     <button
       disabled={isDisabled}
       aria-label={loading && !loadingText ? "Loading, please wait" : undefined}
-      className={cx(className, buttonStyle)}
+      className={cx(buttonStyle, className)}
       {...(buttonProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}
       ref={ref as React.RefObject<HTMLButtonElement>}
     >

lib/components/ChartLabel/ChartLabelText.tsx

@@ -37,7 +37,7 @@ export function ChartLabelText({
       dy={dy}
       dx={dx}
       stroke="none"
-      className={cx(className, "fill-purple-500")}
+      className={cx("fill-purple-500", className)}
     >
       {children}
     </text>

lib/components/LineChart/index.tsx

@@ -14,7 +14,7 @@ export const LineChart: React.FC<LineChartProps> = ({
   ...rest
 }) => (
   <div
-    className={cx(className, "h-80 w-full")}
+    className={cx("h-80 w-full", className)}
     data-testid="line-chart-wrapper"
   >
     <RechartsResponsiveContainer width="100%" height="100%">

lib/components/common/utils.ts

@@ -1,4 +1,5 @@
 import { ValueFormatter } from "../../configurationTypes";
+import { twMerge } from "tailwind-merge";
 
 export const getYAxisDomain = (
   autoMinValue: boolean,
@@ -10,7 +11,6 @@ export const getYAxisDomain = (
   return [minDomain, maxDomain];
 };
 
-
 export const constructCategoryColors = (
   categories: string[],
   colors: string[],
@@ -22,11 +22,15 @@ export const constructCategoryColors = (
   return categoryColors;
 };
 
-
 export function deepEqual(obj1: any, obj2: any) {
   if (obj1 === obj2) return true;
 
-  if (typeof obj1 !== "object" || typeof obj2 !== "object" || obj1 === null || obj2 === null)
+  if (
+    typeof obj1 !== "object" ||
+    typeof obj2 !== "object" ||
+    obj1 === null ||
+    obj2 === null
+  )
     return false;
 
   const keys1 = Object.keys(obj1);
@@ -44,14 +48,16 @@ export function deepEqual(obj1: any, obj2: any) {
 export function cx(
   ...args: Array<undefined | null | string | boolean>
 ): string {
-  return args
-    .flat()
-    .filter((x) => typeof x === "string")
-    .join(" ");
+  return twMerge(
+    args
+      .flat()
+      .filter((x) => typeof x === "string")
+      .join(" "),
+  );
 }
 
-
-export const defaultValueFormatter: ValueFormatter = (value: number) => value.toString();
+export const defaultValueFormatter: ValueFormatter = (value: number) =>
+  value.toString();
 
 // We use this internally at June to track the loaded state of the chart when taking screenshots for things like Email & Slack digests
 export function addLoadedIdToElement() {
@@ -61,4 +67,4 @@ export function addLoadedIdToElement() {
   if (elements.length > 0 && elements[0]) {
     elements[0].id = "loaded";
   }
-}
+}

package.json

@@ -29,7 +29,8 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.19",
-    "recharts": "^2.12.5"
+    "recharts": "^2.12.5",
+    "tailwind-merge": "^2.3.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.0.8",

src/tests/common/utils.test.ts

@@ -9,7 +9,10 @@ import {
 describe("utils", () => {
   describe("getYAxisDomain", () => {
     it("should return auto for both min and max when autoMinValue is true", () => {
-      expect(getYAxisDomain(true, undefined, undefined)).toEqual(["auto", "auto"]);
+      expect(getYAxisDomain(true, undefined, undefined)).toEqual([
+        "auto",
+        "auto",
+      ]);
     });
 
     it("should return provided minValue and auto for max when autoMinValue is false", () => {
@@ -54,7 +57,13 @@ describe("utils", () => {
 
   describe("cx", () => {
     it("should concatenate class names into a single string", () => {
-      expect(cx("class1", null, "class2", undefined, false, "class3")).toBe("class1 class2 class3");
+      expect(cx("class1", null, "class2", undefined, false, "class3")).toBe(
+        "class1 class2 class3",
+      );
+    });
+
+    it("should override tailwind classes", () => {
+      expect(cx("text-red-500", "text-blue-500")).toBe("text-blue-500");
     });
   });