svg atts -> react svg atts

packages/frontend/.prettierignore

@@ -1 +0,0 @@
-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 }, 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/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 { Select, SelectOption } from 'components/shared/Select';
-import { AddProjectMemberInput, Permission } from 'gql-client';
+import { Checkbox } from 'components/shared/Checkbox';
 
 interface AddMemberDialogProp {
   open: boolean;
@@ -17,30 +17,18 @@ interface AddMemberDialogProp {
 
 interface formData {
   emailAddress: string;
-  canEdit: boolean;
+  permissions: {
+    view: boolean;
+    edit: 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,
@@ -48,7 +36,10 @@ const AddMemberDialog = ({
   } = useForm({
     defaultValues: {
       emailAddress: '',
-      canEdit: false,
+      permissions: {
+        view: true,
+        edit: false,
+      },
     },
   });
 
@@ -56,7 +47,11 @@ const AddMemberDialog = ({
     reset();
     handleOpen();
 
-    const permissions = [data.canEdit ? Permission.Edit : Permission.View];
+    const permissions = Object.entries(data.permissions)
+      .filter(([, value]) => value)
+      .map(
+        ([key]) => key.charAt(0).toUpperCase() + key.slice(1),
+      ) as Permission[];
 
     await handleAddMember({ email: data.emailAddress, permissions });
   }, []);
@@ -77,19 +72,19 @@ const AddMemberDialog = ({
                 required: 'email field cannot be empty',
               })}
             />
-            <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,
-                )
-              }
+            <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"
             />
           </Modal.Body>
           <Modal.Footer>

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"
       >

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, dismiss } = useToast();
+  const { toast } = 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: dismiss,
+          onDismiss() {},
         });
       } else {
         toast({
           id: 'member_not_added',
           title: 'Invitation not sent',
           variant: 'error',
-          onDismiss: dismiss,
+          onDismiss() {},
         });
       }
     },
@@ -63,14 +63,14 @@ const CollaboratorsTabPanel = () => {
         id: 'member_removed',
         title: 'Member removed from project',
         variant: 'success',
-        onDismiss: dismiss,
+        onDismiss() {},
       });
     } else {
       toast({
         id: 'member_not_removed',
         title: 'Not able to remove member',
         variant: 'error',
-        onDismiss: dismiss,
+        onDismiss() {},
       });
     }
   };
@@ -86,14 +86,14 @@ const CollaboratorsTabPanel = () => {
           id: 'member_permission_updated',
           title: 'Project member permission updated',
           variant: 'success',
-          onDismiss: dismiss,
+          onDismiss() {},
         });
       } else {
         toast({
           id: 'member_permission_not_updated',
           title: 'Project member permission not updated',
           variant: 'error',
-          onDismiss: dismiss,
+          onDismiss() {},
         });
       }
     },