Feat/class props (#26)

* feat(props): add class props property on side with className

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;

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]

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);

packages/core/tests/setup/specific.ts

@@ -78,4 +78,4 @@ export const labelVariants = compose({
       class: ["opacity-200"],
     },
   ],
-})();
+})<LabelProps>();

packages/documentation/.gitignore

@@ -0,0 +1 @@
+.vitepress/cache

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,20 +20,17 @@ 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<{}> = () => {
   const { root } = buttonVariants;
 
   return (
     <button
-      className={twMerge(
-        root({
-          intent: "primary",
-          size: large,
-        })
-      )}
+      className={root({
+        intent: "primary",
+        size: large,
+      })}
     >
       Go
     </button>

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>
   );
 };

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}

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,
       })}

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>;
 };