# Import stories to your Storybook

# Required

# How to use

  • Open storybook config file, it can be config.js or preview.js
  • Use manual loading to add Storefront UI stories to your Storybook. Below, you can find a basic config example:
//config/storybook/preview.js
import { configure } from '@storybook/vue';
//import styles for storefront-ui components
import '@storefront-ui/vue/styles.scss'
function loadStories () {
    const stories = []
    // require all stories from @storefront-ui
    const sfui = require('@storefront-ui/vue/storiesOf.js')
    // or selected stories
    // const { SfButton, SfAccordion, … } = require('@storefront-ui/vue/storiesOf.js')
    // add it to Array
    Object.keys(sfui).forEach(fname => stories.push(sfui[fname]))
    // add yours stories
    const req = require.context('../../src', true, /.stories.js$/)
req.keys().forEach(filename => stories.push(req(filename)))
    return stories
}
configure(loadStories, module)
  • Get images from Storefront UI repository and host it on /assets/storybook

# Others

  • What happens when I have the same name of stories as Storefront UI? For example: Atoms|Buttons. Then, you should keep in mind to add your stories after Storefront UI stories have been added to array. Otherwise, you will see Button from Storefront UI.