Feature/#230 refactor react complier

src/components/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -47,33 +47,35 @@ export interface BadgeProps
   children: React.ReactNode;
   showIcon?: boolean;
   onIconClick?: () => void;
+  ref?: React.Ref<HTMLSpanElement>;
 }
 
-export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ className, status, radius, showIcon = false, onIconClick, children, ...props }, ref) => {
-    const canRenderIconButton = showIcon && typeof onIconClick === "function";
+export function Badge({
+  className,
+  status,
+  radius,
+  showIcon = false,
+  onIconClick,
+  children,
+  ref,
+  ...props
+}: BadgeProps) {
+  const canRenderIconButton = showIcon && typeof onIconClick === "function";
 
-    return (
-      <span
-        ref={ref}
-        className={cn(
-          BADGE_VARIANTS({ status, radius }),
-          canRenderIconButton && "gap-1",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {canRenderIconButton && (
-          <button type="button" onClick={onIconClick} className="inline-flex items-center">
-            <XIcon size="xsmall" />
-          </button>
-        )}
-      </span>
-    );
-  }
-);
-
-Badge.displayName = "Badge";
+  return (
+    <span
+      ref={ref}
+      className={cn(BADGE_VARIANTS({ status, radius }), canRenderIconButton && "gap-1", className)}
+      {...props}
+    >
+      {children}
+      {canRenderIconButton && (
+        <button type="button" onClick={onIconClick} className="inline-flex items-center">
+          <XIcon size="xsmall" />
+        </button>
+      )}
+    </span>
+  );
+}
 
 export { BADGE_VARIANTS };

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -112,46 +112,41 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   ButtonVariantProps & {
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
   };
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      colorScheme,
-      size,
-      iconOnly,
-      leftIcon,
-      rightIcon,
-      children,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(buttonVariants({ variant, colorScheme, size, iconOnly, className }))}
-        disabled={disabled}
-        aria-disabled={disabled}
-        {...props}
-      >
-        {iconOnly ? (
-          (leftIcon ?? rightIcon)
-        ) : (
-          <>
-            {leftIcon}
-            {children}
-            {rightIcon}
-          </>
-        )}
-      </button>
-    );
-  }
-);
-
-Button.displayName = "Button";
+export function Button({
+  className,
+  variant,
+  colorScheme,
+  size,
+  iconOnly,
+  leftIcon,
+  rightIcon,
+  children,
+  disabled,
+  ref,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      ref={ref}
+      className={cn(buttonVariants({ variant, colorScheme, size, iconOnly, className }))}
+      disabled={disabled}
+      aria-disabled={disabled}
+      {...props}
+    >
+      {iconOnly ? (
+        (leftIcon ?? rightIcon)
+      ) : (
+        <>
+          {leftIcon}
+          {children}
+          {rightIcon}
+        </>
+      )}
+    </button>
+  );
+}
 
 export { buttonVariants };

src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,11 +1,13 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 
 import { cn } from "@/lib/utils/utils";
 
-export type ButtonGroupProps = HTMLAttributes<HTMLDivElement>;
+export type ButtonGroupProps = HTMLAttributes<HTMLDivElement> & {
+  ref?: React.Ref<HTMLDivElement>;
+};
 
-export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ className, children, ...props }, ref) => (
+export function ButtonGroup({ className, children, ref, ...props }: ButtonGroupProps) {
+  return (
     <div
       ref={ref}
       className={cn("inline-flex flex-row flex-wrap items-center gap-2", className)}
@@ -14,7 +16,5 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
     >
       {children}
     </div>
-  )
-);
-
-ButtonGroup.displayName = "ButtonGroup";
+  );
+}

src/components/CategoryFilterButton/CategoryFilterButton.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -34,23 +34,26 @@ const CATEGORY_FILTER_BUTTON_VARIANTS = cva(
 export type CategoryFilterButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
   Omit<VariantProps<typeof CATEGORY_FILTER_BUTTON_VARIANTS>, "isSelected"> & {
     isSelected?: boolean;
+    ref?: React.Ref<HTMLButtonElement>;
   };
 
-export const CategoryFilterButton = forwardRef<HTMLButtonElement, CategoryFilterButtonProps>(
-  ({ className, isSelected = false, children, ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(CATEGORY_FILTER_BUTTON_VARIANTS({ isSelected, className }))}
-        aria-pressed={isSelected}
-        {...props}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-
-CategoryFilterButton.displayName = "CategoryFilterButton";
+export function CategoryFilterButton({
+  className,
+  isSelected = false,
+  children,
+  ref,
+  ...props
+}: CategoryFilterButtonProps) {
+  return (
+    <button
+      ref={ref}
+      className={cn(CATEGORY_FILTER_BUTTON_VARIANTS({ isSelected, className }))}
+      aria-pressed={isSelected}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
 
 export { CATEGORY_FILTER_BUTTON_VARIANTS };

src/components/ChipGroup/ChipGroup.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 
 import { cva, type VariantProps } from "class-variance-authority";
 
@@ -9,18 +9,15 @@ const CHIPGROUP_VARIANTS = cva(["inline-flex", "flex-row", "flex-wrap", "items-c
 export interface ChipGroupProps
   extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof CHIPGROUP_VARIANTS> {
   children: React.ReactNode;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn(CHIPGROUP_VARIANTS({ className }))} role="group" {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-
-ChipGroup.displayName = "ChipGroup";
+export function ChipGroup({ className, children, ref, ...props }: ChipGroupProps) {
+  return (
+    <div ref={ref} className={cn(CHIPGROUP_VARIANTS({ className }))} role="group" {...props}>
+      {children}
+    </div>
+  );
+}
 
 export { CHIPGROUP_VARIANTS };