Merge pull request #10 from jsdrupal/prettier

Prettier

Author: justafish

.circleci/config.yml

@@ -32,12 +32,23 @@ jobs:
             - node_modules
           key: build-v1-{{ .Branch }}-{{ .Revision }}
 
-  test:
+  lint:
     <<: *defaults
     steps:
       - checkout
       - *restore-build
-      - run: yarn test
+      - run: yarn test:lint:ci
+      - store_test_results:
+          path: reports
+
+  unit:
+    <<: *defaults
+    steps:
+      - checkout
+      - *restore-build
+      - run: yarn test:unit:ci
+      - store_test_results:
+          path: reports
 
   dist:
     <<: *defaults
@@ -64,12 +75,16 @@ workflows:
   package:
     jobs:
       - build
-      - test:
+      - lint:
+          requires:
+            - build
+      - unit:
           requires:
             - build
       - dist:
           requires:
-            - test
+            - lint
+            - unit
             - build
           filters:
            branches:

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "extends": [
+    "airbnb",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true,
+    "serviceworker": true
+  },
+  "rules": {
+    "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
+    "jsx-a11y/anchor-is-valid": [ "error", {
+      "aspects": [ "noHref" ]
+    }],
+    "no-param-reassign": [2, { "props": false }]
+  }
+}

.gitignore

@@ -5,6 +5,7 @@
 
 # testing
 /coverage
+/reports
 
 # production
 /build

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

package.json

@@ -4,17 +4,33 @@
   "private": true,
   "dependencies": {
     "emotion": "^9.0.2",
+    "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2"
   },
   "devDependencies": {
+    "babel-eslint": "^8.2.2",
+    "eslint": "^4.9.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-react": "^7.4.0",
+    "jest-junit": "^3.6.0",
+    "prettier": "^1.11.1",
     "react-scripts": "1.1.1"
   },
   "scripts": {
+    "prettier": "prettier --write 'src/**/*.js'",
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "test": "yarn test:lint && yarn test:unit",
+    "test:unit": "react-scripts test --env=jsdom",
+    "test:unit:ci": "CI=true JEST_JUNIT_OUTPUT=reports/jest-junit.xml react-scripts test --testResultsProcessor ./node_modules/jest-junit --env=jsdom",
+    "test:lint": "eslint ./src --max-warnings=0",
+    "test:lint:ci": "eslint ./src --max-warnings=0 --format junit -o reports/eslint-junit.xml",
     "eject": "react-scripts eject"
   }
 }

src/App.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+
+import routes from './routes';
+
+import Home from './components/05_pages/Home/Home';
+import NoMatch from './NoMatch';
+
+import normalize from './styles/normalize'; // eslint-disable-line no-unused-vars
+import base from './styles/base'; // eslint-disable-line no-unused-vars
+
+class App extends Component {
+  componentDidMount() {
+    window.history.replaceState(null, null, '/');
+  }
+  render() {
+    return (
+      <Router>
+        <div>
+          <ul>
+            <li>
+              <Link to="/">Home</Link>
+            </li>
+            <li>
+              <Link to="/admin/people/permissions">Permissions</Link>
+            </li>
+            <li>
+              <Link to="/admin/appearance">Appearance</Link>
+            </li>
+            <li>
+              <Link to="/node/add">Content</Link>
+            </li>
+          </ul>
+
+          <hr />
+
+          <Route exact path="/" component={Home} />
+          {Object.keys(routes).map(route => (
+            <Route path={route} component={routes[route]} key={route} />
+          ))}
+          <Route component={NoMatch} />
+        </div>
+      </Router>
+    );
+  }
+}
+
+export default App;

src/App.jsx

@@ -0,0 +1,22 @@
+import { Component } from 'react';
+import { shape, string } from 'prop-types';
+
+import routes from './routes';
+
+const NoMatch = class NoMatch extends Component {
+  static propTypes = {
+    location: shape({
+      pathname: string.isRequired,
+    }).isRequired,
+  };
+  componentWillReceiveProps(nextProps) {
+    if (!Object.keys(routes).includes(nextProps.location.pathname)) {
+      window.location = window.location.href;
+    }
+  }
+  render() {
+    return null;
+  }
+};
+
+export default NoMatch;

src/NoMatch.js

@@ -1,18 +1,17 @@
 import React from 'react';
 import { css } from 'emotion';
 
+const styles = {
+  title: css`
+    text-decoration: underline;
+  `,
+};
+
 const Permissions = () => (
   <div>
     <h1 className={styles.title}>Permissions</h1>
     <p>This will be the permissions page.</p>
   </div>
 );
 
-const styles = {
-  title: css`
-    text-decoration: underline;
-  `,
-};
-
 export default Permissions;
-