refactor: button component

components/Button.js

@@ -1,48 +1,59 @@
+import React from "react";
 import { classNames } from "@services/utils/classNames";
 import Link from "./Link";
+import { cva } from "class-variance-authority";
 
-export default function Button({
-  primary = false,
-  disabled = false,
-  className,
-  overrideClassNames = false,
-  children,
-  ...restProps
-}) {
-  let defaultClassName = classNames(
-    "w-full inline-flex items-center flex-1 justify-center rounded-md border-2 border-primary-high dark:border-white hover:border-transparent px-5 py-3 text-base font-medium first-letter:bg-white transition duration-400 ease-in-out",
-    !disabled
-      ? primary
-        ? " text-primary-medium bg-secondary-medium hover:bg-tertiary-medium"
-        : " text-secondary-high dark:text-secondary-high-high hover:text-white dark:hover:text-white dark:bg-primary-low hover:bg-secondary-medium dark:hover:bg-secondary-medium"
-      : disabled
-      ? " border-2 border-red border shadow-sm bg-primary-low text-primary-medium cursor-not-allowed "
-      : " cursor-pointer",
-  );
+const buttonVariants = cva(
+  "w-full inline-flex items-center flex-1 justify-center cursor-pointer rounded-md border-2 border-primary-high dark:border-white hover:border-transparent px-5 py-3 text-base font-medium first-letter:bg-white transition duration-400 ease-in-out",
+  {
+    variants: {
+      variant: {
+        primary:
+          " text-primary-medium bg-secondary-medium hover:bg-tertiary-medium",
+        default:
+          "text-secondary-high dark:text-secondary-high-high hover:text-white dark:hover:text-white dark:bg-primary-low hover:bg-secondary-medium dark:hover:bg-secondary-medium",
+        disabled:
+          "border-2 border-red border shadow-sm bg-primary-low text-primary-medium cursor-not-allowed",
+      },
+    },
 
-  const link = (
-    <Link
-      className={
-        overrideClassNames ? className : classNames(defaultClassName, className)
-      }
-      prefetch={false}
-      {...restProps}
-    >
-      {children}
-    </Link>
-  );
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
 
-  const button = (
-    <button
-      className={
-        overrideClassNames ? className : classNames(defaultClassName, className)
-      }
-      disabled={disabled}
-      {...restProps}
-    >
-      {children}
-    </button>
-  );
+/**
+ * @typedef {Object} ButtonProps
+ * @property {boolean} [disabled]
+ * @property {"primary" | "secondary" | "disabled"} [variant]
+ * @property {string} [className]
+ * @property {string} [href]
+ * @property {string} [ref]
+ * @property {React.ReactNode} [children]
+ */
 
-  return restProps.href ? link : button;
-}
+/**
+ * @type {React.ForwardRefExoticComponent<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>>}
+ */
+const Button = React.forwardRef(function (
+  { disabled = false, className, variant, href, children, ...restProps },
+  ref,
+) {
+  const Component = href ? Link : "button";
+  const componentProps = {
+    ref,
+    className: classNames(
+      buttonVariants({ variant: disabled ? "disabled" : variant, className }),
+    ),
+    disabled,
+    ...restProps,
+  };
+  if (href) {
+    componentProps["href"] = href;
+  }
+  return <Component {...componentProps}>{children}</Component>;
+});
+
+Button.displayName = "Button";
+export default Button;

package.json

@@ -18,6 +18,8 @@
     "@tailwindcss/typography": "^0.5.10",
     "@vercel/analytics": "^1.1.1",
     "autoprefixer": "^10.4.16",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "dotenv": "^16.3.1",
     "file-saver": "^2.0.5",
     "husky": "^8.0.3",
@@ -49,6 +51,7 @@
     "strip-markdown": "^6.0.0",
     "stripe": "^12.18.0",
     "supercluster": "^8.0.1",
+    "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.3.7",
     "use-supercluster": "^1.1.0",
     "zod": "^3.22.4"

services/utils/classNames.js

@@ -1,3 +1,6 @@
-export const classNames = (...classes) => {
-  return classes.filter(Boolean).join(" ");
-};
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function classNames(...inputs) {
+  return twMerge(clsx(inputs));
+}