How to use @storybook/vue - 10 common examples

/* eslint-disable import/no-extraneous-dependencies */
import { storiesOf } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import { linkTo } from '@storybook/addon-links'

import MyButton from '../components/MyButton.vue'

storiesOf('Button', module)
  .add('with text', () => ({
    components: { MyButton },
    template: 'Hello Button',
    methods: { action: action('clicked') }
  }))
  .add('with JSX', () => ({
    components: { MyButton },
    render() {
      return With JSX;
    },
    methods: { action: linkTo('Button', 'with some emoji') }
  }))
  .add('with some emoji', () => ({
    components: { MyButton },
    template: '😀 😎 👍 💯',
    methods: { action: action('clicked') }

import { storiesOf } from '@storybook/vue';
import { text, boolean } from '@storybook/addon-knobs';
import { action } from '@storybook/addon-actions';

import SvTemplateView from '../_storybook/views/sv-template-view/sv-template-view';
// import consts from '../_storybook/utils/consts';
import knobsHelper from '../_storybook/utils/knobs-helper';

import CvTextInputNotesMD from '@carbon/vue/src/components/cv-text-input/cv-text-input-notes.md';
import { CvTextInput } from '@carbon/vue/src';

const storiesDefault = storiesOf('Components/CvTextInput', module);
const storiesExperimental = storiesOf('Experimental/CvTextInput', module);

const preKnobs = {
  theme: {
    group: 'attr',
    type: boolean,
    config: ['light-theme', false], // consts.CONFIG], // fails when used with number in storybook 4.1.4
    prop: 'theme',
    value: val => (val ? 'light' : ''),
  },
  label: {
    group: 'attr',
    type: text,
    config: ['label', 'Text input label'], // consts.CONTENT], // fails when used with number in storybook 4.1.4
    prop: 'label',
  },

// Install Ripple Global plugin
Vue.use(RplGlobal, { rplMarkup: {plugins: RplMarkupExamplePlugins, options: { decodeEntities: false }}})

setOptions({
  name: 'Ripple',
  downPanelInRight: true,
})

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

configure(loadStories, module)

// Require all the .stories.js files from all components
const req = require.context('@/components', true, /.stories.js$/)

function loadStories () {
  req.keys().forEach((filePath) => {
    const componentName = filePath.replace(/^.+\/([^/]+)\/index.stories.js/, '$1')
    const component = req(filePath)
    Vue.component(componentName, component)
    return component
  })
}

addDecorator(StoryRouter())

configure(loadStories, module)

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);

import { configure } from '@storybook/vue';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);

// Disable Docs globally for now until we got time to update them.
    // We are still able to add Docs in component level.
    // https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#replacing-docspage
    page: null
  },
  backgrounds: [
    // We need a story background color which is different with all SDP theme color,
    // so we can tell if a component has the right background color.
    { name: 'light', value: '#edfafc', default: true }
  ],
})

// Install Ripple Global plugin
Vue.use(RplGlobal, { rplMarkup: {plugins: RplMarkupExamplePlugins, options: { decodeEntities: false }}})

configure(require.context('./../../packages/components', true, /(stories\.js|mdx)$/), module)

theme: basicTheme,
    // theme: themes.dark,
  },
  readme: {
    // You can set the global code theme here.
    codeTheme: 'github',
  },
});

addDecorator(addReadme);

function loadStories() {
  require('../stories');
}

configure(loadStories, module);

import { configure } from '@storybook/vue';

// CSS reset expected by Keen UI
import './css/reset.css';

// Utilities for use in global decorators
import './css/utilities.css';

// Bootstrap modality
import '../src/bootstrap';

// Load all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

import { configure } from '@storybook/vue';
import storybook from '../../src/storybook';

storybook();

function loadStories() {
  // TODO REMOVE
}

configure(loadStories, module);