Third milestone

.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": ["airbnb", "plugin:react/recommended"],
+  "plugins": ["react"],
+  "rules": {
+    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
+    "import/no-unresolved": "off",
+    "no-shadow": "off",
+    "arrow-parens": ["error", "as-needed"]
+  }
+}

.stickler.yml

@@ -0,0 +1,11 @@
+
+# add the linters you want stickler to use for this project
+linters:
+  eslint:
+    # indicate where is the config file for stylelint
+    config: './.eslintrc.json'
+
+# PLEASE DO NOT enable auto fixing options
+# if you need extra support from you linter - do it in your local env as described in README for this config
+
+# find full documentation here: https://stickler-ci.com/docs

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "prop-types": "^15.7.2",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-scripts": "3.4.0"
@@ -30,5 +31,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^1.7.0"
   }
 }

src/App.css

@@ -1,38 +1,6 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+display: flex;
+flex-direction: column;
+width: 700px;
+margin: 50px auto;
 }

src/App.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import App from './App';
+import App from './components/App';
 
 test('renders learn react link', () => {
   const { getByText } = render(<App />);

src/Button.css

@@ -0,0 +1,10 @@
+.Button {
+  width: 25%;
+  text-align: center;
+  border-left: 1px solid black;
+  font-size: 20px;
+  font-weight: bold;
+  color: black;
+  height: 100%
+
+}

src/ButtonPanel.css

@@ -0,0 +1,3 @@
+.ButtonPanel .group {
+  height: 100px;
+}

src/Display.css

@@ -0,0 +1,9 @@
+.Display {
+  background: grey;
+  height: 100px;
+  color: white;
+  font-weight: bold;
+  font-size: 80px;
+  padding: 10px;
+  text-align: right;
+}

src/components/App.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import '../App.css';
+import Display from './Display';
+import ButtonPanel from './ButtonPanel';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <Display result="0" />
+        <ButtonPanel />
+      </div>
+    );
+  }
+}
+
+
+export default App;

src/components/Button.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Proptypes from 'prop-types';
+import '../Button.css';
+
+const button = props => {
+  const { name, color } = props;
+  let { wide } = props;
+  wide = wide === true ? '50%' : '25%';
+  return (
+    <button type="button" className="Button" style={{ background: color, width: wide }}>{name}</button>
+  );
+};
+
+
+button.defaultProps = {
+  name: '',
+  color: '#FA9F42',
+  wide: false,
+};
+
+button.propTypes = {
+  name: Proptypes.string,
+  color: Proptypes.string,
+  wide: Proptypes.bool,
+};
+
+
+export default button;

src/components/ButtonPanel.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Button from './Button';
+import '../ButtonPanel.css';
+
+const buttonPanel = () => (
+  <div className="ButtonPanel">
+    <div className="group group-1">
+      <Button name="AC" color="#E0E0E2" />
+      <Button name="+/-" color="#E0E0E2" />
+      <Button name="%" color="#E0E0E2" />
+      <Button name="÷" />
+    </div>
+    <div className="group group-2">
+      <Button name="7" color="#E0E0E2" />
+      <Button name="8" color="#E0E0E2" />
+      <Button name="9" color="#E0E0E2" />
+      <Button name="X" />
+    </div>
+    <div className="group group-3">
+      <Button name="4" color="#E0E0E2" />
+      <Button name="5" color="#E0E0E2" />
+      <Button name="6" color="#E0E0E2" />
+      <Button name="-" />
+    </div>
+    <div className="group group-4">
+      <Button name="1" color="#E0E0E2" />
+      <Button name="2" color="#E0E0E2" />
+      <Button name="3" color="#E0E0E2" />
+      <Button name="+" />
+    </div>
+    <div className="group group-5">
+      <Button name="0" wide color="#E0E0E2" />
+      <Button name="." color="#E0E0E2" />
+      <Button name="=" />
+    </div>
+  </div>
+);
+
+
+export default buttonPanel;

src/components/Display.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Proptypes from 'prop-types';
+import '../Display.css';
+
+const display = props => {
+  const { result } = props;
+  return (
+    <div className="Display">
+      {result}
+    </div>
+  );
+};
+
+display.defaultProps = {
+  result: 0,
+};
+
+display.propTypes = {
+  result: Proptypes.string,
+};
+export default display;

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/serviceWorker.js

@@ -1,5 +1,7 @@
 // This optional code is used to register a service worker.
 // register() is not called by default.
+/* eslint-disable */
+
 
 // This lets the app load faster on subsequent visits in production, and gives
 // it offline capabilities. However, it also means that developers (and users)
@@ -11,13 +13,13 @@
 // opt-in, read https://bit.ly/CRA-PWA
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === 'localhost'
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    || window.location.hostname === '[::1]'
     // 127.0.0.0/8 are considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    || window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
 );
 
 export function register(config) {
@@ -42,8 +44,8 @@ export function register(config) {
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://bit.ly/CRA-PWA'
+            'This web app is being served cache-first by a service '
+              + 'worker. To learn more, visit https://bit.ly/CRA-PWA',
           );
         });
       } else {
@@ -70,8 +72,8 @@ function registerValidSW(swUrl, config) {
               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
               console.log(
-                'New content is available and will be used when all ' +
-                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+                'New content is available and will be used when all '
+                  + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
               );
 
               // Execute callback
@@ -101,14 +103,14 @@ function registerValidSW(swUrl, config) {
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl, {
-    headers: { 'Service-Worker': 'script' }
+    headers: { 'Service-Worker': 'script' },
   })
     .then(response => {
       // Ensure service worker exists, and that we really are getting a JS file.
       const contentType = response.headers.get('content-type');
       if (
-        response.status === 404 ||
-        (contentType != null && contentType.indexOf('javascript') === -1)
+        response.status === 404
+        || (contentType != null && contentType.indexOf('javascript') === -1)
       ) {
         // No service worker found. Probably a different app. Reload the page.
         navigator.serviceWorker.ready.then(registration => {
@@ -123,7 +125,7 @@ function checkValidServiceWorker(swUrl, config) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        'No internet connection found. App is running in offline mode.',
       );
     });
 }