Merge pull request #14 from Hzin:feature/van-40-add-tailwind
build(style): ⬇️ Adiciona suporte ao tailwind
This commit is contained in:
Hugo Falcão
11
craco.config.js
Normal file
11
craco.config.js
Normal file
@@ -0,0 +1,11 @@
|
||||
// craco.config.js
|
||||
module.exports = {
|
||||
style: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
],
|
||||
},
|
||||
},
|
||||
}
|
||||
37204
package-lock.json
generated
37204
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
21
package.json
21
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-dom": "^16.9.10",
|
||||
"@types/react": "^18.0.18",
|
||||
"@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-dom": "^17.0.1",
|
||||
"react": "^18.2.0",
|
||||
"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",
|
||||
"build": "react-scripts build",
|
||||
"start": "cross-env TAILWIND_MODE=watch craco start",
|
||||
"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"
|
||||
}
|
||||
|
||||
7
postcss.config.js
Normal file
7
postcss.config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
145
src/App.tsx
145
src/App.tsx
@@ -1,4 +1,3 @@
|
||||
import { Redirect, Route } from 'react-router-dom';
|
||||
import {
|
||||
IonApp,
|
||||
IonIcon,
|
||||
@@ -7,105 +6,119 @@ import {
|
||||
IonTabBar,
|
||||
IonTabButton,
|
||||
IonTabs,
|
||||
setupIonicReact
|
||||
} from '@ionic/react';
|
||||
import { IonReactRouter } from '@ionic/react-router';
|
||||
setupIonicReact,
|
||||
} from "@ionic/react";
|
||||
import { IonReactRouter } from "@ionic/react-router";
|
||||
import { Redirect, Route } from "react-router-dom";
|
||||
|
||||
// importação das páginas
|
||||
import Cadastro from './pages/Cadastro/Cadastro';
|
||||
import Login from './pages/Login';
|
||||
import Home from './pages/Home';
|
||||
import Perfil from './pages/Perfil';
|
||||
import PerfilEditar from './pages/PerfilEditar';
|
||||
import CadastroVan from './pages/CadastroVan';
|
||||
import CadastroCompletar from './pages/CadastroCompletar/CadastroCompletar';
|
||||
import CompletarDocumento from './pages/CadastroCompletar/CompletarDocumento';
|
||||
import CompletarTelefone from './pages/CadastroCompletar/CompletarTelefone';
|
||||
import Transportes from './pages/Transportes/Transportes';
|
||||
import BuscarPassageiro from './pages/BuscarPassageiro/BuscarPassageiro';
|
||||
import BuscarTransporte from './pages/BuscarTransporte/BuscarTransporte';
|
||||
import BuscarPassageiro from "./pages/BuscarPassageiro/BuscarPassageiro";
|
||||
import BuscarTransporte from "./pages/BuscarTransporte/BuscarTransporte";
|
||||
import Cadastro from "./pages/Cadastro/Cadastro";
|
||||
import CadastroCompletar from "./pages/CadastroCompletar/CadastroCompletar";
|
||||
import CompletarDocumento from "./pages/CadastroCompletar/CompletarDocumento";
|
||||
import CompletarTelefone from "./pages/CadastroCompletar/CompletarTelefone";
|
||||
import CadastroVan from "./pages/CadastroVan";
|
||||
import Home from "./pages/Home";
|
||||
import Login from "./pages/Login";
|
||||
import Perfil from "./pages/Perfil";
|
||||
import PerfilEditar from "./pages/PerfilEditar";
|
||||
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/structure.css';
|
||||
import '@ionic/react/css/typography.css';
|
||||
import "@ionic/react/css/normalize.css";
|
||||
import "@ionic/react/css/structure.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/float-elements.css';
|
||||
import '@ionic/react/css/text-alignment.css';
|
||||
import '@ionic/react/css/text-transformation.css';
|
||||
import '@ionic/react/css/flex-utils.css';
|
||||
import '@ionic/react/css/display.css';
|
||||
import "@ionic/react/css/display.css";
|
||||
import "@ionic/react/css/flex-utils.css";
|
||||
import "@ionic/react/css/float-elements.css";
|
||||
import "@ionic/react/css/padding.css";
|
||||
import "@ionic/react/css/text-alignment.css";
|
||||
import "@ionic/react/css/text-transformation.css";
|
||||
|
||||
/* Theme variables */
|
||||
import './theme/variables.css';
|
||||
import "./theme/variables.css";
|
||||
|
||||
// import Tabs from './components/Tabs';
|
||||
import { search, home, person } from 'ionicons/icons';
|
||||
import { useState, useContext } from 'react';
|
||||
import React from 'react';
|
||||
import MinhasVans from './pages/MinhasVans';
|
||||
import MeusItinerarios from './pages/MeusItinerarios/MeusItinerarios';
|
||||
import CadastrarItinerario from './pages/CadastrarItinerario/CadastrarItinerario';
|
||||
/* Tailwind styles */
|
||||
import "./theme/tailwind.css";
|
||||
|
||||
import { home, person, search } from "ionicons/icons";
|
||||
import React, { useContext, useState } from "react";
|
||||
import CadastrarItinerario from "./pages/CadastrarItinerario/CadastrarItinerario";
|
||||
import MeusItinerarios from "./pages/MeusItinerarios/MeusItinerarios";
|
||||
import MinhasVans from "./pages/MinhasVans";
|
||||
|
||||
setupIonicReact();
|
||||
|
||||
const routes = (
|
||||
<>
|
||||
<Route exact path="/cadastro" component={Cadastro}></Route>
|
||||
<Route exact path="/login" component={Login}></Route>
|
||||
<>
|
||||
<Route exact path="/cadastro" component={Cadastro}></Route>
|
||||
<Route exact path="/login" component={Login}></Route>
|
||||
|
||||
<Route exact path="/home" component={Home}></Route>
|
||||
<Route exact path="/home" component={Home}></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="/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-transporte" component={BuscarTransporte}></Route>
|
||||
<Route exact path="/transportes" component={Transportes}></Route>
|
||||
<Route exact path="/buscar-passageiro" component={BuscarPassageiro}></Route>
|
||||
<Route exact path="/buscar-transporte" component={BuscarTransporte}></Route>
|
||||
|
||||
<Route exact path="/usuario/:id" component={Perfil}></Route>
|
||||
<Route exact path="/usuario/:id" component={Perfil}></Route>
|
||||
|
||||
<Route exact path="/cadastro-van" component={CadastroVan}></Route>
|
||||
<Route exact path="/minhas-vans" component={MinhasVans}></Route>
|
||||
<Route exact path="/cadastrar-itinerario" component={CadastrarItinerario}></Route>
|
||||
<Route exact path="/meus-itinerarios" component={MeusItinerarios}></Route>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/login" />
|
||||
</Route>
|
||||
</>)
|
||||
<Route exact path="/cadastro-van" component={CadastroVan}></Route>
|
||||
<Route exact path="/minhas-vans" component={MinhasVans}></Route>
|
||||
<Route
|
||||
exact
|
||||
path="/cadastrar-itinerario"
|
||||
component={CadastrarItinerario}
|
||||
></Route>
|
||||
<Route exact path="/meus-itinerarios" component={MeusItinerarios}></Route>
|
||||
<Route exact path="/">
|
||||
<Redirect to="/login" />
|
||||
</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);
|
||||
|
||||
user.setIsLoggedIn = setIsLoggedIn;
|
||||
|
||||
return(
|
||||
<IonApp>
|
||||
<IonReactRouter>
|
||||
return (
|
||||
<IonApp>
|
||||
<IonReactRouter>
|
||||
{isLoggedIn ? (
|
||||
<IonTabs>
|
||||
<IonRouterOutlet>{routes}</IonRouterOutlet>
|
||||
|
||||
|
||||
<IonTabBar slot="bottom">
|
||||
<IonTabButton tab="buscar" href="/buscar-transporte">
|
||||
<IonIcon icon={search} />
|
||||
@@ -121,11 +134,13 @@ const IonicApp: React.FC = () => {
|
||||
</IonTabButton>
|
||||
</IonTabBar>
|
||||
</IonTabs>
|
||||
) : (<IonRouterOutlet>{routes}</IonRouterOutlet>)}
|
||||
) : (
|
||||
<IonRouterOutlet>{routes}</IonRouterOutlet>
|
||||
)}
|
||||
</IonReactRouter>
|
||||
</IonApp>
|
||||
)
|
||||
}
|
||||
</IonApp>
|
||||
);
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
|
||||
@@ -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
|
||||
4
src/theme/tailwind.css
Normal file
4
src/theme/tailwind.css
Normal file
@@ -0,0 +1,4 @@
|
||||
/* ./src/theme/tailwind.css */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
12
tailwind.config.js
Normal file
12
tailwind.config.js
Normal file
@@ -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: [],
|
||||
}
|
||||
Reference in New Issue
Block a user