Merge branch 'develop' of https://github.com/Hzin/tcc-vamos-frontend into VAN-45-create-view-search-itinerary

craco.config.js

@@ -0,0 +1,11 @@
+// craco.config.js
+module.exports = {
+    style: {
+      postcss: {
+        plugins: [
+          require('tailwindcss'),
+          require('autoprefixer'),
+        ],
+      },
+    },
+  }

package.json

@@ -8,6 +8,7 @@
     "@capacitor/haptics": "1.1.4",
     "@capacitor/keyboard": "1.2.2",
     "@capacitor/status-bar": "1.0.8",
+    "@craco/craco": "^6.4.5",
     "@hookform/error-message": "^2.0.0",
     "@ionic-selectable/core": "^5.0.0-alpha.13",
     "@ionic/react": "^6.0.0",
@@ -17,21 +18,23 @@
     "@testing-library/user-event": "^12.6.3",
     "@types/jest": "^26.0.20",
     "@types/node": "^12.19.15",
-    "@types/react": "^16.14.3",
+    "@types/react": "^18.0.18",
-    "@types/react-dom": "^16.9.10",
+    "@types/react-dom": "^18.0.6",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.26.1",
+    "cross-env": "^7.0.3",
     "ionicons": "^5.4.0",
     "lodash.isequal": "^4.5.0",
     "pigeon-maps": "^0.21.0",
     "pullstate": "^1.24.0",
-    "react": "^17.0.1",
+    "react": "^18.2.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^18.2.0",
     "react-google-places-autocomplete": "^3.4.0",
     "react-hook-form": "^7.30.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
     "reselect": "^4.1.5",
     "typescript": "^4.1.3",
     "web-vitals": "^0.2.4",
@@ -50,8 +53,10 @@
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cross-env TAILWIND_MODE=watch craco start",
-    "build": "react-scripts build",
+    "build": "craco build",
+    "ionic:serve": "cross-env TAILWIND_MODE=watch craco start",
+    "ionic:build": "craco build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
     "eject": "react-scripts eject"
   },
@@ -77,7 +82,9 @@
     "@capacitor/cli": "3.4.3",
     "@types/axios": "^0.14.0",
     "@types/lodash.isequal": "^4.5.6",
-    "react-scripts": "5.0.1"
+    "autoprefixer": "^9.8.8",
+    "postcss": "^7.0.39",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
   },
   "description": "Projeto de conclusão de curso a fim de resolver a dificuldade de alunos universitários ao buscar vans para suas universidades"
 }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }
+  

src/App.tsx

@@ -1,4 +1,4 @@
-import { Redirect, Route } from 'react-router-dom';
+import React, { useContext, useState } from "react";
 import {
   IonApp,
   IonIcon,
@@ -7,97 +7,111 @@ import {
   IonTabBar,
   IonTabButton,
   IonTabs,
-  setupIonicReact
+  setupIonicReact,
-} from '@ionic/react';
+} from "@ionic/react";
-import { IonReactRouter } from '@ionic/react-router';
+import { IonReactRouter } from "@ionic/react-router";
+import { Redirect, Route } from "react-router-dom";
+
+import { home, person, search } from "ionicons/icons";
 
 // importação das páginas
-import Cadastro from './pages/Cadastro/Cadastro';
+import Cadastro from "./pages/Cadastro/Cadastro";
-import Login from './pages/Login';
+import CadastroCompletar from "./pages/CadastroCompletar/CadastroCompletar";
-import Home from './pages/Home';
+import CompletarDocumento from "./pages/CadastroCompletar/CompletarDocumento";
-import Buscas from './pages/Buscas';
+import CompletarTelefone from "./pages/CadastroCompletar/CompletarTelefone";
-import Perfil from './pages/Perfil';
+
-import PerfilEditar from './pages/PerfilEditar';
+import Home from "./pages/Home";
-import VeiculoCadastro from './pages/VeiculoCadastro';
+import Login from "./pages/Login";
-import CadastroCompletar from './pages/CadastroCompletar/CadastroCompletar';
+import Perfil from "./pages/Perfil";
-import CompletarDocumento from './pages/CadastroCompletar/CompletarDocumento';
+import PerfilEditar from "./pages/PerfilEditar";
-import CompletarTelefone from './pages/CadastroCompletar/CompletarTelefone';
+
-import Transportes from './pages/Transportes/Transportes';
+import VeiculoCadastro from "./pages/VeiculoCadastro";
-import BuscarPassageiro from './pages/BuscarPassageiro/BuscarPassageiro';
+import MeusVeiculos from "./pages/MeusVeiculos";
+import CadastrarItinerario from "./pages/CadastrarItinerario/CadastrarItinerario";
+import MeusItinerarios from "./pages/MeusItinerarios/MeusItinerarios";
+
+import Buscas from "./pages/Buscas";
+import BuscarItinerario from "./pages/BuscarItinerario";
+import BuscarPassageiro from "./pages/BuscarPassageiro/BuscarPassageiro";
+import Transportes from "./pages/Transportes/Transportes";
 
 /* Core CSS required for Ionic components to work properly */
