Merge remote-tracking branch 'origin/master'

# Conflicts:
#	package-lock.json
#	package.json

LeftOvers/App.js

@@ -1,12 +1,22 @@
-import { StatusBar } from 'expo-status-bar';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import RecipeElementImage from './components/RecipeElementImage';
+
+const generateImageList = () => {
+  const imageList = [];
+  const meat =  '../assets/images/meat.png'; 
+  for (let i = 0; i < 5; i++) {
+     imageList.push(meat);
+  }
+  return imageList;
+};
 
 export default function App() {
+  const imageList = [];
+
   return (
     <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
+      <RecipeElementImage title="Rice whith curry chicken" number="7" description="A delicious rice with a sweet chicken with curry sauce. Perfect recipes for winter, delicious and healthy"  imageList={imageList}></RecipeElementImage>
-      <StatusBar style="auto" />
     </View>
   );
 }

LeftOvers/app.json

@@ -3,9 +3,32 @@
     "name": "LeftOvers",
     "slug": "LeftOvers",
     "version": "1.0.0",
-    "assetBundlePatterns": [
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#57BDCC"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundle Patterns": [
       "**/*"
-    ]
+    ],
-  },
+    "ios": {
-  "name": "LeftOvers"
+      "supportsTablet": true
-}
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foreground Image": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/images/icon.png"
+    }
+  }
+}

LeftOvers/assets/icons/view_element_icons_icon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"/><path d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"/><path d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"/><path d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"/></svg>

LeftOvers/components/CustomButton.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {StyleSheet,Pressable, Text, View} from 'react-native';
+
+
+interface CustomButtonProps {
+  source : string
+  title  : string
+}
+
+export default function CustomButton(props) {
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.view}>
+        <Text style={styles.text}>{props.title}</Text>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 150,
+    height: 40,
+    borderRadius: 4,
+    elevation: 3,
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  text: {
+    fontSize: 15,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: 'white',
+  },
+  view: {
+    width : 145,
+    height: 35,
+    borderRadius: 4,
+    elevation: 3,
+    borderWidth: 1,
+    borderColor: 'grey',
+    alignItems: 'center', // Centre le contenu verticalement
+    justifyContent: 'center', // Centre le contenu horizontalement
+  },
+});
+

