-
{name}
+
+ {name}
+
{getNumberOrderFormat(id)}
@@ -35,10 +43,13 @@ export const PokemonCard = ({ name, id, types, url_img, getSelectedPokemon }: IP
return (
- )
+ );
})}
diff --git a/src/components/ShowMoreButton/ShowMoreButton.tsx b/src/components/ShowMoreButton/ShowMoreButton.tsx
index 729811e..b1ea1ca 100644
--- a/src/components/ShowMoreButton/ShowMoreButton.tsx
+++ b/src/components/ShowMoreButton/ShowMoreButton.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { MdOutlineCatchingPokemon } from 'react-icons/md';
-import { IButtonProps } from '../../interfaces/button';
+import { IButtonProps } from '@interfaces/button';
export const ShowMoreButton = ({ loadItems, showMoreItems }: IButtonProps) => {
return (
diff --git a/src/components/SocialMedia/SocialMedia.tsx b/src/components/SocialMedia/SocialMedia.tsx
index 3078b63..fa96c60 100644
--- a/src/components/SocialMedia/SocialMedia.tsx
+++ b/src/components/SocialMedia/SocialMedia.tsx
@@ -1,9 +1,8 @@
import React from 'react';
+import { Anchor } from '@components/Anchor/Anchor';
import { GithubLogo, LinkedinLogo, TwitterLogo } from 'phosphor-react';
-import { Anchor } from '../Anchor/Anchor';
-
export const SocialMedia: React.FC = () => {
return (
diff --git a/src/components/TypeCard/index.tsx b/src/components/TypeCard/index.tsx
index 45838e1..cb6771d 100644
--- a/src/components/TypeCard/index.tsx
+++ b/src/components/TypeCard/index.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { ITypeCard } from '../../interfaces/typeCard';
-import { getTypesToColor } from '../../utils/getTheme';
+import { ITypeCard } from '@interfaces/typeCard';
+import { getTypesToColor } from '@utils/getTheme';
export const TypeCard = ({ type, icon }: ITypeCard) => {
return (
diff --git a/src/hooks/usePagination.ts b/src/hooks/usePagination.ts
index 3c1c051..b2b9a93 100644
--- a/src/hooks/usePagination.ts
+++ b/src/hooks/usePagination.ts
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
-import { IPagination, IPaginationReturn } from '../interfaces/pagination';
+import { IPagination, IPaginationReturn } from '@interfaces/pagination';
export const usePagination = ({
data,
diff --git a/src/hooks/usePokemons.ts b/src/hooks/usePokemons.ts
index 8e4459b..6c60191 100644
--- a/src/hooks/usePokemons.ts
+++ b/src/hooks/usePokemons.ts
@@ -1,10 +1,9 @@
/* eslint-disable no-restricted-syntax */
import { useEffect, useState } from 'react';
+import { IPokemons } from '@interfaces/pokemons';
import axios from 'axios';
-import { IPokemons } from '../interfaces/pokemons';
-
export const useGetPokemonsData = () => {
const [loading, setLoading] = useState(false);
const [pokemons, setPokemons] = useState([]);
diff --git a/src/hooks/useSelectPokemon.ts b/src/hooks/useSelectPokemon.ts
index cedae2d..af91fbd 100644
--- a/src/hooks/useSelectPokemon.ts
+++ b/src/hooks/useSelectPokemon.ts
@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useState } from 'react';
-import { detailsPokemon } from '../interfaces/detailsPokemon';
-import { api } from '../lib/axios';
+import { detailsPokemon } from '@interfaces/detailsPokemon';
+import { api } from '@lib/axios';
export const useSelectPokemon = () => {
const [active, setActive] = useState(false);
diff --git a/src/interfaces/detailsPokemon.ts b/src/interfaces/detailsPokemon.ts
index 44b498f..0aaead5 100644
--- a/src/interfaces/detailsPokemon.ts
+++ b/src/interfaces/detailsPokemon.ts
@@ -1,4 +1,4 @@
-import { ISprites } from './pokemons';
+import { ISprites } from '@interfaces/pokemons';
export interface detailsPokemon {
id: number;
diff --git a/src/interfaces/list.ts b/src/interfaces/list.ts
index b0deebf..204910f 100644
--- a/src/interfaces/list.ts
+++ b/src/interfaces/list.ts
@@ -1,4 +1,4 @@
-import { IPokemons } from './pokemons';
+import { IPokemons } from '@interfaces/pokemons';
export type ListProps = {
data: IPokemons[];
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 4c0a99d..b884840 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -3,8 +3,8 @@ import { CgPokemon } from 'react-icons/cg';
import { MdCatchingPokemon } from 'react-icons/md';
import { Link } from 'react-router-dom';
-import img from '../assets/img/Charizard-Pokemon.png';
-import { SocialMedia } from '../components/SocialMedia/SocialMedia';
+import img from '@assets/img/Charizard-Pokemon.png';
+import { SocialMedia } from '@components/SocialMedia/SocialMedia';
const Home: React.FC = () => {
return (
diff --git a/src/pages/Pokedex.tsx b/src/pages/Pokedex.tsx
index 0cfd49a..0fd5bb4 100644
--- a/src/pages/Pokedex.tsx
+++ b/src/pages/Pokedex.tsx
@@ -1,14 +1,14 @@
import React from 'react';
import { Helmet } from 'react-helmet';
-import { CardDetails } from '../components/CardDetails/CardDetails';
-import { Footer } from '../components/Footer/Footer';
-import { Header } from '../components/Header';
-import { InputSearch } from '../components/InputSearch/InputSearch';
-import { ListPokemon } from '../components/ListPokemon';
-import { ContentModal } from '../components/Modal';
-import { useGetPokemonsData } from '../hooks/usePokemons';
-import { useSelectPokemon } from '../hooks/useSelectPokemon';
+import { CardDetails } from '@components/CardDetails/CardDetails';
+import { Footer } from '@components/Footer/Footer';
+import { Header } from '@components/Header';
+import { InputSearch } from '@components/InputSearch/InputSearch';
+import { ListPokemon } from '@components/ListPokemon';
+import { ContentModal } from '@components/Modal';
+import { useGetPokemonsData } from '@hooks/usePokemons';
+import { useSelectPokemon } from '@hooks/useSelectPokemon';
const Pokedex: React.FC = () => {
const { pokemons, FilterPokemon } = useGetPokemonsData();
diff --git a/src/routes/route_app.tsx b/src/routes/route_app.tsx
index 193fbb3..4c24775 100644
--- a/src/routes/route_app.tsx
+++ b/src/routes/route_app.tsx
@@ -1,8 +1,8 @@
import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
-import Home from '../pages/Home';
-import Pokedex from '../pages/Pokedex';
+import Home from '@pages/Home';
+import Pokedex from '@pages/Pokedex';
const router = createBrowserRouter([
{
diff --git a/src/utils/formatHeightWeight.ts b/src/utils/formatHeightWeight.ts
new file mode 100644
index 0000000..7597f61
--- /dev/null
+++ b/src/utils/formatHeightWeight.ts
@@ -0,0 +1,4 @@
+export const formatHeightWeight = (value: number) => {
+ const format = value / 10;
+ return format;
+};
diff --git a/src/utils/getTheme.ts b/src/utils/getTheme.ts
index e121406..116dc14 100644
--- a/src/utils/getTheme.ts
+++ b/src/utils/getTheme.ts
@@ -1,6 +1,4 @@
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable consistent-return */
-import { THEME } from '../theme/theme';
+import { THEME } from '@theme/theme';
export const getTypesToColor = (type: string) => {
for (const [key, color] of Object.entries(THEME.COLORS)) {
diff --git a/tsconfig.json b/tsconfig.json
index 3d0a51a..e16d6e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,21 +1,42 @@
{
"compilerOptions": {
- "target": "ESNext",
+ "target": "esnext",
"useDefineForClassFields": true,
- "lib": ["DOM", "DOM.Iterable", "ESNext"],
- "allowJs": false,
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
"skipLibCheck": true,
- "esModuleInterop": false,
+ "esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
- "module": "ESNext",
- "moduleResolution": "Node",
+ "module": "esnext",
+ "moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react-jsx"
+ "jsx": "react-jsx",
+ "baseUrl": "./src",
+ "paths": {
+ "@assets/*": ["./assets/*"],
+ "@components/*": ["./components/*"],
+ "@hooks/*": ["./hooks/*"],
+ "@interfaces/*": ["./interfaces/*"],
+ "@routes/*": ["./routes/*"],
+ "@pages/*": ["./pages/*"],
+ "@utils/*": ["./utils/*"],
+ "@lib/*": ["./lib/*"],
+ "@theme/*": ["./theme/*"]
+ },
+ "typeRoots": ["node_modules/@types", "./types"]
},
- "include": ["src"],
+ "include": [
+ "src/**/*.ts",
+ "src/**/*.tsx",
+ "src/**/*.js",
+ "src/**/*.jsx",
+ "tests/**/*.ts",
+ "tests/**/*.tsx"
+ ],
+ "exclude": ["node_modules", "dist"],
"references": [{ "path": "./tsconfig.node.json" }]
}
diff --git a/vite.config.ts b/vite.config.ts
index 4e7004e..a02a332 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,7 @@
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
-// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [react(), tsconfigPaths()],
});
diff --git a/yarn.lock b/yarn.lock
index 0a81bb2..c254c1b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3232,6 +3232,11 @@
"merge2" "^1.4.1"
"slash" "^3.0.0"
+"globrex@^0.1.2":
+ "integrity" "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+ "resolved" "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz"
+ "version" "0.1.2"
+
"gopd@^1.0.1":
"integrity" "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA=="
"resolved" "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz"
@@ -6736,6 +6741,11 @@
"semver" "7.x"
"yargs-parser" "20.x"
+"tsconfck@^2.1.0":
+ "integrity" "sha512-ZPCkJBKASZBmBUNqGHmRhdhM8pJYDdOXp4nRgj/O0JwUwsMq50lCDRQP/M5GBNAA0elPrq4gAeu4dkaVCuKWww=="
+ "resolved" "https://registry.npmjs.org/tsconfck/-/tsconfck-2.1.1.tgz"
+ "version" "2.1.1"
+
"tsconfig-paths@^3.14.1":
"integrity" "sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ=="
"resolved" "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz"
@@ -6837,7 +6847,7 @@
dependencies:
"is-typedarray" "^1.0.0"
-"typescript@^4.9.3", "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta", "typescript@>=3.8 <5.0":
+"typescript@^4.3.5 || ^5.0.0", "typescript@^4.9.3", "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta", "typescript@>=3.8 <5.0":
"integrity" "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg=="
"resolved" "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz"
"version" "4.9.4"
@@ -6970,7 +6980,16 @@
"core-util-is" "1.0.2"
"extsprintf" "^1.2.0"
-"vite@^4.0.0":
+"vite-tsconfig-paths@^4.2.0":
+ "integrity" "sha512-jGpus0eUy5qbbMVGiTxCL1iB9ZGN6Bd37VGLJU39kTDD6ZfULTTb1bcc5IeTWqWJKiWV5YihCaibeASPiGi8kw=="
+ "resolved" "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-4.2.0.tgz"
+ "version" "4.2.0"
+ dependencies:
+ "debug" "^4.1.1"
+ "globrex" "^0.1.2"
+ "tsconfck" "^2.1.0"
+
+"vite@*", "vite@^4.0.0":
"integrity" "sha512-xevPU7M8FU0i/80DMR+YhgrzR5KS2ORy1B4xcX/cXLsvnUWvfHuqMmVU6N0YiJ4JWGRJJsLCgjEzKjG9/GKoSw=="
"resolved" "https://registry.npmjs.org/vite/-/vite-4.0.4.tgz"
"version" "4.0.4"