Tela de login ✨ (precisa de leves modificações)

App.tsx

@@ -1,11 +1,13 @@
 import AppProvider from '@hooks/index';
-import Home from '@screens/Home';
+// import Home from '@screens/Home';
+import Cadastro1 from '@screens/Cadastro1';
+// import Cadastro2 from '@screens/Cadastro2';
 import React from 'react';
 
 export default function App() {
   return (
     <AppProvider>
-      <Home />
+      <Cadastro1 />
     </AppProvider>
   );
 }

eslint.config.mjs

@@ -0,0 +1,13 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

package.json

@@ -22,42 +22,48 @@
     "template"
   ],
   "dependencies": {
-    "@expo/webpack-config": "^0.17.0",
-    "@react-native-async-storage/async-storage": "1.18.2",
+    "@expo/webpack-config": "^19.0.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
     "axios": "^0.27.2",
-    "expo": "^49.0.0",
-    "expo-splash-screen": "~0.20.5",
-    "expo-status-bar": "~1.6.0",
-    "expo-updates": "~0.18.11",
+    "expo": "51",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
+    "expo-updates": "~0.25.22",
+    "fix": "^0.0.6",
     "moti": "^0.19.0",
-    "react": "18.2.0",
+    "react": "^18.3.1",
     "react-dom": "18.2.0",
-    "react-native": "0.72.3",
-    "react-native-gesture-handler": "~2.12.0",
-    "react-native-reanimated": "~3.3.0",
-    "react-native-web": "~0.19.6",
+    "react-native": "^0.74.5",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-web": "~0.19.10",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.0",
+    "@eslint/js": "^9.9.0",
     "@react-native-community/eslint-config": "^3.1.0",
     "@types/axios": "^0.14.0",
-    "@types/react-dom": "~18.0.10",
+    "@types/react-dom": "~18.2.25",
     "@types/react-native": "~0.69.1",
     "@types/styled-components": "^5.1.26",
     "@types/styled-components-react-native": "^5.1.3",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-expo": "^9.5.0",
+    "babel-preset-expo": "~11.0.0",
+    "eslint": "9.x",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "globals": "^15.9.0",
     "husky": "^8.0.1",
-    "typescript": "^5.1.3"
+    "lint-staged": "15.2.8",
+    "typescript": "~5.3.3",
+    "typescript-eslint": "^8.1.0"
   },
   "private": true
 }

src/@types/styled-components.d.ts

@@ -4,5 +4,5 @@ import 'styled-components';
 declare module 'styled-components' {
   type ThemeType = typeof theme;
 
-  export interface DefaultTheme extends ThemeType {}
+  export type DefaultTheme = ThemeType
 }

src/components/BolaNumero/index.tsx

@@ -0,0 +1,19 @@
+import * as S from './styles';
+import React from 'react';
+
+type BolaProps = {
+    num: string;
+    width: string;
+    height: string;
+};
+
+
+const BolaNumero: React.FC<BolaProps> = ({ num, width, height }) => {
+    return (
+        <S.Container height={height} width={width}>
+            <S.StyledText color='#ebebeb'>{num}</S.StyledText>
+        </S.Container>
+    );
+};
+
+export default BolaNumero;

src/components/BolaNumero/styles.ts

@@ -0,0 +1,38 @@
+import { Text, ImageBackground, View } from 'react-native';
+import styled, { css } from 'styled-components/native';
+
+interface StyledProps {
+    height: string;
+    width: string;
+};
+
+export const Container = styled(View)<StyledProps>`
+    display: flex;
+    height: ${({height}) => height};
+    width: ${({width}) => width};
+    margin-top: 32px;
+    border-radius: ${({height}) => height}/2;
+    background-color: #ffa800;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    
+`;
+
+export const StyledText = styled(Text)<{ color?: string }>`
+  ${({ theme, color }) => css`
+    font-size: 32px;
+    font-weight: 600;
+    filter: drop-shadow(red 0rem 1rem 10px);
+    color: ${color || `${theme.colors.black}`};
+  `}
+`;
+
+export const StyledImage = styled(ImageBackground)`
+  margin-top: 8px;
+  margin-left: 36px;
+  flex: 1;
+  width: 60%;
+  height: 82%;
+  gap: 0px;
+`;

src/components/ButtonComponent/index.tsx

@@ -0,0 +1,33 @@
+import * as S from './styles';
+import React from 'react';
+
+type ButtonProps = {
+    color?: string;
+    image?: string;
+    text?: string;
+    height: string;
+    width: string;
+};
+
+
+const ButtonComponent: React.FC<ButtonProps> = ({ color, text, width, height, image }) => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const imageSource = image ? require('public/assets/images/Vector.png') : null;
+
+    return (
+        <S.Container height={height} width={width} color={color}>
+            {imageSource ? (
+                <S.StyledImage
+                    source={imageSource}
+                >
+                </S.StyledImage>
+            ) : (
+                <S.Container height={height} color={color} width='80%'>
+                    <S.StyledText color='#ebebeb'>{text}</S.StyledText>
+                </S.Container>
+            )}
+        </S.Container>
+    );
+};
+
+export default ButtonComponent;

src/components/ButtonComponent/styles.ts

