Merge branch 'all-linting' into 'master'

All linting

See merge request xpub!64

.eslintrc

@@ -5,5 +5,31 @@
   },
   "extends": [
     "pubsweet"
-  ]
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "allowImportExportEverywhere": true
+  },
+  "rules": {
+    "camelcase": 0,
+    "consistent-return": 0,
+    "global-require": 0,
+    "jsx-a11y/anchor-is-valid": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "import/extensions": 0,
+    "import/no-dynamic-require": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/no-named-as-default": 0,
+    "import/no-named-as-default-member": 0,
+    "import/prefer-default-export": 0,
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-param-reassign": 0,
+    "no-shadow": 0,
+    "no-underscore-dangle": 0,
+    "react/no-did-mount-set-state": 0,
+    "react/prop-types": 0,
+    "sort-keys": 0
+  }
 }

.prettierrc

 {
-  "singleQuote": true,
   "semi": false,
-  "printWidth": 80,
+  "singleQuote": true,
   "trailingComma": "all"
 }

.stylelintrc

 {
-  "extends": "stylelint-config-standard",
-  "rules": {
-    "selector-pseudo-class-no-unknown": [true, {
-      "ignorePseudoClasses": ["global"]
-    }]
-  }
+  "extends": "stylelint-config-pubsweet"
 }

package.json

