Add CodeClimate configuration and Stylelint

.circleci/config.yml

@@ -20,7 +20,7 @@ jobs:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
       - run: yarn build
-      - run: npx cross-env RECORD_KEY=$DEVISE_CYPRESS_TOKEN yarn test:integration
+      - run: npx cross-env RECORD_KEY=$DEVISE_CYPRESS_TOKEN yarn test
 
   deploy_staging:
     docker:

.codeclimate.json

@@ -0,0 +1,36 @@
+{
+  "version": 2,
+  "plugins": {
+    "eslint": {
+      "enabled": true,
+      "channel": "eslint-4",
+      "config": {
+        "extensions": [
+          ".js",
+          ".mjs",
+          ".vue"
+        ]
+      }
+    },
+    "fixme": {
+      "enabled": true,
+      "config": {
+        "strings": [
+          "TODO",
+          "BUG",
+          "FIXME",
+          "NOTE"
+        ]
+      }
+    },
+    "stylelint": {
+      "enabled": true,
+      "config": {
+        "extends": "stylelint-config-standard",
+        "processors": ["stylelint-processor-html"],
+        "rules": { "no-empty-source": null },
+        "ignoreFiles": ["**/*.js"]
+      }
+    }
+  }
+}

.eslintrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   'plugins': [
     'vue',
+    'html',
     'standard',
     'cypress'
   ],
@@ -11,5 +12,8 @@ module.exports = {
   'parserOptions': {
     'ecmaVersion': 8,
     'sourceType': 'module'
+  },
+  "env": {
+    "browser": true
   }
 }

.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": "stylelint-config-standard",
+  "processors": [
+    "stylelint-processor-html"
+  ],
+  "rules": {
+    "no-empty-source": null
+  },
+  "ignoreFiles": ["**/*.js"]
+}

README.md

@@ -4,7 +4,7 @@
 
 > Make great game documentation
 
