chore: migrate from ESLint/Prettier to Oxc

packages/ui/src/Design/Button/Button.stories.tsx

@@ -136,10 +136,7 @@ export const LinkWithIcons: Story = {
         <Button leftIcon={<FaCheck size={18} />} {...(args as ButtonLinkProps)}>
           Link Left Icon
         </Button>
-        <Button
-          rightIcon={<FaCheck size={18} />}
-          {...(args as ButtonLinkProps)}
-        >
+        <Button rightIcon={<FaCheck size={18} />} {...(args as ButtonLinkProps)}>
           Link Right Icon
         </Button>
       </ButtonContainer>

packages/ui/src/Design/Button/Button.tsx

@@ -1,32 +1,37 @@
 import { classNames } from "@repo/config-tailwind/classNames"
 import { Link as NextLink } from "@repo/i18n/routing"
-import type { VariantProps } from "cva"
-import { cva } from "cva"
 
 import { Spinner } from "../Spinner/Spinner.tsx"
 import { Ripple } from "./Ripple.tsx"
 
-const buttonVariants = cva({
-  base: "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-  variants: {
-    variant: {
-      solid: "bg-primary hover:bg-primary/80 text-white",
-      outline:
-        "dark:border-primary-dark/60 dark:text-primary-dark dark:hover:border-primary-dark border-primary/60 text-primary hover:border-primary hover:bg-primary border bg-transparent hover:text-white",
-    },
-    size: {
-      small: "h-9 rounded-md px-3",
-      medium: "h-10 px-4 py-2",
-      large: "h-11 rounded-md px-8",
-    },
-  },
-  defaultVariants: {
-    variant: "solid",
-    size: "medium",
-  },
-})
+const BUTTON_VARIANTS = ["solid", "outline"] as const
+type ButtonVariant = (typeof BUTTON_VARIANTS)[number]
+
+const BUTTON_SIZES = ["small", "medium", "large"] as const
+type ButtonSize = (typeof BUTTON_SIZES)[number]
+
+const buttonVariants = (options?: { variant?: ButtonVariant; size?: ButtonSize }): string => {
+  const { variant = "solid", size = "medium" } = options ?? {}
+  return classNames(
+    "relative inline-flex items-center justify-center overflow-hidden rounded-md text-base font-semibold transition duration-150 ease-in-out focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+    {
+      "bg-primary text-white hover:bg-primary/80": variant === "solid",
+
+      "border border-primary/60 bg-transparent text-primary hover:border-primary hover:bg-primary hover:text-white dark:border-primary-dark/60 dark:text-primary-dark dark:hover:border-primary-dark":
+        variant === "outline",
+    },
+    {
+      "h-9 rounded-md px-3": size === "small",
+      "h-10 px-4 py-2": size === "medium",
+      "h-11 rounded-md px-8": size === "large",
+    },
+  )
+}
+
+interface ButtonBaseProps {
+  variant?: ButtonVariant
+  size?: ButtonSize
 
-interface ButtonBaseProps extends VariantProps<typeof buttonVariants> {
   leftIcon?: React.ReactNode
   rightIcon?: React.ReactNode
   disabled?: boolean
@@ -34,14 +39,10 @@ interface ButtonBaseProps extends VariantProps<typeof buttonVariants> {
 }
 
 interface ButtonElementProps extends React.ComponentPropsWithoutRef<"button"> {}
-interface LinkElementProps extends React.ComponentPropsWithoutRef<
-  typeof NextLink
-> {}
+interface LinkElementProps extends React.ComponentPropsWithoutRef<typeof NextLink> {}
 
-export type ButtonLinkProps = ButtonBaseProps &
-  LinkElementProps & { href: string }
-export type ButtonButtonProps = ButtonBaseProps &
-  ButtonElementProps & { href?: never }
+export type ButtonLinkProps = ButtonBaseProps & LinkElementProps & { href: string }
+export type ButtonButtonProps = ButtonBaseProps & ButtonElementProps & { href?: never }
 
 export type ButtonProps = ButtonButtonProps | ButtonLinkProps
 
@@ -51,18 +52,13 @@ export type ButtonProps = ButtonButtonProps | ButtonLinkProps
  * @returns
  */
 export const Button: React.FC<ButtonProps> = (props) => {
-  const rippleColor =
-    props.variant === "outline" ? "rgb(30, 64, 175)" : "rgb(229, 231, 235)"
+  const rippleColor = props.variant === "outline" ? "rgb(30, 64, 175)" : "rgb(229, 231, 235)"
 
   if (typeof props.href === "string") {
-    const { variant, size, leftIcon, rightIcon, className, children, ...rest } =
-      props
+    const { variant, size, leftIcon, rightIcon, className, children, ...rest } = props
 
     return (
-      <NextLink
-        className={classNames(buttonVariants({ variant, size }), className)}
-        {...rest}
-      >
+      <NextLink className={classNames(buttonVariants({ variant, size }), className)} {...rest}>
         {leftIcon != null ? <span className="mr-2">{leftIcon}</span> : null}
         <span>{children}</span>
         {rightIcon != null ? <span className="ml-2">{rightIcon}</span> : null}
@@ -98,13 +94,9 @@ export const Button: React.FC<ButtonProps> = (props) => {
       disabled={isDisabled}
       {...rest}
     >
-      {leftIconElement != null ? (
-        <span className="mr-2">{leftIconElement}</span>
-      ) : null}
+      {leftIconElement != null ? <span className="mr-2">{leftIconElement}</span> : null}
       <span>{children}</span>
-      {rightIcon != null && !isLoading ? (
-        <span className="ml-2">{rightIcon}</span>
-      ) : null}
+      {rightIcon != null && !isLoading ? <span className="ml-2">{rightIcon}</span> : null}
 
       <Ripple color={rippleColor} />
     </button>