install storybook eslint, add more doc

Author: Jessica Peng

.eslintrc.js

@@ -6,7 +6,8 @@ module.exports = {
     'extends': [
         'eslint:recommended',
         'plugin:vue/essential',
-        'plugin:vue/strongly-recommended'
+        'plugin:vue/strongly-recommended',
+        'plugin:storybook/recommended'
     ],
     'globals': {
         'Atomics': 'readonly',

package-lock.json

@@ -23,6 +23,7 @@
     "eslint": "eslint --ignore-path .gitignore ."
   },
   "dependencies": {
+    "@rollup/plugin-replace": "^2.3.4",
     "@vue/babel-preset-app": "^4.4.6",
     "all": "0.0.0",
     "bignumber.js": "^9.0.0",
@@ -33,7 +34,6 @@
     "git-url-parse": "^11.1.2",
     "material-design-icons-iconfont": "^5.0.1",
     "minimist": "^1.2.5",
-    "@rollup/plugin-replace": "^2.3.4",
     "rollup-plugin-uglify-es": "0.0.1",
     "style-loader": "^1.2.1",
     "vue": "^2.6.10",
@@ -49,13 +49,11 @@
     "@babel/core": "^7.10.4",
     "@mdi/font": "^5.1.45",
     "@rollup/plugin-alias": "^3.1.1",
+    "@rollup/plugin-buble": "0.21.3",
+    "@rollup/plugin-commonjs": "17.1.0",
     "@rollup/plugin-image": "^2.0.5",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-url": "6.0.0",
-    "@rollup/plugin-buble": "0.21.3",
-    "@rollup/plugin-commonjs": "17.1.0",
-    "rollup": "^2.3.0",
-    "rollup-plugin-vue": "^5.0.1",
     "@storybook/addon-actions": "^5.3.17",
     "@storybook/addon-backgrounds": "^5.3.17",
     "@storybook/addon-docs": "^5.3.18",
@@ -75,11 +73,14 @@
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
     "babel-preset-vue": "^2.0.2",
-    "eslint": "5.16.0",
+    "eslint": "^6.8.0",
     "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-storybook": "^0.5.6",
     "eslint-plugin-vue": "^6.2.2",
     "file-loader": "^6.0.0",
     "prettier": "^1.18.2",
+    "rollup": "^2.3.0",
+    "rollup-plugin-vue": "^5.0.1",
     "sass-loader": "^7.0.2",
     "style-resources-loader": "^1.3.3",
     "vue-cli-plugin-vuetify": "^2.0.6",

package.json

@@ -13,7 +13,7 @@
       <template v-slot:activator="{ on }">
         <v-icon
           :small="isSmall"
-          :class="['copy-icon cursor-pointer', color]"
+          :class="['copy-icon cursor-pointer', className]"
           v-on="on"
           @click="copyToClipboard"
         >
@@ -47,14 +47,14 @@ export default {
   },
   props: {
     /**
-     * Assigns the color of the icon. Accepts a text class color from mew-color. 
+     * Pass a class to change the icon color.
      */
-    color: {
+    className: {
       type: String,
       default: 'basic--text'
     },
     /**
-     * Makes the icon small.
+     * Makes the icon smaller.
      */
     isSmall: {
       type: Boolean,
@@ -68,14 +68,14 @@ export default {
       default: ''
     },
     /**
-     * The tooltip text
+     * The tooltip text.
      */
     tooltip: {
       type: String,
       default: 'Copy'
     },
     /**
-     * The toast text after successfully copying
+     * The toast text after successfully copying.
      */
     successToast: {
       type: String,

src/components/MewCopy/MewCopy.vue

@@ -33,17 +33,16 @@
 =====================================================================================
 -->
     <template v-slot:message="item">
-      <span class="mew-label"
-        >{{ item.message }}
+      <span
+        class="mew-label"
+      >{{ item.message }}
         <a
           v-if="buyMoreStr"
           rel="noopener noreferrer"
           href="https://ccswap.myetherwallet.com/#/"
           target="_blank"
           class="mew-label"
-          >{{ buyMoreStr }}</a
-        ></span
-      >
+        >{{ buyMoreStr }}</a></span>
     </template>
     <template v-slot:prepend-inner>
       <!--
@@ -74,7 +73,12 @@
   Mew Input: Token Image  (displays at the beginning of the input)
 =====================================================================================
 -->
-        <img v-if="image" height="30" :src="image" alt="token image" />
+        <img
+          v-if="image"
+          height="30"
+          :src="image"
+          alt="token image"
+        >
       </div>
     </template>
     <!--
@@ -106,12 +110,12 @@
 </template>
 
 <script>
-import MewBlockie from "@/components/MewBlockie/MewBlockie.vue";
+import MewBlockie from '@/components/MewBlockie/MewBlockie.vue';
 
-const types = ["password", "text"];
+const types = ['password', 'text'];
 
 export default {
-  name: "MewInput",
+  name: 'MewInput',
   components: {
     MewBlockie,
   },
@@ -121,7 +125,7 @@ export default {
      */
     errorMessages: {
       type: [String, Array],
-      default: "",
+      default: '',
     },
     /**
      * input is read only
@@ -156,21 +160,21 @@ export default {
      */
     label: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * The input placeholder.
      */
     placeholder: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * The input value.
      */
     value: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * The input id.
@@ -184,7 +188,7 @@ export default {
      */
     rightLabel: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * Hides input clear functionality. Clear symbol will be displayed on the right side.
@@ -207,7 +211,7 @@ export default {
      */
     resolvedAddr: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * Enables persistent hint
@@ -221,7 +225,7 @@ export default {
      */
     hint: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * Displays search input
@@ -235,21 +239,21 @@ export default {
      */
     type: {
       type: String,
-      default: "text",
+      default: 'text',
     },
     /**
      * Prepends an image in the input
      */
     image: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * Adds a "Buy more" string to the end of the first index of the errorMessages prop.
      */
     buyMoreStr: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * Object for max button, i.e. {title: 'Max', disabled: false, method: () => {}}
@@ -278,14 +282,14 @@ export default {
   },
   data() {
     return {
-      inputValue: "",
+      inputValue: '',
       showPassword: false,
     };
   },
   watch: {
     inputValue(newVal, oldVal) {
       if (newVal !== oldVal) {
-        this.$emit("input", newVal, this.id);
+        this.$emit('input', newVal, this.id);
       }
     },
     value(newVal, oldVal) {
@@ -300,9 +304,9 @@ export default {
     },
     showPasswordIcon() {
       if (this.isPasswordType && !this.hidePasswordIcon) {
-        return !this.showPassword ? "mdi-eye" : "mdi-eye-off";
+        return !this.showPassword ? 'mdi-eye' : 'mdi-eye-off';
       }
-      return "";
+      return '';
     },
     inputType() {
       if (this.isPasswordType && this.showPassword) {
@@ -321,7 +325,7 @@ export default {
       }
     },
     clear(val) {
-      this.inputValue = val ? val : "";
+      this.inputValue = val ? val : '';
     },
   },
 };

src/components/MewInput/MewInput.vue

@@ -21,20 +21,25 @@
         v-on="on"
       >
         {{ listObj.name }}
-        <v-icon v-if="!isMenuOpen" :class="['title', activatorTextColor]"
-          >mdi-chevron-down</v-icon
-        >
-        <v-icon v-if="isMenuOpen" :class="['title', activatorTextColor]"
-          >mdi-chevron-up</v-icon
-        >
+        <v-icon
+          v-if="!isMenuOpen"
+          :class="['title', activatorTextColor]"
+        >mdi-chevron-down</v-icon>
+        <v-icon
+          v-if="isMenuOpen"
+          :class="['title', activatorTextColor]"
+        >mdi-chevron-up</v-icon>
       </span>
     </template>
     <!--
   =====================================================================================
     Menu List Content
   =====================================================================================
   -->
-    <v-list v-for="(item, index) in listObj.items" :key="index">
+    <v-list
+      v-for="(item, index) in listObj.items"
+      :key="index"
+    >
       <!--
   =====================================================================================
    slot: 'mewMenuItem' + menu item number
@@ -55,7 +60,11 @@
         <v-list-item-title
           class="mew-body basic--text subItem d-flex align-center"
         >
-          <v-icon v-if="subItem.iconName" class="mr-1 basic--text" size="14px">
+          <v-icon
+            v-if="subItem.iconName"
+            class="mr-1 basic--text"
+            size="14px"
+          >
             {{ subItem.iconName }}
           </v-icon>
           {{ subItem.title }}
@@ -67,7 +76,7 @@
 
 <script>
 export default {
-  name: "MewMenu",
+  name: 'MewMenu',
   data() {
     return {
       isMenuOpen: false,
@@ -90,17 +99,17 @@ export default {
      */
     activatorTextColor: {
       type: String,
-      default: "basic--text",
+      default: 'basic--text',
     },
   },
   computed: {
     contentClasses() {
-      return "mew-menu-content elevation-2 ";
+      return 'mew-menu-content elevation-2 ';
     },
   },
   methods: {
     goTo(link) {
-      this.$emit("goToPage", link);
+      this.$emit('goToPage', link);
     },
   },
 };

src/components/MewMenu/MewMenu.vue

@@ -1,5 +1,5 @@
 /**
-  * styles used to set the height of the component preview for documentation purposes.
+  * styles used to set the height of the preview component for documentation purposes.
   */
 #story--mewtooltip--mew-tooltip,
 #story--mewsuperbutton--mew-super-button, 
@@ -17,7 +17,7 @@
 #story--mewtransformhash--mew-transform-hash,
 #story--mewaddressselect--mew-address-select,
 #story--mewalert--mew-alert,
-#story--mewcopy--mew-copy
+#story--mewdropdown--mew-dropdown
    {
   .v-application {
     height: 250px;

stories/GlobalStorybook.scss

@@ -3,16 +3,12 @@ import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import MewCopy from '@/components/MewCopy/MewCopy.vue';
 import './../GlobalStorybook.scss'
 
-# MEW Copy Container 
+# MEW Copy  
 `<mew-copy />`
 
 ## Overview
-The mew-copy component provides a way for users to copy specific values to their clipboard. 
-There is a slot called **contentSlot** that can be used to place customizable content to the right of the box. There is an option to change 
-the color of the label text by passing a class through the **className** prop. There is an **id** prop that is mainly used to distinguish each
-copy for when 
-mew-copy is found in a loop. When the copy is set, there is an event called **input** that will be emitted with the value and id as the params.
-## Props
+The mew-copy component provides a way for users to copy specific values to their clipboard. You can control the icon color by passing 
+a class to the **className** prop. Must pass the value you would like to copy to the **copyValue** prop.
 <Props of={MewCopy} />
 <Preview><Story id="mewcopy--mew-copy" /></Preview>