Collaborators cleanup

packages/frontend/src/components/SearchBar.tsx

@@ -6,7 +6,7 @@ import { Input, InputProps } from './shared/Input';
 const SearchBar: React.ForwardRefRenderFunction<
   HTMLInputElement,
   InputProps & RefAttributes<HTMLInputElement>
-> = ({ value, onChange, placeholder = 'Search', ...props }, ref) => {
+> = ({ value, onChange, placeholder = 'Search', ...props }) => {
   return (
     <div className="relative flex w-full">
       <Input
@@ -18,7 +18,6 @@ const SearchBar: React.ForwardRefRenderFunction<
         appearance="borderless"
         className="w-full lg:w-[459px]"
         {...props}
-        ref={ref}
       />
     </div>
   );

packages/frontend/src/components/shared/Input/Input.tsx

@@ -4,6 +4,7 @@ import {
   useMemo,
   ComponentPropsWithoutRef,
 } from 'react';
+import { FieldValues, UseFormRegister } from 'react-hook-form';
 
 import { WarningIcon } from 'components/shared/CustomIcon';
 import { cloneIcon } from 'utils/cloneIcon';
@@ -11,7 +12,7 @@ import { cn } from 'utils/classnames';
 
 import { InputTheme, inputTheme } from './Input.theme';
 
-export interface InputProps
+export interface InputProps<T extends FieldValues = FieldValues>
   extends InputTheme,
     Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
   label?: string;
@@ -19,6 +20,9 @@ export interface InputProps
   leftIcon?: ReactNode;
   rightIcon?: ReactNode;
   helperText?: string;
+
+  // react-hook-form optional register
+  register?: ReturnType<UseFormRegister<T>>;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
@@ -30,6 +34,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       leftIcon,
       rightIcon,
       helperText,
+      register,
       size,
       state,
       appearance,
@@ -102,11 +107,12 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         <div className={containerCls({ class: className })}>
           {leftIcon && renderLeftIcon}
           <input
+            {...(register ? register : {})}
             className={cn(inputCls(), {
               'pl-10': leftIcon,
             })}
-            ref={ref}
             {...props}
+            ref={ref}
           />
           {rightIcon && renderRightIcon}
         </div>

packages/frontend/src/components/shared/UserSelect/UserSelect.tsx

@@ -103,12 +103,10 @@ export const UserSelect = ({ options, value }: UserSelectProps) => {
     <div className={theme.container()}>
       {/* Input */}
       <div
-        {...getToggleButtonProps(
-          {
-            ref: inputWrapperRef,
-          },
-          { suppressRefError: true },
-        )}
+        {...getToggleButtonProps({
+          ref: inputWrapperRef,
+          suppressRefError: true,
+        })}
         onClick={() => !dropdownOpen && openMenu()}
         className="cursor-pointer relative py-2 pl-2 pr-4 flex min-w-[200px] w-full items-center justify-between rounded-xl bg-surface-card shadow-sm"
       >