Prettier

.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/NoMatch.js

@@ -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/components/05_pages/Permissions/Permissions.jsx → src/components/05_pages/Permissions/Permissions.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;
-

src/registerServiceWorker.js

@@ -14,44 +14,10 @@ const isLocalhost = Boolean(
     window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.
     window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
 );
 
-export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Lets check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // 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://goo.gl/SC7cgQ'
-          );
-        });
-      } else {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl);
-      }
-    });
-  }
-}
-
 function registerValidSW(swUrl) {
   navigator.serviceWorker
     .register(swUrl)
@@ -65,20 +31,16 @@ function registerValidSW(swUrl) {
               // the fresh content will have been added to the cache.
               // It's the perfect time to display a "New content is
               // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.');
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
             }
           }
         };
       };
     })
-    .catch(error => {
-      console.error('Error during service worker registration:', error);
-    });
+    .catch(() => {});
 }
 
 function checkValidServiceWorker(swUrl) {
@@ -101,11 +63,36 @@ function checkValidServiceWorker(swUrl) {
         registerValidSW(swUrl);
       }
     })
-    .catch(() => {
-      console.log(
-        'No internet connection found. App is running in offline mode.'
-      );
+    .catch(() => {});
+}
+
+export default function register() {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {});
+      } else {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl);
+      }
     });
+  }
 }
 
 export function unregister() {

src/routes.js

@@ -0,0 +1,8 @@
+import Permissions from './components/05_pages/Permissions/Permissions';
+
+// @todo Share this with Drupal
+const routes = {
+  '/admin/people/permissions': Permissions,
+};
+
+export default routes;