How to use the @storybook/vue.storiesOf function in @storybook/vue
To help you get started, we’ve selected a few @storybook/vue examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
storybookjs / vue-cli-plugin-storybook / generator / template / src / stories / index.stories.js View on Github 
/* 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',
},import { storiesOf } from '@storybook/vue'
import RnInput from './index.vue'
storiesOf('Inputs', module)
.add('Text', () => ({
components: { RnInput },
data: () => ({
user: 'Fred',
}),
template:
'',
}))
.add('Number', () => ({
components: { RnInput },
data: () => ({
users: '10',
}),
template:
'',
}))import { storiesOf } from '@storybook/vue';
import { withReadme } from 'storybook-readme';
import { withKnobs, number } from '@storybook/addon-knobs';
import readme from './readme.md';
import FixedRatio from './';
import './fixed-ratio.stories.css';
storiesOf('Fixed ratio', module)
.addDecorator(withReadme(readme))
.addDecorator(withKnobs)
.add('Default', () => ({
components: { FixedRatio },
data() {
return {
images: [
{
width: number('Width size', 16),
height: number('Height size', 9),
text: `${number('Width size', 16)} x ${number('Height size', 9)}`
},
{
width: 4,
height: 3,
text: '4 x 3'import { array, text } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/vue';
import Vue from 'vue';
import { componentsHierarchyRootSeparator } from '../../../../conf/storybook/utils';
import { ERROR_COOKIES_NOT_SUPPORTED_NAME } from '../../component-names';
import { Link } from '../../message-page/message-page';
import ErrorCookiesNotSupportedPlugin from './error-cookies-not-supported';
Vue.use(ErrorCookiesNotSupportedPlugin);
storiesOf(`${componentsHierarchyRootSeparator}${ERROR_COOKIES_NOT_SUPPORTED_NAME}`, module)
.add('default', () => ({
template: `<div style="border: solid 1px black; padding: 10px; width: 600px;">
</div>`
}))
.add('title', () => ({
props: {
title: {
default: text('Title', 'A Custom Title')
}
},
template: `<div style="border: solid 1px black; padding: 10px; width: 600px;">
</div>`import { storiesOf } from '@storybook/vue'
import { withInfo } from 'storybook-addon-vue-info'
import VCarousel from '.'
import VCarouselSlide from '../VCarouselSlide'
const wrapper = {
components: { VCarousel, VCarouselSlide }
}
storiesOf('Molecule - VCarousel', module)
.addDecorator(withInfo)
.add('default', () => ({
...wrapper,
template: `
Slide 1
Slide 2
Slide 3
`import Default from './default.vue'
import { storiesOf } from '@storybook/vue'
storiesOf('Directives/Core', module)
.add('v-position', () => Default)import { groupsMock } from '>/mockdata'
const datastore = createDatastore({
applications: {
getters: {
getMineInGroup: () => () => null,
},
},
})
const methods = {
preview: action('view group preview'),
visit: action('visit group'),
}
storiesOf('GroupGalleryCard', module)
.add('isMember = true', () => defaults({
render: h => h(GroupGalleryCard, {
props: {
group: {
...groupsMock[0],
isMember: true,
},
},
on: methods,
}),
store: datastore,
}))
.add('isMember = false', () => defaults({
render: h => h(GroupGalleryCard, {
props: {
group: {import { storybookDefaults as defaults } from '>/helpers'
import { storiesOf } from '@storybook/vue'
import ProfilePicture from './ProfilePicture'
import { usersMock } from '>/mockdata'
storiesOf('ProfilePicture', module)
.add('with user', () => defaults({
render: h => h(ProfilePicture, {
props: {
user: usersMock[0],
isLink: false,
size: 100,
},
}),
}))
.add('without user', () => defaults({
render: h => h(ProfilePicture, {
props: {
user: {
id: 1,
displayName: '?',
},import { storiesOf } from "@storybook/vue";
import { withKnobs, text } from "@storybook/addon-knobs";
import SfProductOption from "./SfProductOption.vue";
storiesOf("Molecules|ProductOption", module)
.addDecorator(withKnobs)
.add("Common", () => ({
components: { SfProductOption },
props: {
color: {
default: text("color", "red", "Props")
},
label: {
default: text("label", "Red", "Props")
},
value: {
default: text("value", "red", "Props")
}
},
template: `<div style="max-width: 300px">
</div>
