From c38e749683093c47a68d4cdbf098417858451084 Mon Sep 17 00:00:00 2001
From: florent giraud <hello@florent.dev>
Date: Wed, 25 Sep 2024 12:26:29 -0400
Subject: [PATCH] Feat/class props (#26)

* feat(props): add class props property on side with className
---
 packages/core/src/tailwind-buddy.ts           |  6 +++++
 packages/core/src/types/props.ts              |  1 +
 packages/core/tests/configs/specific.test.ts  | 22 +++++++++----------
 packages/core/tests/setup/specific.ts         |  2 +-
 packages/documentation/.gitignore             |  1 +
 .../pages/responsive-variants.md              | 13 +++++------
 packages/documentation/pages/slots.md         |  6 ++---
 packages/documentation/pages/usage.md         | 10 ++++-----
 packages/ui/src/components/Button/Button.tsx  |  2 +-
 packages/ui/src/components/Dumb.tsx           |  3 +--
 10 files changed, 35 insertions(+), 31 deletions(-)
 create mode 100644 packages/documentation/.gitignore

diff --git a/packages/core/src/tailwind-buddy.ts b/packages/core/src/tailwind-buddy.ts
index cfeeb52..284406e 100644
--- a/packages/core/src/tailwind-buddy.ts
+++ b/packages/core/src/tailwind-buddy.ts
@@ -203,6 +203,12 @@ export const setupCompose = <Sc extends string>(
                 .forEach((cls) => classSet.add(cls));
             }
 
+            if (props?.class) {
+              cleanString(props.class)
+                .split(" ")
+                .forEach((cls) => classSet.add(cls));
+            }
+
             const result = mergeClasses(uniquifyClasses(Array.from(classSet)));
             variantCache.set(cacheKey, result);
             return result;
diff --git a/packages/core/src/types/props.ts b/packages/core/src/types/props.ts
index 6e3fa65..27a5b8c 100644
--- a/packages/core/src/types/props.ts
+++ b/packages/core/src/types/props.ts
@@ -7,6 +7,7 @@ export type MergedProps<
   R extends ResponsiveVariants<V>
 > = {
   className?: string;
+  class?: string;
 } & {
   [K in keyof V]?: R extends undefined
     ? keyof V[K]
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/core/tests/setup/specific.ts b/packages/core/tests/setup/specific.ts
index 2c4d5f7..ef56341 100644
--- a/packages/core/tests/setup/specific.ts
+++ b/packages/core/tests/setup/specific.ts
@@ -78,4 +78,4 @@ export const labelVariants = compose({
       class: ["opacity-200"],
     },
   ],
-})();
+})<LabelProps>();
diff --git a/packages/documentation/.gitignore b/packages/documentation/.gitignore
new file mode 100644
index 0000000..6dc972e
--- /dev/null
+++ b/packages/documentation/.gitignore
@@ -0,0 +1 @@
+.vitepress/cache
\ No newline at end of file
diff --git a/packages/documentation/pages/responsive-variants.md b/packages/documentation/pages/responsive-variants.md
index 9b298d8..91559ce 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.
@@ -18,7 +20,6 @@ export const buttonVariants = compose({
 })();
 
 // Usage in a React component
-import { twMerge } from "tailwind-merge";
 
 // class .font-bold will be applied as the condition is fulfilled.
 export const Button: React.FC<{}> = () => {
@@ -26,12 +27,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..45f2221 100644
--- a/packages/documentation/pages/usage.md
+++ b/packages/documentation/pages/usage.md
@@ -40,7 +40,6 @@ export const buttonVariants = compose({
 export type ButtonProps = VariantsProps<typeof buttonVariants>;
 
 // Usage in a React component
-import { twMerge } from "tailwind-merge";
 
 export const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
   as: Component = "button",
@@ -54,16 +53,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/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 4e465f9..9dfb078 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -33,7 +33,7 @@ export const Button: React.FC<ButtonProps> = ({
     <button
       className={root({
         appearance,
-        className,
+        class: className,
         size,
         variant,
       })}
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>;
 };