added lint rules and bumped version

gatanaso · Jul 3, 2019 · 43f504f · 43f504f
1 parent 637d7e9
commit 43f504f
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 39 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,27 @@
+{
+  "extends": "vaadin",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "plugins": [
+    "html"
+  ],
+  "globals": {
+    "Polymer": false,
+    "Vaadin": false
+  },
+  "rules": {
+    "quotes": [
+      "error",
+      "single",
+      {
+        "avoidEscape": true
+      }
+    ]
+  },
+  "parserOptions": {
+    "sourceType": "module"
+  }
+}
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-vaadin"
+}
diff --git a/README.md b/README.md
@@ -4,15 +4,15 @@
 
 # \<time-field\>
 
-A simple time field Web Component based on Polymer 3.
+A time field Web Component based on Polymer 3.
 
-[Live Demo ↗](https://time-field.web.app/demo/)
+[Live Demo ↗](https://time-field.firebaseapp.com/demo/)
 
 ### Getting started
 The `time-field` component is distributed as an npm package.
 To start using it, first install it from the command line:
 ```
-npm install --save gatanaso/time-field
+npm install --save time-field
 ```
 Once installed, import it into your application:
 ```
@@ -31,5 +31,5 @@ import 'time-field/time-field.js'
 When in the `time-field` directory, run:
 
 ```
-$ wct test --npm -module-resolution=node
+$ wct --npm
 ```
diff --git a/package.json b/package.json
@@ -1,11 +1,8 @@
 {
   "name": "time-field",
-  "description": "A simple time field Web Component based on Polymer 3",
-  "version": "0.0.5",
+  "description": "A time field Web Component based on Polymer 3",
+  "version": "1.0.0",
   "main": "time-field.js",
-  "scripts": {
-    "test": "wct test --npm -module-resolution=node"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/gatanaso/time-field.git"
@@ -19,21 +16,39 @@
   ],
   "author": "Goran",
   "license": "Apache-2.0",
+  "homepage": "https://github.com/gatanaso/time-field",
   "bugs": {
     "url": "https://github.com/gatanaso/time-field/issues"
   },
-  "homepage": "https://github.com/gatanaso/time-field",
+  "files": [
+    "time-field-*.js"
+  ],
+  "scripts": {
+    "test": "npm run lint && wct --npm",
+    "lint": "npm-run-all --parallel lint:*",
+    "lint:css": "stylelint --syntax html *.js demo test",
+    "lint:html": "eslint *.html demo test --ext .html",
+    "lint:js": "eslint *.js",
+    "lint:polymer": "polymer lint --input *.js",
+    "start": "npm run lint && wct --npm && polymer serve --npm --open"
+  },
   "dependencies": {
-    "@polymer/iron-icons": "^3.0.0-pre.21",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-button": "^2.1.0-alpha3",
-    "@vaadin/vaadin-text-field": "^2.1.0-alpha3"
+    "@vaadin/vaadin-button": "^2.2.0",
+    "@vaadin/vaadin-text-field": "^2.4.7",
+    "@polymer/iron-icons": "^3.0.1"
   },
   "devDependencies": {
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
+    "@polymer/iron-demo-helpers": "^3.0.0",
     "@webcomponents/webcomponentsjs": "^2.0.0",
-    "wct-browser-legacy": "^1.0.0",
-    "web-component-tester": "^6.7.1",
-    "wct-istanbul": "^0.14.3"
+    "eslint": "^6.0.1",
+    "eslint-config-vaadin": "^0.2.7",
+    "eslint-plugin-html": "^6.0.0",
+    "npm-run-all": "^4.1.5",
+    "stylelint": "^10.1.0",
+    "stylelint-config-vaadin": "^0.1.4",
+    "wct-browser-legacy": "^1.0.2",
+    "wct-istanbul": "^0.14.3",
+    "web-component-tester": "^6.9.2"
   }
 }
diff --git a/test/.eslintrc.json b/test/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "rules": {
+    "no-unused-vars": 0
+  },
+  "globals": {
+    "WCT": false,
+    "fixture": false,
+    "describe": false,
+    "it": false,
+    "beforeEach": false,
+    "expect": false
+  }
+}
diff --git a/test/time-field-input_test.html b/test/time-field-input_test.html
@@ -162,7 +162,7 @@
             const value = timeFieldInput._zeroPadValue(intValue);
 
             // then
-            expect(value).to.be.eq('07')
+            expect(value).to.be.eq('07');
           });
 
           it('should not zero pad number it\'s greater than 10', () => {
@@ -173,7 +173,7 @@
             const value = timeFieldInput._zeroPadValue(intValue);
 
             // then
-            expect(value).to.be.eq('25')
+            expect(value).to.be.eq('25');
           });
         });
       });

diff --git a/test/time-field_test.html b/test/time-field_test.html
@@ -1,4 +1,4 @@
-  <!doctype html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
@@ -42,7 +42,7 @@
 
           it('should return and keep old value when new value is empty', () => {
             // given
-            timeField.value = '01:49'
+            timeField.value = '01:49';
             const newValue = '';
 
             // when
@@ -115,7 +115,7 @@
             expect(timeField.value).to.be.eq('11:23');
           });
         });
-        });
+      });
     </script>
 
   </body>

diff --git a/time-field-input.js b/time-field-input.js
@@ -9,7 +9,7 @@ import './time-field-styles.js';
 /**
  * `time-field-input`
  *
- * A very simple number input based on the `vaadin-text-field`.
+ * A number input based on the `vaadin-text-field`.
  */
 class TimeNumberInput extends PolymerElement {
   static get template() {
@@ -93,7 +93,7 @@ class TimeNumberInput extends PolymerElement {
   }
 
   _checkValue() {
-    if(!this.value) {
+    if (!this.value) {
       return;
     }
 
@@ -105,7 +105,7 @@ class TimeNumberInput extends PolymerElement {
 
     if (intValue < this.min) {
       intValue = this.min;
-    } else if(intValue > this.max) {
+    } else if (intValue > this.max) {
       intValue = this.max;
     }
 

diff --git a/time-field-styles.js b/time-field-styles.js
@@ -16,4 +16,4 @@ styleMod.innerHTML = `
   </template>
 `;
 
-styleMod.register("time-field-styles");
+styleMod.register('time-field-styles');
diff --git a/time-field.js b/time-field.js
@@ -4,7 +4,7 @@ import './time-field-input.js';
 
 /**
  * `time-field`
- * A simple time field input element
+ * A time field input element
  *
  * @customElement
  * @polymer
@@ -15,11 +15,10 @@ class TimeField extends PolymerElement {
     return html`
       <style>
         * {
-        --time-field-default-color: hsla(214, 40%, 16%, 0.94);;
-        --time-field-input-default-color: var(--time-field-default-color);
-        --time-field-controls-default-color: var(--time-field-default-color);
-        --time-field-separator-default-color: var(--time-field-default-color);
-
+          --time-field-default-color: hsla(214, 40%, 16%, 0.94);
+          --time-field-input-default-color: var(--time-field-default-color);
+          --time-field-controls-default-color: var(--time-field-default-color);
+          --time-field-separator-default-color: var(--time-field-default-color);
           --time-field-disabled-default-color: hsla(214, 50%, 22%, 0.26);
         }
 

diff --git a/wct.conf.js b/wct.conf.js
@@ -2,9 +2,9 @@ module.exports = {
   verbose: false,
   plugins: {
     istanbul: {
-      dir: "./coverage",
-      reporters: ["text-summary", "lcov"],
-      include: ["**/time-field*.js"],
+      dir: './coverage',
+      reporters: ['text-summary', 'lcov'],
+      include: ['**/time-field*.js'],
       exclude: [],
       thresholds: {
         global: {
@@ -13,12 +13,12 @@ module.exports = {
       }
     },
     local: {
-      browsers: ["chrome"],
+      browsers: ['chrome'],
       browserOptions: {
         chrome: [
-          "headless",
-          "disable-gpu",
-          "no-sandbox"
+          'headless',
+          'disable-gpu',
+          'no-sandbox'
         ],
       }
     }