vuetifyjs / vue-cli-plugin-vuetify-storybook Goto Github PK

In .storybook/addon-vuetify/decorator.js I added a knob to toggle the theme like so:

// inside of the `wrapper()` function
return Vue.extend({
  vuetify,
  components: { WrappedComponent },
  props: {
    dark: {
      default: boolean('Dark Theme', false), // or options.theme.dark see #2 
    },
  },
  watch: {
    dark (val) {
      this.$vuetify.theme.dark = val
    },
  },
  template: `
    <v-app>
      <v-container fluid>
        <wrapped-component />
      </v-container>
    </v-app>
  `
})

Now in all of my stories, there's a knob that allows me to toggle Vuetify's dark theme on and off to see what components look like in those scenarios. Here are some screenshots:

Dunno if this kinda thing should be baked into the addon or not, but I thought it was a neat trick that I'd share.

In my .storybook/webpack.config.js file, I was able to import my custom SASS variables like this:

const path = require('path')

module.exports = async ({ config }) => {
  config.resolve.alias['~storybook'] = path.resolve(__dirname)
  config.resolve.alias['@'] = path.resolve(__dirname, '..', 'src')

  config.module.rules.push({
    resourceQuery: /blockType=story/,
    loader: 'vue-storybook'
  })

  config.module.rules.push({
    test: /\.s(a|c)ss$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          prependData: `@import '${path.resolve(__dirname, '..', 'src', 'scss')}/variables.scss'`
        }
      }
    ],
    include: [
      path.resolve(__dirname, '../'),
    ],
  })

  return config
}

This works for my particular setup, but not everyone will define their custom variables like I have. I suggest that this plugin should be updated to do the same thing that vue-cli-plugin-vuetify does, which is to detect whether custom variables are saved in src/(sass|scss|styles)/variables.s(c|a)ss and load them appropriately.

npm run serve:storybook fails because of missing dependencies.

ERROR in ./.storybook/addon-show-vue-markup/decorator.js
Module not found: Error: Can't resolve 'js-beautify' in '~/.storybook/addon-show-vue-markup'

For now i installed the dev dependencies manually:
npm install --save-dev js-beautify

This is a change I made to my app's addon-vuetify designed to import all of my app's custom theme options.

I modified my app's plugins/vuetify.js to export the base options:

export const options = {
  icons: {
    iconfont: 'mdiSvg',
  },
  theme: {
    dark: true,
    // ... etc., etc., etc....
  }
}

export default new Vuetify(options)

Then in .storybook/addon-vuetify/decorator.js, I imported them and did something like:

// at the top with other imports
import { options } from '../../src/plugins/vuetify'

export default makeDecorator({
  name: 'withVuetify',
  parameterName: 'vuetify',
  wrapper: (storyFn, context, { parameters = {} }) => {
    const vuetify = new Vuetify(deepmerge(options, parameters))
    // ... everything else is basically the same ...
  }
})

I always have custom options in my plugins/vuetify.js file in all my apps, so I don't know if this would break simpler installs. Maybe there's a way to detect that it's setup this way and adjust accordingly?

Also, I have a question: what is the purpose of the parameters param in the wrapper() function??? I logged it's value, which was always an empty object, and I tried to tweak things that might give it a value, but I couldn't figure out how to modify it. If it never does anything we could simplify this decorator by not worrying about merging it into the Vuetify instance.