Merge branch 'main' into onboarding-hifis

.gitignore

@@ -7,6 +7,7 @@ expo-debug.log
 /.expo-shared
 .env
 .DS_Store
+/Lib/*
 
 # Go
 *.exe

client-new/.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  root: true,
+  extends: ['@react-native-community', 'plugin:prettier/recommended'],
+  plugins: ['prettier', 'jest'],
+  rules: {
+    'prettier/prettier': 'error',
+    'react/react-in-jsx-scope': 'off'
+  },
+  env: {
+    'jest/globals': true
+  }
+};

client-new/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "arrowParens": "always"
+}

client-new/App.tsx

@@ -1,32 +1,41 @@
-import { StyleSheet, Text, View } from "react-native";
-import Router from "./src/navigation/Router";
-import { NativeBaseProvider, extendTheme } from "native-base";
-import { SafeAreaProvider } from "react-native-safe-area-context";
-import { AuthProvider } from "./src/contexts/AuthContext";
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import Router from '@/navigation/Router';
+import { NativeBaseProvider, extendTheme } from 'native-base';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { AuthProvider } from '@/contexts/AuthContext';
 import {
   useFonts,
   DMSans_400Regular,
   DMSans_400Regular_Italic,
   DMSans_500Medium,
   DMSans_500Medium_Italic,
   DMSans_700Bold,
-  DMSans_700Bold_Italic,
-} from "@expo-google-fonts/dm-sans";
+  DMSans_700Bold_Italic
+} from '@expo-google-fonts/dm-sans';
+import React from 'react';
 
-import {Inter_400Regular, Inter_600SemiBold } from '@expo-google-fonts/inter';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+const queryClient = new QueryClient();
+
+import { Inter_400Regular, Inter_600SemiBold } from '@expo-google-fonts/inter';
 
 
 export default function App() {
   const [fontsLoaded] = useFonts({
+
     "MADE Dillan": require("./assets/fonts/MADE-Dillan.otf"),
     "Roca Heavy": require("./assets/fonts/Roca-Bold.ttf"),
     "Roca Light": require("./assets/fonts/Roca-Light.ttf"),
     "Roca Regular": require("./assets/fonts/Roca-Regular.ttf"),
+
     DMSans_400Regular,
     DMSans_400Regular_Italic,
     DMSans_500Medium,
     DMSans_500Medium_Italic,
     DMSans_700Bold,
+
     DMSans_700Bold_Italic,
     Inter_400Regular,
     Inter_600SemiBold
@@ -36,12 +45,12 @@ export default function App() {
     fontConfig: {
       DM_Sans: {
         Regular: {
-          normal: "DMSans_400Regular",
-          italic: "DMSans_400Regular_Italic",
+          normal: 'DMSans_400Regular',
+          italic: 'DMSans_400Regular_Italic'
         },
         Medium: {
-          normal: "DMSans_500Medium",
-          italic: "DMSans_500Medium_Italic",
+          normal: 'DMSans_500Medium',
+          italic: 'DMSans_500Medium_Italic'
         },
         Bold: {
           normal: "DMSans_700Bold",
@@ -84,21 +93,23 @@ export default function App() {
   });
 
   return (
-    <AuthProvider>
-      <SafeAreaProvider>
-        <NativeBaseProvider theme={theme}>
-          <Router />
-        </NativeBaseProvider>
-      </SafeAreaProvider>
-    </AuthProvider>
+    <QueryClientProvider client={queryClient}>
+      <AuthProvider>
+        <SafeAreaProvider>
+          <NativeBaseProvider theme={theme}>
+            <Router />
+          </NativeBaseProvider>
+        </SafeAreaProvider>
+      </AuthProvider>
+    </QueryClientProvider>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
 });

client-new/README.md

@@ -0,0 +1,27 @@
+# Frontend Installs & Learning References
+
+
+### Installations
+[Installing Node](https://nodejs.org/en/download/)
+
+[Installing the React Native Development Environment](https://reactnative.dev/docs/environment-setup)
+
+
+
+### Learning References
+
+#### React Native
+[React Native Documentation](https://github.com/reactnative.dev/docs/getting-started)
+
+[React Native in Action (book)](https://learning.oreilly.com/library/view/react-native-in/9781617294051/)
+
+[Professional React Native](https://learning.oreilly.com/library/view/professional-react-native/9781800563681/)
+
+#### TypeScript
+[TypeScript Documentation](https://www.typescriptlang.org/docs/)
+
+[TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)
+
+[Learning TypeScript (book)](https://learning.oreilly.com/library/view/learning-typescript/9781098110321/)
+
+[Programming TypeScript (book)](https://learning.oreilly.com/library/view/programming-typescript/9781492037644/)

client-new/babel.config.js

@@ -1,6 +1,24 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          root: ['./src'],
+          alias: {
+            '@/components': './src/components',
+            '@/screens': './src/screens',
+            '@/utils': './src/utils',
+            '@/assets': './src/assets',
+            '@/interfaces': './src/interfaces',
+            '@/contexts': './src/contexts',
+            '@/services': './src/services',
+            '@/navigation': './src/navigation'
+          }
+        }
+      ]
+    ]
   };
 };

client-new/package.json

@@ -4,10 +4,23 @@
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
     "web": "expo start --web",
-    "ts:check": "tsc"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
+    "test": "jest --passWithNoTests"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "dependencies": {
     "@expo-google-fonts/dm-sans": "^0.2.3",
@@ -23,7 +36,7 @@
     "axios": "^1.6.0",
     "expo": "~49.0.13",
     "expo-dev-client": "^2.4.11",
-    "expo-font": "^11.6.0",
+    "expo-font": "~11.4.0",
     "expo-secure-store": "^12.5.0",
     "expo-status-bar": "~1.6.0",
     "firebase": "^10.5.0",
@@ -38,7 +51,8 @@
     "react-native-safe-area-context": "^4.7.2",
     "react-native-screens": "^3.25.0",
     "react-native-svg": "^13.14.0",
-    "react-native-vector-icons": "^10.0.0"
+    "react-native-vector-icons": "^10.0.0",
+    "react-query": "^3.39.3"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

client-new/src/components/reusable/Circle.tsx

@@ -1,4 +1,5 @@
 import { View } from "native-base";
+import React from "react";
 import {
   widthPercentageToDP as w,
   heightPercentageToDP as h,
@@ -10,7 +11,6 @@ type CircleProps = {
 };
 
 export default function Circle(props: CircleProps) {
-
   const borderWidth = props.border ? 1 : 0
 
   return (

client-new/src/components/reusable/CircleProgressBar.tsx

@@ -1,9 +1,10 @@
 import { View } from "native-base";
-import Circle from "./Circle";
+import Circle from "@/components/reusable/Circle";
 import {
   widthPercentageToDP as w,
   heightPercentageToDP as h,
 } from "react-native-responsive-screen";
+import React from "react";
 
 type CircleProgressBarProps = {
   totalCircles: number;

client-new/src/components/reusable/CompaniesFooter.tsx

@@ -0,0 +1,29 @@
+import { Text, View } from "native-base";
+import {
+  widthPercentageToDP as w,
+  heightPercentageToDP as h,
+} from "react-native-responsive-screen";
+import React from "react";
+
+export default function CompaniesFooter() {
+  return (
+    <>
+      <View
+        width={w("80%")}
+        flexDirection={"row"}
+        justifyContent={"space-between"}
+        alignItems={"center"}
+        paddingBottom={h("1.5%")}
+      >
+        <Text fontSize={12}>Company 1</Text>
+        <Text fontSize={12}>Company 2</Text>
+        <Text fontSize={12}>Company 3</Text>
+      </View>
+      <View justifyContent={"space-between"} alignItems={"center"}>
+        <Text fontWeight={"bold"} fontSize={12}>
+          See why these companies are partnered with Legacy
+        </Text>
+      </View>
+    </>
+  );
+}

client-new/src/components/reusable/LetsGo.tsx

@@ -1,4 +1,6 @@
 import { Text, View } from "native-base";
+import React from "react";
+
 export default function LetsGo() {
   return (
     <>

client-new/src/components/reusable/QuestionaireBox.tsx

@@ -12,9 +12,10 @@ type QuestionaireBoxProps = {
   text2: string;
   initialSliderValue: number;
   field: string;
-  handleChange: (name, value) => void;
+  handleChange: (name, value) => void; // TODO: add types
 };
 
+// TODO: export image to separate file + use arrow function
 export default function QuestionaireBox(props: QuestionaireBoxProps) {
   const screenImage = `<svg width="220" height="146" viewBox="0 0 220 146" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <rect x="0.5" y="0.5" width="219" height="145" fill="url(#pattern0)"/>

client-new/src/components/reusable/ResponseSlider.tsx

@@ -3,6 +3,7 @@ import {
   widthPercentageToDP as w,
   heightPercentageToDP as h,
 } from "react-native-responsive-screen";
+import React from "react";
 
 export default function ResponseSlider() {
   const bigCircle = (

client-new/src/components/reusable/SquareButton.tsx

@@ -0,0 +1,23 @@
+import { Button, Text } from "native-base";
+import React from "react";
+
+type SquareButtonProps = {
+  title: string;
+  onClick?: (input) => any;
+};
+
+export default function SquareButton(props: SquareButtonProps) {
+  return (
+    <Button
+      backgroundColor={"#D9D9D9"}
+      borderRadius={7}
+      size={"xs"}
+      onPress={props.onClick}
+    >
+      <Text color={"#000000"} fontWeight={"bold"}>
+        {" "}
+        {props.title}{" "}
+      </Text>
+    </Button>
+  );
+}