feature suggestion: add storybook

[davidm-public]

These work, for Vue + Typescript + Webpack:

1. ./.storybook/config.js:

import { configure } from '@storybook/vue'

// automatically import all files ending in *.stories.js
const req = require.context('../src/stories', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module)

2. ./.storybook/webpack.conf.js:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const genDefaultConfig = require('@storybook/vue/dist/server/config/defaults/webpack.config.js');

module.exports = (storybookBaseConfig, configType) => {
  const config = genDefaultConfig(storybookBaseConfig, configType);

  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html')

  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true // used with ForkTsCheckerWebpackPlugin
        },
      }
    ],
  })

  config.plugins.push(new ForkTsCheckerWebpackPlugin())

  return config;
};

[ducksoupdev]

Hi, this is great. Can you supply some more details on how to run it etc?

[davidm-public]

It's really simple, and the guide is here https://storybook.js.org/basics/guide-vue/

Basically:

1. install storybook globally: npm i -g storybook

2. in the project directory run getstorybook, which should detect vue and should:

   • a) add these devDepencies:

     • @storybook/vue
     • babel-core
       • (note even if you're not using babel, storybook is needs it, as its written in React)

   • b) create this is package.json:

     •          "scripts": {
                    "storybook": "start-storybook -p 9001 -c .storybook" }
       

     • the -c .storybook is probably redundant as that's the default

   • c) getstorybook should create a ./.storybook/ directory,

   • if the above don't install, then add manually.

3. edit these files in ./.storybook/ as above (or create if they don't exist):

   • ./.storybook/config.js and
   • ./.storybook/webpack.conf.js
   • you'll also need the plugin: 'ForkTsCheckerWebpackPlugin' configured as above, dramatically reduces compile time (a factor of 10x in my case).

4. kick off the storybook server: npm run storybook

5. Optionally install Storybook 'addons', most work for Vue.

   • HOWEVER: Storybook remounts the component everytime you use the interaction addon (called 'knobs'), so I find it better to create a Vue component for each 'story', and let that vue component interact with your component-under-test.

The other thing to be aware of is that Storybook is written in React, with the Vue components in separate iFrames. As such, Vue Devtools doesn't see the components (but it does see Vuex stores and events!).

Dave