feat: navbar & club info tag component (#923)

Co-authored-by: Alder Whiteford <[email protected]>
Co-authored-by: Alder Whiteford <[email protected]>

frontend/mobile/.eslintrc.js

@@ -4,7 +4,8 @@ module.exports = {
     plugins: ['prettier', 'jest'],
     rules: {
         'prettier/prettier': 'error',
-        'react/react-in-jsx-scope': 'off'
+        'react/react-in-jsx-scope': 'off',
+        'react-native/no-inline-styles': 'off',
     },
     env: {
         'jest/globals': true

frontend/mobile/app.json

@@ -53,6 +53,9 @@
                 "projectId": "9cfc60bc-2788-4837-9895-3fe0afdc13c5"
             }
         },
-        "owner": "generatesac"
+        "owner": "generatesac",
+        "packagerOpts": {
+            "config": "metro.config.js"
+        }
     }
 }

frontend/mobile/app/(app)/(tabs)/_layout.tsx

@@ -2,28 +2,84 @@ import React from 'react';
 
 import { Tabs } from 'expo-router';
 
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { faCalendarDays } from '@fortawesome/free-solid-svg-icons/faCalendarDays';
+import { faHouse } from '@fortawesome/free-solid-svg-icons/faHouse';
+import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+
+import { Text } from '@/app/(design-system)';
+import { Box, Colors } from '@/app/(design-system)';
+
+interface TabBarLabelProps {
+    focused: boolean;
+    title: string;
+}
+
+const TabBarLabel: React.FC<TabBarLabelProps> = ({ focused, title }) => (
+    <Text variant="caption-1" color={focused ? 'black' : 'gray'}>
+        {title}
+    </Text>
+);
+
+interface TabBarIconProps {
+    focused: boolean;
+    icon: IconDefinition;
+}
+
+const TabBarIcon: React.FC<TabBarIconProps> = ({ focused, icon }) => (
+    <Box paddingTop="m">
+        <FontAwesomeIcon
+            size={20}
+            color={focused ? 'black' : `${Colors.gray}`}
+            icon={icon}
+        />
+    </Box>
+);
+
 const Layout = () => {
     return (
-        <Tabs screenOptions={{ tabBarShowLabel: false }}>
+        <Tabs
+            screenOptions={{
+                tabBarShowLabel: true,
+                tabBarStyle: {
+                    borderTopWidth: 1,
+                    borderTopColor: '#00000066',
+                    height: 85
+                }
+            }}
+        >
             <Tabs.Screen
                 name="index"
                 options={{
-                    title: 'home',
-                    headerShown: false
+                    title: 'Home',
+                    headerShown: false,
+                    tabBarLabel: ({ focused }) =>
+                        TabBarLabel({ focused, title: 'Home' }),
+                    tabBarIcon: ({ focused }) =>
+                        TabBarIcon({ focused, icon: faHouse })
                 }}
             />
             <Tabs.Screen
-                name="discover"
+                name="calendar"
                 options={{
-                    title: 'search',
-                    headerShown: false
+                    title: 'Calendar',
+                    headerShown: false,
+                    tabBarLabel: ({ focused }) =>
+                        TabBarLabel({ focused, title: 'Calendar' }),
+                    tabBarIcon: ({ focused }) =>
+                        TabBarIcon({ focused, icon: faCalendarDays })
                 }}
             />
             <Tabs.Screen
                 name="profile"
                 options={{
-                    title: 'profile',
-                    headerShown: false
+                    title: 'Profile',
+                    headerShown: false,
+                    tabBarLabel: ({ focused }) =>
+                        TabBarLabel({ focused, title: 'Profile' }),
+                    tabBarIcon: ({ focused }) =>
+                        TabBarIcon({ focused, icon: faUser })
                 }}
             />
         </Tabs>

frontend/mobile/app/(app)/(tabs)/discover.tsx → frontend/mobile/app/(app)/(tabs)/calendar.tsx

@@ -1,11 +1,11 @@
 import { Box, Tag } from '@/app/(design-system)';
 
-const DiscoverPage = () => {
+const CalendarPage = () => {
     return (
         <Box flex={1} alignItems="center" justifyContent="center" padding="m">
-            <Tag>Tag</Tag>
+            <Tag variant="darkRed">Calendar</Tag>
         </Box>
     );
 };
 
-export default DiscoverPage;
+export default CalendarPage;

frontend/mobile/app/(app)/(tabs)/index.tsx

@@ -1,9 +1,19 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+
+import { Text } from '@/app/(design-system)';
+import { RecruitmentInfo } from '@/app/(design-system)/components/ClubRecruitment/RecruitmentInfo/ClubRecruitmentInfo';
 
 const HomePage = () => {
     return (
         <View style={styles.container}>
             <Text style={styles.title}>Hello</Text>
+            <RecruitmentInfo
+                recruitmentText="Fill out our application"
+                recruitingType="unrestricted"
+                isRecruiting={true}
+                recruitmentCycle="always"
+                color="aqua"
+            />
         </View>
     );
 };

frontend/mobile/app/(auth)/index.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 
-import { Button } from '../(design-system)/components/Button/Button';
-
 const Welcome = () => {
     return (
         <View>
             <Text>Welcome</Text>
-            <Button variant="standardButton" color="blue">
-                Hello
-            </Button>
         </View>
     );
 };

frontend/mobile/app/(design-system)/components/ClubRecruitment/RecruitmentInfo/ClubRecruitmentInfo.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { faCalendar } from '@fortawesome/free-regular-svg-icons/faCalendar';
+import { faComments } from '@fortawesome/free-solid-svg-icons/faComments';
+import { faPenToSquare } from '@fortawesome/free-solid-svg-icons/faPenToSquare';
+import { RecruitmentCycle, RecruitmentType } from '@generatesac/lib';
+
+import { Box, SACColors, createStyles } from '@/app/(design-system)';
+
+import { RecruitmentItem } from '../RecruitmentItem/ClubRecruitmentItem';
+
+interface RecruitmentInfoProps {
+    color: SACColors;
+    recruitmentCycle: RecruitmentCycle;
+    recruitingType: RecruitmentType;
+    isRecruiting?: boolean;
+    recruitmentText: string;
+}
+
+export const RecruitmentInfo = ({
+    recruitmentText,
+    color,
+    recruitmentCycle,
+    recruitingType,
+    isRecruiting = false
+}: RecruitmentInfoProps) => {
+    return (
+        <Box {...styles.recruitmentInfo}>
+            <RecruitmentItem
+                icon={faCalendar}
+                title="Recruitment Cycle"
+                text={recruitmentCycle}
+                color={color}
+            />
+            <RecruitmentItem
+                icon={faPenToSquare}
+                title={
+                    isRecruiting
+                        ? 'Currently Recruiting'
+                        : 'Currently Not Recruiting'
+                }
+                text={recruitmentText}
+                color={color}
+            />
+            <RecruitmentItem
+                icon={faComments}
+                title="Application Type"
+                text={recruitingType}
+                color={color}
+            />
+        </Box>
+    );
+};
+
+const styles = createStyles({
+    recruitmentInfo: {
+        padding: 'l',
+        flexDirection: 'row',
+        gap: 'm',
+        alignItems: 'stretch',
+        justifyContent: 'space-evenly'
+    }
+});

frontend/mobile/app/(design-system)/components/ClubRecruitment/RecruitmentItem/ClubRecruitmentItem.tsx

@@ -0,0 +1,55 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+import { Box, SACColors, Text, createStyles } from '@/app/(design-system)';
+import { firstLetterUppercase } from '@/utils/string';
+
+import { Icon } from '../../Icon/Icon';
+
+interface RecruitmentItemProps {
+    icon: IconDefinition;
+    title: string;
+    text: string;
+    color: SACColors;
+}
+
+export const RecruitmentItem = ({
+    icon,
+    title,
+    text,
+    color
+}: RecruitmentItemProps) => {
+    return (
+        <Box {...styles.recruitmentItem}>
+            <Box {...styles.recruitmentItemContent}>
+                <Icon size={'medium'} color={color} icon={icon} />
+                <Text variant="body-1" {...styles.recruitmentItemTitle}>
+                    {firstLetterUppercase(title)}
+                </Text>
+                <Text variant="caption-1" style={{ textAlign: 'center' }}>
+                    {firstLetterUppercase(text)}
+                </Text>
+            </Box>
+        </Box>
+    );
+};
+
+const styles = createStyles({
+    recruitmentItem: {
+        alignItems: 'center',
+        borderWidth: 1,
+        borderRadius: 'base',
+        borderColor: 'gray',
+        width: '33%'
+    },
+    recruitmentItemContent: {
+        paddingTop: 'm',
+        paddingBottom: 'm',
+        gap: 'xs',
+        flexDirection: 'column',
+        alignItems: 'center'
+    },
+    recruitmentItemTitle: {
+        textAlign: 'center',
+        fontWeight: '600'
+    }
+});

frontend/mobile/app/(design-system)/components/Icon/Icon.tsx

@@ -1,7 +1,7 @@
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 
-import { SACColors } from '../../shared/colors';
+import { Colors, SACColors, defaultColor } from '../../shared/colors';
 import { ComponentSizes } from '../../shared/types';
 import { createStyles } from '../../theme';
 
@@ -11,12 +11,16 @@ type IconProps = {
     color?: SACColors;
 };
 
-export const Icon: React.FC<IconProps> = ({ icon, size = 'medium', color }) => {
+export const Icon: React.FC<IconProps> = ({
+    icon,
+    size = 'medium',
+    color = defaultColor
+}) => {
     return (
         <FontAwesomeIcon
             icon={icon}
             size={styles[size].fontSize}
-            color={color}
+            color={Colors[color]}
         />
     );
 };

frontend/mobile/metro.config.js

@@ -1,10 +1,7 @@
-// Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require('expo/metro-config');
 
 module.exports = (() => {
-    const config = getDefaultConfig(__dirname, {
-        isCSSEnabled: true
-    });
+    const config = getDefaultConfig(__dirname);
 
     const { transformer, resolver } = config;
 

frontend/mobile/package.json

@@ -27,6 +27,7 @@
         "@react-navigation/native": "^6.0.2",
         "@reduxjs/toolkit": "^2.2.5",
         "@shopify/restyle": "^2.4.4",
+        "@svgr/core": "^8.1.0",
         "expo": "~51.0.2",
         "expo-dev-client": "~4.0.14",
         "expo-font": "~12.0.5",
@@ -37,6 +38,8 @@
         "expo-status-bar": "~1.12.1",
         "expo-system-ui": "~3.0.4",
         "expo-web-browser": "~13.0.3",
+        "font-awesome": "^4.7.0",
+        "path-dirname": "^1.0.2",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.74.1",
@@ -45,6 +48,7 @@
         "react-native-safe-area-context": "4.10.1",
         "react-native-screens": "3.31.1",
         "react-native-svg": "^15.3.0",
+        "react-native-svg-transformer": "^1.4.0",
         "react-native-web": "~0.19.10",
         "react-redux": "^9.1.2"
     },
@@ -58,7 +62,6 @@
         "jest": "^29.2.1",
         "jest-expo": "~51.0.2",
         "prettier": "^3.2.4",
-        "react-native-svg-transformer": "^1.4.0",
         "react-test-renderer": "18.2.0",
         "typescript": "~5.4.5"
     },

frontend/mobile/utils/string.ts

@@ -0,0 +1,3 @@
+export const firstLetterUppercase = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};