LeftOvers/components/FoodElementText.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import Separator from '../components/Separator';
+import plus from '../assets/images/plus.png'; 
+import moins from '../assets/images/minus.png'; 
+
+
+
+interface foodElementImageProps {
+  source : string
+  title  : string
+}
+
+
+export default function FoodElementText(props : any) {
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.container}>
+        <View style={styles.view}>
+            <Text style={styles.text}>{props.title}</Text>
+            <Separator/>
+            
+        </View>
+        <Image source={plus}  style={{width: 40, height: 40}}/>
+      </View>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 350,
+    height: 60,
+    borderRadius: 5,
+    elevation: 3,
+    backgroundColor: '#E3DEC9',
+  },
+  text: {
+    fontSize: 15,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    padding : 7,
+    color: 'black',
+  },
+  view: {
+
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    marginRight: 5 // Centre le contenu horizontalement
+  },
+  container: {
+    width : 340,
+    height: 50,
+    borderRadius: 5,
+    elevation: 3,
+    borderWidth: 2,
+    borderColor: 'black',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+
+

LeftOvers/components/RecipeElementImage.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import brochette from '../assets/images/brochette.png'; 
+import Union_left from '../assets/images/Union_left.png';
+import Union_right from '../assets/images/Union_right.png';
+import background from '../assets/images/Background.png'; 
+
+
+interface recipeElementImageProps {
+  number : number
+  title  : string
+  description : string
+  imageList : string[]
+}
+
+export default function RecipeElementImage(props : any) {
+  return (
+    <Pressable style={styles.button}>
+      <View style={styles.view}>
+        <Text style={styles.text}>{props.number}</Text>
+        <Text style={styles.title}>{props.title}</Text>
+        <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
+        {props.imageList.length > 0 ? (
+          <View style={styles.horizontalAlignement}>
+            <Image source={Union_left} style={{ width: 70, height: 4, marginRight: 6 }} />
+            <Text style={styles.smallText}>Ingredients</Text>
+            <Image source={Union_right} style={{ width: 70, height: 4, marginLeft: 6 }} />
+          </View>
+        ) : null}
+        
+        <View style={styles.horizontalAlignement}>
+          {props.imageList.length > 0 && props.imageList.map((source, index) => (
+          <Image key={index} source={source} style={{ width: 40, height: 40 }} />
+          ))}
+        </View>
+
+        <View style={{alignItems: 'center', justifyContent: 'center'}}>
+        <Text style={styles.smallText}>{props.description}</Text>
+        </View>
+        <Image source={background} style={{width: 210, height: 20, marginTop: 300, position: 'absolute'}}></Image>
+      </View>
+    </Pressable>
+  ); 
+}
+
+const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width : 250,
+    height: 350,
+    borderRadius: 40,
+    elevation: 3,
+    backgroundColor: '#E3DEC9',
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#756C28',
+    marginTop: 10,
+  },
+  smallText: {
+    fontSize: 12,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#71662A',
+    textAlign: "center",
+    marginTop: 5,
+  },
+  title:{
+    fontSize: 18,
+    lineHeight: 21,
+    fontWeight: 'bold',
+    letterSpacing: 0.25,
+    color: '#524B1A',
+  },
+  view: {
+    width : 240,
+    height: 340,
+    borderRadius: 40,
+    elevation: 3,
+    borderWidth: 2,
+    borderColor: 'grey',
+    alignItems: 'center', // Centre le contenu verticalement
+    display: "flex",
+    flexWrap: "wrap",
+  },
+  horizontalAlignement: {
+    display: "flex",
+    flexDirection : 'row',
+    alignItems: 'center', 
+    marginTop: 10,
+  }
+});

LeftOvers/components/Separator.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {StyleSheet, View} from 'react-native';
+
+export default function Separator (){
+    return <View style={styles.separator} />;
+};
+  
+  const styles = StyleSheet.create({
+    separator: {
+      width: 250, // Largeur de la ligne
+      backgroundColor: 'black', // Couleur de la ligne
+      borderWidth : 1,
+      marginLeft : 10,
+      marginRight : 10,
+    },
+  });
+  

LeftOvers/package-lock.json

@@ -9,13 +9,16 @@
       "version": "1.0.0",
       "dependencies": {
         "@expo/webpack-config": "^19.0.0",
+        "@types/react": "~18.2.14",
         "expo": "~49.0.15",
         "expo-splash-screen": "~0.20.5",
         "expo-status-bar": "~1.6.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-native": "0.72.6",
-        "react-native-web": "~0.19.6"
+        "react-native-splash-screen": "^3.3.0",
+        "react-native-web": "~0.19.6",
+        "typescript": "^5.1.3"
       },
       "devDependencies": {
         "@babel/core": "^7.20.0"
@@ -6144,6 +6147,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.10",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.10.tgz",
+      "integrity": "sha512-mxSnDQxPqsZxmeShFH+uwQ4kO4gcJcGahjjMFeLbKE95IAZiiZyiEepGZjtXJ7hN/yfu0bu9xN2ajcU0JcxX6A=="
+    },
     "node_modules/@types/qs": {
       "version": "6.9.9",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.9.tgz",
@@ -6154,11 +6162,26 @@
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.6.tgz",
       "integrity": "sha512-+0autS93xyXizIYiyL02FCY8N+KkKPhILhcUSA276HxzreZ16kl+cmwvV2qAM/PuCCwPXzOXOWhiPcw20uSFcA=="
     },
