Adding docs

.storybook/main.js

@@ -1,4 +1,4 @@
 module.exports = {
   stories: ['../stories/**/*.stories.js'],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
 };

.storybook/webpack.config.js

@@ -31,6 +31,7 @@ module.exports = async ({ config, mode }) => {
       },
     ]
   });
+
   // Return the altered config
   return config;
 };

package.json

@@ -1,26 +1,27 @@
 {
   "name": "@myetherwallet/mew-components",
   "version": "0.1.0-beta",
-  "main": "dist/my-component.umd.js",
-  "module": "dist/my-component.esm.js",
-  "unpkg": "dist/my-component.min.js",
+  "main": "dist/mew-components.umd.js",
+  "module": "dist/mew-components.esm.js",
+  "unpkg": "dist/mew-components.min.js",
   "browser": {
-    "./sfc": "src/my-component.vue"
+    "./sfc": "src/mew-components.vue"
   },
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
     "lint": "vue-cli-service lint",
     "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
-    "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/my-component.umd.js",
-    "build:es": "rollup --config build/rollup.config.js --format es --file dist/my-component.esm.js",
-    "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/my-component.min.js",
+    "build:umd": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd --file dist/mew-components.umd.js",
+    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es --file dist/mew-components.esm.js",
+    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife --file dist/mew-components.min.js",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
   "dependencies": {
     "core-js": "^2.6.5",
     "vue": "^2.6.10",
+    "vue-cli-plugin-storybook": "^1.2.1",
     "vue-router": "^3.0.3",
     "vuetify": "^2.0.0",
     "vuex": "^3.0.1"
@@ -29,14 +30,14 @@
     "@babel/core": "^7.8.7",
     "@storybook/addon-a11y": "^5.2.1",
     "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-docs": "^5.3.17",
     "@storybook/addon-knobs": "^5.3.17",
     "@storybook/addon-links": "^5.3.17",
     "@storybook/addon-notes": "^5.3.17",
     "@storybook/addon-storysource": "^5.3.17",
     "@storybook/addon-viewport": "^5.3.17",
     "@storybook/addons": "^5.3.17",
     "@storybook/vue": "^5.3.17",
-    "fibers": "^4.0.1",
     "@vue/cli-plugin-babel": "^3.11.0",
     "@vue/cli-plugin-eslint": "^3.11.0",
     "@vue/cli-service": "^3.11.0",
@@ -47,17 +48,24 @@
     "eslint": "^5.16.0",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-vue": "^5.0.0",
+    "fibers": "^4.0.1",
+    "material-design-icons-iconfont": "^5.0.1",
     "prettier": "^1.18.2",
     "rollup": "^1.17.0",
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.0.1",
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-uglify-es": "0.0.1",
     "rollup-plugin-vue": "^5.0.1",
-    "material-design-icons-iconfont": "^5.0.1",
     "sass": "^1.18.0",
     "sass-loader": "^7.1.0",
     "storybook-vue-router": "^1.0.7",
     "vue-cli-plugin-vuetify": "^0.6.3",
+    "vue-docgen-api": "^4.14.0",
+    "vue-docgen-loader": "^1.5.0",
     "vue-template-compiler": "^2.6.10",
-    "vuetify-loader": "^1.2.2"
+    "vuetify-loader": "^1.2.2",
+    "cross-env": "^5.2.0",
+    "minimist": "^1.2.0"
   }
 }

src/components/Community/CommunityButtons.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="d-flex flex-no-wrap align-center">
-    <v-sheet class="text-center pr-10" v-for="(b, k) in buttons" :key="k">
+    <!-- <v-sheet class="text-center pr-10" v-for="(b, k) in buttons" :key="k">
       <img :src="b.icon" width="60" />
       <p>{{ b.title }}</p>
-    </v-sheet>
+    </v-sheet> -->
   </div>
 </template>
 
@@ -17,14 +17,14 @@ export default {
   props: {
     na: Array
   },
-  data: () => ({
-    buttons: [
-      { title: "Telegram", icon: Telegram },
-      { title: "Slack", icon: Slack },
-      { title: "Github", icon: Github },
-      { title: "Reddit", icon: Reddit }
-    ]
-  }),
+  // data: () => ({
+  //   buttons: [
+  //     { title: "Telegram", icon: Telegram },
+  //     { title: "Slack", icon: Slack },
+  //     { title: "Github", icon: Github },
+  //     { title: "Reddit", icon: Reddit }
+  //   ]
+  // }),
   watch: {}
 };
 </script>

