devatbrazil · LucasLeandroBR · Jun 6, 2021 · Jun 6, 2021
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,18 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = tab
+indent_size = 4
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false
+
+[COMMIT_EDITMSG]
+max_line_length = 0
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"printWidth": 120,
+	"proseWrap": "always",
+	"trailingComma": "es5",
+	"tabWidth": 4,
+	"semi": false,
+	"singleQuote": true
+}
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@types/react-dom": "^17.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
@@ -39,5 +40,15 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.7",
+    "@types/smoothscroll-polyfill": "^0.3.1",
+    "@types/styled-components": "^5.1.9",
+    "history": "^5.0.0",
+    "react-icons": "^4.2.0",
+    "react-toastify": "^7.0.4",
+    "smoothscroll-polyfill": "^0.4.4",
+    "styled-components": "^5.3.0"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -4,40 +4,15 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Adotpets</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,26 +1,14 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from 'react'
+import GlobalStyles from 'styles/GlobalStyles'
+import { BrowserRouter } from 'react-router-dom'
+import Routes from 'routes'
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+const App: React.FC = () => (
+	<BrowserRouter>
+		<GlobalStyles />
+		{/*<Header />*/}
+		<Routes />
+	</BrowserRouter>
+)
 
-export default App;
+export default App
diff --git a/src/components/Error/index.tsx b/src/components/Error/index.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+type IError = {
+  type: "Error404" | "FailLoading" | "FailPermission";
+}
+
+const Error: React.FC<IError> = ({ type }) => {
+  return (
+    <>
+      {type === "Error404" && <h2>Error404: Página não encontrada </h2>}
+      {type === "FailLoading" && (
+        <h2>Falha no carregamento do conteúdo</h2>
+      )}
+      {type === "FailPermission" && <h2>Rota não pública</h2>}
+    </>
+  );
+};
+
+export default Error;
diff --git a/src/index.tsx b/src/index.tsx
@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import smoothscroll from 'smoothscroll-polyfill'
+
+smoothscroll.polyfill()
 
 ReactDOM.render(
   <React.StrictMode>
@@ -11,7 +14,4 @@ ReactDOM.render(
   document.getElementById('root')
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Home: React.FC = () => {
+    return (
+      <h1>adotpets</h1>
+  );
+}
+
+export default Home;
diff --git a/src/pages/Page404/index.tsx b/src/pages/Page404/index.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import Error from "../../components/Error";
+
+const Page404: React.FC = () => {
+  return <Error type="Error404" />;
+};
+
+export default Page404;  
diff --git a/src/routes/Constants/index.ts b/src/routes/Constants/index.ts
@@ -0,0 +1,4 @@
+export const HOME = '/'
+
+// Page error 404
+export const ERROR_404 = '*';
diff --git a/src/routes/browserHistory.ts b/src/routes/browserHistory.ts
@@ -0,0 +1,2 @@
+import { createBrowserHistory } from 'history'
+export default createBrowserHistory()
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import routes from "./routes";
+//import PrivateRouter from "./PrivateRoute";
+import { IRoutes } from "./routes";
+
+const Routes: React.FC = () => {
+  const renderRoutes = ({ component, path, exact, isProtected }: IRoutes) => {
+    // if (isProtected) {
+    //   return (
+    //     <PrivateRouter
+    //       path={path}
+    //       component={component}
+    //       key={path}
+    //       exact={!!exact}
+    //     />
+    //   );
+    // }
+    return (
+      <Route path={path} component={component} key={path} exact={!!exact} />
+    );
+  };
+
+  return (
+    <Switch>
+      {routes.map(renderRoutes)}
+    </Switch>
+  );
+};
+
+export default Routes;
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
@@ -0,0 +1,28 @@
+import React from 'react'
+import Error404 from 'pages/Page404'
+import Home from 'pages/Home';
+import { ERROR_404, HOME } from './Constants'
+
+export interface IRoutes {
+	path: string
+	name: string
+	component: React.FC
+	exact?: boolean
+	isProtected?: boolean
+}
+
+const routes: IRoutes[] = [
+	{
+		path: HOME,
+		name: 'Página Principal',
+		component: Home,
+		exact: true,
+	},
+	{
+		path: ERROR_404,
+		name: 'Página de erro 404',
+		component: Error404,
+	},
+]
+
+export default routes
diff --git a/src/styles/GlobalStyles.ts b/src/styles/GlobalStyles.ts
@@ -0,0 +1,66 @@
+import { createGlobalStyle } from 'styled-components'
+
+export default createGlobalStyle`
+  * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        outline: 0;
+    }
+
+    html, body, #root {
+     max-width: 1440px;
+    box-sizing: border-box;
+    --webkit-font-smoothing: antialiased;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+
+}
+    *, button, input {
+      border: 0;
+    }
+
+    button {
+        cursor: pointer;
+    }
+
+    h1, h2, h3, h3, h4, h5, h6, p, span {
+      color: var(--wihite);
+    }
+
+    a {
+      text-decoration: none;
+      font-style: none;
+
+      &:hover {
+        font-style: none;
+      }
+    }
+
+     ::-webkit-scrollbar {
+	  width: 8px;
+	}
+	::-moz-scrollbar {
+	  width: 8px;
+	}
+	:-ms-input-scrollbar {
+	  width: 8px;
+	}
+
+  ::-webkit-scrollbar-thumb {
+	  background: #cecece;
+	  border-radius: 10px;
+	}
+
+    /* :root {
+      --primary: #181818;
+      --secondy: #4553FE;
+      --secondy-lighting: #6871e3;
+      --icons: #14D2B8;
+      --white: #FDFDFD;
+      --black-smooth: #343434;
+      --grey-smooth: #555555;
+    } */
+
+`
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,9 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": "src"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src", "./src/*"],
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import { createBrowserHistory } from 'history'
		export default createBrowserHistory()