+    "node_modules/@types/react": {
+      "version": "18.2.36",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.36.tgz",
+      "integrity": "sha512-o9XFsHYLLZ4+sb9CWUYwHqFVoG61SesydF353vFMMsQziiyRu8np4n2OYMUSDZ8XuImxDr9c5tR7gidlH29Vnw==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.5",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz",
+      "integrity": "sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw=="
+    },
     "node_modules/@types/send": {
       "version": "0.17.3",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.3.tgz",
@@ -8376,6 +8399,11 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
     "node_modules/dag-map": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/dag-map/-/dag-map-1.0.2.tgz",
@@ -14762,6 +14790,14 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-splash-screen": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-splash-screen/-/react-native-splash-screen-3.3.0.tgz",
+      "integrity": "sha512-rGjt6HkoSXxMqH4SQUJ1gnPQlPJV8+J47+4yhgTIan4bVvAwJhEeJH7wWt9hXSdH4+VfwTS0GTaflj1Tw83IhA==",
+      "peerDependencies": {
+        "react-native": ">=0.57.0"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
@@ -16322,6 +16358,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
+      "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/ua-parser-js": {
       "version": "1.0.37",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.37.tgz",

LeftOvers/package.json

@@ -9,14 +9,17 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/webpack-config": "^19.0.0",
+    "@types/react": "~18.2.14",
     "expo": "~49.0.15",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-native": "0.72.6",
+    "react-native-splash-screen": "^3.3.0",
     "react-native-web": "~0.19.6",
-    "react-dom": "18.2.0",
+    "typescript": "^5.1.3"
-    "@expo/webpack-config": "^19.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

LeftOvers/react-app-env.d.tsx

@@ -0,0 +1,4 @@
+declare module "*.png";
+declare module "*.svg";
+declare module "*.jpeg";
+declare module "*.jpg";

LeftOvers/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}

README.md

@@ -7,20 +7,20 @@
 **Nom de l’application** : LeftOvers :pizza:
 </br>
 
-**Thème de l’application** : Trouver des recettes faisable avec les ingredients à disposition.
+**Thème de l’application** : Trouver des recettes faisables avec les ingredients à disposition.
 </br>
 
 **Récapitulation de notre application** : 👇
 
 </br>
 
-:information_source: Une application mobile  (Ios/Android), dans lequel les utilisateurs pourront choisir des aliments et l'application leur fournira une liste de recette adaptée.
+:information_source: Une application mobile (Ios/Android), dans lequel les utilisateurs pourront choisir des aliments et l'application leur fournira une liste de recette adaptée.
 
-# Répartition du Gitlab
+# Répartition du Repository Git
 
-La racine de notre gitlab est composée de deux dossiers essentiels au projet:
+La racine de notre repo est composée de deux dossiers essentiels au projet:
 
-[**LeftOvers**](LeftOvers) : **Toute la partie codage de l'application web**
+[**LeftOvers**](LeftOvers) : **Toute la partie codage de l'application mobile**
 
 [**Images**](Images) : **Images de l'application**
 
@@ -51,7 +51,6 @@ Technologies utilisées :
 &nbsp; ![React Native](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
 &nbsp; ![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
 &nbsp; ![PostgreSQL](https://img.shields.io/badge/PostgreSQL-316192?style=for-the-badge&logo=postgresql&logoColor=white)
-&nbsp; ![Android Studio](https://img.shields.io/badge/Android_Studio-3DDC84?style=for-the-badge&logo=android-studio&logoColor=white)
 
 </div>
 

package.json

@@ -1,6 +1,7 @@
 {
-  "name": "LeftOvers",
+  "dependencies": {
-  "lockfileVersion": 2,
+    "@eva-design/eva": "^2.2.0",
-  "requires": true,
+    "@ui-kitten/components": "^5.3.1",
-  "packages": {}
+    "react-native-svg": "^13.14.0"
+  }
 }