-import '@ionic/react/css/core.css';
+import "@ionic/react/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
-import '@ionic/react/css/normalize.css';
+import "@ionic/react/css/normalize.css";
-import '@ionic/react/css/structure.css';
+import "@ionic/react/css/structure.css";
-import '@ionic/react/css/typography.css';
+import "@ionic/react/css/typography.css";
 
 /* Optional CSS utils that can be commented out */
-import '@ionic/react/css/padding.css';
+import "@ionic/react/css/display.css";
-import '@ionic/react/css/float-elements.css';
+import "@ionic/react/css/flex-utils.css";
-import '@ionic/react/css/text-alignment.css';
+import "@ionic/react/css/float-elements.css";
-import '@ionic/react/css/text-transformation.css';
+import "@ionic/react/css/padding.css";
-import '@ionic/react/css/flex-utils.css';
+import "@ionic/react/css/text-alignment.css";
-import '@ionic/react/css/display.css';
+import "@ionic/react/css/text-transformation.css";
 
 /* Theme variables */
-import './theme/variables.css';
+import "./theme/variables.css";
 
-// import Tabs from './components/Tabs';
+/* Tailwind styles */
-import { search, home, person } from 'ionicons/icons';
+import "./theme/tailwind.css";
-import { useState, useContext } from 'react';
-import React from 'react';
-import MeusVeiculos from './pages/MeusVeiculos';
-import MeusItinerarios from './pages/MeusItinerarios/MeusItinerarios';
-import CadastrarItinerario from './pages/CadastrarItinerario/CadastrarItinerario';
-import BuscarItinerario from './pages/BuscarItinerario';
 
 setupIonicReact();
 
 const routes = (
   <>
     <Route exact path="/cadastro" component={Cadastro}></Route>
-  <Route exact path="/login" component={Login}></Route>
+    <Route exact path="/perfil/completar" component={CadastroCompletar}></Route>
+    <Route
+      exact
+      path="/perfil/completar/documento"
+      component={CompletarDocumento}
+    ></Route>
+    <Route
+      exact
+      path="/perfil/completar/telefone"
+      component={CompletarTelefone}
+    ></Route>
 
     <Route exact path="/home" component={Home}></Route>
-
+    <Route exact path="/login" component={Login}></Route>
-  <Route exact path="/buscas" component={Buscas}></Route>
-
     <Route exact path="/perfil" component={Perfil}></Route>
-  <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
-  <Route exact path="/perfil/completar" component={CadastroCompletar}></Route>
-  <Route exact path="/perfil/completar/documento" component={CompletarDocumento}></Route>
-  <Route exact path="/perfil/completar/telefone" component={CompletarTelefone}></Route>
-
-  <Route exact path="/transportes" component={Transportes}></Route>
-  <Route exact path="/buscar/passageiro" component={BuscarPassageiro}></Route>
-  <Route exact path="/buscar/itinerario" component={BuscarItinerario}></Route>
-
     <Route exact path="/usuario/:id" component={Perfil}></Route>
 
+    <Route exact path="/perfil/editar" component={PerfilEditar}></Route>
+
     <Route exact path="/veiculos/cadastrar" component={VeiculoCadastro}></Route>
     <Route exact path="/veiculos/meus" component={MeusVeiculos}></Route>
-
+    <Route
-  <Route exact path="/cadastrar-itinerario" component={CadastrarItinerario}></Route>
+      exact
+      path="/cadastrar-itinerario"
+      component={CadastrarItinerario}
+    ></Route>
     <Route exact path="/meus-itinerarios" component={MeusItinerarios}></Route>
+
+    <Route exact path="/buscas" component={Buscas}></Route>
+    <Route exact path="/buscar/itinerario" component={BuscarItinerario}></Route>
+    <Route exact path="/buscar/passageiro" component={BuscarPassageiro}></Route>
+    <Route exact path="/transportes" component={Transportes}></Route>
+
     <Route exact path="/">
       <Redirect to="/home" />
     </Route>
-</>)
+  </>
+);
 
 interface IUserManager {
   setIsLoggedIn: Function;
 }
 
 const user: IUserManager = {
-  setIsLoggedIn: () => {}
+  setIsLoggedIn: () => {},
 };
 
 export const UserContext = React.createContext<IUserManager>(user);
 
 const IonicApp: React.FC = () => {
-
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const user = useContext(UserContext);
 
@@ -125,11 +139,13 @@ const IonicApp: React.FC = () => {
               </IonTabButton>
             </IonTabBar>
           </IonTabs>
-        ) : (<IonRouterOutlet>{routes}</IonRouterOutlet>)}
+        ) : (
+          <IonRouterOutlet>{routes}</IonRouterOutlet>
+        )}
       </IonReactRouter>
     </IonApp>