@@ -4,11 +4,12 @@
   "private": true,
   "license": "MIT",
   "devDependencies": {
-    "babel-eslint": "^8.0.1",
+    "babel-eslint": "^8.0.2",
     "babel-preset-es2015": "^6.24.1",
-    "eslint": "^4.11.0",
-    "eslint-config-pubsweet": "^0.0.5",
+    "eslint": "^4.12.0",
+    "eslint-config-pubsweet": "^0.0.6",
     "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^21.4.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-node": "^5.2.1",
     "eslint-plugin-prettier": "^2.3.1",
@@ -20,7 +21,7 @@
     "lint-staged": "^4.1.3",
     "prettier": "^1.8.2",
     "stylelint": "^8.2.0",
-    "stylelint-config-standard": "^17.0.0"
+    "stylelint-config-pubsweet": "^0.0.3"
   },
   "repository": {
     "type": "git",
@@ -28,16 +29,16 @@
   },
   "scripts": {
     "clean": "lerna clean",
-    "styleguide": "lerna run styleguide",
-    "test": "lerna run test",
     "lint": "npm run lint:js && npm run lint:style",
     "lint:js": "eslint packages",
     "lint:style": "stylelint packages/**/*.scss packages/**/*.css",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "styleguide": "lerna run styleguide",
+    "test": "lerna run test"
   },
   "lint-staged": {
     "*.js": [
-      "eslint",
+      "prettier --write",
       "git add"
     ],
     "*.css": "stylelint",

packages/component-app/src/components/App.js

 import React from 'react'
 import { compose } from 'recompose'
 import { connect } from 'react-redux'
+// import PropTypes from 'prop-types'
+
 import { AppBar } from 'xpub-ui'
 import { withJournal } from 'xpub-journal'
 import 'xpub-bootstrap'
+
 import classes from './App.local.scss'
 
 const App = ({ children, currentUser, journal }) => (
   <div className={classes.root}>
     <AppBar
-      brandName={journal.metadata.name}
       brandLink="/"
-      userName={currentUser ? currentUser.username : null}
+      brandName={journal.metadata.name}
       loginLink="/login"
-      logoutLink="/logout"/>
+      logoutLink="/logout"
+      userName={currentUser ? currentUser.username : null}
+    />
 
-    <div className={classes.main}>
-      {children}
-    </div>
+    <div className={classes.main}>{children}</div>
   </div>
 )
 
 export default compose(
-  connect(
-    state => ({
-      currentUser: state.currentUser.user,
-    })
-  ),
-  withJournal
+  connect(state => ({
+    currentUser: state.currentUser.user,
+  })),
+  withJournal,
 )(App)

packages/component-app/src/components/index.js

-export { default as App } from './App'
+import App from './App'
+
+export default App

packages/component-app/src/index.js

 module.exports = {
   frontend: {
-    components: [
-      () => require('./components')
-    ]
+    components: [() => require('./components')],
   },
 }

packages/component-authentication/src/components/Form.local.scss

 .root {
   font-family: "Fira Sans Condensed", sans-serif;
-  width: 30ch;
   margin: 0 auto;
+  width: 30ch;
 }
 
 .title {
-  text-align: left;
-  margin-bottom: 1.2em;
   font-size: 2em;
+  margin-bottom: 1.2em;
+  text-align: left;
 }
 
 .root input {
-  display: block;
-  width: 100%;
   border: 0 none;
-  padding: 0;
   border-bottom: 1px dashed #aaa;
+  display: block;
   font-family: "Fira Sans", sans-serif;
+  padding: 0;
+  width: 100%;
 
-  &:hover,
-  &:focus {
-    outline-style: none;
-    box-shadow: none;
-    border-color: transparent;
-    border-bottom: 1px dashed var(--color-primary);
-  }
+  // &:hover,
+  // &:focus {
+  //   border-bottom: 1px dashed var(--color-primary);
+  //   border-color: transparent;
+  //   box-shadow: none;
+  //   outline-style: none;
+  // }
 }
 
 .form {
-  margin-top: 1em;
   font-size: 0.8em;
+  margin-top: 1em;
 
   label {
-    display: block;
     cursor: text;
-    text-transform: lowercase;
+    display: block;
     font-style: italic;
+    text-transform: lowercase;
 
     &:hover {
       color: var(--color-primary);
@@ -44,31 +44,39 @@
     input {
       font-size: 1.3em;
       line-height: 1;
-      margin-top: 0.6em;
       margin-bottom: 3em;
+      margin-top: 0.6em;
     }
   }
 }
 
+.root input:hover,
+.root input:focus {
+  border-bottom: 1px dashed var(--color-primary);
+  border-color: transparent;
+  box-shadow: none;
+  outline-style: none;
+}
+
 .button {
-  margin-top: 1em;
   display: block;
+  margin-top: 1em;
   padding: 0.4em 2em;
 }
 
 .alternate {
-  margin-top: 1.6em;
   color: #777;
-  text-align: left;
   font-size: 0.8em;
+  margin-top: 1.6em;
+  text-align: left;
 
   .message {
     margin-right: 1ch;
   }
 
   .link {
-    color: var(--color-primary);
     border-bottom: 1px solid currentcolor;
+    color: var(--color-primary);
     cursor: pointer;
   }
 }

packages/component-authentication/src/components/Login.js

@@ -4,32 +4,28 @@ import { Link } from 'react-router-dom'
 import { Button, TextField } from 'xpub-ui'
 import classes from './Form.local.scss'
 
-const UsernameInput = props => (
-  <TextField label="Username" {...props.input}/>
-)
+const UsernameInput = props => <TextField label="Username" {...props.input} />
 const PasswordInput = props => (
-  <TextField label="Password" {...props.input} type="password"/>
+  <TextField label="Password" {...props.input} type="password" />
 )
 
 const Login = ({ errorMessage, handleSubmit }) => (
   <div className={classes.root}>
-    <div className={classes.title}>
-      Login
-    </div>
+    <div className={classes.title}>Login</div>
 
     {errorMessage && <div className={classes.error}>{errorMessage}</div>}
 
-    <form onSubmit={handleSubmit} className={classes.form}>
-      <Field name="username" component={UsernameInput}/>
-      <Field name="password" component={PasswordInput}/>
-      <Button primary type="submit" className={classes.button}>Login</Button>
+    <form className={classes.form} onSubmit={handleSubmit}>
+      <Field component={UsernameInput} name="username" />
+      <Field component={PasswordInput} name="password" />
+      <Button className={classes.button} primary type="submit">
+        Login
+      </Button>
     </form>
 
     <div className={classes.alternate}>
-      <span className={classes.message}>
-        You don't have an account?
-      </span>
-      <Link to="/signup" className={classes.link}>
+      <span className={classes.message}>You don&apos;t have an account?</span>
+      <Link className={classes.link} to="/signup">
         Sign up
       </Link>
     </div>

packages/component-authentication/src/components/LoginPage.js

@@ -15,26 +15,26 @@ const redirectPath = ({ location: { state } }) => {
 }
 
 const onSubmit = (values, dispatch, { history, location }) => {
-  dispatch(login(values)).then(() => {
-    history.push(redirectPath({ location }))
-  }).catch(error => {
-    if (error.validationErrors) {
-      throw new SubmissionError(error.validationErrors)
-    } else {
-      console.error(error)
-      // TODO: display error
-    }
-  })
+  dispatch(login(values))
+    .then(() => {
+      history.push(redirectPath({ location }))
+    })
+    .catch(error => {
+      if (error.validationErrors) {
+        throw new SubmissionError(error.validationErrors)
+      } else {
+        console.error(error)
+        // TODO: display error
+      }
+    })
 }
 
 export default compose(
   reduxForm({
     form: 'login',
-    onSubmit
+    onSubmit,
   }),
-  connect(
-    state => ({
-      error: state.login.error
-    })
-  )
+  connect(state => ({
+    error: state.login.error,
+  })),
 )(Login)

packages/component-authentication/src/components/LogoutPage.js

@@ -5,15 +5,15 @@ import { Redirect } from 'react-router-dom'
 import { logout } from '../redux/logout'
 
 class Logout extends React.Component {
-  componentDidMount () {
+  componentDidMount() {
     const { isAuthenticated, logout } = this.props
 
-    if (isAuthenticated)  {
+    if (isAuthenticated) {
       logout()
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     const { isAuthenticated, logout } = nextProps
 
     if (isAuthenticated) {
@@ -21,12 +21,10 @@ class Logout extends React.Component {
     }
   }
 
-  render () {
+  render() {
     const { isAuthenticated } = this.props
 
-    return isAuthenticated
-      ? <div>Signing out…</div>
-      : <Redirect to="/"/>
+    return isAuthenticated ? <div>Signing out…</div> : <Redirect to="/" />
   }
 }
 
@@ -36,7 +34,7 @@ export default compose(
       isAuthenticated: state.currentUser.isAuthenticated,
     }),
     {
-      logout
-    }
-  )
+      logout,
+    },
+  ),
 )(Logout)

packages/component-authentication/src/components/PrivateRoute.js

@@ -4,27 +4,37 @@ import { connect } from 'react-redux'
 import { Route, Redirect, withRouter } from 'react-router-dom'
 import { getCurrentUser } from '../redux/currentUser'
 
-const PrivateRoute = ({ currentUser, getCurrentUser, component: Component, ...rest }) => (
-  <Route {...rest} render={props => {
-    if (!currentUser.isFetched) {
-      if (!currentUser.isFetching) {
-        getCurrentUser()
-      }
+const PrivateRoute = ({
+  currentUser,
+  getCurrentUser,
+  component: Component,
+  ...rest
+}) => (
+  <Route
+    {...rest}
+    render={props => {
+      if (!currentUser.isFetched) {
+        if (!currentUser.isFetching) {
+          getCurrentUser()
+        }
 
-      return <div>loading…</div>
-    }
+        return <div>loading…</div>
+      }
 
-    if (!currentUser.isAuthenticated) {
-      return (
-        <Redirect to={{
-          pathname: '/login',
-          state: { from: props.location }
-        }}/>
-      )
-    }
+      if (!currentUser.isAuthenticated) {
+        return (
+          <Redirect
+            to={{
+              pathname: '/login',
+              state: { from: props.location },
+            }}
+          />
+        )
+      }
 
-    return <Component {...props}/>
-  }}/>
+      return <Component {...props} />
+    }}
+  />
 )
 
 export default compose(
@@ -34,7 +44,7 @@ export default compose(
       currentUser: state.currentUser,
     }),
     {
-      getCurrentUser
-    }
-  )
+      getCurrentUser,
+    },
+  ),
 )(PrivateRoute)