@@ -0,0 +1,39 @@
+import { Text, ImageBackground, TouchableOpacity } from 'react-native';
+import styled, { css } from 'styled-components/native';
+
+interface StyledProps {
+    height: string;
+    color: string;
+    width: string;
+};
+
+export const Container = styled(TouchableOpacity)<StyledProps>`
+    display: flex;
+    height: ${({height}) => height};
+    width: ${({width}) => width};;
+    margin-top: 32px;
+    border-radius: 32px;
+    background-color: ${({color}) => color};
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    
+`;
+
+export const StyledText = styled(Text)<{ color?: string }>`
+  ${({ theme, color }) => css`
+    font-size: 20px;
+    font-weight: 400;
+    filter: drop-shadow(red 0rem 1rem 10px);
+    color: ${color || `${theme.colors.black}`};
+  `}
+`;
+
+export const StyledImage = styled(ImageBackground)`
+  margin-top: 8px;
+  margin-left: 36px;
+  flex: 1;
+  width: 60%;
+  height: 82%;
+  gap: 0px;
+`;

src/components/Heading/styles.ts

@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components/native';
 export const StyledHeading = styled(Text)<{ color?: string }>`
   ${({ theme, color }) => css`
     font-size: 32px;
-    margin-bottom: 24px;
     color: ${color || `${theme.colors.black}`};
   `}
 `;

src/components/LoginInputs/index.tsx

@@ -0,0 +1,18 @@
+import * as S from './styles';
+import React from 'react';
+
+type InputProps = {
+    color?: string;
+    password: boolean;
+    text: string;
+    height: string;
+};
+
+const LoginInputs: React.FC<InputProps> = ({ password, text, height }) => (
+    <S.Container height={height}>
+        <S.StyledText color='#ffa800'>{text}</S.StyledText>
+        <S.StyledInput secureTextEntry={password}></S.StyledInput>
+    </S.Container>
+);
+
+export default LoginInputs;

src/components/LoginInputs/styles.ts

@@ -0,0 +1,33 @@
+import { Text, View, TextInput } from 'react-native';
+import styled, { css } from 'styled-components/native';
+
+interface StyledProps {
+    height: string;
+};
+
+export const Container = styled(View)<StyledProps>`
+    display: flex;
+    height: ${({height}) => height};
+    width: 100%;
+    margin-left: 80px;
+    align-items: normal;
+    justify-content: normal;
+    flex-direction: column;
+`;
+
+export const StyledText = styled(Text)<{ color?: string }>`
+    margin-left: 8px;
+  ${({ theme, color }) => css`
+    font-size: 20px;
+    font-weight: 200;
+    color: ${color || `${theme.colors.black}`};
+  `}
+`;
+
+export const StyledInput = styled(TextInput)`
+    margin-top: 8px;
+    width: 80%;
+    height: 80%;
+    border-radius: 4px;
+    background-color: #ebebeb;
+`;

src/hooks/useAuth.tsx

@@ -32,6 +32,7 @@ export const AuthProvider: React.FC<{ children?: React.ReactNode | undefined }>
             };
 
             setUser(response.user);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         } catch (error) {
             // Errors handling
         }

src/screens/Cadastro1/index.tsx

@@ -0,0 +1,21 @@
+import * as S from './styles';
+import LoginInputs from '@components/LoginInputs';
+import ButtonComponent from "@components/ButtonComponent";
+import BolaNumero from "@components/BolaNumero";
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+
+const Cadastro1 = () => (
+  <S.Wrapper>
+    <StatusBar style="light" />
+    <BolaNumero num='1' width='48px' height='48px'/>
+    <S.InputsDiv>
+      <LoginInputs password={false} text='Nome:' height='60px'/>
+      <LoginInputs password={false} text='Email:' height='60px'/>
+      <LoginInputs password={false} text='CPF:' height='60px'/>
+    </S.InputsDiv>
+    <ButtonComponent height='60px' color='#ffa800' width='36%' text='text' image='public/assets/images/Vector.png'/>
+  </S.Wrapper>
+);
+
+export default Cadastro1;

src/screens/Cadastro1/styles.ts

@@ -0,0 +1,45 @@
+import { Text, View, Image } from 'react-native';
+import styled from 'styled-components/native';
+
+export const Wrapper = styled(View)`
+  display: flex;
+  align-items: center;
+  justify-content: normal;
+  flex-direction: column;
+  padding-top: 80px;
+  height: 100%;
+  width: 100%;
+  background-color: #1c0f13;
+`;
+
+export const Logo = styled(Image)`
+  background-color: transparent;
+  height: 7.5%;
+  width: 14%;
+  margin-bottom: 0px;
+`;
+
+export const StyledText = styled(Text)`
+  color: #ebebeb;
+  margin-top: 32px;
+`;
+
+export const InputsDiv = styled(View)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 40%;
+  width: 100%;
+  margin-top: 100px;
+  margin-bottom: 80px;
+`;
+
+export const TextDivs = styled(View)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: row;
+  height: 60px;
+  width: 80%;
+`;

src/screens/Cadastro2/index.tsx

@@ -0,0 +1,20 @@
+import * as S from './styles';
+import LoginInputs from '@components/LoginInputs';
+import ButtonComponent from "@components/ButtonComponent";
+import BolaNumero from '@components/BolaNumero';
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+
+const Cadastro2 = () => (
+  <S.Wrapper>
+    <StatusBar style="light" />
+    <BolaNumero num='1' width='48px' height='48px'/>
+    <S.InputsDiv>
+      <LoginInputs password={true} text='Senha:' height='60px'/>
+      <LoginInputs password={true} text='Confirme a Senha:' height='60px'/>
+    </S.InputsDiv>
+    <ButtonComponent height='60px' color='#ffa800' width='36%' text='text' image='public/assets/images/Vector.png'/>
+  </S.Wrapper>
+);
+
+export default Cadastro2;