Merge branch 'lint' into 'main'

fix(*): add linter config and fix some files

See merge request kotahi/kotahi!153

.commitlintrc.js

+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+}

.cz-config.js

+const { commitizen } = require('@coko/lint')
+
+commitizen.scopes = ['api', 'models', 'client', 'ui', '*']
+
+module.exports = commitizen

.dockerignore

+# docker
+Dockerfile*
+docker-compose*
+
+# git
+.git
+.gitignore
+
+# npm & yarn
 node_modules
+npm-debug.log
+package-lock.json
+yarn-error.log
+
+# misc
+.devcontainer
+.DS_Store
+.vscode
+app.pid
+
+# environment files
+.env
+.env-ci
+.env.example
+.envrc
+*.env
+
+# app
+_build/
+config/local*
+cypress/
+data/
+coverage/
+logs/
+stories/
+tmp/
+uploads/*
+CONTRIBUTING.md
+
+# development config files
+.eslintrc.js
+.commitlintrc.js
+.cz-config.js
+.gitlab-ci.yml
+.linstagedrc.js
+.prettierrc.js
+.stylelintrc.js
+cypress.json

.eslintignore

-_build
-node_modules

.eslintrc

-{
-  "env": {
-    "es6": true,
-    "browser": true
-  },
-  "globals": {
-    "fixture": true,
-    "test": true,
-    "cy": true,
-  },
-  "extends": [
-    "pubsweet"
-  ],
-  "parser": "babel-eslint",
-  "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
-  }
-}

.eslintrc.js

+const { eslint } = require('@coko/lint')
+
+eslint.rules['react/jsx-props-no-spreading'] = 0
+
+module.exports = eslint

.lintstagedrc.js

+const { lintstaged } = require('@coko/lint')
+
+module.exports = lintstaged

.prettierrc

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

.prettierrc.js

+const { prettier } = require('@coko/lint')
+
+module.exports = prettier

.stylelintignore

-**/_build
-**/node_modules

.stylelintrc

-{
-  "extends": "stylelint-config-pubsweet"
-}

.stylelintrc.js

+const { stylelint } = require('@coko/lint')
+
+module.exports = stylelint

app/components/component-avatar/src/UserAvatar.js

+/* eslint-disable react/prop-types */
+
 import * as React from 'react'
-import { useQuery } from '@apollo/client'
+import { gql, useQuery } from '@apollo/client'
 import styled from 'styled-components'
-import gql from 'graphql-tag'
 import AvatarImage from './image'
 import { Container, AvatarLink, OnlineIndicator } from './style'
 import ConditionalWrap from '../../ConditionalWrap'
