chore(Restructure Project): restructre the codebase folder structure to be more readable

Author: MarwanBz

app/+not-found.tsx

@@ -1,13 +1,13 @@
-import { Link, Stack } from 'expo-router';
-import { StyleSheet } from 'react-native';
+import { Link, Stack } from "expo-router";
 
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import { StyleSheet } from "react-native";
+import { ThemedText } from "@/components/ui/ThemedText/ThemedText";
+import { ThemedView } from "@/components/ui/ThemedView/ThemedView";
 
 export default function NotFoundScreen() {
   return (
     <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
+      <Stack.Screen options={{ title: "Oops!" }} />
       <ThemedView style={styles.container}>
         <ThemedText type="title">This screen doesn't exist.</ThemedText>
         <Link href="/" style={styles.link}>
@@ -21,8 +21,8 @@ export default function NotFoundScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
     padding: 20,
   },
   link: {

app/index.tsx

@@ -7,7 +7,7 @@ import {
   View,
 } from "react-native";
 
-import { Onboarding } from "@/components/Onboarding";
+import { Onboarding } from "@/components/OnboardingUi/Onbording/Onboarding";
 
 const imagePath = require("@/assets/images/background.png");
 

app/login.tsx

@@ -1,13 +1,13 @@
 import { Alert, ImageBackground, View } from "react-native";
 
-import Button from "@/components/Button";
+import Button from "@/components/ui/Button/Button";
 import { Colors } from "@/constants/Colors";
-import { ContinueWith } from "@/components/ContinueWith";
-import { ForgetPassword } from "@/components/ForgetPassword";
+import { ContinueWith } from "@/components/ui/ContinueWith/ContinueWith";
+import { ForgetPassword } from "@/components/ui/ForgetPassword/ForgetPassword";
 import { Ionicons } from "@expo/vector-icons";
-import { RememberMe } from "@/components/RememberMe";
-import TextInput from "@/components/TextInput";
-import { ThemedText } from "@/components/ThemedText";
+import { RememberMe } from "@/components/ui/RememberMe/RememberMe";
+import TextInput from "@/components/ui/TextInput/TextInput";
+import { ThemedText } from "@/components/ui/ThemedText/ThemedText";
 import sharedStyles from "../style/sharedStyles";
 import { useForm } from "react-hook-form";
 import { useState } from "react";
@@ -116,4 +116,4 @@ const Login = () => {
   );
 };
 
-export default Login;
+export default Login;

app/signup.tsx

@@ -1,15 +1,15 @@
 import { Alert, ImageBackground, StyleSheet, Text, View } from "react-native";
 import { Controller, useForm } from "react-hook-form";
 
-import Button from "@/components/Button";
+import Button from "@/components/ui/Button/Button";
 import { Colors } from "@/constants/Colors";
-import { ContinueWith } from "@/components/ContinueWith";
+import { ContinueWith } from "@/components/ui/ContinueWith/ContinueWith";
 import { Feather } from "@expo/vector-icons";
 import { Ionicons } from "@expo/vector-icons";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { RememberMe } from "@/components/RememberMe";
-import TextInput from "@/components/TextInput";
-import { ThemedText } from "@/components/ThemedText";
+import { RememberMe } from "@/components/ui/RememberMe/RememberMe";
+import TextInput from "@/components/ui/TextInput/TextInput";
+import { ThemedText } from "@/components/ui/ThemedText/ThemedText";
 import sharedStyles from "../style/sharedStyles";
 import { useState } from "react";
 import { z } from "zod";
@@ -20,13 +20,14 @@ const phoneRegex = new RegExp(
 );
 const formSchema = z.object({
   email: z.string().email("Please enter a valid email"),
-  phone: z.string().regex(phoneRegex,"Please enter a valid phone number"),
+  phone: z.string().regex(phoneRegex, "Please enter a valid phone number"),
   password: z.string().min(8, "Password must be at least 8 characters"),
-});const imagePath = require("@/assets/images/bg2.png");
+});
+const imagePath = require("@/assets/images/bg2.png");
 
 const Signup = () => {
   const [hidePassword, setHidePassword] = useState(true);
-  
+
   const { control, handleSubmit } = useForm({
     defaultValues: {
       email: "",
@@ -117,6 +118,6 @@ const Signup = () => {
       </ImageBackground>
     </View>
   );
-}
+};
 
-export default Signup;
+export default Signup;

components/ExternalLink.tsx

@@ -14,9 +14,9 @@ import Animated, {
   useSharedValue,
 } from "react-native-reanimated";
 
-import Button from "./Button";
-import { OnboardingItem } from "./OnboardingItem";
-import { Pagination } from "./Pagination";
+import Button from "../../ui/Button/Button";
+import { OnboardingItem } from "../OnboardingItem/OnboardingItem";
+import { Pagination } from "../Pagination/Pagination";
 import React from "react";
 import { data } from "@/data/cards";
 import { router } from "expo-router";
@@ -61,12 +61,8 @@ export const Onboarding = () => {
       />
       <Pagination data={data} x={x} screenWidth={SCREEN_WIDTH} />
       <View style={styles.button}>
-        <Button
-        title="Get Started"
-        onPress={() => router.push('/login')}
-      />
+        <Button title="Get Started" onPress={() => router.push("/login")} />
       </View>
-      
     </View>
   );
 };
@@ -78,6 +74,6 @@ const styles = StyleSheet.create({
   button: {
     paddingTop: 110,
     paddingBottom: 20,
-    paddingHorizontal: 20
-  }
+    paddingHorizontal: 20,
+  },
 });

