Optifit
/
Mobile
5
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add text and button

Browse Source
pull/5/head
Anthony RICHARD 5 months ago
parent 35d32527e2
commit efe9928752
13 changed files with 158 additions and 87 deletions
Show Stats Download Patch File Download Diff File

4
app/(auth)/_layout.tsx
Unescape View File

@ -2,10 +2,10 @@ import { Stack } from "expo-router";
export default function AuthLayout() { export default function AuthLayout() {
return ( return (
<Stack> <Stack initialRouteName="login">
<Stack.Screen name="login" options={{ headerShown: false }} />
<Stack.Screen name="code-send" options={{ headerShown: false }} /> <Stack.Screen name="code-send" options={{ headerShown: false }} />
<Stack.Screen name="sign-in" options={{ headerShown: false }} /> <Stack.Screen name="sign-in" options={{ headerShown: false }} />
<Stack.Screen name="login" options={{ headerShown: false }} />
<Stack.Screen name="reset-password" options={{ headerShown: false }} /> <Stack.Screen name="reset-password" options={{ headerShown: false }} />
</Stack> </Stack>
); );

42
app/(auth)/login.tsx
Unescape View File

@ -1,6 +1,7 @@
import Screen from "@/components/Screen"; import Screen from "@/components/ui/Screen";
import {SafeAreaView, Text} from "react-native"; import CustomText from "@/components/ui/Text";
import React from "react"; import { Link } from "expo-router";
import { View } from "react-native";
const socialNetworkButtons: ISocialNetworkButtons[] = [ const socialNetworkButtons: ISocialNetworkButtons[] = [
{ icon: "instagram" }, { icon: "instagram" },
@ -14,11 +15,36 @@ interface ISocialNetworkButtons {
export default function LoginPage() { export default function LoginPage() {
return ( return (
<SafeAreaView> <Screen>
<Screen> <View className="flex flex-col gap-4">
<Text>Tmp</Text> <View className="flex flex-col gap-2">
</Screen> <CustomText center={true} size="3xl" bold={true}>
</SafeAreaView> Connexion à Optifit
</CustomText>
<CustomText center={true} size="lg">
Personnalise ton expérience du sport avec Optifit, ton nouveau coach
IA.
</CustomText>
</View>
{/* <LoginForm /> */}
<View className="flex flex-col gap-2">
<CustomText center={true}>
Tu n'as pas encore de compte ?
<Link href="/(auth)/sign-in">
<CustomText bold={true} isLink={true}>
{" "}
Inscris-toi !
</CustomText>
</Link>
</CustomText>
<Link href="/reset-password">
<CustomText center={true} bold={true} isLink={true}>
Mot de passe oublié ?
</CustomText>
</Link>
</View>
</View>
</Screen>
// <Screen> // <Screen>
// <Box className="h-full justify-center"> // <Box className="h-full justify-center">

2
app/_layout.tsx
Unescape View File

@ -6,6 +6,8 @@ import { SessionProvider } from "@/ctx";
import {Slot, Stack} from "expo-router"; import {Slot, Stack} from "expo-router";
import "@/global.css"; import "@/global.css";
import "@/global.css";
// Prevent the splash screen from auto-hiding before asset loading is complete. // Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();

2
components/BackButton.tsx
Unescape View File

@ -1,5 +1,5 @@
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
import { Button, ButtonActions } from "./ui/button"; import { Button, ButtonActions } from "./ui/Button";
import { Href, Link } from "expo-router"; import { Href, Link } from "expo-router";
type props = { type props = {

2
components/ExerciceOverview.tsx
Unescape View File

@ -3,7 +3,7 @@ import { Text } from "./ui/text";
import { Box } from "./ui/box"; import { Box } from "./ui/box";
import { ImageBackground } from "react-native"; import { ImageBackground } from "react-native";
import { HStack } from "@/components/ui/hstack"; import { HStack } from "@/components/ui/hstack";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/Button";
import { AntDesign } from "@expo/vector-icons"; import { AntDesign } from "@expo/vector-icons";
export default function ExerciceOverview() { export default function ExerciceOverview() {

8
components/Screen.tsx
Unescape View File

@ -1,8 +0,0 @@
import { PropsWithChildren } from "react";
import { View } from "react-native";
type props = PropsWithChildren;
export default function Screen({ children }: props) {
return <View className={"h-full p-4"}>{children}</View>;
}

120
components/form/LoginForm.tsx
Unescape View File

@ -1,8 +1,6 @@
import React from "react"; import React from "react";
import { Button, ButtonIcon, ButtonText } from "../ui/button"; import { Text } from "react-native";
import { ArrowRightIcon } from "../ui/icon"; import Button from "../ui/Button";
import { Link } from "expo-router";
import {Text} from "react-native";
export default function LoginForm() { export default function LoginForm() {
const REQUIRED_ERROR = "Au moins un des champs requis est vide !"; const REQUIRED_ERROR = "Au moins un des champs requis est vide !";
const [emailValue, setEmailValue] = React.useState(""); const [emailValue, setEmailValue] = React.useState("");
@ -18,64 +16,60 @@ export default function LoginForm() {
}; };
return ( return (
// <FormControl className="gap-4" isInvalid={isFormInvalid}> <FormControl className="gap-4" isInvalid={isFormInvalid}>
// <FormControl isInvalid={isEmailInvalid}> <FormControl isInvalid={isEmailInvalid}>
// <FormControlLabel> <FormControlLabel>
// <FormControlLabelText bold={true}>Adresse mail</FormControlLabelText> <FormControlLabelText bold={true}>Adresse mail</FormControlLabelText>
// </FormControlLabel> </FormControlLabel>
// <Input variant="outline" size="xl"> <Input variant="outline" size="xl">
// <InputIcon color="black" as={MailIcon} /> <InputIcon color="black" as={MailIcon} />
// <InputField <InputField
// value={emailValue} value={emailValue}
// onChangeText={setEmailValue} onChangeText={setEmailValue}
// placeholder="Test@optifit.com" placeholder="Test@optifit.com"
// /> />
// </Input> </Input>
// </FormControl> </FormControl>
// <FormControl isInvalid={isPasswordInvalid}> <FormControl isInvalid={isPasswordInvalid}>
// <FormControlLabel> <FormControlLabel>
// <FormControlLabelText bold={true}>Mot de passe</FormControlLabelText> <FormControlLabelText bold={true}>Mot de passe</FormControlLabelText>
// </FormControlLabel> </FormControlLabel>
// <PasswordField value={passwordValue} onChangeText={setPasswordValue} /> <PasswordField value={passwordValue} onChangeText={setPasswordValue} />
// </FormControl> </FormControl>
// <VStack> <VStack>
// <FormError text={REQUIRED_ERROR} /> <FormError text={REQUIRED_ERROR} />
// <Button size="xl" onPress={handleSubmit}> <Button size="xl" onPress={handleSubmit}>
// <ButtonText>Se connecter</ButtonText> <ButtonText>Se connecter</ButtonText>
// <ButtonIcon as={ArrowRightIcon} /> <ButtonIcon as={ArrowRightIcon} />
// </Button> </Button>
// </VStack> </VStack>
// </FormControl> </FormControl>
// <FormControl className="gap-4"> <FormControl className="gap-4">
// <FormControl> <FormControl>
// <FormControlLabel> <FormControlLabel>
// <FormControlLabelText bold={true}>Adresse mail</FormControlLabelText> <FormControlLabelText bold={true}>Adresse mail</FormControlLabelText>
// </FormControlLabel> </FormControlLabel>
// <Input variant="outline" size="xl"> <Input variant="outline" size="xl">
// <InputIcon color="black" as={MailIcon} /> <InputIcon color="black" as={MailIcon} />
// <InputField placeholder="Test@optifit.com" /> <InputField placeholder="Test@optifit.com" />
// </Input> </Input>
// </FormControl> </FormControl>
// <FormControl> <FormControl>
// <FormControlLabel> <FormControlLabel>
// <FormControlLabelText bold={true}>Mot de passe</FormControlLabelText> <FormControlLabelText bold={true}>Mot de passe</FormControlLabelText>
// </FormControlLabel> </FormControlLabel>
// <PasswordField /> <PasswordField />
// </FormControl> </FormControl>
// <VStack> <VStack>
// <FormError text={"REQUIRED_ERROR"} /> <FormError text={"REQUIRED_ERROR"} />
// <Button size="xl"> <Button size="xl">
// <ButtonText>Se connecter</ButtonText> <ButtonText>Se connecter</ButtonText>
// <ButtonIcon as={ArrowRightIcon} /> <ButtonIcon as={ArrowRightIcon} />
// </Button> </Button>
// </VStack> </VStack>
// </FormControl> </FormControl>
// <Link href={"/sign-in"} asChild> <Link href={"/sign-in"} asChild>
// <Button size="xl" onPress={handleSubmit}> <Button title="Se connecter"/>
// <ButtonText>Se connecter</ButtonText> </Link>
// <ButtonIcon as={ArrowRightIcon} />
// </Button>
// </Link>
<Text>sdf</Text>
); );
} }

2
components/form/SigninForm.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Button, ButtonText, ButtonIcon } from "../ui/button"; import { Button, ButtonText, ButtonIcon } from "../ui/Button";
import { import {
FormControl, FormControl,
FormControlLabel, FormControlLabel,

17
components/ui/Button.tsx
Unescape View File

@ -0,0 +1,17 @@
import React from "react";
import { TouchableOpacity, View } from "react-native";
import CustomText from "./Text";
type props = { title: string; size: string };
const Button = ({ title, size }: props) => (
<View className="bg-black rounded-3xl">
<TouchableOpacity className="p-4">
<CustomText center={true} color="white" size={size}>
{title}
</CustomText>
</TouchableOpacity>
</View>
);
export default Button;

13
components/ui/Screen.tsx
Unescape View File

@ -0,0 +1,13 @@
import { PropsWithChildren } from "react";
import { View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
type props = PropsWithChildren;
export default function Screen({ children }: props) {
return (
<SafeAreaView>
<View className={"h-full p-4"}>{children}</View>
</SafeAreaView>
);
}

27
components/ui/Text.tsx
Unescape View File

@ -0,0 +1,27 @@
import { PropsWithChildren } from "react";
import { Text } from "react-native";
type props = PropsWithChildren & {
center?: boolean;
color?: string;
size?: string;
bold?: boolean;
isLink?: boolean;
};
const CustomText = ({ children, center, color, size, bold, isLink }: props) => {
const className =
"text-" +
(size ?? "md") +
" " +
(center ? "text-center" : "") +
" " +
("text-" + (color ?? "black ")) +
" " +
(bold ? "font-bold" : "") +
" " +
(isLink ? "text-orange-500 underline" : "");
return <Text className={className}>{children}</Text>;
};
export default CustomText;

4
generate-react-cli.json
Unescape View File

@ -4,11 +4,11 @@
"testLibrary": "Testing Library", "testLibrary": "Testing Library",
"component": { "component": {
"default": { "default": {
"path": "src/components", "path": "/components",
"withStyle": true, "withStyle": true,
"withTest": true, "withTest": true,
"withStory": true, "withStory": true,
"withLazy": true "withLazy": true
} }
} }
} }

2
tailwind.config.js
Unescape View File

@ -1,7 +1,7 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
// NOTE: Update this to include the paths to all of your component files. // NOTE: Update this to include the paths to all of your component files.
content: ["./app/**/*.{js,jsx,ts,tsx}"], content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")], presets: [require("nativewind/preset")],
theme: { theme: {
extend: {}, extend: {},

Write Preview
Loading…
Cancel
Save