@@ -90,10 +91,9 @@ const Avatar = props => {
 }
 
 const AvatarHandler = props => {
-  const { showHoverProfile = true, isClickable } = props
+  const { showHoverProfile = true, isClickable, user, username } = props
 
-  if (props.user) {
-    const { user } = props
+  if (user) {
     return (
       <ConditionalWrap
         condition={showHoverProfile}
@@ -108,10 +108,8 @@ const AvatarHandler = props => {
     )
   }
 
-  if (!props.user && props.username) {
-    return (
-      <GetUserByUsername isClickable={isClickable} username={props.username} />
-    )
+  if (!user && username) {
+    return <GetUserByUsername isClickable={isClickable} username={username} />
   }
 
   return null

app/components/component-avatar/src/image.js

+/* eslint-disable react/prop-types */
+
 import * as React from 'react'
 import VisibilitySensor from 'react-visibility-sensor'
 
@@ -14,6 +16,7 @@ import { Img, FallbackImg, LoadingImg } from './style'
 export default function Image(props) {
   const { type, size, mobilesize } = props
   const { ...rest } = props
+
   const fallbackSrc =
     type === 'user'
       ? '/static/profiles/default_avatar.svg'

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

 import UserAvatar from './UserAvatar'
 
+// eslint-disable-next-line import/prefer-default-export
 export { UserAvatar }

app/components/component-avatar/src/style.js

+/* eslint-disable no-shadow */
+
 // @flow
 // import theme from 'shared/theme'
 import styled, { css } from 'styled-components'
 import { Img as ReactImage } from 'react-image'
 import { Link } from 'react-router-dom'
 import { th } from '@pubsweet/ui-toolkit'
+
 // import { ProfileHeaderAction } from '../profile/style'
 import { MEDIA_BREAK } from '../../layout'
 // import { zIndex } from '../../globals'
 
 export const Container = styled.div`
-  position: relative;
-  display: block;
-  width: ${props => (props.size ? `${props.size}px` : '32px')};
-  height: ${props => (props.size ? `${props.size}px` : '32px')};
+  background-color: ${th('colorBackground')};
+  border: none;
   border-radius: ${props =>
     props.type === 'community' ? `${props.size / 8}px` : '100%'};
-  border: none;
-  background-color: ${th('colorBackground')};
+  display: block;
+  height: ${props => (props.size ? `${props.size}px` : '32px')};
+  position: relative;
+  width: ${props => (props.size ? `${props.size}px` : '32px')};
 
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
   ${props =>
     props.mobilesize &&
     css`
@@ -29,16 +33,16 @@ export const Container = styled.div`
 `
 
 export const AvatarLink = styled(Link)`
+  align-items: center;
+  border-radius: ${props =>
+    props.type === 'community' ? `${props.size / 8}px` : '100%'};
   display: flex;
   flex: none;
   flex-direction: column;
   height: 100%;
-  width: 100%;
   justify-content: center;
-  align-items: center;
   pointer-events: auto;
-  border-radius: ${props =>
-    props.type === 'community' ? `${props.size / 8}px` : '100%'};
+  width: 100%;
 `
 
 // export const CoverAction = styled(ProfileHeaderAction)`
@@ -49,14 +53,15 @@ export const AvatarLink = styled(Link)`
 // `
 
 export const Img = styled(ReactImage)`
-  display: inline-block;
-  width: ${props => (props.size ? `${props.size}px` : '32px')};
-  height: ${props => (props.size ? `${props.size}px` : '32px')};
+  background-color: ${th('colorBackground')};
   border-radius: ${props =>
     props.type === 'community' ? `${props.size / 8}px` : '100%'};
+  display: inline-block;
+  height: ${props => (props.size ? `${props.size}px` : '32px')};
   object-fit: cover;
-  background-color: ${th('colorBackground')};
+  width: ${props => (props.size ? `${props.size}px` : '32px')};
 
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
   ${props =>
     props.mobilesize &&
     css`
@@ -68,14 +73,15 @@ export const Img = styled(ReactImage)`
 `
 
 export const FallbackImg = styled.img`
-  display: inline-block;
-  width: ${props => (props.size ? `${props.size}px` : '32px')};
-  height: ${props => (props.size ? `${props.size}px` : '32px')};
+  background-color: ${th('colorSecondary')};
   border-radius: ${props =>
     props.type === 'community' ? `${props.size / 8}px` : '100%'};
+  display: inline-block;
+  height: ${props => (props.size ? `${props.size}px` : '32px')};
   object-fit: cover;
-  background-color: ${th('colorSecondary')};
+  width: ${props => (props.size ? `${props.size}px` : '32px')};
 
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
   ${props =>
     props.mobilesize &&
     css`
@@ -87,13 +93,14 @@ export const FallbackImg = styled.img`
 `
 
 export const LoadingImg = styled.div`
-  display: inline-block;
-  width: ${props => (props.size ? `${props.size}px` : '32px')};
-  height: ${props => (props.size ? `${props.size}px` : '32px')};
+  background: ${th('colorSecondary')};
   border-radius: ${props =>
     props.type === 'community' ? `${props.size / 8}px` : '100%'};
-  background: ${th('colorSecondary')};
+  display: inline-block;
+  height: ${props => (props.size ? `${props.size}px` : '32px')};
+  width: ${props => (props.size ? `${props.size}px` : '32px')};
 
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
   ${props =>
     props.mobilesize &&
     css`
@@ -105,17 +112,17 @@ export const LoadingImg = styled.div`
 `
 
 export const OnlineIndicator = styled.span`
-  position: absolute;
-  width: 10px;
-  height: 10px;
+  background: ${th('colorSuccess')};
   border: 2px solid
     ${props =>
       props.onlineBorderColor
         ? props.onlineBorderColor(props.theme)
         : th('colorTextReverse')};
-  background: ${th('colorSuccess')};
   border-radius: 5px;
   bottom: 0;
+  height: 10px;
+  position: absolute;
   right: 0;
+  width: 10px;
   z-index: 1;
 `

app/components/component-chat/src/Action.js

+/* eslint-disable react/destructuring-assignment */
+
 /*
   Actions arose from current designs (like the Appbar) where we had to blend
   links and buttons, but make them appear the same.
@@ -37,6 +39,7 @@ const ActionButton = styled.button`
   min-width: 0;
   padding: 0;
 
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
   ${common};
 `
 

app/components/component-chat/src/MentionsInput/MentionsInput.jsx → app/components/component-chat/src/MentionsInput/MentionsInput.js

+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable consistent-return */
+
 // @flow
 import React from 'react'
 import { MentionsInput, Mention } from 'react-mentions'
@@ -48,6 +52,7 @@ const sortSuggestions = (a, b, queryString) => {
 
 const CustomMentionsInput = props => {
   const client = useApolloClient()
+
   const searchUsers = async (queryString, callback) => {
     const staticSuggestions = !props.staticSuggestions
       ? []

app/components/component-chat/src/MentionsInput/mentionSuggestion.js

+/* eslint-disable react/prop-types */
+
 import React from 'react'
 import { UserAvatar } from '../../../component-avatar/src'
 

app/components/component-chat/src/MentionsInput/style.js

@@ -21,14 +21,14 @@ export const MentionsInputStyle = {
 }
 
 export const StyledMentionSuggestion = styled.div`
-  display: flex;
-  padding: 8px 12px;
   align-items: center;
   background: ${props =>
     props.focused ? th('colorBackgroundHue') : th('colorBackground')};
-  min-width: 156px;
-  line-height: 1.3;
   border-bottom: 1px solid ${th('colorBorder')};
+  display: flex;
+  line-height: 1.3;
+  min-width: 156px;
+  padding: 8px 12px;
 `
 
 export const MentionContent = styled.div`
@@ -37,19 +37,23 @@ export const MentionContent = styled.div`
 `
 
 export const MentionName = styled.span`
+  color: ${props => (props.focused ? th('colorPrimary') : th('colorText'))};
+  font-size: 14px;
+  font-weight: 500;
   margin-left: 12px;
   width: calc(184px - 62px);
+
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
   ${Truncate};
-  font-size: 14px;
-  font-weight: 500;
-  color: ${props => (props.focused ? th('colorPrimary') : th('colorText'))};
 `
 
 export const MentionUsername = styled.span`
-  margin-left: 12px;
+  color: ${props => (props.focused ? th('colorPrimary') : th('colorWarning'))};
   font-size: 13px;
   font-weight: 400;
+  margin-left: 12px;
   width: calc(184px - 62px);
+
+  /* stylelint-disable-next-line order/properties-alphabetical-order */
   ${Truncate};
-  color: ${props => (props.focused ? th('colorPrimary') : th('colorWarning'))};
 `