adding absolute imports

.eslintrc

@@ -30,6 +30,9 @@
     "no-underscore-dangle": "off",
     "no-bitwise": "off",
     "prettier/prettier": "error",
+    "no-restricted-syntax": "off",
+    "consistent-return": "off",
+    "react/jsx-one-expression-per-line": "off",
     "react/no-unknown-property": [2, { "ignore": ["class", "for"] }],
     "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }],
     "no-use-before-define": "off",

package.json

@@ -93,7 +93,8 @@
     "tailwindcss": "^3.2.4",
     "ts-jest": "^26.5.4",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0",
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "baseUrl": "./node_modules/@types",
   "typeRoots": [

src/App.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
+import Modal from 'react-modal';
 import { RouterProvider } from 'react-router-dom';
 
-import router from './routes/route_app';
+import router from '@routes/route_app';
+
+Modal.setAppElement('#root');
 
 const App = () => {
   return <RouterProvider router={router} />;

src/components/Anchor/Anchor.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IAnchor } from '../../interfaces/anchor';
+import { IAnchor } from '@interfaces/anchor';
 
 export const Anchor = ({ children, url }: IAnchor) => {
   return (

src/components/CardDetails/CardDetails.tsx

@@ -1,26 +1,33 @@
-/* eslint-disable prettier/prettier */
 import React from 'react';
 import { AiOutlineColumnHeight } from 'react-icons/ai';
 import { CgPokemon } from 'react-icons/cg';
 import { FaWeightHanging } from 'react-icons/fa';
 import { ImStatsBars } from 'react-icons/im';
 
-import { ICardDatails } from '../../interfaces/cardDatails';
-import { getNumberOrderFormat } from '../../utils/getNumberOrderFormat';
-import { getTypesToBackgroundColor, getTypesToIconsTypes } from '../../utils/getTheme';
-import { TypeCard } from '../TypeCard';
+import { TypeCard } from '@components/TypeCard';
+import { ICardDatails } from '@interfaces/cardDatails';
+import { formatHeightWeight } from '@utils/formatHeightWeight';
+import { getNumberOrderFormat } from '@utils/getNumberOrderFormat';
+import {
+  getTypesToBackgroundColor,
+  getTypesToIconsTypes,
+} from '@utils/getTheme';
 
-const formatHeightWeight = (value: number) => {
-  const format = value / 10;
-  return format;
-}
-
-export const CardDetails = ({ id, name, img, types, weight, height, abilities, stats }: ICardDatails) => {
+export const CardDetails = ({
+  id,
+  name,
+  img,
+  types,
+  weight,
+  height,
+  abilities,
+  stats,
+}: ICardDatails) => {
   return (
     <div className="bg-white w-[400px] mx-auto rounded-2xl border border-zinc-300 overflow-hidden">
       <div
         style={{
-          backgroundColor: types![0].type.name
+          backgroundColor: id!
             ? getTypesToBackgroundColor(types![0].type.name.toUpperCase())
             : '#9d9b9b',
         }}
@@ -35,18 +42,24 @@ export const CardDetails = ({ id, name, img, types, weight, height, abilities, s
         <strong className="text-2xl font-medium leading-tight capitalize">
           {name}
         </strong>
-        <span className="text-lg font-semibold text-zinc-500">{getNumberOrderFormat(id!)}</span>
+        <span className="text-lg font-semibold text-zinc-500">
+          {getNumberOrderFormat(id!)}
+        </span>
       </div>
 
       <div className="flex items-center gap-2 py-4 px-4">
         {types?.map((type, index) => {
           return (
-            <div key={`${type.type.name}-${index}`} className="font-semibold text-white text-[14px]">
+            <div
+              key={`${type.type.name}-${index}`}
+              className="font-semibold text-white text-[14px]"
+            >
               <TypeCard
                 type={type.type.name}
-                icon={`${type.type.name &&
+                icon={`${
+                  type.type.name &&
                   getTypesToIconsTypes(type.type.name.toUpperCase())
-                  }`}
+                }`}
               />
             </div>
           );
@@ -55,7 +68,7 @@ export const CardDetails = ({ id, name, img, types, weight, height, abilities, s
 
       <div className="flex items-center justify-between px-4 my-2">
         <div className="w-full px-2">
-          <h3 className='flex items-center text-sm font-semibold text-zinc-500 gap-2 mb-1 uppercase'>
+          <h3 className="flex items-center text-sm font-semibold text-zinc-500 gap-2 mb-1 uppercase">
             <FaWeightHanging size={15} className="text-zinc-500" />
             Peso:
           </h3>
@@ -68,22 +81,18 @@ export const CardDetails = ({ id, name, img, types, weight, height, abilities, s
         </div>
 
         <div className="w-full px-2">
-          <h3 className='flex items-center text-sm font-semibold text-zinc-500 gap-2 mb-1 uppercase'>
+          <h3 className="flex items-center text-sm font-semibold text-zinc-500 gap-2 mb-1 uppercase">
             <AiOutlineColumnHeight size={15} className="text-zinc-500" />
             Altura:
           </h3>
           <div className="text-center font-medium border border-zinc-300 rounded-lg py-2 px-3">
-            <span className="text-base">
-              {formatHeightWeight(height)}
-              m
-            </span>
+            <span className="text-base">{formatHeightWeight(height)}m</span>
           </div>
         </div>
       </div>
 
-
       <div className="flex flex-col justify-center items-center pt-2 px-4">
-        <h3 className='flex items-center text-sm font-semibold text-zinc-500 gap-2 mb-1 uppercase'>
+        <h3 className="flex items-center text-sm font-semibold text-zinc-500 gap-2 mb-1 uppercase">
           <CgPokemon size={20} className="text-zinc-500" />
           Abilities
         </h3>
@@ -93,7 +102,9 @@ export const CardDetails = ({ id, name, img, types, weight, height, abilities, s
             return (
               <div key={`${ability.ability.name}-${index}`}>
                 <div className="text-center border border-zinc-300 rounded-lg py-2 px-3">
-                  <span className="text-base capitalize">{ability.ability.name}</span>
+                  <span className="text-base capitalize">
+                    {ability.ability.name}
+                  </span>
                 </div>
               </div>
             );
@@ -114,7 +125,7 @@ export const CardDetails = ({ id, name, img, types, weight, height, abilities, s
               {/* <ProgressBar /> */}
               <span>{stats.base_stat}</span>
             </div>
-          )
+          );
         })}
       </div>
     </div>

src/components/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Logo from '../../assets/logo/pokemon-logo.svg';
-import { SocialMedia } from '../SocialMedia/SocialMedia';
+import Logo from '@assets/logo/pokemon-logo.svg';
+import { SocialMedia } from '@components/SocialMedia/SocialMedia';
 
 export const Footer: React.FC = () => {
   return (

src/components/Header/index.tsx

@@ -1,12 +1,10 @@
-/* eslint-disable no-restricted-syntax */
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import Pikachu from '@assets/img/pikachu-2.png';
+import Logo from '@assets/logo/logo.png';
 import { ArrowLeft } from 'phosphor-react';
 
-import Pikachu from '../../assets/img/pikachu-2.png';
-import Logo from '../../assets/logo/logo.png';
-
 export const Header = () => {
   return (
     <header className="bg-[#fe6613] pt-4 px-4 h-[310px]">

src/components/InputSearch/InputSearch.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
+import { ISearch } from '@interfaces/search';
 import { MagnifyingGlass } from 'phosphor-react';
 
-import { ISearch } from '../../interfaces/search';
-
 export const InputSearch = ({ getFilterPokemon }: ISearch) => {
   return (
     <div className="flex items-center flex-col gap-2 py-6 px-1 mx-4 mb-2">

src/components/ListPokemon/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { usePagination } from '../../hooks/usePagination';
-import { useGetPokemonsData } from '../../hooks/usePokemons';
-import { ListProps } from '../../interfaces/list';
-import { IPokemons } from '../../interfaces/pokemons';
-import { Loading } from '../Loading/Loading';
-import { PokemonCard } from '../PokemonCard';
-import { ShowMoreButton } from '../ShowMoreButton/ShowMoreButton';
+import { Loading } from '@components/Loading/Loading';
+import { PokemonCard } from '@components/PokemonCard';
+import { ShowMoreButton } from '@components/ShowMoreButton/ShowMoreButton';
+import { usePagination } from '@hooks/usePagination';
+import { useGetPokemonsData } from '@hooks/usePokemons';
+import { ListProps } from '@interfaces/list';
+import { IPokemons } from '@interfaces/pokemons';
 
 export const ListPokemon = ({ data, handleSelectedId }: ListProps) => {
   const itemsPerPage = 20;

src/components/Modal/index.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import Modal from 'react-modal';
 
+import { IModal } from '@interfaces/modal';
 import { X } from 'phosphor-react';
 
-import { IModal } from '../../interfaces/modal';
-
 export const ContentModal = ({ active, children, onCloseModal }: IModal) => {
   return (
     <Modal
@@ -15,7 +14,7 @@ export const ContentModal = ({ active, children, onCloseModal }: IModal) => {
     >
       <button
         type="button"
-        className="absolute right-2 top-2 text-white hover:brightness-75"
+        className="absolute right-2 top-2 text-white hover:brightness-90"
         onClick={onCloseModal}
       >
         <X size={25} weight="bold" />