From 0a0588068e982f09a872d3edf853b90fdc32170c Mon Sep 17 00:00:00 2001
From: florent giraud <hello@florent.dev>
Date: Wed, 25 Sep 2024 12:18:32 -0400
Subject: [PATCH] feat(props): add class props property on side with className

---
 packages/core/tests/configs/specific.test.ts  | 22 +++++++++----------
 .../pages/responsive-variants.md              | 12 +++++-----
 packages/documentation/pages/slots.md         |  6 ++---
 packages/documentation/pages/usage.md         |  9 ++++----
 packages/ui/src/components/Dumb.tsx           |  3 +--
 5 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/packages/core/tests/configs/specific.test.ts b/packages/core/tests/configs/specific.test.ts
index 1b778df..aa147a2 100644
--- a/packages/core/tests/configs/specific.test.ts
+++ b/packages/core/tests/configs/specific.test.ts
@@ -17,7 +17,7 @@ describe("test simple config", () => {
         root({
           size: "xxs",
           fontWeight: "regular",
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
           disabled: true,
         })
       ).toBe(root_full_str);
@@ -34,7 +34,7 @@ describe("test simple config", () => {
         root({
           size: "xxs",
           fontWeight: "regular",
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
           disabled: false,
         })
       ).toBe(root_full_str);
@@ -53,13 +53,13 @@ describe("test simple config", () => {
         root({
           size: "xxs",
           fontWeight: "bold",
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
           disabled: false,
         })
       ).toBe(root_full_str);
     });
 
-    test.skip("start working with responsive props but no array condition", () => {
+    test("start working with responsive props but no array condition", () => {
       const root_full_str = [
         "inline-flex",
         "font-weight-bold",
@@ -78,12 +78,12 @@ describe("test simple config", () => {
             md: "xxl",
           },
           fontWeight: "bold",
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
         })
       ).toBe(root_full_str);
     });
 
-    test.skip("start working with responsive props and array condition", () => {
+    test("start working with responsive props and array condition", () => {
       const root_full_str = [
         "inline-flex",
         "font-weight-bold",
@@ -102,12 +102,12 @@ describe("test simple config", () => {
             initial: "bold",
             md: "extraBold",
           },
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
         })
       ).toBe(root_full_str);
     });
 
-    test.skip("start working with two responsive props and array condition", () => {
+    test("start working with two responsive props and array condition", () => {
       const root_full_str = [
         "inline-flex",
         "font-weight-bold",
@@ -131,12 +131,12 @@ describe("test simple config", () => {
             initial: "bold",
             md: "extraBold",
           },
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
         })
       ).toBe(root_full_str);
     });
 
-    test.skip("start working with two responsive props and array condition", () => {
+    test("start working with two responsive props and array condition", () => {
       const root_full_str = [
         "inline-flex",
         "font-weight-bold",
@@ -162,7 +162,7 @@ describe("test simple config", () => {
             initial: "bold",
             md: "extraBold",
           },
-          className: "bg-color-scheme-literal-red-500",
+          class: "bg-color-scheme-literal-red-500",
           disabled: true,
         })
       ).toBe(root_full_str);
diff --git a/packages/documentation/pages/responsive-variants.md b/packages/documentation/pages/responsive-variants.md
index 9b298d8..f13fe3b 100644
--- a/packages/documentation/pages/responsive-variants.md
+++ b/packages/documentation/pages/responsive-variants.md
@@ -5,6 +5,8 @@ editLink: true
 
 # Responsive Variants
 
+**IMPORTANT**: If you are not using any responsive variants you can just not use all this configuration.
+
 To enable responsive variants:
 
 1. Add the variant to the `responsiveVariants` array in your compose function.
@@ -26,12 +28,10 @@ export const Button: React.FC<{}> = () => {
 
   return (
     <button
-      className={twMerge(
-        root({
-          intent: "primary",
-          size: large,
-        })
-      )}
+      className={root({
+        intent: "primary",
+        size: large,
+      })}
     >
       Go
     </button>
diff --git a/packages/documentation/pages/slots.md b/packages/documentation/pages/slots.md
index 67a49f2..cd9eecf 100644
--- a/packages/documentation/pages/slots.md
+++ b/packages/documentation/pages/slots.md
@@ -38,9 +38,9 @@ export const Card = () => {
   const { root, header, body } = cardVariants;
 
   return (
-    <div className={twMerge(root({ size: "large" }))}>
-      <div className={twMerge(header({ size: "large" }))}>header</div>
-      <div className={twMerge(body())}>body</div>
+    <div className={root({ size: "large" })}>
+      <div className={header({ size: "large" })}>header</div>
+      <div className={body()}>body</div>
     </div>
   );
 };
diff --git a/packages/documentation/pages/usage.md b/packages/documentation/pages/usage.md
index 45cd7ac..cc6003d 100644
--- a/packages/documentation/pages/usage.md
+++ b/packages/documentation/pages/usage.md
@@ -54,16 +54,15 @@ export const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
 
   return (
     <Component
-      className={twMerge(
-        root({
+      className={root({
           intent: {
             initial: "primary",
             md: "secondary",
           },
           size,
-          className,
-        })
-      )}
+          {/* className, we do support class and className props. In case you use both class will be the last one in terms of position */}
+          class: className,
+        })}
       {...restProps}
     >
       {children}
diff --git a/packages/ui/src/components/Dumb.tsx b/packages/ui/src/components/Dumb.tsx
index bff7bed..b3acde4 100644
--- a/packages/ui/src/components/Dumb.tsx
+++ b/packages/ui/src/components/Dumb.tsx
@@ -1,6 +1,5 @@
 import { compose } from "../tailwind-buddy-interface";
 import React from "react";
-import { twMerge } from "tailwind-merge";
 
 export const fooVariants = compose({
   slots: {
@@ -33,5 +32,5 @@ export const fooVariants = compose({
 
 export const Dumb: React.FC<any> = () => {
   const { root } = fooVariants;
-  return <div className={twMerge(root())}>Hello</div>;
+  return <div className={root()}>Hello</div>;
 };