Fix Input component react hook

### TL;DR

This PR refactors the `UserSelect` component, adjusting the call to `getToggleButtonProps`.

### What changed?

The `getToggleButtonProps` method in the `UserSelect` component now takes in two separate objects, one for the `ref` and another for `suppressRefError`, instead of a single one.

### How to test?

Verify the component functionality hasn't changed and there are no reference errors.

### Why make this change?

This code changes improve the readability and maintainability of this component by clearly separating the component reference and error suppression configurations in separate objects.

packages/frontend/.prettierignore

@@ -0,0 +1 @@
+dist/

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

packages/frontend/src/components/projects/ProjectSearchBar/ProjectSearchBarDialog.tsx

@@ -96,9 +96,9 @@ export const ProjectSearchBarDialog = ({
                         </p>
                       </div>
                       <ProjectSearchBarItem
-                        {...getItemProps({ item, index })}
                         key={item.id}
                         item={item}
+                        {...getItemProps({ item, index })}
                       />
                     </>
                   ))

packages/frontend/src/components/projects/project/settings/AddMemberDialog.tsx

@@ -1,13 +1,13 @@
 import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
-import { AddProjectMemberInput, Permission } from 'gql-client';
 
 import { Typography } from '@snowballtools/material-tailwind-react-fork';
 
 import { Button } from 'components/shared/Button';
 import { Modal } from 'components/shared/Modal';
 import { Input } from 'components/shared/Input';
