[#40] ♻️ update Button components w/ fullWidth props & clsx

Author: KingNono1030

src/components/common/button/Button.tsx

@@ -1,16 +1,24 @@
+import clsx from 'clsx'
+
 import { Clickable, ClickableProps } from './Clickable'
 
-interface ButtonProps
+export interface ButtonProps
   extends ClickableProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export const Button = ({
   onClick,
   type = 'button',
   disabled = false,
+  fullWidth,
   ...props
 }: ButtonProps): JSX.Element => (
-  <button onClick={onClick} type={type} disabled={disabled}>
-    <Clickable {...props} disabled={disabled} />
+  <button
+    onClick={onClick}
+    type={type}
+    disabled={disabled}
+    className={clsx({ 'w-full': fullWidth })}
+  >
+    <Clickable {...props} disabled={disabled} fullWidth={fullWidth} />
   </button>
 )

src/components/common/button/Clickable.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx'
-import { twMerge } from 'tailwind-merge'
 
 export interface ClickableProps {
   label?: string
@@ -83,18 +82,18 @@ export const Clickable = ({
     : ''
   const textColorClass = textColor ? styleByTextColor[textColor] : ''
 
-  const clickableStyle = twMerge(
+  const clickableStyle = clsx(
     baseStyle,
     styleByVariant[variant],
     styleBySize[size],
     textColorClass,
-    clsx({
+    {
       [borderColorClass]: variant === 'outlined',
       [backgroundColorClass]: variant !== 'text',
       [disabledStyle]: disabled,
       'w-full': fullWidth,
       'justify-start': leftAlign,
-    }),
+    },
     className
   )
 

src/components/common/button/Link.tsx

@@ -1,14 +1,18 @@
 import NextLink from 'next/link'
 
+import clsx from 'clsx'
+
 import { Clickable, ClickableProps } from './Clickable'
 
-interface LinkProps
+export interface LinkProps
   extends ClickableProps,
     React.AnchorHTMLAttributes<HTMLAnchorElement> {}
 
 export const Link = ({
   href = '#',
   disabled,
+  onClick = () => {},
+  fullWidth,
   ...props
 }: LinkProps): JSX.Element => (
   <NextLink
@@ -18,9 +22,12 @@ export const Link = ({
     onClick={e => {
       if (disabled) {
         e.preventDefault()
+      } else {
+        onClick(e)
       }
     }}
+    className={clsx({ 'w-full': fullWidth })}
   >
-    <Clickable {...props} disabled={disabled} />
+    <Clickable {...props} disabled={disabled} fullWidth={fullWidth} />
   </NextLink>
 )

src/components/common/button/index.ts

@@ -1,4 +1,4 @@
-import { Button } from './Button'
-import { Link } from './Link'
+import { Button, type ButtonProps } from './Button'
+import { Link, type LinkProps } from './Link'
 
-export { Button, Link }
+export { Button, ButtonProps, Link, LinkProps }