-  )
+  );
-}
+};
 
 const App: React.FC = () => {
   return (

src/components/Tabs.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
-
-import { logInOutline, logInSharp, personOutline, personSharp } from 'ionicons/icons';
-
-interface AppTab {
-    label: string;
-    iosIcon: string;
-    mdIcon: string;
-    // badge: string;
-}
-
-const appPages: AppTab[] = [
-    {
-        label: 'Login',
-        iosIcon: logInOutline,
-        mdIcon: logInSharp,
-        // badge: '',
-    },
-    {
-        label: 'Cadastro',
-        iosIcon: personOutline,
-        mdIcon: personSharp,
-        // badge: '',
-    }
-]
-
-const Tabs: React.FC = () => {
-    return (
-        
-            <IonTabs>
-                {appPages.map((appPage, index) => {
-                    <IonTabBar key={index} slot="bottom">
-                        <IonTabButton tab="speakers">
-                            <IonIcon ios={appPage.iosIcon} md={appPage.mdIcon} />
-                            <IonLabel>{appPage.label}</IonLabel>
-                        </IonTabButton>
-                    </IonTabBar>
-
-                })}
-            </IonTabs>
-    );
-}
-
-export default Tabs

src/pages/CadastrarItinerario/CadastrarItinerario.tsx

@@ -2,29 +2,18 @@ import {
   IonBackButton,
   IonButton,
   IonButtons,
-  IonCard,
-  IonCardContent,
   IonContent,
   IonHeader,
   IonIcon,
-  IonItem,
-  IonLabel,
-  IonList,
-  IonListHeader,
   IonPage,
-  IonRadio,
-  IonRadioGroup,
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
 import { close, locateOutline, locationOutline } from "ionicons/icons";
-import { useState } from "react";
 import GooglePlacesAutocomplete from "react-google-places-autocomplete";
 import { PageHeader } from "../../components/PageHeader";
 
 export default function CadastrarItinerario() {
-  const [selected, setSelected] = useState<any>("");
-
   return (
     <IonPage>
       <PageHeader
@@ -33,8 +22,8 @@ export default function CadastrarItinerario() {
       ></PageHeader>
 
       <IonContent fullscreen>
-        <IonCard>
+        <div className="m-3">
-          <IonCardContent>
+          <h1>Digite o endereço de onde você iniciará a rota do itinerário</h1>
           <div className="inputs-from-to">
             <IonIcon icon={locateOutline}></IonIcon>
             <GooglePlacesAutocomplete
@@ -57,36 +46,10 @@ export default function CadastrarItinerario() {
               }}
             />
           </div>
-            <IonList>
-              <IonRadioGroup
-                value={selected}
-                onIonChange={(e) => setSelected(e.detail.value)}
-              >
-                <IonListHeader>
-                  <IonLabel>Name</IonLabel>
-                </IonListHeader>
-
-                <IonItem>
-                  <IonLabel>Biff</IonLabel>
-                  <IonRadio slot="start" value="biff" />
-                </IonItem>
-
-                <IonItem>
-                  <IonLabel>Griff</IonLabel>
-                  <IonRadio slot="start" value="griff" />
-                </IonItem>
-
-                <IonItem>
-                  <IonLabel>Buford</IonLabel>
-                  <IonRadio slot="start" value="buford" />
-                </IonItem>
-              </IonRadioGroup>
-            </IonList>
           <div className="button-search">
             <IonButton color="primary">Cadastrar</IonButton>
           </div>
-          </IonCardContent>
+        </div>
-        </IonCard>
       </IonContent>
     </IonPage>
   );

src/theme/tailwind.css

@@ -0,0 +1,4 @@
+/* ./src/theme/tailwind.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  mode: 'jit',
+  purge: ['./public/index.html', './src/**/*.{js,jsx,ts,tsx,css}'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}