Merge pull request #4 from hotosm/cva-button

feat(button,package): add class-variance-authority lib, convert button component to use it

README.md

@@ -57,7 +57,7 @@ pnpm install @hotosm/ui
 ## Usage
 
 ```js
-import Button from '@hotosm/ui';
+import { Button } from '@hotosm/ui';
 
 const HomePage = ({}) => {
   return (

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,39 @@
 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" : ""
-        }`,
+        buttonStyle({
+          disabled: props.disabled,
+          intent: intent,
+          className: className,
+        }),
         className,
       )}
       {...rest}