Merge pull request #20 from JacobMGEvans/master

Structured out basic scaffolding & Forms & Routing & React-like File System

.eslintrc

@@ -0,0 +1,54 @@
+{
+ "parser": "babel-eslint",
+ "parserOptions": {
+ "ecmaVersion": 10
+ },
+ "plugins": ["babel", "react-hooks"],
+ "extends": ["eslint:recommended"],
+ "env": { "browser": true, "node": true, "es6": true },
+ "settings": {
+ "polyfills": ["fetch"]
+ },
+ "rules": {
+ "react-hooks/rules-of-hooks": "error",
+ "react-hooks/exhaustive-deps": "warn",
+ "quotes": [2, "backtick", "avoid-escape"],
+ "semi": "error",
+ "react/button-has-type": [0],
+ "react/forbid-prop-types": [0],
+ "react/no-unused-prop-types": [0],
+ "react/jsx-filename-extension": [0],
+ "react/jsx-one-expression-per-line": [0],
+ "no-underscore-dangle": [0],
+ "max-len": [0],
+ "no-return-assign": [0],
+ "no-param-reassign": [0],
+ "global-require": [0],
+ "no-useless-escape": [0],
+ "no-unused-expressions": [0],
+ "consistent-return": [0],
+ "class-methods-use-this": [0],
+ "react/prefer-stateless-function": [0],
+ "no-nested-ternary": [0],
+ "no-undef": [1],
+ "react/no-array-index-key": [0],
+ "react/prop-types": [0],
+ "babel/new-cap": [0],
+ "babel/object-curly-spacing": [0],
+ "babel/no-invalid-this": [1],
+ "no-console": [0],
+ "import/no-extraneous-dependencies": [1],
+ "import/prefer-default-export": [0],
+ "react/no-unused-state": [1],
+ "no-unexpected-multiline": [0],
+ "function-paren-newline": [0],
+ "react/no-string-refs": [0],
+ "react/destructuring-assignment": [1],
+ "react/no-access-state-in-setstate": [0],
+ "jsx-a11y/click-events-have-key-events": [1],
+ "jsx-a11y/no-static-element-interactions": [1],
+ "jsx-a11y/label-has-for": [1],
+ "jsx-a11y/alt-text": [1],
+ "arrow-parens": [0]
+ }
+}

package.json

@@ -6,6 +6,9 @@
  "@material-ui/core": "^4.5.0",
  "@material-ui/icons": "^4.4.3",
  "@material-ui/styles": "^4.5.0",
+ "@reach/router": "^1.2.1",
+ "@testing-library/react": "^9.3.0",
+ "formik": "^1.5.8",
  "react": "^16.10.2",
  "react-dom": "^16.10.2",
  "react-scripts": "3.2.0"
@@ -33,7 +36,19 @@
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
  "main": "index.js",
- "devDependencies": {},
+ "devDependencies": {
+ "@babel/core": "7.6.4",
+ "@babel/node": "7.6.3",
+ "babel-eslint": "^10.0.3",
+ "eslint": "^6.5.1",
+ "eslint-config-airbnb": "^18.0.1",
+ "eslint-plugin-babel": "^5.3.0",
+ "eslint-plugin-import": "^2.18.2",
+ "eslint-plugin-jsx-a11y": "^6.2.3",
+ "eslint-plugin-react": "^7.16.0",
+ "eslint-plugin-react-hooks": "2.1.2",
+ "prettier": "1.18.2"
+ },
  "author": "BendJS",
  "license": "MIT"
 }

src/App.js

@@ -1,27 +1,21 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { Fragment } from 'react';
+import { Router } from '@reach/router';
+
+import ContactUs from './components/contact-us';
+import Home from './components/home';
+import Header from './components/header';
 import './App.css';
 import Button from '@material-ui/core/Button';
 
 function App() {
  return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <Button
- color="secondary"
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </Button>
- </header>
- </div>
+ <Fragment>
+ <Header />
+ <Router>
+ <Home path='/' />
+ <ContactUs path='contact-us' />
+ </Router>
+ </Fragment>
  );
 }
 

src/__tests__/App.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import App from '../App';
+
+describe('Tests for App.js', () => {
+ test('should test App renders with no issues', () => {});
+});

src/components/contact-us/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Formik } from 'formik';
+
+const ContactUs = () => (
+ <div>
+ <h1>Formik Basic Example</h1>
+ <Formik
+ initialValues={{ name: 'Jean Luc Picard' }}
+ onSubmit={(values, actions) => {
+ setTimeout(() => {
+ alert(JSON.stringify(values, null, 2));
+ actions.setSubmitting(false);
+ }, 1000);
+ }}
+ render={props => (
+ <form onSubmit={props.handleSubmit}>
+ <input
+ type='text'
+ onChange={props.handleChange}
+ onBlur={props.handleBlur}
+ value={props.values.name}
+ name='name'
+ />
+ {props.errors.name && <div id='feedback'>{props.errors.name}</div>}
+ <button type='submit'>Submit</button>
+ </form>
+ )}
+ />
+ </div>
+);
+
+export default ContactUs;

src/components/header/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from '@reach/router';
+
+function Home() {
+ return (
+ <header>
+ <Link to='/'>Home</Link>
+ <Link to='contact-us'>Contact Us</Link>
+ </header>
+ );
+}
+export default Home;

src/components/home/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Home = () => <div>Content Home Page</div>;
+
+export default Home;