Fixed Type Errors and Replaced Most Cases of ElementRef with Modern Alternitives

app/(platform)/(dashboard)/board/[boardId]/_components/board-title-form.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { toast } from 'sonner';
-import { ElementRef, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Board } from '@prisma/client';
 
 import { Button } from '@/components/ui/button';
@@ -25,8 +25,8 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
     },
   });
 
-  const formRef = useRef<ElementRef<'form'>>(null);
-  const inputRef = useRef<ElementRef<'input'>>(null);
+  const formRef = useRef<HTMLFormElement>(document.createElement('form'));
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const [title, setTitle] = useState(data.title);
   const [isEditing, setIsEditing] = useState(false);

app/(platform)/(dashboard)/board/[boardId]/_components/board-update-image.tsx

@@ -1,6 +1,6 @@
 import { X } from 'lucide-react';
 import { toast } from 'sonner';
-import { ElementRef, useRef } from 'react';
+import { useRef } from 'react';
 import Link from 'next/link';
 
 import { Button } from '@/components/ui/button';
@@ -20,7 +20,7 @@ interface BoardUpdateImageProps {
 }
 
 export const BoardUpdateImage = ({ boardId }: BoardUpdateImageProps) => {
-  const closeRef = useRef<ElementRef<'button'>>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
 
   const { execute, fieldErrors } = useAction(updateBoard, {
     onSuccess: (data) => {

app/(platform)/(dashboard)/board/[boardId]/_components/card-form.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Plus, X } from 'lucide-react';
-import { forwardRef, useRef, ElementRef, KeyboardEventHandler } from 'react';
+import { forwardRef, useRef, KeyboardEventHandler } from 'react';
 import { useOnClickOutside, useEventListener } from 'usehooks-ts';
 import { useParams } from 'next/navigation';
 import { toast } from 'sonner';
@@ -22,7 +22,7 @@ interface CardFormProps {
 export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
   ({ listId, isEditing, enableEditing, disableEditing }, ref) => {
     const params = useParams();
-    const formRef = useRef<ElementRef<'form'>>(null);
+    const formRef = useRef<HTMLFormElement>(document.createElement('form'));
 
     const { execute, fieldErrors } = useAction(createCard, {
       onSuccess: (data) => {

app/(platform)/(dashboard)/board/[boardId]/_components/list-form.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Plus, X } from 'lucide-react';
-import { useState, useRef, ElementRef } from 'react';
+import { useState, useRef } from 'react';
 import { useEventListener, useOnClickOutside } from 'usehooks-ts';
 import { useParams, useRouter } from 'next/navigation';
 import { toast } from 'sonner';
@@ -18,8 +18,8 @@ export const ListForm = () => {
   const router = useRouter();
   const params = useParams();
 
-  const formRef = useRef<ElementRef<'form'>>(null);
-  const inputRef = useRef<ElementRef<'input'>>(null);
+  const formRef = useRef<HTMLFormElement>(document.createElement('form'));
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const [isEditing, setIsEditing] = useState(false);
 

app/(platform)/(dashboard)/board/[boardId]/_components/list-header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, ElementRef } from 'react';
+import { useState, useRef } from 'react';
 import { useEventListener } from 'usehooks-ts';
 import { List } from '@prisma/client';
 import { toast } from 'sonner';
@@ -20,8 +20,8 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
   const [title, setTitle] = useState(data.title);
   const [isEditing, setIsEditing] = useState(false);
 
-  const formRef = useRef<ElementRef<'form'>>(null);
-  const inputRef = useRef<ElementRef<'input'>>(null);
+  const formRef = useRef<HTMLFormElement>(document.createElement('form'));
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const enableEditing = () => {
     setIsEditing(true);

app/(platform)/(dashboard)/board/[boardId]/_components/list-item.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ElementRef, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Draggable, Droppable } from '@hello-pangea/dnd';
 
 import { ListWithCards } from '@/types';
@@ -16,7 +16,7 @@ interface ListItemProps {
 }
 
 export const ListItem = ({ index, data }: ListItemProps) => {
-  const textareaRef = useRef<ElementRef<'textarea'>>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const [isEditing, setIsEditing] = useState(false);
 

app/(platform)/(dashboard)/board/[boardId]/_components/list-options.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { MoreHorizontal, X } from 'lucide-react';
-import { ElementRef, useRef } from 'react';
+import { useRef } from 'react';
 import { toast } from 'sonner';
 import { List } from '@prisma/client';
 
@@ -24,7 +24,7 @@ interface ListOptionsProps {
 }
 
 export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
-  const closeRef = useRef<ElementRef<'button'>>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
 
   const { execute: executeDelete } = useAction(deleteList, {
     onSuccess: () => {

components/form/form-popover.tsx

@@ -2,7 +2,7 @@
 
 import { X } from 'lucide-react';
 import { toast } from 'sonner';
-import { ElementRef, useRef } from 'react';
+import { useRef } from 'react';
 import { useRouter } from 'next/navigation';
 
 import {
@@ -36,7 +36,7 @@ export const FormPopover = ({
 }: FormPopoverProps) => {
   const proModal = useProModal();
   const router = useRouter();
-  const closeRef = useRef<ElementRef<'button'>>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
 
   const { execute, fieldErrors } = useAction(createBoard, {
     onSuccess: (data) => {

components/modals/card-modal/description.tsx

@@ -2,7 +2,7 @@
 
 import { useEventListener, useOnClickOutside } from 'usehooks-ts';
 import { useQueryClient } from '@tanstack/react-query';
-import { useState, ElementRef, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { useParams } from 'next/navigation';
 import { AlignLeft } from 'lucide-react';
 import { toast } from 'sonner';
@@ -26,8 +26,8 @@ export const Description = ({ data }: DescriptionProps) => {
 
   const [isEditing, setIsEditing] = useState(false);
 
-  const textareaRef = useRef<ElementRef<'textarea'>>(null);
-  const formRef = useRef<ElementRef<'form'>>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const formRef = useRef<HTMLFormElement>(document.createElement('form'));
 
   const enaleEditing = () => {
     setIsEditing(true);

components/modals/card-modal/header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRef, ElementRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useParams } from 'next/navigation';
 import { Layout } from 'lucide-react';
@@ -38,7 +38,7 @@ export const Header = ({ data }: HeaderProps) => {
     },
   });
 
-  const inputRef = useRef<ElementRef<'input'>>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const [title, setTitle] = useState(data.title);