From fe1990e7e0b2bf06113b7c06190aee356ef3bf50 Mon Sep 17 00:00:00 2001 From: Murenzi Paterne Date: Mon, 29 Apr 2024 19:39:35 +0200 Subject: [PATCH] ft(onBoarding): squash commit messages --- .github/workflows/pull_request.yml | 22 + .github/workflows/push.yml | 19 + .gitignore | 41 + README.md | 98 +- SpashScreen/Splash.tsx | 56 + app.json | 38 + app/(app)/HomeScreen.tsx | 62 + app/(app)/_layout.tsx | 0 app/(auth)/CreateNewPassword.tsx | 166 + .../SignIn&SignOut/SetYourFingerPrint.tsx | 15 + app/(auth)/_layout.tsx | 18 + app/+html.tsx | 38 + app/+not-found.tsx | 40 + app/Onboading/OnboardingScreen.tsx | 61 + app/_layout.tsx | 97 + app/index.tsx | 46 + app/modal.tsx | 35 + app/onBoarding/FirstScreen.tsx | 46 + app/onBoarding/SecondScreen.tsx | 45 + app/onBoarding/ThirdScreen.tsx | 46 + app/onBoarding/_layout.tsx | 44 + app/spinner/Loading.tsx | 40 + assets/fonts/Urbanist-Bold.ttf | Bin 0 -> 42636 bytes assets/fonts/Urbanist-Medium.ttf | Bin 0 -> 42752 bytes assets/fonts/Urbanist-Regular.ttf | Bin 0 -> 42704 bytes assets/fonts/Urbanist-SemiBold.ttf | Bin 0 -> 42740 bytes assets/icons/Arrow_Left.svg | 8 + assets/icons/Exclude.png | Bin 0 -> 385 bytes assets/images/Group.png | Bin 0 -> 124058 bytes assets/images/adaptive-icon.png | Bin 0 -> 17547 bytes assets/images/create.png | Bin 0 -> 12655 bytes assets/images/favicon.png | Bin 0 -> 1466 bytes assets/images/icon.png | Bin 0 -> 4257 bytes assets/images/splash.png | Bin 0 -> 47346 bytes babel.config.js | 6 + components/EditScreenInfo.tsx | 77 + components/ExternalLink.tsx | 25 + components/OnBoarding/OnboardingComponent.tsx | 107 + components/StyledText.tsx | 5 + components/Themed.tsx | 48 + components/UI/Header.tsx | 5 + components/UI/icons.tsx | 16 + components/__tests__/StyledText-test.js | 10 + .../__snapshots__/StyledText-test.js.snap | 18 + components/useClientOnlyValue.ts | 4 + components/useClientOnlyValue.web.ts | 12 + components/useColorScheme.ts | 1 + components/useColorScheme.web.ts | 8 + constants/Colors.ts | 118 + constants/Types.ts | 1 + constants/Typography.ts | 123 + ctx/ThemeContext.tsx | 33 + eslint.config.mjs | 12 + package-lock.json | 20544 ++++++++++++++++ package.json | 56 + tsconfig.json | 17 + utils/ResponsiveWidth.tsx | 11 + 57 files changed, 22337 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/pull_request.yml create mode 100644 .github/workflows/push.yml create mode 100644 .gitignore create mode 100644 SpashScreen/Splash.tsx create mode 100644 app.json create mode 100644 app/(app)/HomeScreen.tsx create mode 100644 app/(app)/_layout.tsx create mode 100644 app/(auth)/CreateNewPassword.tsx create mode 100644 app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx create mode 100644 app/(auth)/_layout.tsx create mode 100644 app/+html.tsx create mode 100644 app/+not-found.tsx create mode 100644 app/Onboading/OnboardingScreen.tsx create mode 100644 app/_layout.tsx create mode 100644 app/index.tsx create mode 100644 app/modal.tsx create mode 100644 app/onBoarding/FirstScreen.tsx create mode 100644 app/onBoarding/SecondScreen.tsx create mode 100644 app/onBoarding/ThirdScreen.tsx create mode 100644 app/onBoarding/_layout.tsx create mode 100644 app/spinner/Loading.tsx create mode 100644 assets/fonts/Urbanist-Bold.ttf create mode 100644 assets/fonts/Urbanist-Medium.ttf create mode 100644 assets/fonts/Urbanist-Regular.ttf create mode 100644 assets/fonts/Urbanist-SemiBold.ttf create mode 100644 assets/icons/Arrow_Left.svg create mode 100644 assets/icons/Exclude.png create mode 100644 assets/images/Group.png create mode 100644 assets/images/adaptive-icon.png create mode 100644 assets/images/create.png create mode 100644 assets/images/favicon.png create mode 100644 assets/images/icon.png create mode 100644 assets/images/splash.png create mode 100644 babel.config.js create mode 100644 components/EditScreenInfo.tsx create mode 100644 components/ExternalLink.tsx create mode 100644 components/OnBoarding/OnboardingComponent.tsx create mode 100644 components/StyledText.tsx create mode 100644 components/Themed.tsx create mode 100644 components/UI/Header.tsx create mode 100644 components/UI/icons.tsx create mode 100644 components/__tests__/StyledText-test.js create mode 100644 components/__tests__/__snapshots__/StyledText-test.js.snap create mode 100644 components/useClientOnlyValue.ts create mode 100644 components/useClientOnlyValue.web.ts create mode 100644 components/useColorScheme.ts create mode 100644 components/useColorScheme.web.ts create mode 100644 constants/Colors.ts create mode 100644 constants/Types.ts create mode 100644 constants/Typography.ts create mode 100644 ctx/ThemeContext.tsx create mode 100644 eslint.config.mjs create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 tsconfig.json create mode 100644 utils/ResponsiveWidth.tsx diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml new file mode 100644 index 00000000..ed3e9dde --- /dev/null +++ b/.github/workflows/pull_request.yml @@ -0,0 +1,22 @@ +name: Pull Request Trigger Workflow + +on: + pull_request: + branches: + - develop + +jobs: + build-and-test: + runs-on: windows-latest + + steps: + - uses: actions/checkout@v4 + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: '>=18' + - name: Install dependencies + run: npm install + - name: Run tests + run: npm run test -- --ci + diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml new file mode 100644 index 00000000..518ea826 --- /dev/null +++ b/.github/workflows/push.yml @@ -0,0 +1,19 @@ +name: Push Trigger Workflow + +on: + push: + +jobs: + build: + runs-on: windows-latest + + steps: + - uses: actions/checkout@v4 + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: '>=18' + - name: Install dependencies + run: npm install + - name: Run tests + run: npm run test -- --ci diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..49e60def --- /dev/null +++ b/.gitignore @@ -0,0 +1,41 @@ +# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files + +# dependencies +node_modules/ + +# Expo +.expo/ +dist/ +web-build/ + +# Native +*.orig.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision + +# Metro +.metro-health-check* + +# debug +npm-debug.* +yarn-debug.* +yarn-error.* + +# macOS +.DS_Store +*.pem + +# local env files +.env*.local + +# typescript +*.tsbuildinfo + +# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb +# The following patterns were generated by expo-cli + +expo-env.d.ts +# @end expo-cli diff --git a/README.md b/README.md index 9a03a996..206d73a1 100644 --- a/README.md +++ b/README.md @@ -1 +1,97 @@ -# matadors-rn-medica \ No newline at end of file +# Medica App + +Online Doctor Appointment & Consultation App + +## Table Of Content + + - [Description](#description) + + - [Documentation](#documentation) + - [Setup](#setup) + - [Testing](#testing) + - [Contribute](#contribute) + - [Contact](#contact) + - [License](#license) + + +## Description + +Medica is a mobile application designed to facilitate online doctor appointments and consultations. Users can create an account, log in, browse through various doctor specialties, schedule appointments, and communicate with healthcare professionals through voice calls, video calls, or messaging. The app also supports different payment methods for appointment fees, provides access to healthcare articles, allows profile management, and offers a help center for user support. + +## Overview; +None at the moment!! + +## Documentation + +### Endpoints + +- `/signup`: User signup endpoint +- `/login`: User login endpoint +- `/ForgotPassword`: Ask for password Retrieval or reset if forgot +- `/ResetPassword`: Access to Changing the users Password +- `/Home`: List of available doctor specialties +- `/search`: Search for doctors across all specialties +- `/appointments`: Schedule and manage appointments +- `/communication`: Choose communication mode (voice call, video call, messaging) +- `/payment`: Select and process payment for appointments +- `/articles`: Access and interact with healthcare articles +- `/profile`: Manage user profile +- `/help`: Contact the help center + + +## Setup + +### Dependencies + +- Node.js +- React Native +- Expo (for mobile app development) + +### Getting Started + +1. Clone the repository: +git clone https://github.com/atlp-rwanda/matadors-rn-medica.git + +2. Navigate to the project directory: + +3. Install dependencies: +```bash +npm install +``` +5. Set up environment variables: +- Create a `.env` file based on `.env.example` and fill in necessary values. + +### Run The Service + +1. Start the Expo development server: +```bash +npm start +``` +2. Use the Expo client on your mobile device or simulator to run the app. + +## Testing + +To run tests, use the following command: +```bash +npm test +``` +## Contribute + +Contributions are welcome! To contribute to this repository, please follow these steps: +1. Fork the repository. +2. Create a new branch (`git checkout -b feature/my-feature`). +3. Commit your changes (`git commit -am 'Add new feature'`). +4. Push to the branch (`git push origin feature/my-feature`). +5. Create a new Pull Request. + + + ## Contact + + Feel free to reach out to us: + [Nkbtemmy](https://github.com/Nkbtemmy) + [mukunzidd](https://github.com/mukunzidd) + + ## License + + None At the moment !! + diff --git a/SpashScreen/Splash.tsx b/SpashScreen/Splash.tsx new file mode 100644 index 00000000..596a3109 --- /dev/null +++ b/SpashScreen/Splash.tsx @@ -0,0 +1,56 @@ +import Loading from "@/app/spinner/Loading"; +import { Image, StyleSheet, Text, View } from "react-native"; + + + +export default function SplashScreen(){ + return ( + <> + + + + + + + + + + Medica + + + + + + + + + + + ) +} + +const styles = StyleSheet.create({ + container:{ +flex:1, +justifyContent:'center', +alignItems:'center', +backgroundColor:'#ffff' + }, + splash:{ + flex:1, + flexDirection:'row', + justifyContent:'center', + alignItems:'center', + backgroundColor:'white', + gap:20, + width:'100%' + }, + text:{ + fontSize:30 + }, + spin:{ + position:'absolute', + bottom: 50 + + } +}) \ No newline at end of file diff --git a/app.json b/app.json new file mode 100644 index 00000000..f1e7b035 --- /dev/null +++ b/app.json @@ -0,0 +1,38 @@ +{ + "expo": { + "name": "matadors-rn-medica", + "slug": "matadors-rn-medica", + "scheme": "matadors-rn-medica", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/images/icon.png", + "splash": { + "image": "./assets/images/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "assetBundlePatterns": ["**/*"], + "userInterfaceStyle": "dark", + "ios": { + "supportsTablet": true, + "config": { + "usesNonExemptEncryption": false + } + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/images/adaptive-icon.png", + "backgroundColor": "#ffffff" + } + }, + "web": { + "bundler": "metro", + "output": "static", + "favicon": "./assets/images/favicon.png" + }, + "plugins": ["expo-router", "expo-secure-store"], + "experiments": { + "typedRoutes": true + } + } +} diff --git a/app/(app)/HomeScreen.tsx b/app/(app)/HomeScreen.tsx new file mode 100644 index 00000000..3776b9b8 --- /dev/null +++ b/app/(app)/HomeScreen.tsx @@ -0,0 +1,62 @@ +import { Image, ScrollView, StyleSheet, Text, View } from "react-native"; +import Typography from "@/constants/Typography"; +import Colors from "@/constants/Colors"; + + +export default function HomeScreen(){ + return ( + <> + + + + + + + +Welcome to Medica! 👋 +The best online doctor appointment & consultation app of the century for your health and medical needs! + + + + + + + ) +} + +const styles = StyleSheet.create({ + container:{ +flex:1, +justifyContent:'center', +alignItems:'center', +backgroundColor:'#ffff', +paddingTop:50, +paddingBottom:70 + }, + + text:{ + fontSize:40, + textAlign:'center', + paddingLeft:30, +paddingRight:30, +color:'#236bfd', +fontFamily:'Bold', + }, + description:{ +textAlign:'center', +lineHeight:25, +paddingBottom:30, +paddingTop:20, +fontFamily:'Regular', +color:Colors.light.text, +fontSize:17 + }, + image:{ + // width: '100%', + objectFit:'cover', + height:'70%' + }, + imagex:{ + height:'100%' + } +}) diff --git a/app/(app)/_layout.tsx b/app/(app)/_layout.tsx new file mode 100644 index 00000000..e69de29b diff --git a/app/(auth)/CreateNewPassword.tsx b/app/(auth)/CreateNewPassword.tsx new file mode 100644 index 00000000..0a2dac08 --- /dev/null +++ b/app/(auth)/CreateNewPassword.tsx @@ -0,0 +1,166 @@ +import React, { useState } from 'react'; +import { Image, StyleSheet, Text, TextInput, View, TouchableOpacity, ScrollView, Alert } from 'react-native'; +import { FontAwesome } from '@expo/vector-icons'; // Import FontAwesome icons +import Colors from '@/constants/Colors'; + +export default function CreateNewPassword() { + const [password, setPassword] = useState(''); + const [confirmPassword, setConfirmPassword] = useState(''); + const [showPassword, setShowPassword] = useState(false); + const [showConfirmPassword, setShowConfirmPassword] = useState(false); + const [rememberMe, setRememberMe] = useState(false); + + const toggleShowPassword = () => { + setShowPassword(!showPassword); + }; + + const toggleShowConfirmPassword = () => { + setShowConfirmPassword(!showConfirmPassword); + }; + + const handleCreatePassword = () => { + if (password !== confirmPassword) { + Alert.alert('Error', 'Passwords do not match.'); + return; + } + + // Your password creation logic here + + if (rememberMe) { + // Save user's preference to remember password + } + }; + + return ( + + + + + + + Create new password + + + + + + + + + + + + + + + + + + + + setRememberMe(!rememberMe)} style={styles.checkbox}> + {rememberMe && } + {!rememberMe && } + Remember Me + + + + + Continue + + + + + ); +} + +const styles = StyleSheet.create({ + scrollViewContent: { + flexGrow: 1, + justifyContent: 'center', + }, + container: { + flex: 1, + justifyContent: 'center', + backgroundColor: '#fff', + paddingBottom: 70, + }, + description: { + paddingLeft: 25, + paddingTop: 20, + fontFamily: 'Regular', + color: Colors.light.text, + fontSize: 17, + }, + image: { + width: '100%', + alignItems: 'center', + justifyContent: 'center', + }, + inputContainer: { + flexDirection: 'row', + alignItems: 'center', + marginBottom: 20, + }, + input: { + flex: 1, + borderRadius: 15, + borderWidth: 0, + backgroundColor: '#EEEEEE', + padding: 12, + paddingLeft: 40, + }, + toggleButton: { + position: 'absolute', + right: 10, + padding: 10, + }, + togglelock: { + position: 'absolute', + left: 10, + zIndex: 1, + padding: 10, + }, + checkboxContainer: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + marginBottom: 20, + }, + checkbox: { + flexDirection: 'row', + alignItems: 'center', + }, + checkboxLabel: { + marginLeft: 10, + fontSize: 16, + }, + createButton: { + backgroundColor: '#236bfd', + paddingVertical: 15, + paddingHorizontal: 30, + borderRadius: 50, + width: '100%', + alignSelf: 'center', + }, + createButtonText: { + color: 'white', + fontSize: 16, + textAlign: 'center', + }, + inputText: { + padding: 20, + }, +}); diff --git a/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx b/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx new file mode 100644 index 00000000..c25df595 --- /dev/null +++ b/app/(auth)/SignIn&SignOut/SetYourFingerPrint.tsx @@ -0,0 +1,15 @@ +import { Text, View } from "@/components/Themed"; +import { LeftArrow } from "@/components/UI/icons"; +import { ThemeContext } from "@/ctx/ThemeContext"; +import { useContext, useEffect } from "react"; +import { SvgUri, SvgXml } from "react-native-svg"; + +export default function SetYourFingerPrint() { + const { theme, changeTheme } = useContext(ThemeContext); + + return ( + <> + Set Your Finger Print + + ); +} diff --git a/app/(auth)/_layout.tsx b/app/(auth)/_layout.tsx new file mode 100644 index 00000000..275a76d0 --- /dev/null +++ b/app/(auth)/_layout.tsx @@ -0,0 +1,18 @@ +import Header from "@/components/UI/Header"; +import { Stack } from "expo-router"; + +export default function AuthLayout() { + return ( + + { + return
; + }, + }} + /> + + + ); +} diff --git a/app/+html.tsx b/app/+html.tsx new file mode 100644 index 00000000..cb31090e --- /dev/null +++ b/app/+html.tsx @@ -0,0 +1,38 @@ +import { ScrollViewStyleReset } from 'expo-router/html'; + +// This file is web-only and used to configure the root HTML for every +// web page during static rendering. +// The contents of this function only run in Node.js environments and +// do not have access to the DOM or browser APIs. +export default function Root({ children }: { children: React.ReactNode }) { + return ( + + + + + + + {/* + Disable body scrolling on web. This makes ScrollView components work closer to how they do on native. + However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line. + */} + + + {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */} +