feat(project): layout and miragejs implementation

lucas-eduardo · Nov 21, 2020 · c214e31 · c214e31
1 parent c4a26ef
commit c214e31
Show file tree

Hide file tree

Showing 39 changed files with 1,514 additions and 61 deletions.
diff --git a/.releaserc.json b/.releaserc.json
@@ -1,5 +1,5 @@
 {
-  "plugin": [
+  "plugins": [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",
     "@semantic-release/github",
@@ -13,7 +13,7 @@
     {
       "path": "@semantic-release/git",
       "assets": ["package.json", "package-lock.json", "CHANGELOG.md"],
-      "message": "chore(release): ${nextRelease.version} [skyp ci]\n\n${nextRelease.notes}"
+      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
     }
   ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,9 +3,13 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "polished": "^4.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.0"
+    "react-icons": "^3.11.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.0",
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^5.0.1",
@@ -17,6 +21,9 @@
     "@types/node": "^12.19.6",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
+    "@types/react-icons": "^3.0.0",
+    "@types/react-router-dom": "^5.1.6",
+    "@types/styled-components": "^5.1.4",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
     "cz-conventional-changelog": "^3.3.0",
@@ -28,6 +35,7 @@
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.21.5",
+    "miragejs": "^0.1.41",
     "prettier": "^2.1.2",
     "semantic-release": "^17.2.4",
     "typescript": "^4.1.2"

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,42 +2,19 @@
 <html lang="en">
   <head>
     <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>
+
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
   </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/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/@layout/index.tsx b/src/@layout/index.tsx
@@ -0,0 +1,13 @@
+import { Container, Header, Main, Footer } from './styles';
+
+const Layout: React.FC = ({ children }) => (
+  <Container>
+    <Header />
+
+    <Main>{children}</Main>
+
+    <Footer />
+  </Container>
+);
+
+export { Layout };
diff --git a/src/@layout/styles.ts b/src/@layout/styles.ts
@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: grid;
+
+  width: 100%;
+  height: 100%;
+
+  grid-template-columns: 1fr;
+  grid-template-rows: 8rem auto 4rem;
+  grid-template-areas:
+    'HEADER'
+    'MAIN'
+    'FOOTER';
+`;
+
+export const Header = styled.div`
+  display: flex;
+  grid-area: HEADER;
+
+  background-color: #3c3845;
+
+  box-shadow: -1rem -0.7rem 1.4rem #3778cd;
+`;
+
+export const Main = styled.div`
+  grid-area: MAIN;
+
+  width: 100%;
+  max-width: 1150rem;
+  min-width: 100vw;
+
+  padding: 2rem 4rem;
+`;
+
+export const Footer = styled.div`
+  display: flex;
+  grid-area: FOOTER;
+
+  background-color: #3c3845;
+`;
diff --git a/src/@types/miragejs/index.d.ts b/src/@types/miragejs/index.d.ts
@@ -0,0 +1,3 @@
+declare module 'miragejs' {
+  function createServer(obj: any): void;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,21 @@
+import { AppProvider } from './contextApi';
+
+import GlobalStyle from './styles/GlobalStyle';
+
+import { Layout } from './@layout';
+
+import Routes from './routes';
+
+import './miragejs';
+
 function App() {
   return (
-    <div className="App">
-      <h1>Projeto Strategy</h1>
-    </div>
+    <AppProvider>
+      <GlobalStyle />
+      <Layout>
+        <Routes />
+      </Layout>
+    </AppProvider>
   );
 }
 

diff --git a/src/components/ButtonAction/IButtonAction.ts b/src/components/ButtonAction/IButtonAction.ts
@@ -0,0 +1,7 @@
+import { IconType } from 'react-icons';
+
+export interface IButtonActionProps {
+  Icon?: IconType;
+  text: string;
+  callback: () => void;
+}
diff --git a/src/components/ButtonAction/index.tsx b/src/components/ButtonAction/index.tsx
@@ -0,0 +1,13 @@
+import { IButtonActionProps } from './IButtonAction';
+
+import { Container } from './styles';
+
+const ButtonAction = ({ Icon, text, callback }: IButtonActionProps) => {
+  return (
+    <Container onClick={callback}>
+      {Icon && <Icon />} <span>{text}</span>
+    </Container>
+  );
+};
+
+export { ButtonAction };
diff --git a/src/components/ButtonAction/styles.ts b/src/components/ButtonAction/styles.ts
@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import { shade } from 'polished';
+
+const buttonColor = '#3778cd';
+
+export const Container = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  max-width: 250px;
+  height: 60px;
+
+  background-color: ${buttonColor};
+  border-radius: 0.4rem;
+  border: 0;
+
+  transition: background-color 0.2s ease-in-out;
+
+  cursor: pointer;
+
+  svg {
+    margin-right: 1rem;
+
+    width: 2.5rem;
+    height: 2.5rem;
+
+    color: #fff;
+  }
+
+  span {
+    font-size: 2.2rem;
+    color: #fff;
+  }
+
+  &:hover {
+    background-color: ${shade(0.2, buttonColor)};
+  }
+
+  @media (max-width: 768px) {
+    span {
+      font-size: 1.8rem;
+    }
+  }
+`;
diff --git a/src/components/Input/IInput.ts b/src/components/Input/IInput.ts
@@ -0,0 +1,8 @@
+export interface IContainerProps {
+  isError: boolean;
+}
+
+export default interface IInput
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  isError?: boolean;
+}
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import IInput from './IInput';
+
+import { Container } from './styles';
+
+const Input = ({ isError = false, ...rest }: IInput) => {
+  return (
+    <Container isError={isError}>
+      <input {...rest} />
+    </Container>
+  );
+};
+
+export { Input };
diff --git a/src/components/Input/styles.ts b/src/components/Input/styles.ts
@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+import { IContainerProps } from './IInput';
+
+export const Container = styled.div<IContainerProps>`
+  width: 100%;
+  height: 40px;
+
+  background-color: transparent;
+  border-bottom: 2px solid
+    ${({ isError }) =>
+      isError ? 'rgba(255, 0, 0, 0.6)' : 'rgba(0, 0, 0, 0.6)'};
+
+  input {
+    width: 100%;
+    height: 100%;
+
+    background-color: transparent;
+    border: none;
+
+    color: rgba(0, 0, 0, 0.6);
+
+    &::placeholder {
+      font-size: 1.2rem;
+
+      transition: font-size 0.2s ease-in;
+    }
+
+    &:focus::placeholder {
+      font-size: 1.6rem;
+    }
+
+    &:disabled {
+      color: rgba(0, 0, 0, 0.3);
+
+      &::placeholder {
+        color: rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+`;
diff --git a/src/components/Table/ITable.ts b/src/components/Table/ITable.ts
@@ -0,0 +1,30 @@
+export interface IContainerProps {
+  isStriped?: boolean;
+  isBordered?: boolean;
+  isHovered?: boolean;
+  isSmall?: boolean;
+}
+
+export interface ITHeadProps {
+  isBordered?: boolean;
+  isSmall?: boolean;
+}
+
+export interface ITBodyProps {
+  isStriped?: boolean;
+  isBordered?: boolean;
+  isHovered?: boolean;
+  isSmall?: boolean;
+}
+
+export interface ITableProps {
+  columns: {
+    label: string;
+    row: string;
+  }[];
+  rows: any[];
+  isStriped?: boolean;
+  isBordered?: boolean;
+  isHovered?: boolean;
+  isSmall?: boolean;
+}