Project Base

claudiolcastro · May 11, 2020 · f978d9e · f978d9e
1 parent 08bd9de
commit f978d9e
Show file tree

Hide file tree

Showing 28 changed files with 787 additions and 184 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,2 @@
+serviceWorker.js
+node_modules
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,27 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+  ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 11,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+  ],
+  rules: {
+    "react/prop-types": "off",
+  },
+};
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v12.16.1
diff --git a/package.json b/package.json
@@ -6,13 +6,28 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-redux": "^7.2.0",
+    "react-scripts": "3.4.1",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
+    "sass-loader": "^8.0.2",
+    "styled-components": "^5.1.0"
+  },
+  "devDependencies": {
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "lint": "eslint . --fix",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

diff --git a/public/index.html b/public/index.html
@@ -1,35 +1,18 @@
 <!DOCTYPE html>
 <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>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+<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" />
+  <title>Be The Hero</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.
 
@@ -39,5 +22,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</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/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import store from './store';
+
+import Header from './components/Header';
+import Login from './pages/Login';
+
+import './assets/scss/main.scss';
+
+function App() {
+  return (
+    <Provider store={store}>
+      <Header title="Be The Hero!" />
+      <main>
+        <Login />
+      </main>
+    </Provider>
+  );
+}
+
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/Test.jsx b/src/Test.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import { addName } from './store/profile';
+
+function Test({ name, addMyName }) {
+  return (
+    <div>
+      <h2>{name}</h2>
+      <button type="button" onClick={() => addMyName('Claudio')}>Change name</button>
+    </div>
+  );
+}
+
+const mapStateToProps = (state) => ({ name: state.profile.name });
+
+const mapDispathToProps = (dispatch) => bindActionCreators({ addMyName: addName }, dispatch);
+
+export default connect(mapStateToProps, mapDispathToProps)(Test);
diff --git a/src/assets/images/heroes.png b/src/assets/images/heroes.png
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
@@ -0,0 +1,42 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font: 400 14px Roboto, sans-serif;
+  background: #f0f0f5;
+  -webkit-font-smoothing: antialiased;
+}
+
+input, button, textarea {
+  font: 400 18px Roboto, sans-serif;
+}
+
+button {
+  cursor: pointer;
+}
+
+form input {
+  width: 100%;
+  height: 60px;
+  color: #333;
+  border: 1px solid #dcdce6;
+  border-radius: 8px;
+  padding: 0 24px;
+}
+
+form textarea {
+  width: 100%;
+  resize: vertical;
+  min-height: 140px;
+  color: #333;
+  border: 1px solid #dcdce6;
+  border-radius: 8px;
+  padding: 16px 24px;
+  line-height: 24px;
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Header({ title }) {
+  return (
+    <header>
+      <h1>{title}</h1>
+    </header>
+  );
+}
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
 
 // If you want your app to work offline and load faster, you can change

diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/Login/index.jsx b/src/pages/Login/index.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { Wrapper } from './styles';
+
+export default function Login() {
+  return (
+    <Wrapper>
+      <h2>Login</h2>
+    </Wrapper>
+  );
+}
diff --git a/src/pages/Login/styles.js b/src/pages/Login/styles.js
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  color: red;
+`;