diff --git a/libs/features/src/lib/footer/footer.module.native.ts b/libs/features/src/lib/footer/footer.module.native.ts index 0925f80..a5a2124 100644 --- a/libs/features/src/lib/footer/footer.module.native.ts +++ b/libs/features/src/lib/footer/footer.module.native.ts @@ -1,20 +1,35 @@ -import { THEME_SPACING_10, THEME_SPACING_5 } from '@pokemon-pet-shop/ui/styles/var'; +import { + THEME_SPACING_10, + THEME_SPACING_15, + THEME_SPACING_45, +} from '@pokemon-pet-shop/ui/styles/var'; import { StyleSheet } from 'react-native'; -export const styles = () => - StyleSheet.create({ - footerWrapper: { - display: 'flex', - justifyContent: 'center', - }, - githubWrapper: { - display: 'flex', - }, - githubIcon: { - marginRight: THEME_SPACING_5, - }, - footerDivider: { - paddingLeft: THEME_SPACING_10, - paddingRight: THEME_SPACING_10, - }, - }); +export const styles = StyleSheet.create({ + footerWrapper: { + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + marginBottom: THEME_SPACING_45, + }, + githubWrapper: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexDirection: 'column', + marginBottom: THEME_SPACING_15, + }, + githubIcon: { + marginRight: THEME_SPACING_10, + }, + scanWrapper: { + display: 'flex', + alignItems: 'center', + flexDirection: 'row', + marginBottom: THEME_SPACING_15, + }, + footerDivider: { + display: 'none', + }, +}); diff --git a/libs/features/src/lib/footer/footer.tsx b/libs/features/src/lib/footer/footer.tsx index f11a918..78dac98 100644 --- a/libs/features/src/lib/footer/footer.tsx +++ b/libs/features/src/lib/footer/footer.tsx @@ -1,5 +1,5 @@ import { ThemeTypeEnum, useThemeStore } from '@pokemon-pet-shop/store'; -import { IconTypeEnum, UiElementLayout, UiIcon, UiTypography } from '@pokemon-pet-shop/ui'; +import { IconTypeEnum, UiElementLayout, UiIcon, UiLink, UiTypography } from '@pokemon-pet-shop/ui'; import { THEME_NETURAL_100, THEME_NETURAL_900 } from '@pokemon-pet-shop/ui/styles/var'; import { styles } from './footer.module'; @@ -7,13 +7,12 @@ import { styles } from './footer.module'; const Footer = () => { const { theme } = useThemeStore(); - const goToGithubProject = () => { - window.open('https://github.com/AnselmMarie/pokemon-pet-shop', '_blank'); - }; - return ( - + { color={theme === ThemeTypeEnum.LIGHT ? THEME_NETURAL_900 : THEME_NETURAL_100} /> Github Project - + | diff --git a/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx b/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx index 3e01e2d..a51dc26 100644 --- a/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx +++ b/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx @@ -1,10 +1,9 @@ import { memo, ReactElement, useEffect } from 'react'; import { ThemeTypeEnum, useThemeStore } from '@pokemon-pet-shop/store'; -import { DetectEnum } from '@pokemon-pet-shop/typing'; import { IconTypeEnum, SwitchStatusEnum, UiSwitch } from '@pokemon-pet-shop/ui'; import { variableThemeMode } from '@pokemon-pet-shop/ui/styles/var'; -import { detectUtil } from '@pokemon-pet-shop/utils'; +import { isWebUtil } from '@pokemon-pet-shop/utils'; import { SwitchProps } from './switch.theme.interface'; @@ -15,7 +14,7 @@ const SwitchTheme = ({ className }: SwitchProps): ReactElement => { const varThemeMode = variableThemeMode(newTheme); updateTheme(newTheme, varThemeMode); - if (detectUtil() === DetectEnum.IS_WEB) { + if (isWebUtil()) { const el = document.querySelector('html'); el?.setAttribute('data-theme', newTheme); } @@ -30,7 +29,7 @@ const SwitchTheme = ({ className }: SwitchProps): ReactElement => { }; useEffect(() => { - if (detectUtil() === DetectEnum.IS_WEB) { + if (isWebUtil()) { const el = document.querySelector('html'); el?.setAttribute('data-theme', theme); } diff --git a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.css b/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.css index fbcf27a..7a0bd46 100644 --- a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.css +++ b/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.css @@ -14,7 +14,8 @@ } .btnWrapper { - text-align: center; + display: flex; + justify-content: center; margin-top: var(--theme-spacing-35); margin-bottom: var(--theme-spacing-35); } diff --git a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.native.ts b/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.native.ts index 2f6f4ed..6fe355d 100644 --- a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.native.ts +++ b/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.native.ts @@ -1,5 +1,6 @@ import { THEME_SPACING_15, + THEME_SPACING_25, THEME_SPACING_35, THEME_SPACING_45, } from '@pokemon-pet-shop/ui/styles/var'; @@ -23,7 +24,7 @@ export const styles = StyleSheet.create({ textAlign: 'center', marginLeft: THEME_SPACING_15, marginRight: THEME_SPACING_15, - marginTop: THEME_SPACING_35, + marginTop: THEME_SPACING_25, marginBottom: THEME_SPACING_45, }, }); diff --git a/libs/hooks/src/lib/use.render.styles.ts b/libs/hooks/src/lib/use.render.styles.ts index 775495b..e9cd090 100644 --- a/libs/hooks/src/lib/use.render.styles.ts +++ b/libs/hooks/src/lib/use.render.styles.ts @@ -1,13 +1,12 @@ import { useMemo } from 'react'; import { useThemeStore } from '@pokemon-pet-shop/store'; -import { DetectEnum } from '@pokemon-pet-shop/typing'; -import { detectUtil } from '@pokemon-pet-shop/utils'; +import { isWebUtil } from '@pokemon-pet-shop/utils'; export const useRenderStyles = (styles: any): any => { const { varThemeMode } = useThemeStore(); const newStyles = useMemo(() => { - if (detectUtil() === DetectEnum.IS_WEB) { + if (isWebUtil()) { return styles; } diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts index c508255..d06836f 100644 --- a/libs/ui/src/index.ts +++ b/libs/ui/src/index.ts @@ -17,3 +17,4 @@ export * from './lib-base/ui/tag'; export * from './lib-base/ui/switch'; export * from './lib-base/ui/skeleton'; export * from './lib-base/ui/scroll.wrapper'; +export * from './lib-base/ui/link'; diff --git a/libs/ui/src/lib-base/ui/element.layout/element.layout.view.native.tsx b/libs/ui/src/lib-base/ui/element.layout/element.layout.view.native.tsx index 9e5ebb1..704e9be 100644 --- a/libs/ui/src/lib-base/ui/element.layout/element.layout.view.native.tsx +++ b/libs/ui/src/lib-base/ui/element.layout/element.layout.view.native.tsx @@ -11,8 +11,8 @@ const ElementLayout = ({ }: PropsWithChildren): ReactElement => { if (onClick !== null) { return ( - - {children} + + {children} ); } diff --git a/libs/ui/src/lib-base/ui/icon/icon.view.tsx b/libs/ui/src/lib-base/ui/icon/icon.view.tsx index e929bba..343a135 100644 --- a/libs/ui/src/lib-base/ui/icon/icon.view.tsx +++ b/libs/ui/src/lib-base/ui/icon/icon.view.tsx @@ -34,8 +34,6 @@ const Icon = ({ const disabledStyles = isDisabled ? globalStyles.disabledElement : ''; const clickableStyles = onClick ? globalStyles.pointerCursor : ''; - console.log('IconComponent', IconComponent); - return ( ): ReactElement => { + const goToLink = () => { + if (link) { + openLinkUtil(link); + } + }; + + return ( + + {children} + + ); +}; + +export default Link; diff --git a/libs/ui/src/lib-base/ui/link/open.link.util.native.ts b/libs/ui/src/lib-base/ui/link/open.link.util.native.ts new file mode 100644 index 0000000..cf7e020 --- /dev/null +++ b/libs/ui/src/lib-base/ui/link/open.link.util.native.ts @@ -0,0 +1,6 @@ +import * as Linking from 'expo-linking'; + +export const openLinkUtil = (link: string) => { + console.log('link', link); + Linking.openURL(link); +}; diff --git a/libs/ui/src/lib-base/ui/link/open.link.util.ts b/libs/ui/src/lib-base/ui/link/open.link.util.ts new file mode 100644 index 0000000..1cc80a9 --- /dev/null +++ b/libs/ui/src/lib-base/ui/link/open.link.util.ts @@ -0,0 +1,3 @@ +export const openLinkUtil = (link: string) => { + window.open(link, '_blank'); +}; diff --git a/libs/ui/src/lib-base/ui/typography/typography.interface.ts b/libs/ui/src/lib-base/ui/typography/typography.interface.ts index 8f419b0..c5dcf7f 100644 --- a/libs/ui/src/lib-base/ui/typography/typography.interface.ts +++ b/libs/ui/src/lib-base/ui/typography/typography.interface.ts @@ -3,4 +3,5 @@ import { TypographyTypeEnum } from './typography.enum'; export interface TypographyProps { typographyType?: TypographyTypeEnum; className?: any; + onClick?: any; } diff --git a/libs/ui/src/lib-base/ui/typography/typography.view.native.tsx b/libs/ui/src/lib-base/ui/typography/typography.view.native.tsx index a0c7bcb..a9a7fd3 100644 --- a/libs/ui/src/lib-base/ui/typography/typography.view.native.tsx +++ b/libs/ui/src/lib-base/ui/typography/typography.view.native.tsx @@ -7,8 +7,13 @@ import { TypographyProps } from './typography.interface'; const Typography = ({ className = '', children = null, + onClick, }: PropsWithChildren): ReactElement => { - return {children}; + return ( + + {children} + + ); }; export default memo(Typography); diff --git a/libs/ui/src/lib-base/ui/typography/typography.view.tsx b/libs/ui/src/lib-base/ui/typography/typography.view.tsx index a041f0e..ee77913 100644 --- a/libs/ui/src/lib-base/ui/typography/typography.view.tsx +++ b/libs/ui/src/lib-base/ui/typography/typography.view.tsx @@ -6,9 +6,10 @@ import { TypographyProps } from './typography.interface'; const Typography = ({ typographyType = TypographyTypeEnum.P, className = '', + onClick, children = null, }: PropsWithChildren): ReactElement => { - return createElement(typographyType, { className }, children); + return createElement(typographyType, { className, onClick }, children); }; export default memo(Typography); diff --git a/libs/utils/src/lib-base/utils/detect.util.native.ts b/libs/utils/src/lib-base/utils/detect.util.native.ts index 5cff509..26d9331 100644 --- a/libs/utils/src/lib-base/utils/detect.util.native.ts +++ b/libs/utils/src/lib-base/utils/detect.util.native.ts @@ -1,3 +1,11 @@ export const detectUtil = () => { return 'isNative'; }; + +export const isWebUtil = () => { + return false; +}; + +export const isNativeUtil = () => { + return true; +}; diff --git a/libs/utils/src/lib-base/utils/detect.util.ts b/libs/utils/src/lib-base/utils/detect.util.ts index 68c1d85..39f37fc 100644 --- a/libs/utils/src/lib-base/utils/detect.util.ts +++ b/libs/utils/src/lib-base/utils/detect.util.ts @@ -1,3 +1,11 @@ export const detectUtil = () => { return 'isWeb'; }; + +export const isWebUtil = () => { + return true; +}; + +export const isNativeUtil = () => { + return false; +}; diff --git a/package-lock.json b/package-lock.json index 5e3a472..cf0e5dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,8 @@ "classnames": "^2.5.1", "cors": "^2.8.5", "eslint-plugin-prettier": "^5.2.1", - "expo": "^51.0.34", + "expo": "^51.0.36", + "expo-linking": "^6.3.1", "expo-secure-store": "^13.0.2", "expo-splash-screen": "~0.27.4", "expo-status-bar": "~1.12.1", @@ -3166,9 +3167,9 @@ } }, "node_modules/@expo/cli": { - "version": "0.18.29", - "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.18.29.tgz", - "integrity": "sha512-X810C48Ss+67RdZU39YEO1khNYo1RmjouRV+vVe0QhMoTe8R6OA3t+XYEdwaNbJ5p/DJN7szfHfNmX2glpC7xg==", + "version": "0.18.30", + "resolved": "https://registry.npmjs.org/@expo/cli/-/cli-0.18.30.tgz", + "integrity": "sha512-V90TUJh9Ly8stYo8nwqIqNWCsYjE28GlVFWEhAFCUOp99foiQr8HSTpiiX5GIrprcPoWmlGoY+J5fQA29R4lFg==", "dependencies": { "@babel/runtime": "^7.20.0", "@expo/code-signing-certificates": "0.0.5", @@ -3182,7 +3183,7 @@ "@expo/osascript": "^2.0.31", "@expo/package-manager": "^1.5.0", "@expo/plist": "^0.1.0", - "@expo/prebuild-config": "7.0.8", + "@expo/prebuild-config": "7.0.9", "@expo/rudder-sdk-node": "1.1.1", "@expo/spawn-async": "^1.7.2", "@expo/xcpretty": "^4.3.0", @@ -3588,13 +3589,13 @@ } }, "node_modules/@expo/config": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@expo/config/-/config-9.0.3.tgz", - "integrity": "sha512-eOTNM8eOC8gZNHgenySRlc/lwmYY1NOgvjwA8LHuvPT7/eUwD93zrxu3lPD1Cc/P6C/2BcVdfH4hf0tLmDxnsg==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@expo/config/-/config-9.0.4.tgz", + "integrity": "sha512-g5ns5u1JSKudHYhjo1zaSfkJ/iZIcWmUmIQptMJZ6ag1C0ShL2sj8qdfU8MmAMuKLOgcIfSaiWlQnm4X3VJVkg==", "dependencies": { "@babel/code-frame": "~7.10.4", "@expo/config-plugins": "~8.0.8", - "@expo/config-types": "^51.0.0-unreleased", + "@expo/config-types": "^51.0.3", "@expo/json-file": "^8.3.0", "getenv": "^1.0.0", "glob": "7.1.6", @@ -3606,11 +3607,11 @@ } }, "node_modules/@expo/config-plugins": { - "version": "8.0.9", - "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-8.0.9.tgz", - "integrity": "sha512-dNCG45C7BbDPV9MdWvCbsFtJtVn4w/TJbb5b7Yr6FA8HYIlaaVM0wqUMzTPmGj54iYXw8X/Vge8uCPxg7RWgeA==", + "version": "8.0.10", + "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-8.0.10.tgz", + "integrity": "sha512-KG1fnSKRmsudPU9BWkl59PyE0byrE2HTnqbOrgwr2FAhqh7tfr9nRs6A9oLS/ntpGzmFxccTEcsV0L4apsuxxg==", "dependencies": { - "@expo/config-types": "^51.0.0-unreleased", + "@expo/config-types": "^51.0.3", "@expo/json-file": "~8.3.0", "@expo/plist": "^0.1.0", "@expo/sdk-runtime-versions": "^1.0.0", @@ -3711,9 +3712,9 @@ } }, "node_modules/@expo/config-types": { - "version": "51.0.2", - "resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-51.0.2.tgz", - "integrity": "sha512-IglkIoiDwJMY01lYkF/ZSBoe/5cR+O3+Gx6fpLFjLfgZGBTdyPkKa1g8NWoWQCk+D3cKL2MDbszT2DyRRB0YqQ==" + "version": "51.0.3", + "resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-51.0.3.tgz", + "integrity": "sha512-hMfuq++b8VySb+m9uNNrlpbvGxYc8OcFCUX9yTmi9tlx6A4k8SDabWFBgmnr4ao3wEArvWrtUQIfQCVtPRdpKA==" }, "node_modules/@expo/config/node_modules/@babel/code-frame": { "version": "7.10.4", @@ -4289,13 +4290,13 @@ } }, "node_modules/@expo/prebuild-config": { - "version": "7.0.8", - "resolved": "https://registry.npmjs.org/@expo/prebuild-config/-/prebuild-config-7.0.8.tgz", - "integrity": "sha512-wH9NVg6HiwF5y9x0TxiMEeBF+ITPGDXy5/i6OUheSrKpPgb0lF1Mwzl/f2fLPXBEpl+ZXOQ8LlLW32b7K9lrNg==", + "version": "7.0.9", + "resolved": "https://registry.npmjs.org/@expo/prebuild-config/-/prebuild-config-7.0.9.tgz", + "integrity": "sha512-9i6Cg7jInpnGEHN0jxnW0P+0BexnePiBzmbUvzSbRXpdXihYUX2AKMu73jgzxn5P1hXOSkzNS7umaY+BZ+aBag==", "dependencies": { "@expo/config": "~9.0.0-beta.0", "@expo/config-plugins": "~8.0.8", - "@expo/config-types": "^51.0.0-unreleased", + "@expo/config-types": "^51.0.3", "@expo/image-utils": "^0.5.0", "@expo/json-file": "^8.3.0", "@react-native/normalize-colors": "0.74.85", @@ -22109,14 +22110,14 @@ "dev": true }, "node_modules/expo": { - "version": "51.0.34", - "resolved": "https://registry.npmjs.org/expo/-/expo-51.0.34.tgz", - "integrity": "sha512-l2oi+hIj/ph3qGcvM54Nyd2uF3Zq5caVmSg7AXfBUgtvcdv5Pj1EI/2xCXP9tfMNQo351CWyOwBkTGjv+GdrLg==", + "version": "51.0.36", + "resolved": "https://registry.npmjs.org/expo/-/expo-51.0.36.tgz", + "integrity": "sha512-eQIC0l6fz3p4cU/hV8+QcyKSacyROhaoA1oohfCD6I3F09dxmC8b3SESpzGqHfuq8wsgcUc4q8ckX7ec25IV1g==", "dependencies": { "@babel/runtime": "^7.20.0", - "@expo/cli": "0.18.29", - "@expo/config": "9.0.3", - "@expo/config-plugins": "8.0.9", + "@expo/cli": "0.18.30", + "@expo/config": "9.0.4", + "@expo/config-plugins": "8.0.10", "@expo/metro-config": "0.18.11", "@expo/vector-icons": "^14.0.3", "babel-preset-expo": "~11.0.14", @@ -22124,8 +22125,8 @@ "expo-file-system": "~17.0.1", "expo-font": "~12.0.10", "expo-keep-awake": "~13.0.2", - "expo-modules-autolinking": "1.11.2", - "expo-modules-core": "1.12.24", + "expo-modules-autolinking": "1.11.3", + "expo-modules-core": "1.12.25", "fbemitter": "^3.0.0", "whatwg-url-without-unicode": "8.0.0-3" }, @@ -22185,10 +22186,19 @@ "expo": "*" } }, + "node_modules/expo-linking": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-6.3.1.tgz", + "integrity": "sha512-xuZCntSBGWCD/95iZ+mTUGTwHdy8Sx+immCqbUBxdvZ2TN61P02kKg7SaLS8A4a/hLrSCwrg5tMMwu5wfKr35g==", + "dependencies": { + "expo-constants": "~16.0.0", + "invariant": "^2.2.4" + } + }, "node_modules/expo-modules-autolinking": { - "version": "1.11.2", - "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.11.2.tgz", - "integrity": "sha512-fdcaNO8ucHA3yLNY52ZUENBcAG7KEx8QyMmnVNavO1JVBGRMZG8JyVcbrhYQDtVtpxkbai5YzwvLutINvbDZDQ==", + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.11.3.tgz", + "integrity": "sha512-oYh8EZEvYF5TYppxEKUTTJmbr8j7eRRnrIxzZtMvxLTXoujThVPMFS/cbnSnf2bFm1lq50TdDNABhmEi7z0ngQ==", "dependencies": { "chalk": "^4.1.0", "commander": "^7.2.0", @@ -22260,9 +22270,9 @@ } }, "node_modules/expo-modules-core": { - "version": "1.12.24", - "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.12.24.tgz", - "integrity": "sha512-3geIe2ecizlp7l26iY8Nmc59z2d1RUC5nQZtI9iJoi5uHEUV/zut8e4zRLFVnZb8KOcMcEDsrvaBL5DPnqdfpg==", + "version": "1.12.25", + "resolved": "https://registry.npmjs.org/expo-modules-core/-/expo-modules-core-1.12.25.tgz", + "integrity": "sha512-HB2LS2LEM41Xq1bG+Jtzqm6XgPaa+mM9BAvCdX1lDGMQ9Ay9vMTL/GVEs2gpsINPofICopjBRwD+wftyCbVrzg==", "dependencies": { "invariant": "^2.2.4" } diff --git a/package.json b/package.json index cd1004a..9f4cbfe 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,8 @@ "classnames": "^2.5.1", "cors": "^2.8.5", "eslint-plugin-prettier": "^5.2.1", - "expo": "^51.0.34", + "expo": "^51.0.36", + "expo-linking": "^6.3.1", "expo-secure-store": "^13.0.2", "expo-splash-screen": "~0.27.4", "expo-status-bar": "~1.12.1",