components/ForgetPassword.tsx

@@ -1,10 +1,12 @@
-import * as React from 'react';
-import renderer from 'react-test-renderer';
+import * as React from "react";
 
-import { ThemedText } from '../ThemedText';
+import { ThemedText } from "../ui/ThemedText/ThemedText";
+import renderer from "react-test-renderer";
 
 it(`renders correctly`, () => {
-  const tree = renderer.create(<ThemedText>Snapshot test!</ThemedText>).toJSON();
+  const tree = renderer
+    .create(<ThemedText>Snapshot test!</ThemedText>)
+    .toJSON();
 
   expect(tree).toMatchSnapshot();
 });

components/OnboardingItem.tsx components/OnboardingUi/OnboardingItem/OnboardingItem.tsx

@@ -4,21 +4,25 @@ import { AntDesign } from "@expo/vector-icons";
 import { Colors } from "@/constants/Colors";
 import { Ionicons } from "@expo/vector-icons";
 import React from "react";
-import SocialMediaPlatform from "./SocialMediaPlatform";
-import { ThemedText } from "./ThemedText";
+import SocialMediaPlatform from "@/components/ui/SocialMediaPlatform/SocialMediaPlatform";
+import { ThemedText } from "@/components/ui/ThemedText/ThemedText";
 import { router } from "expo-router";
 
 interface ContinueWithProps {
   title: string;
   subTitle: string;
-  signOrLog: string
+  signOrLog: string;
   link: string;
 }
-export const ContinueWith: React.FC<ContinueWithProps> = ({ title, subTitle, signOrLog,link }) => {
-  
+export const ContinueWith: React.FC<ContinueWithProps> = ({
+  title,
+  subTitle,
+  signOrLog,
+  link,
+}) => {
   const handelSocialMediaPress = () => {
     Alert.alert("This Feature is coming soon....");
-  }
+  };
   return (
     <View style={styles.container}>
       <View style={styles.linesWithText}>

components/Onboarding.tsx components/OnboardingUi/Onbording/Onboarding.tsx

@@ -0,0 +1,23 @@
+import { Pressable, Text, View } from "react-native";
+import React, { FC } from "react";
+
+import { Colors } from "@/constants/Colors";
+import { ThemedText } from "@/components/ui/ThemedText/ThemedText";
+
+interface ForgetPasswordProps {
+  title: string;
+  onPress: () => void;
+}
+
+export const ForgetPassword: React.FC<ForgetPasswordProps> = ({
+  title,
+  onPress,
+}) => {
+  return (
+    <Pressable onPress={onPress}>
+      <View>
+        <ThemedText lightColor={Colors.light.gray}>{title}</ThemedText>
+      </View>
+    </Pressable>
+  );
+};

components/Pagination.tsx components/OnboardingUi/Pagination/Pagination.tsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 
 import { Colors } from "@/constants/Colors";
 import { Fontisto } from "@expo/vector-icons";
-import { ThemedText } from "./ThemedText";
+import { ThemedText } from "@/components/ui/ThemedText/ThemedText";
 
 interface RememberMeProps {
   title: string;
@@ -14,8 +14,8 @@ interface RememberMeProps {
 export const RememberMe: React.FC<RememberMeProps> = ({ title, onPress }) => {
   const [rememberMe, setRememberMe] = useState(true);
   const handelRememberMePress = () => {
-    setRememberMe(!rememberMe)
-  }
+    setRememberMe(!rememberMe);
+  };
   return (
     <Pressable onPress={handelRememberMePress}>
       <View style={styles.container}>

components/__tests__/ThemedText-test.tsx

@@ -0,0 +1,11 @@
+// this folder contains the app translations for the 18next lib 
+
+export const en = {
+  welcome: "Welcome",
+  home: "Home",
+};
+
+export const ar = {
+  welcome: "اهلا",
+  home: "الرئيسية",
+};

components/Button.tsx components/ui/Button/Button.tsx

@@ -0,0 +1 @@
+// this folder contains any services for the app like api services and other services like react context 

components/ContinueWith.tsx components/ui/ContinueWith/ContinueWith.tsx

@@ -0,0 +1 @@
+// use zustand for lib for state management solution between the app

components/ui/ForgetPassword/ForgetPassword.tsx

@@ -0,0 +1,6 @@
+// contains app's typescript data types 
+export type KindOfType = {
+  id: string;
+  name: string;
+  number: number;
+}