-[![Codacy Badge](https://api.codacy.com/project/badge/Grade/de76c263ff0941f1894d4e76565b99bf)](https://www.codacy.com/app/multi-cell/devise-ante?utm_source=github.com&utm_medium=referral&utm_content=multi-cell/devise-ante&utm_campaign=Badge_Grade)
+[![Maintainability](https://api.codeclimate.com/v1/badges/2ad78f095809a0fc6bf5/maintainability)](https://codeclimate.com/github/multi-cell/devise-ante/maintainability)
 [![Known Vulnerabilities](https://snyk.io/test/github/multi-cell/devise-ante/badge.svg)](https://snyk.io/test/github/multi-cell/devise-ante)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fmulti-cell%2Fdevise-ante.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fmulti-cell%2Fdevise-ante?ref=badge_shield)
 [![Greenkeeper badge](https://badges.greenkeeper.io/multi-cell/devise-ante.svg)](https://greenkeeper.io/)

cypress/test.js

@@ -1,17 +1,25 @@
 const path = require('path')
 const serve = require('serve')
 const cypress = require('cypress')
+const webpack = require('webpack')
 
-const server = serve(path.join(__dirname, '..', 'dist'))
+const config = require('../webpack.config')
 
-cypress.run({
-  browser: 'electron',
-  record: process.env.RECORD_KEY || false,
-  key: process.env.RECORD_KEY || null
-}).then(res => {
-  server.stop()
-  if (res.failures > 0) {
-    console.error(new Error(`${res.failures} out of ${res.tests} tests failed in ${res.duration}. Take a look at the log above for details.`))
-    process.exit(1)
-  }
-}).catch(err => { throw new Error(err) })
+const compiler = webpack(config)
+
+compiler.run(err => {
+  if (err) throw new Error(err)
+  const server = serve(path.join(__dirname, '..', 'dist'))
+
+  cypress.run({
+    browser: 'electron',
+    record: process.env.RECORD_KEY || false,
+    key: process.env.RECORD_KEY || null
+  }).then(res => {
+    server.stop()
+    if (res.failures > 0) {
+      console.error(new Error(`${res.failures} out of ${res.tests} tests failed in ${res.duration}. Take a look at the log above for details.`))
+      process.exit(1)
+    }
+  }).catch(err => { throw new Error(err) })
+})

package.json

@@ -11,9 +11,10 @@
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
     "open": "cypress open",
-    "test:lint": "eslint --fix **/*.{js,vue}",
-    "test:integration": "node cypress/test.js",
-    "test": "run-s test:**",
+    "lint:js": "eslint --fix **/*.{js,vue}",
+    "lint:style": "stylelint src/*",
+    "lint": "run-s lint:**",
+    "test": "node cypress/test.js",
     "precommit": "lint-staged"
   },
   "lint-staged": {
@@ -44,6 +45,7 @@
     "eslint": "^4.13.1",
     "eslint-config-standard": "^10.2.1",
     "eslint-plugin-cypress": "^2.0.1",
+    "eslint-plugin-html": "^4.0.1",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-node": "^5.2.1",
     "eslint-plugin-promise": "^3.5.0",
@@ -62,6 +64,9 @@
     "rimraf": "^2.6.1",
     "sass-loader": "^6.0.6",
     "serve": "^6.4.1",
+    "stylelint": "^8.4.0",
+    "stylelint-config-standard": "^18.0.0",
+    "stylelint-processor-html": "^1.0.0",
     "style-loader": "^0.20.1",
     "url-loader": "^0.6.2",
     "vue-loader": "^14.0.3",

src/App.vue

@@ -81,12 +81,15 @@ export default {
     font-family: 'Inter UI';
     src: url(./fonts/Inter-UI-Regular.woff2);
   }
+
   body {
-    font-family: 'Inter UI';
+    font-family: 'Inter UI', sans-serif;
     padding: 0;
     margin: 0;
   }
-  html, body {
+
+  html,
+  body {
     height: 100%;
   }
 </style>
@@ -96,24 +99,27 @@ export default {
     width: 100%;
     height: 100%;
     flex: initial;
+
     .el-header {
       padding: 0;
       z-index: 1;
+
       .brand {
-        padding: 1rem 24px 0 24px;
-        font-family: 'Nunito';
+        padding: 1rem 24px 0;
+        font-family: 'Nunito', sans-serif;
         font-size: 14pt;
         position: relative;
         float: left;
         height: 60px;
         box-sizing: border-box;
       }
+
       .right {
         float: right;
       }
     }
+
     .el-container {
-      // TODO remove calc height
       height: calc(100% - 61px);
       flex: initial;
     }

src/games/Game.vue

@@ -241,6 +241,7 @@ export default {
     .el-aside {
       overflow: inherit;
     }
+
     .el-main {
       padding: 4px;
       background-color: rgba(0, 0, 0, 0.1);

src/games/NewGame.vue

@@ -32,9 +32,13 @@ export default {
     width: 480px;
     margin: 4rem auto;
     text-align: center;
-    .at-input, p, .slug-preview {
+
+    .at-input,
+    p,
+    .slug-preview {
       margin: 1rem 0;
     }
+
     .slug-preview {
       display: block;
     }

src/games/elements/EditElement.vue

@@ -24,8 +24,10 @@ export default {
 <style lang="scss" scoped>
   .edit-element {
     display: flex;
+
     .el-textarea {
       flex-grow: 1;
+
       /deep/ .el-textarea__inner {
         height: 100%;
         border: 0;

src/games/elements/ElementNav.vue

@@ -59,12 +59,15 @@ export default {
   .el-container {
     flex: initial;
     height: 100%;
+
     .el-main {
       padding: 0;
       overflow-y: scroll;
     }
+
     .el-footer {
       padding: 0;
+
       .el-button {
         box-sizing: border-box;
         width: 100%;