Link component created • Updates to detect util and typography component

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',
+  },
+});

libs/features/src/lib/footer/footer.tsx

@@ -1,27 +1,26 @@
 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';
 
 const Footer = () => {
   const { theme } = useThemeStore();
 
-  const goToGithubProject = () => {
-    window.open('https://github.com/AnselmMarie/pokemon-pet-shop', '_blank');
-  };
-
   return (
     <UiElementLayout className={styles.footerWrapper}>
-      <UiElementLayout className={styles.githubWrapper} onClick={goToGithubProject}>
+      <UiLink
+        className={styles.githubWrapper}
+        link="https://github.com/AnselmMarie/pokemon-pet-shop"
+      >
         <UiIcon
           icon={IconTypeEnum.ICON_GITHUB}
           size={20}
           classNameIcon={styles.githubIcon}
           color={theme === ThemeTypeEnum.LIGHT ? THEME_NETURAL_900 : THEME_NETURAL_100}
         />
         <UiTypography>Github Project</UiTypography>
-      </UiElementLayout>
+      </UiLink>
       <UiTypography className={styles.footerDivider}>|</UiTypography>
       <UiElementLayout className={styles.scanWrapper}>
         <UiIcon color={theme === ThemeTypeEnum.LIGHT ? THEME_NETURAL_900 : THEME_NETURAL_100} />

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);
     }

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);
 }

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,
   },
 });

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;
     }
 

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';

libs/ui/src/lib-base/ui/element.layout/element.layout.view.native.tsx

@@ -11,8 +11,8 @@ const ElementLayout = ({
 }: PropsWithChildren<ElementLayoutProps>): ReactElement => {
   if (onClick !== null) {
     return (
-      <TouchableHighlight style={className} onPress={onClick}>
-        <View>{children}</View>
+      <TouchableHighlight onPress={onClick}>
+        <View style={className}>{children}</View>
       </TouchableHighlight>
     );
   }

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 (
       <IconComponent
         size={size}

libs/ui/src/lib-base/ui/link/index.ts

@@ -0,0 +1,3 @@
+import UiLink from './link';
+
+export { UiLink };

libs/ui/src/lib-base/ui/link/link.interface.ts

@@ -0,0 +1,4 @@
+export interface LinkProps {
+  className?: string;
+  link?: string | null;
+}

libs/ui/src/lib-base/ui/link/link.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren, ReactElement } from 'react';
+
+import { UiElementLayout } from '../element.layout';
+
+import { LinkProps } from './link.interface';
+import { openLinkUtil } from './open.link.util';
+
+const Link = ({
+  link = null,
+  className = '',
+  children,
+}: PropsWithChildren<LinkProps>): ReactElement => {
+  const goToLink = () => {
+    if (link) {
+      openLinkUtil(link);
+    }
+  };
+
+  return (
+    <UiElementLayout className={className} onClick={goToLink}>
+      {children}
+    </UiElementLayout>
+  );
+};
+
+export default Link;

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);
+};

libs/ui/src/lib-base/ui/link/open.link.util.ts

@@ -0,0 +1,3 @@
+export const openLinkUtil = (link: string) => {
+  window.open(link, '_blank');
+};

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;
 }

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<TypographyProps>): ReactElement => {
-  return <Text style={className}>{children}</Text>;
+  return (
+    <Text style={className} onPress={onClick}>
+      {children}
+    </Text>
+  );
 };
 
 export default memo(Typography);

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<TypographyProps>): ReactElement => {
-  return createElement(typographyType, { className }, children);
+  return createElement(typographyType, { className, onClick }, children);
 };
 
 export default memo(Typography);

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;
+};

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;
+};