example: Update storybook example

examples/storybook/.storybook/addons.js

@@ -1,5 +1,5 @@
-import '@storybook/addon-knobs/register';
+import '@storybook/addon-knobs/register'
-import '@storybook/addon-actions/register';
+import '@storybook/addon-actions/register'
-import '@storybook/addon-links/register';
+import '@storybook/addon-links/register'
-import '@storybook/addon-notes/register';
+import '@storybook/addon-notes/register'
-import '@storybook/addon-viewport/register';
+import '@storybook/addon-viewport/register'

examples/storybook/.storybook/config.js

@@ -1,24 +1,21 @@
-import "vuetify/dist/vuetify.css";
+import 'vuetify/dist/vuetify.css'
 
-import { configure } from "@storybook/vue";
+import { configure } from '@storybook/vue'
-import Vue from "vue";
+import Vue from 'vue'
-import Vuex from "vuex";
+import Vuex from 'vuex'
-import Vuetify from "vuetify";
+import Vuetify from 'vuetify'
-import MyButton from "../components/Button.vue";
+import MyButton from '../components/Button.vue'
 
-Vue.use(Vuex);
+Vue.use(Vuex)
-Vue.use(Vuetify);
+Vue.use(Vuetify)
 
-Vue.component("my-button", MyButton);
+Vue.component('my-button', MyButton)
 
-//function loadStories() {
+// Automatically import all files ending in *.stories.js
-//  require("../src/stories");
+const req = require.context('../stories', true, /.story.js$/)
-//}
 
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /.story.js$/);
 function loadStories() {
-  req.keys().forEach((filename) => req(filename));
+  req.keys().forEach((filename) => req(filename))
 }
 
-configure(loadStories, module);
+configure(loadStories, module)

examples/storybook/.storybook/webpack.config.js

@@ -3,13 +3,13 @@ const path = require('path')
 const nxtConf = require('../nuxt.config')
 
 module.exports = (sBaseConfig, configType, defaultConfig) => {
+  const srcDir = `../${nxtConf.srcDir||''}`
+  const rootDir = `../${nxtConf.rootDir||''}`
 
-    const srcDir = `../${nxtConf.srcDir||''}`
+  Object.assign(defaultConfig.resolve.alias, {
-    const rootDir = `../${nxtConf.rootDir||''}`
+      '~~': path.resolve(__dirname, rootDir),
-    Object.assign(defaultConfig.resolve.alias, {
+      '~': path.resolve(__dirname, srcDir)
-        '~~': path.resolve(__dirname, rootDir),
+  })
-        '~': path.resolve(__dirname, srcDir)
-    })
 
-    return defaultConfig
+  return defaultConfig
-}
+}

examples/storybook/README.md

@@ -8,3 +8,17 @@ Deo showcasing [Storybook](https://storybook.js.org/) usage with Nuxt.js, [Vueti
 * contains storybase.js with helper classes
 * integrates most of addons
 * real life examples with Vuetify and Vue-Charts
+
+### Usage
+
+Start the example o [http://localhost:3000](http://localhost:3000):
+
+```bash
+npm run dev
+```
+
+Run Storybook:
+
+```bash
+npm run storybook
+```

examples/storybook/components/Button.vue

@@ -20,11 +20,10 @@ export default {
 .rounded {
   border-radius: 10px;
 }
-
 .wr-button {
   border: 3px solid;
   padding: 10px 20px;
   background-color: white;
   outline: none;
 }
-</style>
+</style>

examples/storybook/components/Layout.vue

@@ -66,7 +66,6 @@
 <script>
 export default {
   name: 'layout',
-
   data: () => ({
     drawer: null
   }),

examples/storybook/components/README.md

@@ -1,7 +0,0 @@
-# COMPONENTS
-
-**This directory is not required, you can delete it if you don't want to use it.**
-
-The components directory contains your Vue.js Components.
-
-_Nuxt.js doesn't supercharge these components._

examples/storybook/components/VuetifyLogo.vue

@@ -3,14 +3,14 @@
 </template>
 
 <style>
-  .VuetifyLogo {
+.VuetifyLogo {
-    width: 180px;
+  width: 180px;
-    transform: rotateY(560deg);
+  transform: rotateY(560deg);
-    animation: turn 3.5s ease-out forwards 1s;
+  animation: turn 3.5s ease-out forwards 1s;
-  }
+}
-  @keyframes turn {
+@keyframes turn {
-    100% {
+  100% {
-      transform: rotateY(0deg);
+    transform: rotateY(0deg);
-    }
   }
+}
 </style>

examples/storybook/nuxt.config.js

@@ -36,20 +36,5 @@ module.exports = {
   */
   plugins: [
     '@/plugins/vuetify'
-  ],
+  ]
-
-  /*
-  ** Nuxt.js modules
-  */
-  modules: [
-  ],
-
-  /*
-  ** Build configuration
-  */
-  build: {
-    /*
-    ** You can extend webpack config here
-    */
-  }
 }

examples/storybook/plugins/vuetify.js

@@ -8,7 +8,7 @@ Vue.use(Vuetify, {
     accent: colors.grey.darken3,
     secondary: colors.amber.darken3,
     info: colors.teal.lighten1,
-    warning: colors.amber,
+    warning: colors.amber.base,
     error: colors.deepOrange.accent4,
     success: colors.green.accent3
   }

examples/storybook/stories/Welcome.story.js

@@ -1,6 +1,5 @@
 
 import { storiesOf } from '@storybook/vue'
-// import { action } from '@storybook/addon-actions'
 import { linkTo } from '@storybook/addon-links'
 
 import Welcome from '~/components/Welcome.vue'

examples/storybook/stories/collection.story.js

@@ -1,5 +1,4 @@
 /* eslint-disable react/react-in-jsx-scope */
-
 import Vuex from 'vuex'
 import { storiesOf } from '@storybook/vue'
 import { action } from '@storybook/addon-actions'
@@ -16,13 +15,8 @@ import {
   date,
   button
 } from '@storybook/addon-knobs/vue'
-
 import MyButton from '~/components/Button.vue'
 
-// storiesOf('App', module).add('App', () => ({
-//  render: h => h(App),
-// }));
-
 storiesOf('Features/Method for rendering Vue', module)
   .add('render', () => ({
     render: h => h('div', ['renders a div with some text in it..'])

examples/storybook/stories/storybase.js

@@ -12,8 +12,6 @@ import {
   object,
   button
 } from '@storybook/addon-knobs/vue'
-// import { withSmartKnobs } from "storybook-addon-smart-knobs"
-// import { withInfo } from "@storybook/addon-info"
 import centered from '@storybook/addon-centered'
 import { linkTo } from '@storybook/addon-links'
 

examples/storybook/stories/vuetify.story.js

@@ -1,8 +1,6 @@
 import { storiesOf } from '@storybook/vue'
-// import { linkTo } from '@storybook/addon-links'
 
 import VuetifyLogo from '~/components/VuetifyLogo.vue'
-// import Layout from '~/components/Layout.vue'
 
 import Centered from '@storybook/addon-centered'