src/components/MewButton/MewButton.vue

@@ -9,19 +9,19 @@
     >
       <!-- <v-icon>mdi-star</v-icon> -->
       <!-- <span v-if="!onlyIcon"> -->
-        <!-- <span v-if="iconLeft">{{ iconLeft }}</span> -->
-        <!-- <span>{{ text }}</span> -->
-        <!-- <span v-if="iconLeft">{{ iconRight }}</span> -->
+      <!-- <span v-if="iconLeft">{{ iconLeft }}</span> -->
+      <!-- <span>{{ text }}</span> -->
+      <!-- <span v-if="iconLeft">{{ iconRight }}</span> -->
       <!-- </span> -->
       <!-- <v-icon>mdi-heart</v-icon> -->
       <img @click="hello()" class="icon" :src="icon" alt="Icon" />
     </v-btn>
-
   </div>
 </template>
 
 <script>
 export default {
+  name: "MewButton",
   data() {
     return {
       onlyText: false,
@@ -31,10 +31,6 @@ export default {
   },
   props: {
     text: String,
-    subText: {
-      type: String,
-      default: ""
-    },
     icon: String,
     iconAlign: {
       type: String,
@@ -58,12 +54,12 @@ export default {
       this.style === "transparent" && this.icon && this.iconAlign === "center";
     },
     hello() {
-      console.error('in here')
+      console.error("in here");
     },
     checkBtnType() {
       switch (this.btnType) {
         case "text":
-          console.error('btn', this.btnType)
+          console.error("btn", this.btnType);
           this.onlyText = true;
           break;
         case "outline":

src/views/ComponentsView.vue

@@ -238,7 +238,8 @@
           <v-icon>mdi-medium</v-icon>
         </v-btn>
       </cc>
-      <!-- <cc subtitle="Social" title="Flags">
+      // eslint-disable-next-line vue/no-parsing-error
+        cc subtitle="Social" title="Flags">
         <v-btn height="50" width="50" icon class="mr-2" color="grey lighten-1">
           <img width="30" src="@/assets/icons/Flags/china.png" />
         </v-btn>
@@ -258,7 +259,7 @@
           <img width="30" src="@/assets/icons/Flags/germany.png" />
         </v-btn>
       </cc> -->
-      <cc subtitle="News" title="News Box">
+    <!-- <cc subtitle="News" title="News Box">
         <NewsBox />
       </cc>
       <cc subtitle="Ad" title="Ad Slider">
@@ -268,7 +269,7 @@
       <cc subtitle="TX" title="TX Status">
         <TxStatus />
       </cc>
-    </v-row> -->
+    </v-row>  -->
   </v-container>
 </template>
 
@@ -290,9 +291,9 @@ import helpIcon from "@/assets/images/icons/icon-help.png";
 // import CustomerSupport from "@/components/HelpCenter/CustomerSupport";
 // import CommunityButtons from "@/components/Community/CommunityButtons";
 // import ReminderBox from "@/components/Reminder/ReminderBox";
-import NewsBox from "@/components/News/NewsBox";
-import AdSlider from "@/components/Ad/AdSlider";
-import TxStatus from "@/components/Tx/TxStatus";
+// import NewsBox from "@/components/News/NewsBox";
+// import AdSlider from "@/components/Ad/AdSlider";
+// import TxStatus from "@/components/Tx/TxStatus";
 
 // import btc from "@/assets/coins/btc.png";
 // import eth from "@/assets/coins/eth.png";
@@ -302,10 +303,7 @@ import TxStatus from "@/components/Tx/TxStatus";
 export default {
   components: {
     cc,
-    "mew-button": MewButton,
-    NewsBox,
-    AdSlider,
-    TxStatus
+    "mew-button": MewButton
   },
   data: () => ({
     helpIcon: helpIcon,
@@ -325,11 +323,11 @@ export default {
     modelInputSearch1: "",
     searchItems1: [
       { header: "Major Cryptocurrency" },
-      { name: "Bitcoin", value: "btc", group: "Group 1", avatar: '' },
-      { name: "Ethereum", value: "eth", group: "Group 1", avatar: '' },
+      { name: "Bitcoin", value: "btc", group: "Group 1", avatar: "" },
+      { name: "Ethereum", value: "eth", group: "Group 1", avatar: "" },
       { header: "Miner Cryptocurrency" },
-      { name: "Bitcoin Cash", value: "bch", group: "Group 2", avatar: '' },
-      { name: "XRP", value: "xrp", group: "Group 2", avatar: '' }
+      { name: "Bitcoin Cash", value: "bch", group: "Group 2", avatar: "" },
+      { name: "XRP", value: "xrp", group: "Group 2", avatar: "" }
     ],
     modelInputSearch2: "",
     searchItems2: [

src/views/containers/ComponentContainer.vue

@@ -16,4 +16,4 @@ export default {
     title: String
   }
 };
-</script>
+</script>

stories/MewButton/MewButton.stories.js

@@ -0,0 +1,43 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MewButton from './MewButton';
+import MewTheme from './MewTheme';
+// import Simple from './SimpleTheme';
+
+export default {
+  title: "MewButton"
+};
+
+export const MEWTheme = () =>  ({
+  components: { "mew-button": MewButton },
+  template: `
+    <div>
+    <mew-button
+      btnStyle="transparent"
+      text="MEW Transparent"
+      colorTheme="mew"
+      @click="action"
+    />
+    <br/>
+    <mew-button
+      btnStyle="outline"
+      text="MEW Outline"
+      colorTheme="mew"
+      @click="action"
+    />
+    <br/>
+    <mew-button
+      btnStyle="background"
+      text="MEW Background"
+      colorTheme="mew"
+      @click="action"
+    />
+  </div>`
+});
+
+export const MEWOutline = () => ({
+  components: { "mew-button": MewButton },
+  template:
+    '<mew-button btnStyle="outline" text="MEW Outline" colorTheme="mew"></mew-button>'
+});

stories/MewButton/MewButton.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <v-btn
+      :color="getColor()"
+      depressed
+      :disabled="disabled"
+      :outlined="btnStyle === 'outline'"
+      :text="btnStyle === 'transparent'"
+    >
+      <span>{{ text }}</span>
+      <!-- <v-icon>mdi-star</v-icon> -->
+      <!-- <span v-if="!onlyIcon"> -->
+      <!-- <span v-if="iconLeft">{{ iconLeft }}</span> -->
+      <!-- <span>{{ text }}</span> -->
+      <!-- <span v-if="iconLeft">{{ iconRight }}</span> -->
+      <!-- </span> -->
+      <!-- <v-icon>mdi-heart</v-icon> -->
+      <!-- <img @click="hello()" class="icon" :src="icon" alt="Icon" /> -->
+    </v-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: String,
+    icon: String,
+    iconAlign: {
+      type: String,
+      default: "none"
+    },
+    disabled: Boolean,
+    colorTheme: {
+      type: String,
+      default: ""
+    },
+    btnStyle: {
+      type: String,
+      default: ""
+    }
+  },
+  mounted() {
+    console.error('this', this.colorTheme)
+  },
+  methods: {
+    getColor() {
+      if (this.colorTheme === "mew") {
+        console.error('in here')
+        return "primary";
+      }
+    }
+  }
+};
+</script>

stories/MewButton/MewTheme/MewTheme.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <mew-button
+      btnStyle="transparent"
+      text="MEW Transparent"
+      colorTheme="mew"
+      @click="action"
+    />
+    <code>
+      <mew-button
+        btnStyle="transparent"
+        text="MEW Transparent"
+        colorTheme="mew"
+        @click="action"
+      />
+    </code>
+    <mew-button
+      btnStyle="outline"
+      text="MEW Outline"
+      colorTheme="mew"
+      @click="action"
+    />
+    <br/>
+    <mew-button
+      btnStyle="background"
+      text="MEW Background"
+      colorTheme="mew"
+      @click="action"
+    />
+  </div>
+</template>
+
+<script>
+import MewButton from "../MewButton";
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: "MewThemeButton",
+  components: {
+    "mew-button": MewButton
+  },
+  methods: {
+    action() {
+      action("clicked");
+    }
+  }
+};
+</script>

stories/MewButton/MewTheme/index.js

@@ -0,0 +1 @@
+export { default } from "./MewTheme";