Moved poke types into src/features/Pokedex/Pokemon/assets directory

.storybook/main.js

@@ -14,11 +14,11 @@ module.exports = {
   },
   webpackFinal: async config => {
     config.resolve.plugins = config.resolve.plugins || [];
-    config.resolve.plugins = [
+    config.resolve.plugins.push(
       new TsconfigPathsPlugin({
         configFile: path.resolve(__dirname, '../tsconfig.json'),
       }),
-    ];
+    );
     return config;
   },
 };

src/features/Pokedex/Pokedex.tsx

@@ -2,13 +2,18 @@ import React from 'react';
 import Pokemon from './Pokemon';
 import Filters from './Filters';
 
-import charizard from 'assets/charizard.svg';
+import charizard from 'features/Pokedex/Pokemon/assets/stories/charizard.svg';
 
 const Pokedex = () => {
   return (
     <>
       <Filters />
-      <Pokemon name={'Charizard'} number={'#006'} image={charizard} />
+      <Pokemon
+        name={'Charizard'}
+        number={6}
+        image={charizard}
+        types={['fire', 'flying']}
+      />
     </>
   );
 };

src/features/Pokedex/Pokemon/Pokemon.stories.tsx

@@ -3,7 +3,9 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import Pokemon, { PokemonProps } from './Pokemon';
-import charizard from 'assets/charizard.svg';
+
+import charizard_svg from './assets/stories/charizard.svg';
+import charizard_info from './assets/stories/charizard.json';
 
 export default {
   title: 'Pokedex/PokemonCard',
@@ -17,14 +19,14 @@ const Template: ComponentStory<typeof Pokemon> = (args: PokemonProps) => (
 export const Primary = Template.bind({});
 
 Primary.args = {
-  name: 'Charizard',
+  name: charizard_info.name,
-  number: '#006',
+  number: 6,
-  image: charizard,
+  image: charizard_svg,
 };
 
 export const Charizard = Template.bind({});
 Charizard.args = {
-  name: 'Charizard',
+  name: charizard_info.name,
-  number: '#006',
+  number: 6,
-  image: charizard,
+  image: charizard_svg,
 };

src/features/Pokedex/Pokemon/Pokemon.tsx

@@ -3,15 +3,16 @@ import './Pokemon.css';
 
 export interface PokemonProps {
   name: string;
-  number: string;
+  number: number;
   image: string;
+  types: string[];
 }
 
 export default function Pokemon({ name, number, image }: PokemonProps) {
   return (
     <div className="thumbnail__container">
       <div className="card__header">
-        <div className="poke__number">{number}</div>
+        <div className="poke__number">{formatNumber(number)}</div>
         <div className="info__icon">
           <svg
             stroke="currentColor"
@@ -27,7 +28,7 @@ export default function Pokemon({ name, number, image }: PokemonProps) {
         </div>
       </div>
       <div className="image__container">
-        <img src={image} alt="test" height={150} />
+        <img src={image} alt={name} height={150} />
       </div>
       <div className="poke__name">
         <h3>{name}</h3>
@@ -35,3 +36,7 @@ export default function Pokemon({ name, number, image }: PokemonProps) {
     </div>
   );
 }
+
+function formatNumber(num: number) {
+  return '#' + num.toString().padStart(3, '0');
+}