feat(button,package): add class-variance-authority lib, convert butto…

…n component to use it

package.json

@@ -46,6 +46,7 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "react": "^18.2.0",
     "tailwind-merge": "^1.14.0"

src/button/Button.stories.tsx

@@ -15,4 +15,15 @@ ButtonStory.argTypes = {
     },
     defaultValue: false,
   },
+  intent: {
+    options: ["primary", "secondary"],
+    control: {
+      type: "select",
+      labels: {
+        primary: "Primary",
+        secondary: "Secondary",
+      }
+    },
+    defaultValue: "primary",
+  }
 };

src/button/Button.tsx

@@ -1,18 +1,33 @@
 import { cn } from "@/utils/merge.js";
+import {cva, VariantProps} from "class-variance-authority";
 
-export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonStyle> {
   disabled?: boolean;
 }
 
+const buttonStyle = cva("bg-primary text-white py-3 px-6 rounded leading-[1.15]", {
+  variants: {
+    intent: {
+      primary: "bg-primary text-white",
+      secondary: "bg-secondary text-white",
+    },
+    disabled: {
+      true: "opacity-50 cursor-not-allowed",
+      false: "",
+    }
+  }
+})
+
 export const Button = (props: ButtonProps) => {
-  const { className, ...rest } = props;
+  const { className, intent, ...rest } = props;
 
   return (
     <button
-      className={cn(
-        `bg-primary text-white py-3 px-6 rounded leading-[1.15] ${
-          props.disabled ? "opacity-50 cursor-not-allowed" : ""
-        }`,
+      className={cn(buttonStyle({
+        disabled: props.disabled,
+        intent: intent,
+        className: className,
+      }),
         className,
       )}
       {...rest}