224 homepage with factory (#229)

* wip: use factory instead of withTheme * remove withTheme hook usage, add: centralize breakpoint handling * style fixes * fix: handle copy in ui * add typing
GoodDollar · Oct 25, 2024 · 0707878 · 0707878
1 parent d1a291b
commit 0707878
Show file tree

Hide file tree

Showing 25 changed files with 401 additions and 503 deletions.
diff --git a/packages/app/README.md b/packages/app/README.md
diff --git a/packages/app/src/components/AboutCard.tsx b/packages/app/src/components/AboutCard.tsx
@@ -1,63 +1,61 @@
 import { Text, View } from 'native-base';
-import { withTheme } from '@gooddollar/good-design';
 
-export const theme = {
-  baseStyle: {
-    fontStyles: {
-      title: {
-        fontWeight: 700,
-        color: 'black',
-        fontFamily: 'heading',
-        fontSize: 'md',
-      },
-      subTitle: {
-        color: 'goodGrey.500',
-        fontWeight: 700,
-        lineHeight: 24,
-        fontFamily: 'heading',
-        fontSize: 'sm',
-      },
-      paragraph: {
-        color: 'goodGrey.500',
-        width: '100%',
-        lineHeight: 24,
-        fontWeight: 400,
-        fontSize: 'sm',
-      },
+export const aboutCardStyles = {
+  font: {
+    title: {
+      fontWeight: 700,
+      color: 'black',
+      fontFamily: 'heading',
+      fontSize: 'md',
     },
-    styles: {
-      aboutContainer: {
-        padding: 15,
-        marginBottom: 10,
-      },
-      mainContainer: {
-        width: '100%',
-        backgroundColor: 'white',
-        paddingVertical: 16,
-        paddingHorizontal: 12,
-        borderRadius: 20,
-        gap: 24,
-      },
-      elevation: {
-        shadowColor: 'black',
-        shadowOffset: {
-          width: 0,
-          height: 12,
-        },
-        shadowOpacity: 0.15,
-        shadowRadius: 15,
-        elevation: 24,
+    subTitle: {
+      color: 'goodGrey.500',
+      fontWeight: 700,
+      lineHeight: 24,
+      fontFamily: 'heading',
+      fontSize: 'sm',
+    },
+    paragraph: {
+      color: 'goodGrey.500',
+      width: '100%',
+      lineHeight: 24,
+      fontWeight: 400,
+      fontSize: 'sm',
+    },
+  },
+  container: {
+    aboutContainer: {
+      padding: 15,
+      marginBottom: 10,
+    },
+    mainContainer: {
+      width: '100%',
+      backgroundColor: 'white',
+      paddingVertical: 16,
+      paddingHorizontal: 12,
+      borderRadius: 20,
+      gap: 24,
+    },
+    elevation: {
+      shadowColor: 'black',
+      shadowOffset: {
+        width: 0,
+        height: 12,
       },
+      shadowOpacity: 0.15,
+      shadowRadius: 15,
+      elevation: 24,
     },
   },
 };
 
-const AboutCard = withTheme({ name: 'AboutCard' })(({ styles, fontStyles, ...props }: any) => {
-  const { title, subTitle, paragraph } = fontStyles;
+const AboutCard = () => {
+  const { font, container } = aboutCardStyles;
+  const { title, subTitle, paragraph } = font;
 
   return (
-    <View style={styles.aboutContainer}>
-      <View style={[styles.mainContainer, styles.elevation]}>
+    <View style={container.aboutContainer}>
+      <View style={[container.mainContainer, container.elevation]}>
         <Text {...title}>About Collective</Text>
         <Text {...paragraph}>
           GoodCollective makes visible the climate stewardship activities of individuals, and provides a direct channel
@@ -103,6 +101,6 @@ const AboutCard = withTheme({ name: 'AboutCard' })(({ styles, fontStyles, ...pro
       </View>
     </View>
   );
-});
+};
 
 export default AboutCard;
diff --git a/packages/app/src/components/ActionButton.tsx b/packages/app/src/components/ActionButton.tsx
@@ -1,5 +1,4 @@
 import { Box, Link, Pressable, Text, useBreakpointValue } from 'native-base';
-import { withTheme } from '@gooddollar/good-design';
 
 import { InterSemiBold } from '../utils/webFonts';
 
@@ -9,81 +8,74 @@ type ActionButtonProps = {
   bg: string;
   textColor: string;
   onPress?: any;
-  buttonStyles?: any;
 };
 
-export const theme = {
-  baseStyle: {
-    buttonStyles: {
-      buttonContainer: {
-        justifyContent: 'space-evenly',
-        marginTop: 2,
-      },
+export const buttonStyles = {
+  buttonContainer: {
+    justifyContent: 'space-evenly',
+    marginTop: 2,
+  },
+  button: {
+    width: '100%',
+    height: 47,
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingRight: 10,
+    paddingLeft: 10,
+    paddingBottom: 1,
+    fontSize: 'md',
+    fontWeight: 700,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    borderRadius: 50,
+  },
+  buttonText: {
+    ...InterSemiBold,
+    fontSize: 'md',
+  },
+};
+
+const ActionButton = ({ href, text, bg, textColor, onPress }: ActionButtonProps) => {
+  const responsiveStyles = useBreakpointValue({
+    base: {
       button: {
-        width: '100%',
+        ...buttonStyles.button,
+        justifyContent: 'center',
+      },
+      buttonText: {
+        ...buttonStyles.buttonText,
         height: 47,
-        flex: 1,
-        justifyContent: 'space-between',
+        display: 'flex',
         alignItems: 'center',
-        paddingRight: 10,
-        paddingLeft: 10,
-        paddingBottom: 1,
-        fontSize: 'md',
-        fontWeight: 700,
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        borderRadius: 50,
       },
-      buttonText: {
-        ...InterSemiBold,
-        fontSize: 'md',
+      buttonContainer: {
+        ...buttonStyles.buttonContainer,
+        width: '100%',
       },
     },
-  },
-};
+    lg: buttonStyles,
+  });
 
-const ActionButton = withTheme({ name: 'ActionButton' })(
-  ({ href, text, bg, textColor, onPress, buttonStyles }: ActionButtonProps) => {
-    const responsiveStyles = useBreakpointValue({
-      base: {
-        button: {
-          ...buttonStyles.button,
-          justifyContent: 'center',
-        },
-        buttonText: {
-          ...buttonStyles.buttonText,
-          height: 47,
-          display: 'flex',
-          alignItems: 'center',
-        },
-        buttonContainer: {
-          ...buttonStyles.buttonContainer,
-          width: '100%',
-        },
-      },
-      md: buttonStyles,
-    });
+  const { buttonContainer, button, buttonText } = responsiveStyles ?? {};
 
-    const { buttonContainer, button, buttonText } = responsiveStyles ?? {};
+  const content = (
+    <Pressable {...button} onPress={onPress} backgroundColor={bg}>
+      <Text {...buttonText} color={textColor}>
+        {text}
+      </Text>
+    </Pressable>
+  );
 
-    const content = (
-      <Pressable {...button} onPress={onPress} backgroundColor={bg}>
-        <Text {...buttonText} color={textColor}>
-          {text}
-        </Text>
-      </Pressable>
+  if (href) {
+    return (
+      <Link {...buttonContainer} href={href} isExternal={true}>
+        {content}
+      </Link>
     );
-
-    if (href) {
-      return (
-        <Link {...buttonContainer} href={href} isExternal={true}>
-          {content}
-        </Link>
-      );
-    }
-
-    return <Box {...buttonContainer}>{content}</Box>;
   }
-);
+
+  return <Box {...buttonContainer}>{content}</Box>;
+};
 
 export default ActionButton;
diff --git a/packages/app/src/components/CollectiveHomeCard.tsx b/packages/app/src/components/CollectiveHomeCard.tsx
@@ -1,10 +1,11 @@
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Image, StyleSheet, Text, TouchableOpacity, TouchableOpacityProps, View } from 'react-native';
+
 import { InterSemiBold, InterSmall } from '../utils/webFonts';
 import useCrossNavigate from '../routes/useCrossNavigate';
 import { Colors } from '../utils/colors';
-import { useMediaQuery } from 'native-base';
 import { useState } from 'react';
 import { Ocean } from '../assets';
+import { useScreenSize } from '../theme/hooks';
 
 interface CollectiveHomeCardProps {
   name: string;
@@ -15,11 +16,9 @@ interface CollectiveHomeCardProps {
 
 function CollectiveHomeCard({ name, description, headerImage, route }: CollectiveHomeCardProps) {
   const { navigate } = useCrossNavigate();
-  const [isDesktopResolution] = useMediaQuery({
-    minWidth: 920,
-  });
+  const { isDesktopView, isTabletView } = useScreenSize();
 
-  const headerImg = { uri: headerImage } ?? Ocean;
+  const headerImg = headerImage ? { uri: headerImage } : Ocean;
 
   const [isParagraphExpanded, setIsParagraphExpanded] = useState(false);
 
@@ -28,8 +27,9 @@ function CollectiveHomeCard({ name, description, headerImage, route }: Collectiv
       style={[
         styles.cardContainer,
         styles.elevation,
-        isDesktopResolution ? styles.cardContainerDesktop : {},
+        isDesktopView ? styles.cardContainerDesktop : {},
         isParagraphExpanded ? { height: 'auto' } : {},
+        isTabletView ? { marginBottom: 20 } : {},
       ]}
       onPress={() => navigate(`/collective/${route}`)}>
       <Image source={headerImg} style={styles.sectionImage} />