{{ message }}
+
+
+ {{ stack }}
+
+
+ Hello guys
))
+ .add('with some emoji', addonNotes({ notes: 'My notes on emojies' })(() => 🤔😳😯😮
)) + .add( + 'with a button and some emoji', + addonNotes({ notes: 'My notes on a button with emojies' })(() => + + ) + ) + .add('with old API', () => +{content}
;
+ });
+
+storiesOf('Addon Knobs', module).add(
+ 'with dynamic variables new method',
+ addonKnobs()(() => {
+ const name = text('Name', 'Arunoda Susiripala');
+ const age = number('Age', 89);
+
+ const content = `I am ${name} and I'm ${age} years old.`;
+ return {content}
;
+ })
+);
+
storiesOf('component.base.Link')
.addDecorator(withKnobs)
.add('first', () => {text('firstLink', 'first link')})
@@ -193,3 +230,4 @@ storiesOf('Cells/Molecules', module)
storiesOf('Cells.Molecules.Atoms', module)
.add('with text2', () => )
.add('with some emoji2', () => );
+
diff --git a/examples/vue-kitchen-sink/.gitignore b/examples/vue-kitchen-sink/.gitignore
new file mode 100644
index 000000000000..6c96c5cff124
--- /dev/null
+++ b/examples/vue-kitchen-sink/.gitignore
@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
diff --git a/examples/vue-kitchen-sink/.storybook/addons.js b/examples/vue-kitchen-sink/.storybook/addons.js
new file mode 100644
index 000000000000..2df5896730fb
--- /dev/null
+++ b/examples/vue-kitchen-sink/.storybook/addons.js
@@ -0,0 +1,4 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-knobs/register';
diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js
new file mode 100644
index 000000000000..b386ac70f002
--- /dev/null
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@@ -0,0 +1,15 @@
+import { configure } from '@storybook/vue';
+
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import MyButton from '../src/stories/Button.vue'
+
+Vue.component('my-button', MyButton)
+Vue.use(Vuex)
+
+function loadStories() {
+ require('../src/stories');
+}
+
+configure(loadStories, module);
diff --git a/examples/vue-kitchen-sink/README.md b/examples/vue-kitchen-sink/README.md
new file mode 100644
index 000000000000..c126932b16c6
--- /dev/null
+++ b/examples/vue-kitchen-sink/README.md
@@ -0,0 +1,3 @@
+# Storybook Demo
+
+This is a demo app to test VueJs integration with Storybook. Run `npm install` to sync Storybook module with the source code and run `npm run storybook` to start the Storybook.
diff --git a/examples/vue-kitchen-sink/index.html b/examples/vue-kitchen-sink/index.html
new file mode 100644
index 000000000000..8e597cae1104
--- /dev/null
+++ b/examples/vue-kitchen-sink/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ 
+
+
+
+
+
+
+
diff --git a/examples/vue-kitchen-sink/src/index.js b/examples/vue-kitchen-sink/src/index.js
new file mode 100644
index 000000000000..fe1ea76a9eca
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/index.js
@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+// eslint-disable-next-line
+new Vue({
+ el: '#app',
+ render: h => h(App),
+});
diff --git a/examples/vue-kitchen-sink/src/logo.png b/examples/vue-kitchen-sink/src/logo.png
new file mode 100644
index 000000000000..f3d2503fc2a4
Binary files /dev/null and b/examples/vue-kitchen-sink/src/logo.png differ
diff --git a/examples/vue-kitchen-sink/src/stories/Button.vue b/examples/vue-kitchen-sink/src/stories/Button.vue
new file mode 100644
index 000000000000..701625b54e7d
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/Button.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/vue-kitchen-sink/src/stories/Welcome.vue b/examples/vue-kitchen-sink/src/stories/Welcome.vue
new file mode 100644
index 000000000000..1fe529065eb2
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/Welcome.vue
@@ -0,0 +1,96 @@
+import Vue from 'vue';
+
+
+
+
+ Essential Links
+-
+
- Core Docs +
- Forum +
- Gitter Chat +
Ecosystem
+-
+
- vue-router +
- vuex +
- vue-loader +
- awesome-vue +
+
+
+
+
diff --git a/examples/vue-kitchen-sink/src/stories/index.js b/examples/vue-kitchen-sink/src/stories/index.js
new file mode 100644
index 000000000000..068d2c38cfcf
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/index.js
@@ -0,0 +1,211 @@
+import Vuex from 'vuex';
+import { storiesOf } from '@storybook/vue';
+
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import { addonNotes } from '@storybook/addon-notes';
+
+import {
+ addonKnobs,
+ text,
+ number,
+ boolean,
+ array,
+ select,
+ color,
+ date,
+} from '@storybook/addon-knobs';
+
+import MyButton from './Button.vue';
+import Welcome from './Welcome.vue';
+import App from '../App.vue';
+
+storiesOf('Welcome', module).add('Welcome', () => ({
+ render: h => h(Welcome),
+}));
+
+storiesOf('App', module).add('App', () => ({
+ render: h => h(App),
+}));
+
+storiesOf('Button', module)
+ // Works if Vue.component is called in the config.js in .storybook
+ .add('rounded', () => ({
+ template: 'Welcome to Storybook for Vue
++ This is a UI component dev environment for your vue app. +
+
+ We've added some basic stories inside the
+ src/stories
+ directory.
+
+ A story is a single state of one or more UI components.
+ You can have as many stories as you want.
+
+ (Basically a story is like a visual test case.)
+
+ See these sample
+ stories
+ for a component called
+ Button
+ .
+
+ Just like that, you can add your own components as stories.
+
+ You can also edit those components and see changes right away.
+
+ (Try editing the Button component
+ located at src/stories/Button.js.)
+
+ Usually we create stories with smaller UI components in the app.
+ Have a look at the
+
+ Writing Stories
+
+ section in our documentation.
+
+ NOTE:
+
+ Have a look at the
+ .storybook/webpack.config.js
+ to add webpack
+ loaders and plugins you are using in this project.
+
+
`,
+ }))
+ .add('template + component', () => ({
+ components: { MyButton },
+ template: 'A template
+rendered in vue in storybook
+
+ Clicking the button will navigate to another story using the 'addon-links'
+
+ This component was pre-registered in .storybook/config.js
+
Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
', + })) + ) + .add( + 'Note with HTML', + addonNotes({ + notes: ` +My notes on emojies
+ + It's not all that important to be honest, but.. + + Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇 + `, + })(() => ({ + template: '🤔😳😯😮
😄😩😓😱
🤓😑😶😊
${content}
`,
+ };
+ })
+ )
+ .add(
+ 'All knobs',
+ addonKnobs()(() => {
+ const name = text('Name', 'Jane');
+ const stock = number('Stock', 20, { range: true, min: 0, max: 30, step: 5 });
+ const fruits = {
+ apples: 'Apple',
+ bananas: 'Banana',
+ cherries: 'Cherry',
+ };
+ const fruit = select('Fruit', fruits, 'apple');
+ const price = number('Price', 2.25);
+
+ const colour = color('Border', 'deeppink');
+ const today = date('Today', new Date('Jan 20 2017'));
+ const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+ const nice = boolean('Nice', true);
+
+ const stockMessage = stock
+ ? `I have a stock of ${stock} ${fruit}, costing $${price} each.`
+ : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+ const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+
+ return {
+ template: `
+
+
+ `,
+ };
+ })
+ );
diff --git a/examples/vue-kitchen-sink/webpack.config.js b/examples/vue-kitchen-sink/webpack.config.js
new file mode 100644
index 000000000000..a6f520b135e5
--- /dev/null
+++ b/examples/vue-kitchen-sink/webpack.config.js
@@ -0,0 +1,69 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+ entry: './src/index.js',
+ output: {
+ path: path.resolve(__dirname, './dist'),
+ publicPath: '/dist/',
+ filename: 'build.js',
+ },
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ loaders: {},
+ // other vue-loader options go here
+ },
+ },
+ {
+ test: /\.js$/,
+ loader: 'babel-loader',
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.(png|jpg|gif|svg)$/,
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]?[hash]',
+ },
+ },
+ ],
+ },
+ resolve: {
+ alias: {
+ vue$: 'vue/dist/vue.esm.js',
+ },
+ },
+ devServer: {
+ historyApiFallback: true,
+ noInfo: true,
+ },
+ performance: {
+ hints: false,
+ },
+ devtool: '#eval-source-map',
+};
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports.devtool = '#source-map';
+ // http://vue-loader.vuejs.org/en/workflow/production.html
+ module.exports.plugins = (module.exports.plugins || []).concat([
+ new webpack.DefinePlugin({
+ 'process.env': {
+ NODE_ENV: '"production"',
+ },
+ }),
+ new webpack.optimize.UglifyJsPlugin({
+ sourceMap: true,
+ compress: {
+ warnings: false,
+ },
+ }),
+ new webpack.LoaderOptionsPlugin({
+ minimize: true,
+ }),
+ ]);
+}
diff --git a/lib/cli/bin/generate.js b/lib/cli/bin/generate.js
index de9d9802e9b9..6b22b821e5bd 100755
--- a/lib/cli/bin/generate.js
+++ b/lib/cli/bin/generate.js
@@ -144,6 +144,20 @@ switch (projectType) {
.then(end);
break;
+ case types.SFC_VUE:
+ // eslint-disable-next-line
+ require('../generators/SFC_VUE')
+ .then(commandLog('Adding storybook support to your "Single File Components Vue" app'))
+ .then(end);
+ break;
+
+ case types.VUE:
+ // eslint-disable-next-line
+ require('../generators/VUE')
+ .then(commandLog('Adding storybook support to your "Vue" app'))
+ .then(end);
+ break;
+
default:
paddedLog(`Unsupported Project type. (code: ${projectType})`);
paddedLog('Visit https://storybook.js.org for more information.');
diff --git a/lib/cli/generators/SFC_VUE/index.js b/lib/cli/generators/SFC_VUE/index.js
new file mode 100644
index 000000000000..6c4752e23dda
--- /dev/null
+++ b/lib/cli/generators/SFC_VUE/index.js
@@ -0,0 +1,19 @@
+const mergeDirs = require('merge-dirs').default;
+const helpers = require('../../lib/helpers');
+const path = require('path');
+const latestVersion = require('latest-version');
+
+module.exports = latestVersion('@storybook/vue').then(version => {
+ mergeDirs(path.resolve(__dirname, 'template'), '.', 'overwrite');
+
+ const packageJson = helpers.getPackageJson();
+
+ packageJson.devDependencies = packageJson.devDependencies || {};
+ packageJson.devDependencies['@storybook/vue'] = `^${version}`;
+
+ packageJson.scripts = packageJson.scripts || {};
+ packageJson.scripts.storybook = 'start-storybook -p 6006';
+ packageJson.scripts['build-storybook'] = 'build-storybook';
+
+ helpers.writePackageJson(packageJson);
+});
diff --git a/lib/cli/generators/SFC_VUE/template/.storybook/addons.js b/lib/cli/generators/SFC_VUE/template/.storybook/addons.js
new file mode 100644
index 000000000000..9a07f194721e
--- /dev/null
+++ b/lib/cli/generators/SFC_VUE/template/.storybook/addons.js
@@ -0,0 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
diff --git a/lib/cli/generators/SFC_VUE/template/.storybook/config.js b/lib/cli/generators/SFC_VUE/template/.storybook/config.js
new file mode 100644
index 000000000000..aabcced40e3f
--- /dev/null
+++ b/lib/cli/generators/SFC_VUE/template/.storybook/config.js
@@ -0,0 +1,7 @@
+import { configure } from '@storybook/vue'
+
+function loadStories() {
+ require('../src/stories')
+}
+
+configure(loadStories, module)
diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/MyButton.vue b/lib/cli/generators/SFC_VUE/template/src/stories/MyButton.vue
new file mode 100644
index 000000000000..d0fc3c4068cd
--- /dev/null
+++ b/lib/cli/generators/SFC_VUE/template/src/stories/MyButton.vue
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue b/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue
new file mode 100644
index 000000000000..afdf3b3a26a3
--- /dev/null
+++ b/lib/cli/generators/SFC_VUE/template/src/stories/Welcome.vue
@@ -0,0 +1,120 @@
+
+ My name is ${name},
+today is ${new Date(today).toLocaleDateString()}
+${stockMessage}
+Also, I have:
+-
+ ${items.map(item => `
- ${item} `).join('')} +
${salutation}
+
+
+
+
+
+
+
diff --git a/lib/cli/generators/SFC_VUE/template/src/stories/index.js b/lib/cli/generators/SFC_VUE/template/src/stories/index.js
new file mode 100644
index 000000000000..8e7b6d7a7383
--- /dev/null
+++ b/lib/cli/generators/SFC_VUE/template/src/stories/index.js
@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
+
+import { storiesOf } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import MyButton from './MyButton.vue';
+import Welcome from './Welcome.vue';
+
+storiesOf('Welcome', module).add('to Storybook', () => ({
+ components: { Welcome },
+ template: 'Welcome to STORYBOOK
++ This is a UI component dev environment for your app. +
+
+ We've added some basic stories inside the
+
+ src/stories
+
+ directory.
+
+ A story is a single state of one or more UI components. You can have as many stories as
+ you want.
+
+ (Basically a story is like a visual test case.)
+
+ See these sample
+
+ stories
+
+ for a component called
+
+ Button
+ .
+
+ Just like that, you can add your own components as stories.
+
+ You can also edit those components and see changes right away.
+
+ (Try editing the Button component
+ located at src/stories/Button.js.)
+
+ This is just one thing you can do with Storybook.
+
+ Have a look at the
+
+
+ Storybook
+
+
+ repo for more information.
+
+ NOTE:
+
+ Have a look at the
+
+ .storybook/webpack.config.js
+
+ to add webpack
+ loaders and plugins you are using in this project.
+
+
+ `,
+
+ methods: {
+ onClick (event) {
+ event.preventDefault()
+ this.showApp()
+ }
+ }
+}
diff --git a/lib/cli/generators/VUE/template/stories/index.js b/lib/cli/generators/VUE/template/stories/index.js
new file mode 100644
index 000000000000..9c64f3751f13
--- /dev/null
+++ b/lib/cli/generators/VUE/template/stories/index.js
@@ -0,0 +1,25 @@
+import { storiesOf } from '@storybook/vue'
+import { action } from '@storybook/addon-actions'
+import { linkTo } from '@storybook/addon-links'
+
+import MyButton from './MyButton'
+import Welcome from './Welcome'
+
+storiesOf('Welcome', module)
+ .add('to Storybook', () => ({
+ components: { Welcome },
+ template: 'Welcome to STORYBOOK
++ This is a UI component dev environment for your app. +
+
+ We've added some basic stories inside the
+
+ src/stories
+
+ directory.
+
+ A story is a single state of one or more UI components. You can have as many stories as
+ you want.
+
+ (Basically a story is like a visual test case.)
+
+ See these sample
+
+ stories
+
+ for a component called
+
+ Button
+ .
+
+ Just like that, you can add your own components as stories.
+
+ You can also edit those components and see changes right away.
+
+ (Try editing the Button component
+ located at src/stories/Button.js.)
+
+ This is just one thing you can do with Storybook.
+
+ Have a look at the
+
+
+ Storybook
+
+
+ repo for more information.
+
+ NOTE:
+
+ Have a look at the
+
+ .storybook/webpack.config.js
+
+ to add webpack
+ loaders and plugins you are using in this project.
+