From 5abf5ca3b25c4f8a01dedfad4d5971029f3daed1 Mon Sep 17 00:00:00 2001 From: Anselm Marie Date: Sat, 21 Sep 2024 14:27:57 -0400 Subject: [PATCH] =?UTF-8?q?Updating=20mobile=20app=20styles=20=E2=80=A2=20?= =?UTF-8?q?refactoring=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- libs/ds-tokens/style-dictionary.config.ts | 2 +- .../lib/cart/cart.modal/cart.modal.module.css | 15 + .../lib/cart/cart.modal/cart.modal.view.tsx | 11 +- .../navigation/header/header.module.native.ts | 74 +++- .../src/lib/navigation/header/header.view.tsx | 13 +- .../pokemon.ability.name.module.native.ts | 247 +++++++++++-- .../pokemon.ability.name.tsx | 6 +- .../pokemon.card/pokemon.card.module.css | 42 +-- .../pokemon.card.module.native.ts | 327 +++++++++++++++--- .../pokemon.card/pokemon.card.view.tsx | 8 +- .../pokemon.detail.modal.view.tsx | 8 +- .../pokemon.list/pokemon.list.view.tsx | 3 + libs/ui/src/lib-base/styles/ts/variables.ts | 46 +-- .../lib-base/ui/icon/assets/shopping-cart.svg | 18 + .../icon/icons/icon.shopping.cart.native.tsx | 6 +- .../ui/tag/tag.item/tag.item.view.tsx | 8 +- .../src/lib-base/utils/text-transform.util.ts | 6 + 17 files changed, 677 insertions(+), 163 deletions(-) create mode 100644 libs/ui/src/lib-base/ui/icon/assets/shopping-cart.svg diff --git a/libs/ds-tokens/style-dictionary.config.ts b/libs/ds-tokens/style-dictionary.config.ts index 1324fd8..cd3bf75 100644 --- a/libs/ds-tokens/style-dictionary.config.ts +++ b/libs/ds-tokens/style-dictionary.config.ts @@ -43,7 +43,7 @@ const config: Config | Config[] = { js: { transformGroup: 'ts', - transforms: ['custom/dimension-to-pixel', 'custom/name/native'], + transforms: ['custom/name/native'], buildPath: 'build/ts/', files: [ { diff --git a/libs/features/src/lib/cart/cart.modal/cart.modal.module.css b/libs/features/src/lib/cart/cart.modal/cart.modal.module.css index eda1468..806ea1b 100644 --- a/libs/features/src/lib/cart/cart.modal/cart.modal.module.css +++ b/libs/features/src/lib/cart/cart.modal/cart.modal.module.css @@ -25,6 +25,15 @@ height: 115px; } +.itemName { + font-size: var(--theme-font-18); + margin-bottom: var(--theme-spacing-2); +} + +.price { + font-size: var(--theme-font-18); +} + .quantityWrapper { display: flex; background-color: var(--theme-netural-200); @@ -32,6 +41,12 @@ border-radius: var(--theme-radius-pill); width: fit-content; align-items: center; + box-shadow: inset 0 3px 3px rgb(0 0 0 / 10%); + margin-top: var(--theme-spacing-5); +} + +.quantityIcon { + padding: var(--theme-spacing-10); } .sep { diff --git a/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx b/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx index 64c8b47..094ff55 100644 --- a/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx +++ b/libs/features/src/lib/cart/cart.modal/cart.modal.view.tsx @@ -11,7 +11,8 @@ import { mobSrcTypeEnum, TypographyTypeEnum, } from '@pokemon-pet-shop/ui'; -import { pricingFormatUSD } from '@pokemon-pet-shop/utils'; +import { globalStyles } from '@pokemon-pet-shop/ui/styles/global'; +import { capitalizeNameUtil, classNamesUtil, pricingFormatUSD } from '@pokemon-pet-shop/utils'; import CartModalScroll from './cart.modal.content.scroll'; import { styles } from './cart.modal.module'; @@ -37,14 +38,14 @@ const CartModal = (): ReactElement => { /> - {el?.name} + {capitalizeNameUtil(el?.name)} {pricingFormatUSD(el?.price)} @@ -52,11 +53,13 @@ const CartModal = (): ReactElement => { onHandleRemoveFromCart(el?.id)} /> {el?.quantity} onHandleAddToCart(el?.id)} /> diff --git a/libs/features/src/lib/navigation/header/header.module.native.ts b/libs/features/src/lib/navigation/header/header.module.native.ts index 54467f0..3a76ef9 100644 --- a/libs/features/src/lib/navigation/header/header.module.native.ts +++ b/libs/features/src/lib/navigation/header/header.module.native.ts @@ -1,45 +1,87 @@ +import { + THEME_NETURAL_100, + THEME_NETURAL_200, + THEME_RADIUS_CIRCLE, + THEME_RADIUS_PILL, + THEME_SPACING_10, + THEME_SPACING_15, + THEME_SPACING_5, + THEME_YELLOW_600, +} from '@pokemon-pet-shop/ui/styles/var'; import { StyleSheet } from 'react-native'; export const styles = () => StyleSheet.create({ headerWrapper: { justifyContent: 'space-between', - paddingTop: 10, - paddingLeft: 0, - paddingRight: 0, + paddingTop: THEME_SPACING_10, + shadowOffset: { + width: 2, + height: 8, + }, + shadowColor: '#062a49', + shadowOpacity: 0.15, + shadowRadius: 5, + elevation: 2, // boxShadow: 0 2px 8px 1px rgba(6, 42, 73, 0.15), + backgroundColor: THEME_NETURAL_100, }, container: { display: 'flex', flexDirection: 'row', - backgroundColor: 'red', alignItems: 'center', + paddingLeft: THEME_SPACING_15, + paddingRight: THEME_SPACING_15, }, nav: { display: 'flex', flexDirection: 'row', flexGrow: 1, marginTop: 0, - marginBottom: 0, - marginLeft: 15, - marginRight: 15, - paddingTop: 10, - paddingBottom: 10, - paddingLeft: 15, - paddingRight: 15, + marginBottom: THEME_SPACING_15, + marginLeft: THEME_SPACING_15, + marginRight: THEME_SPACING_15, + paddingTop: THEME_SPACING_10, + paddingBottom: THEME_SPACING_10, + paddingLeft: THEME_SPACING_15, + paddingRight: THEME_SPACING_15, alignItems: 'center', - borderRadius: 100, - backgroundColor: 'grey', + borderRadius: THEME_RADIUS_PILL, + backgroundColor: THEME_NETURAL_200, + // box-shadow: inset 0 3px 3px rgb(0 0 0 / 10%); }, navTitle: { - marginRight: 10, + marginRight: THEME_SPACING_10, }, iconCart: { - marginLeft: 15, + marginLeft: THEME_SPACING_15, }, logo: {}, switchTheme: { display: 'none', }, - iconMenu: {}, + cartWrapper: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + position: 'relative', + }, + counterWrapper: { + borderRadius: THEME_RADIUS_CIRCLE, + backgroundColor: THEME_YELLOW_600, + minWidth: 23, + minHeight: 23, + textAlign: 'center', + paddingTop: THEME_SPACING_5, + paddingBottom: THEME_SPACING_5, + paddingLeft: THEME_SPACING_10, + paddingRight: THEME_SPACING_10, + position: 'absolute', + right: -11, + top: -15, + cursor: 'pointer', + }, + counterText: { + textAlign: 'center', + }, }); diff --git a/libs/features/src/lib/navigation/header/header.view.tsx b/libs/features/src/lib/navigation/header/header.view.tsx index d319bb6..b726da3 100644 --- a/libs/features/src/lib/navigation/header/header.view.tsx +++ b/libs/features/src/lib/navigation/header/header.view.tsx @@ -39,17 +39,22 @@ const Header = () => { PETS - + - + {data?.counter ? ( - - {data?.counter} + + + {data?.counter} + ) : null} @@ -8,35 +49,199 @@ export const styles = () => height: 17, width: '100%', alignItems: 'center', - marginBottom: 5, + marginBottom: THEME_SPACING_10, }, atkLine: {}, atkCircle: { height: 17, width: 17, - borderRadius: 100, - marginRight: 5, + borderRadius: THEME_RADIUS_CIRCLE, + marginRight: THEME_SPACING_5, display: 'flex', justifyContent: 'center', alignItems: 'center', }, atkText: { - fontSize: 13, - }, - /** - Grass Theme - **/ - grassThemeWrapper: { - backgroundColor: 'green', - }, - // contentCardWrapper: { - // color: 'white', - // backgroundColor: 'darkgreen', - // }, - // atkLine: { - // backgroundColor: 'greenyellow', - // }, - // atkCircle: { - // backgroundColor: 'lightgreen', - // }, + fontSize: THEME_FONT_13, + color: THEME_NETURAL_100, + }, + /** +Grass Theme +**/ + grassThemeAtkLine: { + backgroundColor: THEME_TYPE_GRASS_400, + }, + grassThemeAtkCircle: { + backgroundColor: THEME_TYPE_GRASS_900, + }, + + /** +Bug Theme +**/ + bugThemeAtkLine: { + backgroundColor: THEME_TYPE_BUG_400, + }, + bugThemeAtkCircle: { + backgroundColor: THEME_TYPE_BUG_900, + }, + + /** +Dark Theme +**/ + darkThemeAtkLine: { + backgroundColor: THEME_TYPE_DARK_400, + }, + darkThemeAtkCircle: { + backgroundColor: THEME_TYPE_DARK_900, + }, + + /** +Dragon Theme +**/ + dragonThemeAtkLine: { + backgroundColor: THEME_TYPE_DRAGON_400, + }, + dragonThemeAtkCircle: { + backgroundColor: THEME_TYPE_DRAGON_900, + }, + + /** +Electric Theme +**/ + electricThemeAtkLine: { + backgroundColor: THEME_TYPE_ELECTRIC_400, + }, + electricThemeAtkCircle: { + backgroundColor: THEME_TYPE_ELECTRIC_900, + }, + + /** +Fairy Theme +**/ + fairyThemeAtkLine: { + backgroundColor: THEME_TYPE_FAIRY_400, + }, + fairyThemeAtkCircle: { + backgroundColor: THEME_TYPE_FAIRY_900, + }, + + /** +Fighting Theme +**/ + fightingThemeAtkLine: { + backgroundColor: THEME_TYPE_FIGHTING_400, + }, + fightingThemeAtkCircle: { + backgroundColor: THEME_TYPE_FIGHTING_900, + }, + + /** +Fire Theme +**/ + fireThemeAtkLine: { + backgroundColor: THEME_TYPE_FIRE_400, + }, + fireThemeAtkCircle: { + backgroundColor: THEME_TYPE_FIRE_900, + }, + + /** +Flying Theme +**/ + flyingThemeAtkLine: { + backgroundColor: THEME_TYPE_FLYING_400, + }, + flyingThemeAtkCircle: { + backgroundColor: THEME_TYPE_FLYING_900, + }, + + /** +Ghost Theme +**/ + ghostThemeAtkLine: { + backgroundColor: THEME_TYPE_GHOST_400, + }, + ghostThemeAtkCircle: { + backgroundColor: THEME_TYPE_GHOST_900, + }, + + /** +Ground Theme +**/ + groundThemeAtkLine: { + backgroundColor: THEME_TYPE_GROUND_400, + }, + groundThemeAtkCircle: { + backgroundColor: THEME_TYPE_GROUND_900, + }, + + /** +Ice Theme +**/ + iceThemeAtkLine: { + backgroundColor: THEME_TYPE_ICE_400, + }, + iceThemeAtkCircle: { + backgroundColor: THEME_TYPE_ICE_900, + }, + + /** +Normal Theme +**/ + normalThemeAtkLine: { + backgroundColor: THEME_TYPE_NORMAL_400, + }, + normalThemeAtkCircle: { + backgroundColor: THEME_TYPE_NORMAL_900, + }, + + /** +Poison Theme +**/ + poisonThemeAtkLine: { + backgroundColor: THEME_TYPE_POISON_400, + }, + poisonThemeAtkCircle: { + backgroundColor: THEME_TYPE_POISON_900, + }, + + /** +Psychic Theme +**/ + psychicThemeAtkLine: { + backgroundColor: THEME_TYPE_PSYCHIC_400, + }, + psychicThemeAtkCircle: { + backgroundColor: THEME_TYPE_PSYCHIC_900, + }, + + /** +Rock Theme +**/ + rockThemeAtkLine: { + backgroundColor: THEME_TYPE_ROCK_400, + }, + rockThemeAtkCircle: { + backgroundColor: THEME_TYPE_ROCK_900, + }, + + /** +Steel Theme +**/ + steelThemeAtkLine: { + backgroundColor: THEME_TYPE_ROCK_400, + }, + steelThemeAtkCircle: { + backgroundColor: THEME_TYPE_ROCK_900, + }, + + /** +Water Theme +**/ + waterThemeAtkLine: { + backgroundColor: THEME_TYPE_WATER_400, + }, + waterThemeAtkCircle: { + backgroundColor: THEME_TYPE_WATER_900, + }, }); diff --git a/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx b/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx index cf7e0ce..00ec3a8 100644 --- a/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx +++ b/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx @@ -8,7 +8,7 @@ import { TypographyTypeEnum, UiHideInMobile, } from '@pokemon-pet-shop/ui'; -import { classNamesUtil } from '@pokemon-pet-shop/utils'; +import { capitalizeNameUtil, classNamesUtil } from '@pokemon-pet-shop/utils'; import { PokemonAbilityNameProps } from './pokemon.ability.name.interface'; import { styles } from './pokemon.ability.name.module'; @@ -34,9 +34,7 @@ const PokemonAbilityName = ({ const splitName = abilityData?.ability?.name.split('-'); const capitalizeName = splitName.map((el) => { - return el?.replace(/^\w/, (el) => { - return el.toUpperCase(); - }); + return capitalizeNameUtil(el); }); return capitalizeName.join(' '); diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css index eca7ff9..b704718 100644 --- a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css +++ b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css @@ -13,7 +13,7 @@ border-radius: var(--theme-radius-8); padding: var(--theme-spacing-5); display: flex; - justify-content: space-between; + justify-content: center; flex-direction: column; } @@ -30,7 +30,8 @@ flex-direction: column; justify-content: space-between; width: 100%; - padding: var(--theme-spacing-2) var(--theme-spacing-5); + border-radius: var(--theme-radius-8); + padding: var(--theme-spacing-10) var(--theme-spacing-10); } .cardSubHeadlineWrapper { @@ -41,7 +42,7 @@ } .cardSubHeadline { - font-size: var(--theme-font-10); + font-size: var(--theme-font-13); } .cardHeadline { @@ -99,7 +100,6 @@ .contentCardWrapper { height: 150px; align-items: end; - border-radius: var(--theme-radius-8); padding: var(--theme-spacing-15); z-index: 1; display: flex; @@ -134,7 +134,7 @@ Grass Theme } .grassThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -149,7 +149,7 @@ Bug Theme } .bugThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -179,7 +179,7 @@ Dragon Theme } .dragonThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -194,7 +194,7 @@ Electric Theme } .electricThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -209,7 +209,7 @@ Fairy Theme } .fairyThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -224,7 +224,7 @@ Fighting Theme } .fightingThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -239,7 +239,7 @@ Fire Theme } .fireThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -254,7 +254,7 @@ Flying Theme } .flyingThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -269,7 +269,7 @@ Ghost Theme } .ghostThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -284,7 +284,7 @@ Ground Theme } .groundThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -299,7 +299,7 @@ Ice Theme } .iceThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -314,7 +314,7 @@ Normal Theme } .normalThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -329,7 +329,7 @@ Poison Theme } .poisonThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -344,7 +344,7 @@ Psychic Theme } .psychicThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -359,7 +359,7 @@ Rock Theme } .rockThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -374,7 +374,7 @@ Steel Theme } .steelThemeContentCardText { - color: white; + color: var(--theme-netural-100); } /** @@ -389,5 +389,5 @@ Water Theme } .waterThemeContentCardText { - color: white; + color: var(--theme-netural-100); } diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.native.ts b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.native.ts index ac59675..a5a7643 100644 --- a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.native.ts +++ b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.native.ts @@ -1,3 +1,49 @@ +import { + THEME_FONT_10, + THEME_FONT_13, + THEME_FONT_18, + THEME_NETURAL_100, + THEME_RADIUS_8, + THEME_SPACING_10, + THEME_SPACING_15, + THEME_SPACING_5, + THEME_TYPE_BUG_600, + THEME_TYPE_BUG_800, + THEME_TYPE_DARK_600, + THEME_TYPE_DARK_800, + THEME_TYPE_DRAGON_600, + THEME_TYPE_DRAGON_800, + THEME_TYPE_ELECTRIC_600, + THEME_TYPE_ELECTRIC_800, + THEME_TYPE_FAIRY_600, + THEME_TYPE_FAIRY_800, + THEME_TYPE_FIGHTING_600, + THEME_TYPE_FIGHTING_800, + THEME_TYPE_FIRE_600, + THEME_TYPE_FIRE_800, + THEME_TYPE_FLYING_600, + THEME_TYPE_FLYING_800, + THEME_TYPE_GHOST_600, + THEME_TYPE_GHOST_800, + THEME_TYPE_GRASS_600, + THEME_TYPE_GRASS_800, + THEME_TYPE_GROUND_600, + THEME_TYPE_GROUND_800, + THEME_TYPE_ICE_600, + THEME_TYPE_ICE_800, + THEME_TYPE_NORMAL_600, + THEME_TYPE_NORMAL_800, + THEME_TYPE_POISON_600, + THEME_TYPE_POISON_800, + THEME_TYPE_PSYCHIC_600, + THEME_TYPE_PSYCHIC_800, + THEME_TYPE_ROCK_600, + THEME_TYPE_ROCK_800, + THEME_TYPE_STEEL_600, + THEME_TYPE_STEEL_800, + THEME_TYPE_WATER_600, + THEME_TYPE_WATER_800, +} from '@pokemon-pet-shop/ui/styles/var'; import { StyleSheet } from 'react-native'; export const styles = StyleSheet.create({ @@ -5,22 +51,20 @@ export const styles = StyleSheet.create({ flex: 1, height: 154, display: 'flex', - padding: 5, - marginLeft: 15, - marginRight: 15, - marginBottom: 15, - borderRadius: 10, + padding: THEME_SPACING_5, + marginLeft: THEME_SPACING_15, + marginRight: THEME_SPACING_15, + marginBottom: THEME_SPACING_15, + borderRadius: THEME_RADIUS_8, flexDirection: 'row', position: 'relative', - backgroundColor: 'purple', }, imgCardWrapper: { maxWidth: 115, - backgroundColor: 'red', - borderRadius: 10, - padding: 5, + borderRadius: THEME_RADIUS_8, + padding: THEME_SPACING_5, display: 'flex', - justifyContent: 'space-between', + justifyContent: 'center', flexDirection: 'column', }, price: { @@ -35,49 +79,28 @@ export const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'space-between', flex: 1, - paddingTop: 2, - paddingBottom: 2, - paddingLeft: 10, - paddingRight: 10, + borderRadius: THEME_RADIUS_8, + paddingTop: THEME_SPACING_10, + paddingBottom: THEME_SPACING_10, + paddingLeft: THEME_SPACING_10, + paddingRight: THEME_SPACING_10, }, cardSubHeadlineWrapper: { display: 'flex', - backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between', + marginBottom: THEME_SPACING_10, }, cardSubHeadline: { - fontSize: 10, + fontSize: THEME_FONT_13, }, cardHeadline: { - fontSize: 18, - }, - atkWrapper: { - display: 'flex', - flexDirection: 'row', - height: 17, - width: '100%', - alignItems: 'center', - marginBottom: 5, - }, - atkLine: {}, - atkCircle: { - height: 17, - width: 17, - borderRadius: 100, - marginRight: 5, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }, - atkText: { - fontSize: 13, + fontSize: THEME_FONT_18, }, btnWrapper: { display: 'flex', flexDirection: 'row', - backgroundColor: 'green', - gap: 15, + gap: THEME_SPACING_15, }, btn: { flex: 1, @@ -86,16 +109,216 @@ export const styles = StyleSheet.create({ Grass Theme **/ grassThemeWrapper: { - backgroundColor: 'green', - }, - // contentCardWrapper: { - // color: 'white', - // backgroundColor: 'darkgreen', - // }, - // atkLine: { - // backgroundColor: 'greenyellow', - // }, - // atkCircle: { - // backgroundColor: 'lightgreen', - // }, + backgroundColor: THEME_TYPE_GRASS_600, + }, + grassThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_GRASS_800, + }, + grassThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Bug Theme + **/ + bugThemeWrapper: { + backgroundColor: THEME_TYPE_BUG_600, + }, + bugThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_BUG_800, + }, + bugThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Dark Theme + **/ + darkThemeWrapper: { + backgroundColor: THEME_TYPE_DARK_600, + }, + darkThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_DARK_800, + }, + darkThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Dragon Theme + **/ + dragonThemeWrapper: { + backgroundColor: THEME_TYPE_DRAGON_600, + }, + dragonThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_DRAGON_800, + }, + dragonThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Electric Theme + **/ + electricThemeWrapper: { + backgroundColor: THEME_TYPE_ELECTRIC_600, + }, + electricThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_ELECTRIC_800, + }, + electricThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Fairy Theme + **/ + fairyThemeWrapper: { + backgroundColor: THEME_TYPE_FAIRY_600, + }, + fairyThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_FAIRY_800, + }, + fairyThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Fighting Theme + **/ + fightingThemeWrapper: { + backgroundColor: THEME_TYPE_FIGHTING_600, + }, + fightingThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_FIGHTING_800, + }, + fightingThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Fire Theme + **/ + fireThemeWrapper: { + backgroundColor: THEME_TYPE_FIRE_600, + }, + fireThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_FIRE_800, + }, + fireThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Flying Theme + **/ + flyingThemeWrapper: { + backgroundColor: THEME_TYPE_FLYING_600, + }, + flyingThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_FLYING_800, + }, + flyingThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Ghost Theme + **/ + ghostThemeWrapper: { + backgroundColor: THEME_TYPE_GHOST_600, + }, + ghostThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_GHOST_800, + }, + ghostThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Ground Theme + **/ + groundThemeWrapper: { + backgroundColor: THEME_TYPE_GROUND_600, + }, + groundThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_GROUND_800, + }, + groundThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Ice Theme + **/ + iceThemeWrapper: { + backgroundColor: THEME_TYPE_ICE_600, + }, + iceThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_ICE_800, + }, + iceThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Normal Theme + **/ + normalThemeWrapper: { + backgroundColor: THEME_TYPE_NORMAL_600, + }, + normalThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_NORMAL_800, + }, + normalThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Poison Theme + **/ + poisonThemeWrapper: { + backgroundColor: THEME_TYPE_POISON_600, + }, + poisonThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_POISON_800, + }, + poisonThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Psychic Theme + **/ + psychicThemeWrapper: { + backgroundColor: THEME_TYPE_PSYCHIC_600, + }, + psychicThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_PSYCHIC_800, + }, + psychicThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Rock Theme + **/ + rockThemeWrapper: { + backgroundColor: THEME_TYPE_ROCK_600, + }, + rockThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_ROCK_800, + }, + rockThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Steel Theme + **/ + steelThemeWrapper: { + backgroundColor: THEME_TYPE_STEEL_600, + }, + steelThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_STEEL_800, + }, + steelThemeContentCardText: { + color: THEME_NETURAL_100, + }, + /** + Water Theme + **/ + waterThemeWrapper: { + backgroundColor: THEME_TYPE_WATER_600, + }, + waterThemeContentCardWrapper: { + backgroundColor: THEME_TYPE_WATER_800, + }, + waterThemeContentCardText: { + color: THEME_NETURAL_100, + }, }); diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx index 8c23d3a..e3c7116 100644 --- a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx +++ b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx @@ -11,7 +11,7 @@ import { UiCard, mobSrcTypeEnum, } from '@pokemon-pet-shop/ui'; -import { classNamesUtil } from '@pokemon-pet-shop/utils'; +import { capitalizeNameUtil, classNamesUtil } from '@pokemon-pet-shop/utils'; import { UiPokemonAbilityName } from '../components/pokemon.ability.name'; @@ -22,10 +22,8 @@ import usePokemonCardLogic from './use.pokemon.card.logic'; const PokemonCard = ({ data }: CardProps): ReactElement => { const { getThemeClass, onHandleOpenDetailModalClick } = usePokemonCardLogic(data); - const capitalizeName = useMemo(() => { - return data?.name.replace(/^\w/, (el) => { - return el.toUpperCase(); - }); + const capitalizeName = useMemo((): string => { + return capitalizeNameUtil(data?.name); }, [data?.name]); return ( diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx b/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx index eedb80f..3fdf708 100644 --- a/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx +++ b/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx @@ -14,7 +14,7 @@ import { ButtonSizeEnum, } from '@pokemon-pet-shop/ui'; import { globalStyles } from '@pokemon-pet-shop/ui/styles/global'; -import { classNamesUtil } from '@pokemon-pet-shop/utils'; +import { capitalizeNameUtil, classNamesUtil } from '@pokemon-pet-shop/utils'; import { UiPokemonAbilityName } from '../components/pokemon.ability.name'; import { usePokemonThemeLogic } from '../hooks/use.pokemon.theme.logic'; @@ -35,10 +35,8 @@ const PokemonDetailModal = (): ReactElement => { const { getThemeClass } = usePokemonThemeLogic(modalData?.types); const { newStyles } = useRenderStyles(styles); - const capitalizeName = useMemo(() => { - return modalData?.name.replace(/^\w/, (el) => { - return el.toUpperCase(); - }); + const capitalizeName = useMemo((): string => { + return capitalizeNameUtil(modalData?.name); }, [modalData?.name]); return ( diff --git a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx b/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx index 7ac699e..08af16e 100644 --- a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx +++ b/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.view.tsx @@ -13,6 +13,9 @@ const PokemonList = (): ReactElement => { const { data, isError, isLoading, isFetching, isFetchingNextPage, hasNextPage, onFetchNextPage } = usePokemonList(); + console.log('isLoading', isLoading); + console.log('isFetching', isFetching); + return ( <> diff --git a/libs/ui/src/lib-base/styles/ts/variables.ts b/libs/ui/src/lib-base/styles/ts/variables.ts index 601e290..90c5a33 100644 --- a/libs/ui/src/lib-base/styles/ts/variables.ts +++ b/libs/ui/src/lib-base/styles/ts/variables.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 19 Sep 2024 01:49:53 GMT + * Generated on Sat, 21 Sep 2024 03:13:43 GMT */ export const THEME_NETURAL_100 = '#ffffffff'; @@ -47,28 +47,28 @@ export const THEME_RED_400 = '#f76767ff'; export const THEME_RED_600 = '#d63535ff'; export const THEME_RED_800 = '#ab0e0eff'; export const THEME_RED_900 = '#7a0a0aff'; -export const THEME_FONT_10 = '10px'; -export const THEME_FONT_13 = '13px'; -export const THEME_FONT_16 = '16px'; -export const THEME_FONT_18 = '18px'; -export const THEME_FONT_24 = '24px'; -export const THEME_RADIUS_8 = '8px'; -export const THEME_RADIUS_16 = '16px'; -export const THEME_RADIUS_PILL = '100px'; -export const THEME_RADIUS_CIRCLE = '100px'; -export const THEME_BREAKPOINTS_LG = '1280px'; -export const THEME_BREAKPOINTS_MD = '736px'; -export const THEME_BREAKPOINTS_SM = '375px'; -export const THEME_SPACING_2 = '2px'; -export const THEME_SPACING_5 = '5px'; -export const THEME_SPACING_10 = '10px'; -export const THEME_SPACING_15 = '15px'; -export const THEME_SPACING_20 = '20px'; -export const THEME_SPACING_25 = '25px'; -export const THEME_SPACING_30 = '30px'; -export const THEME_SPACING_35 = '35px'; -export const THEME_SPACING_40 = '40px'; -export const THEME_SPACING_45 = '45px'; +export const THEME_FONT_10 = 10; +export const THEME_FONT_13 = 13; +export const THEME_FONT_16 = 16; +export const THEME_FONT_18 = 18; +export const THEME_FONT_24 = 24; +export const THEME_RADIUS_8 = 8; +export const THEME_RADIUS_16 = 16; +export const THEME_RADIUS_PILL = 100; +export const THEME_RADIUS_CIRCLE = 100; +export const THEME_BREAKPOINTS_LG = 1280; +export const THEME_BREAKPOINTS_MD = 736; +export const THEME_BREAKPOINTS_SM = 375; +export const THEME_SPACING_2 = 2; +export const THEME_SPACING_5 = 5; +export const THEME_SPACING_10 = 10; +export const THEME_SPACING_15 = 15; +export const THEME_SPACING_20 = 20; +export const THEME_SPACING_25 = 25; +export const THEME_SPACING_30 = 30; +export const THEME_SPACING_35 = 35; +export const THEME_SPACING_40 = 40; +export const THEME_SPACING_45 = 45; export const THEME_TYPE_GRASS_100 = '#b1e6bbff'; export const THEME_TYPE_GRASS_200 = '#69b076ff'; export const THEME_TYPE_GRASS_400 = '#579d63ff'; diff --git a/libs/ui/src/lib-base/ui/icon/assets/shopping-cart.svg b/libs/ui/src/lib-base/ui/icon/assets/shopping-cart.svg new file mode 100644 index 0000000..f18b03e --- /dev/null +++ b/libs/ui/src/lib-base/ui/icon/assets/shopping-cart.svg @@ -0,0 +1,18 @@ + + + + + + + \ No newline at end of file diff --git a/libs/ui/src/lib-base/ui/icon/icons/icon.shopping.cart.native.tsx b/libs/ui/src/lib-base/ui/icon/icons/icon.shopping.cart.native.tsx index 868be78..5e8b88d 100644 --- a/libs/ui/src/lib-base/ui/icon/icons/icon.shopping.cart.native.tsx +++ b/libs/ui/src/lib-base/ui/icon/icons/icon.shopping.cart.native.tsx @@ -19,8 +19,10 @@ const IconShoppingCart = ({ size, fill, onClick }: IconSvgProps): ReactElement = stroke-linejoin="round" > - - + + + + ); diff --git a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.view.tsx b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.view.tsx index a44f9b7..f8e3b2b 100644 --- a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.view.tsx +++ b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.view.tsx @@ -1,6 +1,6 @@ import { memo, useMemo, type PropsWithChildren, type ReactElement } from 'react'; -import { classNamesUtil } from '@pokemon-pet-shop/utils'; +import { capitalizeNameUtil, classNamesUtil } from '@pokemon-pet-shop/utils'; import { UiTypography, TypographyTypeEnum } from '../../typography'; @@ -12,10 +12,8 @@ const Tag = ({ name = '', colorTheme = TagItemColorEnum.GRASS, }: PropsWithChildren): ReactElement => { - const capitalizeName = useMemo(() => { - return name.replace(/^\w/, (el) => { - return el.toUpperCase(); - }); + const capitalizeName = useMemo((): string => { + return capitalizeNameUtil(name); }, [name]); return ( diff --git a/libs/utils/src/lib-base/utils/text-transform.util.ts b/libs/utils/src/lib-base/utils/text-transform.util.ts index 7dd6fcf..38e15a3 100644 --- a/libs/utils/src/lib-base/utils/text-transform.util.ts +++ b/libs/utils/src/lib-base/utils/text-transform.util.ts @@ -3,3 +3,9 @@ export const capitalizeContentUtil = (str: string): string => { return el.toUpperCase(); }); }; + +export const capitalizeNameUtil = (name: string): string => { + return name.replace(/^\w/, (el: string) => { + return el.toUpperCase(); + }); +};