Lint

Author: ScopeyNZ

.eslintrc.js

@@ -10,6 +10,9 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+
+    // Change line length from 100 -> 120 to have consistency with PHP
+    'max-len': ['error', 120],
   },
   parserOptions: {
     parser: 'babel-eslint',

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+    '@vue/cli-plugin-babel/preset',
+  ],
+};

package.json

@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "@vue/eslint-config-airbnb": "^5.0.2",
+    "autoprefixer": "^9.7.4",
     "core-js": "^3.4.4",
     "tailwindcss": "^1.1.4",
-    "vue": "^2.6.10"
+    "vue": "^2.6.10",
+    "tailwindcss-plugins": "^0.3.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": ">=5.3.0",
@@ -32,7 +34,6 @@
     "sass": "^1.25.0",
     "sass-loader": "^8.0.2",
     "storybook-addon-vue-info": "^1.4.1",
-    "tailwindcss-plugins": "^0.3.0",
     "vue-cli-plugin-storybook": "^1.2.0",
     "vue-svg-loader": "^0.15.0",
     "vue-template-compiler": "^2.6.10"

postcss.config.js

@@ -1,6 +1,9 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
 module.exports = {
   plugins: [
-    require('tailwindcss'),
-    require('autoprefixer')
-  ]
-}
+    tailwindcss,
+    autoprefixer,
+  ],
+};

src/assets/svgs/index.js

@@ -1,5 +1,5 @@
 import svgCloseIcon from './close-icon.svg';
 
 export default {
-  svgCloseIcon
-}
+  svgCloseIcon,
+};

src/components.js

@@ -3,5 +3,5 @@ import TextField from './components/TextField.vue';
 
 export default {
   BaseButton,
-  TextField
-}
+  TextField,
+};

src/components/BaseAlert.vue

@@ -16,13 +16,14 @@
   </div>
 </template>
 <script>
-import SvgCloseIcon from './../assets/svgs/close-icon.svg';
-import BaseTag from './BaseTag';
+import SvgCloseIcon from '../assets/svgs/close-icon.svg';
+import BaseTag from './BaseTag.vue';
+
 export default {
   name: 'TextField',
   components: {
     BaseTag,
-    SvgCloseIcon
+    SvgCloseIcon,
   },
   props: {
     /**
@@ -44,15 +45,15 @@ export default {
     variant: {
       type: String,
       default: 'default',
-      validator: function (value) {
+      validator(value) {
         return ['default', 'success', 'error', 'warning', 'info'].includes(value);
-      }
-    }
+      },
+    },
   },
   computed: {
     classObject() {
       return this.variant !== 'default' && `alert--${this.variant}`;
-    }
+    },
   },
   methods: {
     onClose($event) {
@@ -61,9 +62,9 @@ export default {
        * @event close-alert
        * @type {$event}
        */
-      this.$emit('close-alert', $event)
-    }
-  }
+      this.$emit('close-alert', $event);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/components/BaseTag.vue

@@ -33,9 +33,9 @@ export default {
     variant: {
       type: String,
       default: 'default',
-      validator: function (value) {
+      validator(value) {
         return ['default', 'success', 'error', 'warning', 'info'].includes(value);
-      }
+      },
     },
   },
   computed: {
@@ -46,7 +46,7 @@ export default {
      */
     classObject() {
       return this.variant === 'default' ? '' : `tag--${this.variant}`;
-    }
+    },
   },
 };
 </script>

src/components/TextField.vue

@@ -18,31 +18,32 @@ export default {
      */
     variant: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
-     * The value the v-model directive utilizes, see https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
+     * The value the v-model directive utilizes
+     * @see https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
      */
     value: {
       type: String,
-      default: ''
+      default: '',
     },
     /**
      * The value used for the inner `<input>`'s placeholder html attribute
      */
     placeholder: {
       type: String,
-      default: 'Text Field'
-    }
+      default: 'Text Field',
+    },
   },
   computed: {
     classNames() {
       return {
         'opacity-50 input--disabled': this.variant === 'disabled',
         'input--error': this.variant === 'error',
         'input--empty': this.value === '',
-      }
-    }
+      };
+    },
   },
   methods: {
     onInput($event) {
@@ -51,9 +52,9 @@ export default {
        * @event input
        * @type {$event.target.value}
        */
-      this.$emit('input', $event.target.value)
-    }
-  }
+      this.$emit('input', $event.target.value);
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/index.js

@@ -1,11 +1,11 @@
 import Components from './components';
-import config from './../tailwind.config.js';
-import SvgIcons from './assets/svgs'
+import config from '../tailwind.config';
+import SvgIcons from './assets/svgs';
 
 export default {
   config,
   ...Components,
   icons: {
-    ...SvgIcons
-  }
+    ...SvgIcons,
+  },
 };

tailwind.config.js

@@ -63,7 +63,7 @@ module.exports = {
       default: '0.375rem',
       md: '0.5rem',
       lg: '0.75rem',
-      full: '9999px'
+      full: '9999px',
     },
     fontSize: {
       xs: '.75rem',

yarn.lock

@@ -2689,7 +2689,7 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^9.4.5, autoprefixer@^9.7.2:
+autoprefixer@^9.4.5, autoprefixer@^9.7.2, autoprefixer@^9.7.4:
   version "9.7.4"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.4.tgz#f8bf3e06707d047f0641d87aee8cfb174b2a5378"
   integrity sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==