Merge pull request #7 from MyEtherWallet/feature/storybook-vuetify

Yes got storybook to work with vuetify

Author: Jessica Peng

.storybook/addons.js

@@ -0,0 +1,6 @@
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-viewport/register';

.storybook/config.js

@@ -0,0 +1,63 @@
+import { configure, addDecorator } from '@storybook/vue';
+import Vue from 'vue';
+import vuetifyConfig from "../src/plugins/vuetify";
+import "vuetify/src/styles/main.sass";
+import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+// From https://github.com/nidkil/vuetify-with-storybook
+const vuetifyViewports = {
+  VuetifyLg: {
+    name: 'Vuetify LG',
+    styles: {
+      width: '1904px'
+    },
+    type: 'desktop'
+  },
+  VuetifyXs: {
+    name: 'Vuetify XS',
+    styles: {
+      width: '600px'
+    },
+    type: 'mobile'
+  },
+  VuetifySm: {
+    name: 'Vuetify SM',
+    styles: {
+      width: '960px'
+    },
+    type: 'mobile'
+  },
+  VuetifyMd: {
+    name: 'Vuetify MD',
+    styles: {
+      width: '1264px'
+    },
+    type: 'tablet'
+  },
+  VuetifyXl: {
+    name: 'Vuetify XL',
+    styles: {
+      width: '4096px'
+    },
+    type: 'desktop'
+  }
+}
+configureViewport({
+  defaultViewport: 'VuetifyMd',
+  viewports: {
+    ...vuetifyViewports,
+    ...INITIAL_VIEWPORTS
+  }
+});
+addDecorator(() => ({
+  vuetify: vuetifyConfig,
+  template: '<v-app><v-content><v-container><v-layout column><story/></v-layout></v-container></v-content></v-app>',
+}));
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/webpack.config.js

@@ -0,0 +1,36 @@
+const path = require('path');
+
+// Export a function. Accept the base config as the only param.
+module.exports = async ({ config, mode }) => {
+  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+  // You can change the configuration based on that.
+  // 'PRODUCTION' is used when building the static version of storybook.
+
+  config.module.rules.push({
+    test: /\.stories\.js?$/,
+    loaders: [require.resolve('@storybook/source-loader')],
+    enforce: 'pre',
+  });
+
+  // Make whatever fine-grained changes you need
+  config.module.rules.push({
+    test: /\.s(c|a)ss$/,
+    use: [
+      'vue-style-loader',
+      'css-loader',
+      {
+        loader: 'sass-loader',
+        // Requires sass-loader@^8.0.0
+        options: {
+          implementation: require('sass'),
+          sassOptions: {
+            fiber: require('fibers'),
+            indentedSyntax: true // optional
+          },
+        },
+      },
+    ]
+  });
+  // Return the altered config
+  return config;
+};

package-lock.json

@@ -27,10 +27,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.8.7",
+    "@storybook/addon-a11y": "^5.2.1",
     "@storybook/addon-actions": "^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",
@@ -46,8 +52,10 @@
     "rollup-plugin-buble": "^0.19.8",
     "rollup-plugin-commonjs": "^10.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-template-compiler": "^2.6.10",
     "vuetify-loader": "^1.2.2"

package.json

@@ -1,7 +1,59 @@
 import Vue from "vue";
-import Vuetify from "vuetify/lib";
+import Vuetify, {
+  VApp,
+  VBtn,
+  VCard,
+  VCardText,
+  VCol,
+  VContainer,
+  VContent,
+  VDialog,
+  VDivider,
+  VIcon,
+  VImg,
+  VList,
+  VListItem,
+  VListItemAvatar,
+  VListItemContent,
+  VListItemIcon,
+  VListItemTitle,
+  VNavigationDrawer,
+  VRow,
+  VSheet,
+  VSnackbar,
+  VSparkline,
+  VToolbar,
+  VLayout
+} from "vuetify/lib";
 
-Vue.use(Vuetify);
+Vue.use(Vuetify, {
+  components: {
+    VApp,
+    VBtn,
+    VCard,
+    VCardText,
+    VCol,
+    VContainer,
+    VContent,
+    VDialog,
+    VDivider,
+    VIcon,
+    VImg,
+    VList,
+    VListItem,
+    VListItemAvatar,
+    VListItemContent,
+    VListItemIcon,
+    VListItemTitle,
+    VNavigationDrawer,
+    VRow,
+    VSheet,
+    VSnackbar,
+    VSparkline,
+    VToolbar,
+    VLayout
+  }
+});
 
 export default new Vuetify({
   theme: {

src/plugins/vuetify.js

@@ -16,9 +16,9 @@ export default {
   },
 
   template: `
-    <button :style="buttonStyles" @click="onClick">
+    <v-btn depressed :style="buttonStyles" @click="onClick">
       <slot></slot>
-    </button>
+    </v-btn>
   `,
 
   methods: {