packages/component-authentication/src/components/Signup.js

@@ -4,36 +4,32 @@ import { Link } from 'react-router-dom'
 import { Button, TextField } from 'xpub-ui'
 import classes from './Form.local.scss'
 
-const UsernameInput = props => (
-  <TextField label="Username" {...props.input}/>
-)
+const UsernameInput = props => <TextField label="Username" {...props.input} />
 const EmailInput = props => (
-  <TextField label="Email" {...props.input} type="email"/>
+  <TextField label="Email" {...props.input} type="email" />
 )
 const PasswordInput = props => (
-  <TextField label="Password" {...props.input} type="password"/>
+  <TextField label="Password" {...props.input} type="password" />
 )
 
 const Signup = ({ errorMessage, handleSubmit }) => (
   <div className={classes.root}>
-    <div className={classes.title}>
-      Sign up
-    </div>
+    <div className={classes.title}>Sign up</div>
 
     {errorMessage && <div className={classes.error}>{errorMessage}</div>}
 
-    <form onSubmit={handleSubmit} className={classes.form}>
-      <Field name="username" component={UsernameInput}/>
-      <Field name="email" component={EmailInput}/>
-      <Field name="password" component={PasswordInput}/>
-      <Button primary type="submit" className={classes.button}>Sign up</Button>
+    <form className={classes.form} onSubmit={handleSubmit}>
+      <Field component={UsernameInput} name="username" />
+      <Field component={EmailInput} name="email" />
+      <Field component={PasswordInput} name="password" />
+      <Button className={classes.button} primary type="submit">
+        Sign up
+      </Button>
     </form>
 
     <div className={classes.alternate}>
-      <span className={classes.message}>
-        Already have an account?
-      </span>
-      <Link to="/login" className={classes.link}>
+      <span className={classes.message}>Already have an account?</span>
+      <Link className={classes.link} to="/login">
         Login
       </Link>
     </div>

packages/component-authentication/src/components/SignupPage.js

@@ -18,11 +18,9 @@ const onSubmit = (values, dispatch) => {
 export default compose(
   reduxForm({
     form: 'signup',
-    onSubmit
+    onSubmit,
   }),
-  connect(
-    state => ({
-      error: state.signup.error
-    })
-  )
+  connect(state => ({
+    error: state.signup.error,
+  })),
 )(Signup)

packages/component-authentication/src/index.js

 module.exports = {
   frontend: {
-    components: [
-      () => require('./components')
-    ],
+    components: [() => require('./components')],
     reducers: {
+      currentUser: () => require('./redux/currentUser').default,
       login: () => require('./redux/login').default,
       signup: () => require('./redux/signup').default,
-      currentUser: () => require('./redux/currentUser').default
-    }
+    },
   },
 }

packages/component-authentication/src/redux/currentUser.js

@@ -11,79 +11,77 @@ export const GET_CURRENT_USER_FAILURE = 'GET_CURRENT_USER_FAILURE'
 /* actions */
 
 export const getCurrentUserRequest = () => ({
-  type: GET_CURRENT_USER_REQUEST
+  type: GET_CURRENT_USER_REQUEST,
 })
 
 export const getCurrentUserSuccess = user => ({
   type: GET_CURRENT_USER_SUCCESS,
-  user
+  user,
 })
 
 export const getCurrentUserFailure = error => ({
+  error,
   type: GET_CURRENT_USER_FAILURE,
-  error
 })
 
 export const getCurrentUser = () => dispatch => {
   dispatch(getCurrentUserRequest())
   return api.get('/users/authenticate').then(
-    user => {
-      return dispatch(getCurrentUserSuccess(user))
-    },
+    user => dispatch(getCurrentUserSuccess(user)),
     error => {
       dispatch(getCurrentUserFailure(error))
       throw error
-    }
+    },
   )
 }
 
 /* reducer */
 
 const initialState = {
-  isFetching: false,
-  isFetched: false,
+  error: null,
   isAuthenticated: false,
+  isFetched: false,
+  isFetching: false,
   user: null,
-  error: null
 }
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case GET_CURRENT_USER_REQUEST:
       return {
-        isFetching: true,
-        isFetched: false,
+        error: null,
         isAuthenticated: false,
+        isFetched: false,
+        isFetching: true,
         user: null,
-        error: null,
       }
 
     case GET_CURRENT_USER_FAILURE:
       return {
-        isFetching: false,
-        isFetched: true,
+        error: action.error,
         isAuthenticated: false,
+        isFetched: true,
+        isFetching: false,
         user: null,
-        error: action.error
       }
 
     case GET_CURRENT_USER_SUCCESS:
       return {
-        isFetching: false,
-        isFetched: true,
+        error: null,
         isAuthenticated: true,
+        isFetched: true,
+        isFetching: false,
         user: action.user,
-        error: null
       }
 
     // clear the current user on logout
     case LOGOUT_SUCCESS:
       return {
-        isFetching: false,
-        isFetched: false,
+        error: null,
         isAuthenticated: false,
+        isFetched: false,
+        isFetching: false,
         user: null,
-        error: null,
       }
 
     default:

packages/component-authentication/src/redux/login.js

@@ -21,11 +21,11 @@ export const loginSuccess = user => ({
 })
 
 export const loginFailure = error => ({
+  error,
   type: LOGIN_FAILURE,
-  error
 })
 
-export const login = (credentials) => dispatch => {
+export const login = credentials => dispatch => {
   dispatch(loginRequest())
   return api.create('/users/authenticate', credentials).then(
     user => {
@@ -36,35 +36,35 @@ export const login = (credentials) => dispatch => {
     error => {
       dispatch(loginFailure(error))
       throw error
-    }
+    },
   )
 }
 
 /* reducer */
 
 const initialState = {
+  error: null,
   isFetching: false,
-  error: null
 }
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case LOGIN_REQUEST:
       return {
+        error: null,
         isFetching: true,
-        error: null
       }
 
     case LOGIN_SUCCESS:
       return {
+        error: null,
         isFetching: false,
-        error: null
       }
 
     case LOGIN_FAILURE:
       return {
+        error: action.error,
         isFetching: false,
-        error: action.error
       }
 
     default:

packages/component-authentication/src/redux/logout.js

@@ -5,7 +5,7 @@ export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS'
 /* actions */
 
 export const logoutSuccess = () => ({
-  type: LOGOUT_SUCCESS
+  type: LOGOUT_SUCCESS,
 })
 
 export const logout = () => dispatch => {

packages/component-authentication/src/redux/signup.js

@@ -15,12 +15,12 @@ export const signupRequest = () => ({
 
 export const signupSuccess = user => ({
   type: SIGNUP_SUCCESS,
-  user
+  user,
 })
 
 export const signupFailure = error => ({
+  error,
   type: SIGNUP_FAILURE,
-  error
 })
 
 export const signup = credentials => dispatch => {
@@ -33,35 +33,35 @@ export const signup = credentials => dispatch => {
     error => {
       dispatch(signupFailure(error))
       throw error
-    }
+    },
   )
 }
 
 /* reducer */
 
 const initialState = {
-  isFetching: false,
   error: null,
+  isFetching: false,
 }
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case SIGNUP_REQUEST:
       return {
+        error: null,
         isFetching: true,
-        error: null
       }
 
     case SIGNUP_SUCCESS:
       return {
+        error: null,
         isFetching: false,
-        error: null
       }
 
     case SIGNUP_FAILURE:
       return {
+        error: action.error,
         isFetching: false,
-        error: action.error
       }
 
     default:

packages/component-authentication/styleguide.config.js

 module.exports = {
   title: 'xpub authentication style guide',
   styleguideComponents: {
-    StyleGuideRenderer: require.resolve('xpub-styleguide/src/components/StyleGuideRenderer'),
-    Wrapper: require.resolve('xpub-styleguide/src/components/Wrapper')
+    StyleGuideRenderer: require.resolve(
+      'xpub-styleguide/src/components/StyleGuideRenderer',
+    ),
+    Wrapper: require.resolve('xpub-styleguide/src/components/Wrapper'),
   },
   skipComponentsWithoutExample: true,
   serverPort: 6061,
   theme: {
     fontFamily: {
-      base: '"Fira Sans", sans-serif'
+      base: '"Fira Sans", sans-serif',
     },
     color: {
-      link: 'cornflowerblue'
-    }
-  }
+      link: 'cornflowerblue',
+    },
+  },
 }