Refactor to change file names to kebab-case, delete unnecessary type …

…annotations and add properties types for components, Fix migration bugs

src/App.tsx

@@ -1,9 +1,9 @@
 import { Suspense } from 'react';
 
-import Header from 'comp/Header';
-import Router from './router';
+import Header from '@/components/header';
+import Router from '@/router';
 
-function App(): JSX.Element {
+function App() {
   return (
     <>
       <Header />

src/components/Comments.tsx

@@ -1,26 +1,25 @@
-import { Link } from 'react-router-dom';
-import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
 
-import type { UseQueryResult } from '@tanstack/react-query';
-import type { Comment } from 'types';
-import { DummyResponse } from 'src/types/DummyResponse';
-
-interface CommentsProperties {
-  postId: number;
-}
+import type { Comment } from '@/types';
+import { DummyResponse } from '@/types/dummy-response';
 
 interface CommentsResponse extends DummyResponse {
   comments: Comment[];
 }
 
-export default function Comments({ postId }: CommentsProperties): JSX.Element {
+interface Properties {
+  postId: number;
+}
+
+export default function Comments({ postId }: Properties) {
   const {
     data: comments,
-    isLoading,
+    isPending,
     isError,
     error,
-  }: UseQueryResult<Comment[], Error> = useQuery({
+  } = useQuery({
     enabled: postId !== undefined,
     queryKey: ['comments', postId],
     queryFn: async () => {
@@ -31,7 +30,7 @@ export default function Comments({ postId }: CommentsProperties): JSX.Element {
 
   return (
     <>
-      {isLoading ? (
+      {isPending ? (
         <p>Loading...</p>
       ) : isError ? (
         <p>Error: {error.message}</p>

src/components/Common/Button.tsx

@@ -1,5 +1,6 @@
-import { type Ref, type ButtonHTMLAttributes, forwardRef } from 'react';
-import { Button as ButtonUI } from 'lib/shadcn/components/ui/button';
+import { type ButtonHTMLAttributes, forwardRef, type Ref } from 'react';
+
+import { Button as ButtonUI } from '@/components/ui/button';
 
 interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: JSX.Element | string;
@@ -8,7 +9,7 @@ interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProperties>(
-  ({ children, type = 'button', className = '', background, ...properties }, reference) => {
+  ({ children, type = 'button', className, background, ...properties }, reference) => {
     return (
       <ButtonUI
         type={type}

src/components/Common/form/Input.tsx

@@ -1,19 +1,20 @@
-import { forwardRef } from 'react';
-import type { Ref, InputHTMLAttributes } from 'react';
+import { forwardRef, type InputHTMLAttributes, type Ref } from 'react';
 
 interface InputProperties extends InputHTMLAttributes<HTMLInputElement> {
   children?: JSX.Element | boolean | string;
   inputTitle?: JSX.Element | string | undefined;
   reference?: Ref<HTMLInputElement> | null | undefined;
 }
 
+const formInputStyle = { backgroundImage: 'none' };
+
 const Input = forwardRef<HTMLInputElement, InputProperties>(
   ({ id, type, placeholder, className, hidden = false, disabled = false, ...register }, reference) => {
     return (
       <>
         <input
           className={`w-full rounded-lg px-4 py-2 font-medium ${className ?? 'bg-purple-dark/90 text-white'}`}
-          style={{ backgroundImage: 'none' }}
+          style={formInputStyle}
           id={id}
           ref={reference}
           type={type ?? 'text'}

src/components/Common/form/Title.tsx

@@ -1,3 +1,8 @@
-export default function Title({ children, className = '' }: { children: string; className?: string }): JSX.Element {
+interface Properties {
+  children: string;
+  className?: string;
+}
+
+export default function Title({ children, className }: Properties) {
   return <h3 className={`pb-2 ps-2 text-base font-semibold ${className}`}>{children}</h3>;
 }

src/components/Common/form/form-alert.tsx

@@ -0,0 +1,7 @@
+export default function FormAlert({ children }: { children: React.ReactNode }) {
+  return (
+    <p role="alert" className="pt-2 text-xs text-red-600">
+      {children}
+    </p>
+  );
+}

src/components/Common/form/index.ts

@@ -1,4 +1,4 @@
-export { default as FormAlert } from './FormAlert';
-export { default as Input } from './Input';
-export { default as Textarea } from './Textarea';
-export { default as Title } from './Title';
+export { default as FormAlert } from './form-alert';
+export { default as Input } from './input';
+export { default as Textarea } from './text-area';
+export { default as Title } from './title';

src/components/Common/form/text-area.tsx

@@ -0,0 +1,33 @@
+import { forwardRef, type Ref, type TextareaHTMLAttributes } from 'react';
+
+interface TextareaProperties extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  children?: JSX.Element | boolean | string;
+  reference?: Ref<HTMLTextAreaElement> | null | undefined;
+}
+
+const formTextareaStyle = { backgroundImage: 'none' };
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProperties>(function TextareaComponent(
+  { className, id, rows, placeholder, hidden, disabled, ...register },
+  reference,
+) {
+  return (
+    <>
+      <textarea
+        className={`w-full rounded-lg px-4 py-2 font-medium ${className ?? 'bg-purple-dark text-white hover:bg-purple'}`}
+        style={formTextareaStyle}
+        id={id}
+        rows={rows}
+        ref={reference}
+        placeholder={placeholder}
+        hidden={hidden}
+        disabled={disabled}
+        {...register}
+      />
+    </>
+  );
+});
+
+Textarea.displayName = 'Textarea';
+
+export default Textarea;

src/components/Header.tsx

@@ -1,7 +1,5 @@
 import { Link, useLocation } from 'react-router-dom';
 
-import Button from './common/Button';
-import useAuthStore from '../stores/AuthStore';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -10,16 +8,19 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from 'lib/shadcn/components/ui/dropdown-menu';
+} from '@/components/ui/dropdown-menu';
+import useAuthStore from '@/stores/auth-store';
 
-export default function Header(): JSX.Element {
+import Button from './common/button';
+
+export default function Header() {
   const { pathname } = useLocation();
   const [logout, user] = useAuthStore((state) => [state.logout, state.user]);
 
   return (
     <header className="flex flex-col justify-center">
       <h1 className=" max-w-full px-2 py-4 text-center text-4xl font-black lg:px-16 lg:text-5xl">
-        A Basic Blog Site using{' '}
+        An Infinite Blog Site using{' '}
         <a
           className="text-purple-dark hover:text-purple active:text-purple-light"
           href="https://tanstack.com/query/v4/"

src/components/forms/auth/LoginForm.tsx → src/components/forms/auth/login-form.tsx

@@ -1,16 +1,19 @@
+import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
+import { FormAlert, Input, Title } from 'src/components/common/form';
 
-import Button from 'comp/common/Button';
-
-import type { SubmitHandler } from 'react-hook-form';
-import { Input, Title, FormAlert } from 'comp/common/form';
+import Button from '@/components/common/button';
 
 export interface FormInputs {
   username: string;
   password: string;
 }
 
-export default function LoginForm({ onSubmit }: { onSubmit: SubmitHandler<FormInputs> }): JSX.Element {
+interface Properties {
+  onSubmit: SubmitHandler<FormInputs>;
+}
+
+export default function LoginForm({ onSubmit }: Properties) {
   const {
     register,
     handleSubmit,

src/components/forms/post/AddPostForm.tsx → src/components/forms/post/add-post-form.tsx

@@ -1,20 +1,20 @@
-import { useForm, type SubmitHandler, useFieldArray } from 'react-hook-form';
 import { useEffect } from 'react';
+import { type SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
 
-import Button from 'comp/common/Button';
-import { Input, Textarea, Title, FormAlert } from 'comp/common/form';
+import Button from '@/components/common/button';
+import { FormAlert, Input, Textarea, Title } from '@/components/common/form';
 
 export interface FormInputs {
   title: string;
   body: string;
   tags: Array<{ tag: string }>;
 }
 
-interface PostAddFormProperties {
+interface Properties {
   onSubmit: SubmitHandler<FormInputs>;
 }
 
-export default function PostAddForm({ onSubmit }: PostAddFormProperties): JSX.Element {
+export default function PostAddForm({ onSubmit }: Properties) {
   const {
     register,
     handleSubmit,

src/components/home/Username.tsx

@@ -1,19 +1,23 @@
-import axios from 'axios';
 import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
 import { Link } from 'react-router-dom';
 
-import type { UseQueryResult } from '@tanstack/react-query';
-import type { User } from 'types';
+import type { User } from '@/types';
+
+interface Properties {
+  className?: string;
+  userId: number;
+}
 
-export default function Username({ className, userId }: { className?: string; userId: number }): JSX.Element {
+export default function Username({ className, userId }: Properties) {
   if (Number(userId) < 1) throw new Error('id is not a valid number');
 
   const {
     data: user,
-    isLoading,
+    isPending,
     isError,
     error,
-  }: UseQueryResult<User, Error> = useQuery({
+  } = useQuery({
     queryKey: ['users', Number(userId), { select: 'username' }],
     queryFn: async () => {
       const data = await axios.get(`https://dummyjson.com/users/${userId}?select=username`);
@@ -23,7 +27,7 @@ export default function Username({ className, userId }: { className?: string; us
 
   return (
     <>
-      {isLoading ? (
+      {isPending ? (
         <p>Loading...</p>
       ) : isError ? (
         <p>Error: {error.message}</p>

src/libraries/shadcn/components/ui/button.tsx → src/components/ui/button.tsx

@@ -1,9 +1,9 @@
-import { forwardRef } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../../utils';
-
 import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '../../utils/utils';
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-400 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-slate-800',
@@ -25,7 +25,7 @@ const buttonVariants = cva(
         default: 'h-9 px-4 py-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
+        icon: 'size-9',
       },
     },
     defaultVariants: {