-import { Checkbox } from 'components/shared/Checkbox';
+import { Select, SelectOption } from 'components/shared/Select';
+import { AddProjectMemberInput, Permission } from 'gql-client';
 
 interface AddMemberDialogProp {
   open: boolean;
@@ -17,18 +17,30 @@ interface AddMemberDialogProp {
 
 interface formData {
   emailAddress: string;
-  permissions: {
-    view: boolean;
-    edit: boolean;
-  };
+  canEdit: boolean;
 }
 
+const permissionViewOptions: SelectOption = {
+  value: Permission.View,
+  label: Permission.View,
+};
+const permissionEditOptions: SelectOption = {
+  value: Permission.Edit,
+  label: Permission.Edit,
+};
+const permissionsDropdownOptions: SelectOption[] = [
+  permissionViewOptions,
+  permissionEditOptions,
+];
+
 const AddMemberDialog = ({
   open,
   handleOpen,
   handleAddMember,
 }: AddMemberDialogProp) => {
   const {
+    watch,
+    setValue,
     handleSubmit,
     register,
     reset,
@@ -36,10 +48,7 @@ const AddMemberDialog = ({
   } = useForm({
     defaultValues: {
       emailAddress: '',
-      permissions: {
-        view: true,
-        edit: false,
-      },
+      canEdit: false,
     },
   });
 
@@ -47,11 +56,7 @@ const AddMemberDialog = ({
     reset();
     handleOpen();
 
-    const permissions = Object.entries(data.permissions)
-      .filter(([, value]) => value)
-      .map(
-        ([key]) => key.charAt(0).toUpperCase() + key.slice(1),
-      ) as Permission[];
+    const permissions = [data.canEdit ? Permission.Edit : Permission.View];
 
     await handleAddMember({ email: data.emailAddress, permissions });
   }, []);
@@ -72,19 +77,19 @@ const AddMemberDialog = ({
                 required: 'email field cannot be empty',
               })}
             />
-            <Typography variant="small">Permissions</Typography>
-            <Typography variant="small">
-              You can change this later if required.
-            </Typography>
-            <Checkbox
-              label={Permission.View}
-              {...register(`permissions.view`)}
-              color="blue"
-            />
-            <Checkbox
-              label={Permission.Edit}
-              {...register(`permissions.edit`)}
-              color="blue"
+            <Select
+              label="Permissions"
+              description="You can change this later if required."
+              options={permissionsDropdownOptions}
+              value={
+                watch('canEdit') ? permissionEditOptions : permissionViewOptions
+              }
+              onChange={(value) =>
+                setValue(
+                  'canEdit',
+                  (value as SelectOption)!.value === Permission.Edit,
+                )
+              }
             />
           </Modal.Body>
           <Modal.Footer>

packages/frontend/src/components/shared/CustomIcon/CollaboratorsIcon.tsx

@@ -12,7 +12,7 @@ export const CollaboratorsIcon = (props: CustomIconProps) => {
       <path
         d="M12.5002 2.08301C14.3411 2.08301 15.8335 3.57539 15.8335 5.41634C15.8335 7.25729 14.3411 8.74968 12.5002 8.74968M14.5835 11.1659C17.2451 12.0374 19.1668 14.498 19.1668 17.083H16.6668M7.50016 8.74968C5.65921 8.74968 4.16683 7.25729 4.16683 5.41634C4.16683 3.57539 5.65921 2.08301 7.50016 2.08301C9.34111 2.08301 10.8335 3.57539 10.8335 5.41634C10.8335 7.25729 9.34111 8.74968 7.50016 8.74968ZM0.833496 17.083C0.833496 13.8613 3.81826 10.833 7.50016 10.833C11.1821 10.833 14.1668 13.8613 14.1668 17.083H0.833496Z"
         stroke="currentColor"
-        stroke-linecap="square"
+        strokeLinecap="square"
       />
     </CustomIcon>
   );

packages/frontend/src/components/shared/CustomIcon/CopyUnfilledIcon.tsx

@@ -12,8 +12,8 @@ export const CopyUnfilledIcon = (props: CustomIconProps) => {
       <path
         d="M6 5.625V5.025C6 4.18492 6 3.76488 6.16349 3.44401C6.3073 3.16177 6.53677 2.9323 6.81901 2.78849C7.13988 2.625 7.55992 2.625 8.4 2.625H12.975C13.8151 2.625 14.2351 2.625 14.556 2.78849C14.8382 2.9323 15.0677 3.16177 15.2115 3.44401C15.375 3.76488 15.375 4.18492 15.375 5.025V9.975C15.375 10.8151 15.375 11.2351 15.2115 11.556C15.0677 11.8382 14.8382 12.0677 14.556 12.2115C14.2351 12.375 13.8151 12.375 12.975 12.375H12.375M12.375 8.025V12.975C12.375 13.8151 12.375 14.2351 12.2115 14.556C12.0677 14.8382 11.8382 15.0677 11.556 15.2115C11.2351 15.375 10.8151 15.375 9.975 15.375H5.025C4.18492 15.375 3.76488 15.375 3.44401 15.2115C3.16177 15.0677 2.9323 14.8382 2.78849 14.556C2.625 14.2351 2.625 13.8151 2.625 12.975V8.025C2.625 7.18492 2.625 6.76488 2.78849 6.44401C2.9323 6.16177 3.16177 5.9323 3.44401 5.78849C3.76488 5.625 4.18492 5.625 5.025 5.625H9.975C10.8151 5.625 11.2351 5.625 11.556 5.78849C11.8382 5.9323 12.0677 6.16177 12.2115 6.44401C12.375 6.76488 12.375 7.18492 12.375 8.025Z"
         stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </CustomIcon>
   );

packages/frontend/src/components/shared/CustomIcon/TrashIcon.tsx

@@ -10,8 +10,8 @@ export const TrashIcon: React.FC<CustomIconProps> = (props) => {
       {...props}
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M5.05612 3.33398C5.52062 2.16265 6.66341 1.33398 8.00079 1.33398C9.33816 1.33398 10.481 2.16265 10.9455 3.33398H14.1668C14.443 3.33398 14.6668 3.55784 14.6668 3.83398C14.6668 4.11013 14.443 4.33398 14.1668 4.33398H13.3023L12.7463 12.952C12.684 13.9167 11.8834 14.6673 10.9167 14.6673H5.08358C4.11688 14.6673 3.31629 13.9167 3.25405 12.952L2.69805 4.33398H1.8335C1.55735 4.33398 1.3335 4.11013 1.3335 3.83398C1.3335 3.55784 1.55735 3.33398 1.8335 3.33398H5.05612ZM6.17457 3.33398C6.55973 2.73248 7.23408 2.33398 8.00079 2.33398C8.76749 2.33398 9.44184 2.73248 9.827 3.33398H6.17457ZM7.00016 7.16732C7.00016 6.89118 6.77631 6.66732 6.50016 6.66732C6.22402 6.66732 6.00016 6.89118 6.00016 7.16732V10.834C6.00016 11.1101 6.22402 11.334 6.50016 11.334C6.77631 11.334 7.00016 11.1101 7.00016 10.834V7.16732ZM9.50016 6.66732C9.77631 6.66732 10.0002 6.89118 10.0002 7.16732V10.834C10.0002 11.1101 9.77631 11.334 9.50016 11.334C9.22402 11.334 9.00016 11.1101 9.00016 10.834V7.16732C9.00016 6.89118 9.22402 6.66732 9.50016 6.66732Z"
         fill="currentColor"
       />

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

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

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

@@ -103,10 +103,12 @@ 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"
       >

packages/frontend/src/pages/org-slug/projects/id/settings/Collaborators.tsx

@@ -16,7 +16,7 @@ const FIRST_MEMBER_CARD = 0;
 
 const CollaboratorsTabPanel = () => {
   const client = useGQLClient();
-  const { toast } = useToast();
+  const { toast, dismiss } = useToast();
   const { project } = useOutletContext<OutletContextType>();
 
   const [addmemberDialogOpen, setAddMemberDialogOpen] = useState(false);
@@ -39,14 +39,14 @@ const CollaboratorsTabPanel = () => {
           id: 'member_added',
           title: 'Member added to project',
           variant: 'success',
-          onDismiss() {},
+          onDismiss: dismiss,
         });
       } else {
         toast({
           id: 'member_not_added',
           title: 'Invitation not sent',
           variant: 'error',
-          onDismiss() {},
+          onDismiss: dismiss,
         });
       }
     },
@@ -63,14 +63,14 @@ const CollaboratorsTabPanel = () => {
         id: 'member_removed',
         title: 'Member removed from project',
         variant: 'success',
-        onDismiss() {},
+        onDismiss: dismiss,
       });
     } else {
       toast({
         id: 'member_not_removed',
         title: 'Not able to remove member',
         variant: 'error',
-        onDismiss() {},
+        onDismiss: dismiss,
       });
     }
   };
@@ -86,14 +86,14 @@ const CollaboratorsTabPanel = () => {
           id: 'member_permission_updated',
           title: 'Project member permission updated',
           variant: 'success',
-          onDismiss() {},
+          onDismiss: dismiss,
         });
       } else {
         toast({
           id: 'member_permission_not_updated',
           title: 'Project member permission not updated',
           variant: 'error',
-          onDismiss() {},
+          onDismiss: dismiss,
         });
       }
     },