refactor(shared/components): remove forwardRef, unused files (#1151)

Author: sidvishnoi

src/pages/shared/components/ErrorMessage.tsx

@@ -2,32 +2,36 @@ import React from 'react';
 import { XIcon } from './Icons';
 import { cn } from '@/pages/shared/lib/utils';
 
-interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+interface ErrorMessageProps extends React.ComponentPropsWithRef<'div'> {
   error?: string;
 }
-export const ErrorMessage = React.forwardRef<HTMLDivElement, ErrorMessageProps>(
-  ({ error, className, children, ...props }, ref) => {
-    if (!error) return null;
+export const ErrorMessage = ({
+  error,
+  className,
+  children,
+  ref,
+  ...props
+}: ErrorMessageProps) => {
+  if (!error) return null;
 
-    return (
-      <div
-        {...props}
-        data-testid="ErrorMessage"
-        ref={ref}
-        className={cn(
-          'break-word mb-4 flex items-center gap-2 rounded-xl border border-red-300 bg-red-500/10 px-3 py-2',
-          className,
-        )}
-        role="alert"
-      >
-        <XIcon className="size-8 text-red-500" />
-        <div>
-          <span>{error}</span>
-          {children}
-        </div>
+  return (
+    <div
+      {...props}
+      data-testid="ErrorMessage"
+      ref={ref}
+      className={cn(
+        'break-word mb-4 flex items-center gap-2 rounded-xl border border-red-300 bg-red-500/10 px-3 py-2',
+        className,
+      )}
+      role="alert"
+    >
+      <XIcon className="size-8 text-red-500" />
+      <div>
+        <span>{error}</span>
+        {children}
       </div>
-    );
-  },
-);
+    </div>
+  );
+};
 
 ErrorMessage.displayName = 'ErrorMessage';

src/pages/shared/components/WarningMessage.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { forwardRef } from 'react';
 import { type VariantProps, cva } from 'class-variance-authority';
 
 import { LoadingSpinner } from '@/pages/shared/components/LoadingSpinner';
@@ -39,50 +38,46 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends VariantProps<typeof buttonVariants>,
-    React.ButtonHTMLAttributes<HTMLButtonElement> {
+    React.ComponentPropsWithRef<'button'> {
   loading?: boolean;
   loadingText?: string;
   /** Optional only when children are passed */
   'aria-label'?: string;
 }
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(
-    {
-      variant,
-      size,
-      fullWidth,
-      loading = false,
-      loadingText,
-      className,
-      type = 'button',
-      children,
-      ...props
-    },
-    ref,
-  ) {
-    return (
-      <button
-        ref={ref}
-        type={type}
-        className={cn(
-          buttonVariants({ variant, size, fullWidth, loading }),
-          className,
-        )}
-        data-progress={loading.toString()}
-        disabled={props.disabled ?? loading ?? false}
-        aria-disabled={props.disabled ?? loading ?? false}
-        {...props}
-      >
-        {loading ? (
-          <>
-            <LoadingSpinner />
-            {loadingText}
-          </>
-        ) : (
-          children
-        )}
-      </button>
-    );
-  },
-);
+export function Button({
+  variant,
+  size,
+  fullWidth,
+  loading = false,
+  loadingText,
+  className,
+  type = 'button',
+  ref,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(
+        buttonVariants({ variant, size, fullWidth, loading }),
+        className,
+      )}
+      data-progress={loading.toString()}
+      disabled={props.disabled ?? loading ?? false}
+      aria-disabled={props.disabled ?? loading ?? false}
+      {...props}
+    >
+      {loading ? (
+        <>
+          <LoadingSpinner />
+          {loadingText}
+        </>
+      ) : (
+        children
+      )}
+    </button>
+  );
+}

src/pages/shared/components/ui/Button.tsx

@@ -9,17 +9,15 @@ const labelVariants = cva(
 
 export interface LabelProps
   extends VariantProps<typeof labelVariants>,
-    React.LabelHTMLAttributes<HTMLLabelElement> {
+    React.ComponentPropsWithRef<'label'> {
   children: React.ReactNode;
 }
 
-export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-  function Label({ className, children, ...props }, ref) {
-    return (
-      // biome-ignore lint/a11y/noLabelWithoutControl:  We add the relevant props to the label
-      <label ref={ref} className={cn(labelVariants(), className)} {...props}>
-        {children}
-      </label>
-    );
-  },
-);
+export function Label({ className, children, ref, ...props }: LabelProps) {
+  return (
+    // biome-ignore lint/a11y/noLabelWithoutControl:  We add the relevant props to the label
+    <label ref={ref} className={cn(labelVariants(), className)} {...props}>
+      {children}
+    </label>
+  );
+}

src/pages/shared/components/ui/Label.tsx

@@ -1,6 +1,5 @@
 import { type VariantProps, cva } from 'class-variance-authority';
 import React from 'react';
-import { forwardRef } from 'react';
 
 import { cn } from '@/pages/shared/lib/utils';
 
@@ -35,17 +34,22 @@ const switchVariants = cva(
 
 export interface SwitchProps
   extends VariantProps<typeof switchVariants>,
-    React.HTMLAttributes<HTMLInputElement> {
+    Omit<React.ComponentPropsWithRef<'input'>, 'size'> {
   checked?: boolean;
   disabled?: boolean;
   label?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
-  { size, label, className, disabled = false, onChange = () => {}, ...props },
+export function Switch({
+  size,
+  label,
+  className,
+  disabled = false,
+  onChange = () => {},
   ref,
-) {
+  ...props
+}: SwitchProps) {
   return (
     <label className="flex items-center gap-x-4">
       <input
@@ -63,4 +67,4 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(
       {label ? <span className="font-normal">{label}</span> : null}
     </label>
   );
-});
+}