From b65a0e6e1923212cc546c04d364a06828a0f69fe Mon Sep 17 00:00:00 2001 From: Huseyn Guliyev Date: Tue, 6 Feb 2018 02:36:22 +0000 Subject: [PATCH] initial commit --- examples/storybook/.storybook/addons.js | 5 + examples/storybook/.storybook/config.js | 24 ++ .../storybook/.storybook/webpack.config.js | 15 ++ examples/storybook/README.md | 7 + examples/storybook/components/Button.vue | 30 +++ examples/storybook/components/Layout.vue | 82 ++++++ examples/storybook/components/LineChart.js | 9 + examples/storybook/components/Logo.vue | 79 ++++++ examples/storybook/components/README.md | 7 + examples/storybook/components/VuetifyLogo.vue | 16 ++ examples/storybook/components/Welcome.vue | 110 ++++++++ examples/storybook/layouts/default.vue | 100 ++++++++ examples/storybook/nuxt.config.js | 84 ++++++ examples/storybook/package.json | 43 ++++ examples/storybook/pages/index.vue | 43 ++++ examples/storybook/pages/inspire.vue | 15 ++ examples/storybook/plugins/vuetify.js | 15 ++ examples/storybook/static/favicon.ico | Bin 0 -> 1150 bytes examples/storybook/static/v.png | Bin 0 -> 5674 bytes examples/storybook/store/README.md | 10 + examples/storybook/stories/LineChart.story.js | 92 +++++++ examples/storybook/stories/Logo.story.js | 46 ++++ examples/storybook/stories/MyButton.story.js | 15 ++ examples/storybook/stories/Welcome.story.js | 15 ++ .../storybook/stories/collection.story.js | 240 ++++++++++++++++++ examples/storybook/stories/storybase.js | 86 +++++++ examples/storybook/stories/vuetify.story.js | 116 +++++++++ 27 files changed, 1304 insertions(+) create mode 100644 examples/storybook/.storybook/addons.js create mode 100644 examples/storybook/.storybook/config.js create mode 100644 examples/storybook/.storybook/webpack.config.js create mode 100644 examples/storybook/components/Button.vue create mode 100644 examples/storybook/components/Layout.vue create mode 100644 examples/storybook/components/LineChart.js create mode 100644 examples/storybook/components/Logo.vue create mode 100644 examples/storybook/components/README.md create mode 100644 examples/storybook/components/VuetifyLogo.vue create mode 100644 examples/storybook/components/Welcome.vue create mode 100644 examples/storybook/layouts/default.vue create mode 100644 examples/storybook/nuxt.config.js create mode 100644 examples/storybook/package.json create mode 100644 examples/storybook/pages/index.vue create mode 100644 examples/storybook/pages/inspire.vue create mode 100644 examples/storybook/plugins/vuetify.js create mode 100644 examples/storybook/static/favicon.ico create mode 100644 examples/storybook/static/v.png create mode 100644 examples/storybook/store/README.md create mode 100644 examples/storybook/stories/LineChart.story.js create mode 100644 examples/storybook/stories/Logo.story.js create mode 100644 examples/storybook/stories/MyButton.story.js create mode 100644 examples/storybook/stories/Welcome.story.js create mode 100644 examples/storybook/stories/collection.story.js create mode 100644 examples/storybook/stories/storybase.js create mode 100644 examples/storybook/stories/vuetify.story.js diff --git a/examples/storybook/.storybook/addons.js b/examples/storybook/.storybook/addons.js new file mode 100644 index 0000000000..ebf8190d38 --- /dev/null +++ b/examples/storybook/.storybook/addons.js @@ -0,0 +1,5 @@ +import '@storybook/addon-knobs/register'; +import '@storybook/addon-actions/register'; +import '@storybook/addon-links/register'; +import '@storybook/addon-notes/register'; +import '@storybook/addon-viewport/register'; \ No newline at end of file diff --git a/examples/storybook/.storybook/config.js b/examples/storybook/.storybook/config.js new file mode 100644 index 0000000000..208f9b98c5 --- /dev/null +++ b/examples/storybook/.storybook/config.js @@ -0,0 +1,24 @@ +import "vuetify/dist/vuetify.css"; + +import { configure } from "@storybook/vue"; +import Vue from "vue"; +import Vuex from "vuex"; +import Vuetify from "vuetify"; +import MyButton from "../components/Button.vue"; + +Vue.use(Vuex); +Vue.use(Vuetify); + +Vue.component("my-button", MyButton); + +//function loadStories() { +// require("../src/stories"); +//} + +// automatically import all files ending in *.stories.js +const req = require.context('../stories', true, /.story.js$/); +function loadStories() { + req.keys().forEach((filename) => req(filename)); +} + +configure(loadStories, module); diff --git a/examples/storybook/.storybook/webpack.config.js b/examples/storybook/.storybook/webpack.config.js new file mode 100644 index 0000000000..b113a4814d --- /dev/null +++ b/examples/storybook/.storybook/webpack.config.js @@ -0,0 +1,15 @@ +const webpack = require('webpack') +const path = require('path') +const nxtConf = require('../nuxt.config') + +module.exports = (sBaseConfig, configType, defaultConfig) => { + + const srcDir = `../${nxtConf.srcDir||''}` + const rootDir = `../${nxtConf.rootDir||''}` + Object.assign(defaultConfig.resolve.alias, { + '~~': path.resolve(__dirname, rootDir), + '~': path.resolve(__dirname, srcDir) + }) + + return defaultConfig +} \ No newline at end of file diff --git a/examples/storybook/README.md b/examples/storybook/README.md index 4cd6a84003..45fb6c3e9c 100644 --- a/examples/storybook/README.md +++ b/examples/storybook/README.md @@ -1 +1,8 @@ ## Storybook demo for Nuxt + + +### Features + +* supports '~' and '~~' Nuxt aliases +* contains storybase.js with helper classes +* integrates most of addons \ No newline at end of file diff --git a/examples/storybook/components/Button.vue b/examples/storybook/components/Button.vue new file mode 100644 index 0000000000..3e6ee3a17e --- /dev/null +++ b/examples/storybook/components/Button.vue @@ -0,0 +1,30 @@ + + + + + \ No newline at end of file diff --git a/examples/storybook/components/Layout.vue b/examples/storybook/components/Layout.vue new file mode 100644 index 0000000000..1820080a8a --- /dev/null +++ b/examples/storybook/components/Layout.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/examples/storybook/components/LineChart.js b/examples/storybook/components/LineChart.js new file mode 100644 index 0000000000..e0d646e5c1 --- /dev/null +++ b/examples/storybook/components/LineChart.js @@ -0,0 +1,9 @@ +import { Line } from 'vue-chartjs' + +export default { + extends: Line, + props: ['data', 'options'], + mounted() { + this.renderChart(this.data, this.options) + } +} diff --git a/examples/storybook/components/Logo.vue b/examples/storybook/components/Logo.vue new file mode 100644 index 0000000000..0b8733dc9b --- /dev/null +++ b/examples/storybook/components/Logo.vue @@ -0,0 +1,79 @@ + + + diff --git a/examples/storybook/components/README.md b/examples/storybook/components/README.md new file mode 100644 index 0000000000..a079f1060e --- /dev/null +++ b/examples/storybook/components/README.md @@ -0,0 +1,7 @@ +# COMPONENTS + +**This directory is not required, you can delete it if you don't want to use it.** + +The components directory contains your Vue.js Components. + +_Nuxt.js doesn't supercharge these components._ diff --git a/examples/storybook/components/VuetifyLogo.vue b/examples/storybook/components/VuetifyLogo.vue new file mode 100644 index 0000000000..5ee5194243 --- /dev/null +++ b/examples/storybook/components/VuetifyLogo.vue @@ -0,0 +1,16 @@ + + + diff --git a/examples/storybook/components/Welcome.vue b/examples/storybook/components/Welcome.vue new file mode 100644 index 0000000000..baea9b174f --- /dev/null +++ b/examples/storybook/components/Welcome.vue @@ -0,0 +1,110 @@ + + + + + diff --git a/examples/storybook/layouts/default.vue b/examples/storybook/layouts/default.vue new file mode 100644 index 0000000000..98a898e92c --- /dev/null +++ b/examples/storybook/layouts/default.vue @@ -0,0 +1,100 @@ + + + diff --git a/examples/storybook/nuxt.config.js b/examples/storybook/nuxt.config.js new file mode 100644 index 0000000000..e8e401dc52 --- /dev/null +++ b/examples/storybook/nuxt.config.js @@ -0,0 +1,84 @@ +const pkg = require('./package') + +const nodeExternals = require('webpack-node-externals') + +module.exports = { + mode: 'universal', + + /* + ** Headers of the page + */ + head: { + title: pkg.name, + meta: [ + { charset: 'utf-8' }, + { name: 'viewport', content: 'width=device-width, initial-scale=1' }, + { hid: 'description', name: 'description', content: pkg.description } + ], + link: [ + { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }, + { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' } + ] + }, + + /* + ** Customize the progress-bar color + */ + loading: { color: '#3B8070' }, + + /* + ** Global CSS + */ + css: [ + 'vuetify/src/stylus/main.styl' + ], + + /* + ** Plugins to load before mounting the App + */ + plugins: [ + '@/plugins/vuetify' + ], + + /* + ** Nuxt.js modules + */ + modules: [ + // Doc: https://github.com/nuxt-community/axios-module#usage + '@nuxtjs/axios' + ], + + /* + ** Axios module configuration + */ + axios: { + // See https://github.com/nuxt-community/axios-module#options + }, + + /* + ** Build configuration + */ + build: { + /* + ** You can extend webpack config here + */ + extend(config, ctx) { + // Run ESLint on save + if (ctx.isDev && ctx.isClient) { + config.module.rules.push({ + enforce: 'pre', + test: /\.(js|vue)$/, + loader: 'eslint-loader', + exclude: /(node_modules)/ + }) + } + if (ctx.isServer) { + config.externals = [ + nodeExternals({ + whitelist: [/^vuetify/] + }) + ] + } + } + } +} diff --git a/examples/storybook/package.json b/examples/storybook/package.json new file mode 100644 index 0000000000..92a2c2b73e --- /dev/null +++ b/examples/storybook/package.json @@ -0,0 +1,43 @@ +{ + "name": "storybook", + "version": "1.0.0", + "description": "sample storybook setup", + "author": "Huseyn Guliyev", + "private": true, + "scripts": { + "dev": "nuxt", + "build": "nuxt build", + "start": "nuxt start", + "generate": "nuxt generate", + "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", + "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .", + "precommit": "yarn run lint", + "storybook": "start-storybook -p 9001 -c .storybook", + "storybookoutput": "build-storybook -c .storybook -o .out" + }, + "dependencies": { + "@nuxtjs/axios": "^5.0.0", + "chart.js": "^2.7.1", + "nuxt": "^1.3.0", + "vue-chartjs": "^3.1.1", + "vuetify": "1.0.0-beta.5" + }, + "devDependencies": { + "@storybook/addon-actions": "^3.4.0-alpha.7", + "@storybook/addon-centered": "^3.4.0-alpha.7", + "@storybook/addon-knobs": "^3.4.0-alpha.7", + "@storybook/addon-links": "^3.4.0-alpha.7", + "@storybook/addon-notes": "^3.4.0-alpha.7", + "@storybook/addon-storyshots": "^3.4.0-alpha.7", + "@storybook/addon-viewport": "^3.4.0-alpha.7", + "@storybook/addons": "^3.4.0-alpha.7", + "@storybook/vue": "^3.4.0-alpha.7", + "babel-eslint": "^8.2.1", + "cross-env": "^5.0.1", + "eslint": "^4.15.0", + "eslint-loader": "^1.7.1", + "eslint-plugin-vue": "^4.0.0", + "stylus": "^0.54.5", + "stylus-loader": "^3.0.1" + } +} diff --git a/examples/storybook/pages/index.vue b/examples/storybook/pages/index.vue new file mode 100644 index 0000000000..c2ca0475fa --- /dev/null +++ b/examples/storybook/pages/index.vue @@ -0,0 +1,43 @@ + + + diff --git a/examples/storybook/pages/inspire.vue b/examples/storybook/pages/inspire.vue new file mode 100644 index 0000000000..fd6b51676c --- /dev/null +++ b/examples/storybook/pages/inspire.vue @@ -0,0 +1,15 @@ + diff --git a/examples/storybook/plugins/vuetify.js b/examples/storybook/plugins/vuetify.js new file mode 100644 index 0000000000..8a0fbe2454 --- /dev/null +++ b/examples/storybook/plugins/vuetify.js @@ -0,0 +1,15 @@ +import Vue from 'vue' +import Vuetify from 'vuetify' +import colors from 'vuetify/es5/util/colors' + +Vue.use(Vuetify, { + theme: { + primary: '#121212', // a color that is not in the material colors palette + accent: colors.grey.darken3, + secondary: colors.amber.darken3, + info: colors.teal.lighten1, + warning: colors.amber, + error: colors.deepOrange.accent4, + success: colors.green.accent3 + } +}) diff --git a/examples/storybook/static/favicon.ico b/examples/storybook/static/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..382fecbbf96d6e1e614e0e2cc8b73e355bd946cc GIT binary patch literal 1150 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 P6963zeMGIAUBv$Y4kLO$ literal 0 HcmV?d00001 diff --git a/examples/storybook/store/README.md b/examples/storybook/store/README.md new file mode 100644 index 0000000000..111fea1b33 --- /dev/null +++ b/examples/storybook/store/README.md @@ -0,0 +1,10 @@ +# STORE + +**This directory is not required, you can delete it if you don't want to use it.** + +This directory contains your Vuex Store files. +Vuex Store option is implemented in the Nuxt.js framework. + +Creating a file in this directory activate the option in the framework automatically. + +More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). diff --git a/examples/storybook/stories/LineChart.story.js b/examples/storybook/stories/LineChart.story.js new file mode 100644 index 0000000000..1f4b3dc97b --- /dev/null +++ b/examples/storybook/stories/LineChart.story.js @@ -0,0 +1,92 @@ +import { + nStoriesOfWithDefault, + action, + boolean, + text, + color, + array +} from "./storybase.js" + +import LineChart from "~/components/LineChart" + +nStoriesOfWithDefault({ LineChart }) + .add("with some data", () => ({ + components: { LineChart }, + template: ` +
+ +
` + })) + .add("with knobs demo", () => { + const maintainAspectRatio = boolean("Aspect Ratio", false) + const responsive = boolean("Responsive", true) + const title = text("Title", "Sample chart") + const myColor = color("Background Color", "darkred") + + const defaultValue = array("Values", [1, 2, 3, 6, 3, 8]) + const defaultLabel = array("Labels", [ + "'a'", + "'b'", + "'c'", + "'d'", + "'e'", + "'f'" + ]) + + return { + components: { LineChart }, + methods: { onResize: action("resized") }, + template: ` +
+ +
+ ` + } + }) + .addVT("with Vuetify", () => { + const data = { "'a'": 1, "'b'": 2, "'c'": 3 } + return ` + + ` + }) + .addVT( + "with Vuetify2", + ` + ` + ) diff --git a/examples/storybook/stories/Logo.story.js b/examples/storybook/stories/Logo.story.js new file mode 100644 index 0000000000..e926d2926f --- /dev/null +++ b/examples/storybook/stories/Logo.story.js @@ -0,0 +1,46 @@ +import { + nStoriesOf, + action, + boolean, + text, + color, + array, + object +} from "./storybase.js" + +import Logo from "~/components/Logo.vue" + + +// nStoriesOf({ Logo }, "Logo 1") +// .addDecorator(story => ( +//
+// {story()} +//
+// )) +// .add("with some data", () => ({ +// components: { Logo }, +// template: ` +// ` +// })) + +nStoriesOf({ Logo }, "Logo ") + .add("with some data", () => ({ + components: { Logo }, + template: ` + + + + + + ` + })) + .addVT("with App layout", '') + .addVT("with a knob", () => { + let data = JSON.stringify( + object("Data", { + name: "Apple", + count: 132 + }) + ) + return `` + }) diff --git a/examples/storybook/stories/MyButton.story.js b/examples/storybook/stories/MyButton.story.js new file mode 100644 index 0000000000..7a734fa7e0 --- /dev/null +++ b/examples/storybook/stories/MyButton.story.js @@ -0,0 +1,15 @@ + +import { storiesOf } from '@storybook/vue'; +import MyButton from '~/components/Button.vue'; +import Centered from '@storybook/addon-centered'; + +storiesOf("Button", module) +.addDecorator(Centered) + .add("rounded button", () => ({ + template: ' 👍 A Button with rounded edges' + })) + .add("normal button", () => ({ + components: { MyButton }, + template: 'A Button with square edges' + })); + diff --git a/examples/storybook/stories/Welcome.story.js b/examples/storybook/stories/Welcome.story.js new file mode 100644 index 0000000000..5bf69dee15 --- /dev/null +++ b/examples/storybook/stories/Welcome.story.js @@ -0,0 +1,15 @@ + +import { storiesOf } from '@storybook/vue'; +import { action } from '@storybook/addon-actions'; +import { linkTo } from '@storybook/addon-links'; + +import Welcome from '~/components/Welcome.vue'; + +storiesOf('Welcome', module).add('to Storybook', () => ({ + render: h => h(Welcome), +})) + .add("with Link To Button", () => ({ + components: { Welcome }, + template: '
', + methods: { action: linkTo("Button") } + })); diff --git a/examples/storybook/stories/collection.story.js b/examples/storybook/stories/collection.story.js new file mode 100644 index 0000000000..c84190d93e --- /dev/null +++ b/examples/storybook/stories/collection.story.js @@ -0,0 +1,240 @@ +/* eslint-disable react/react-in-jsx-scope */ + +import Vuex from 'vuex'; +import { storiesOf } from '@storybook/vue'; +import { action } from '@storybook/addon-actions'; +import { linkTo } from '@storybook/addon-links'; +import { withNotes } from '@storybook/addon-notes'; +import { + withKnobs, + text, + number, + boolean, + array, + select, + color, + date, + button, +} from '@storybook/addon-knobs/vue'; + +import MyButton from '~/components/Button.vue'; + + +//storiesOf('App', module).add('App', () => ({ +// render: h => h(App), +//})); + + + +storiesOf('Features/Method for rendering Vue', module) + .add('render', () => ({ + render: h => h('div', ['renders a div with some text in it..']), + })) + .add('render + component', () => ({ + render(h) { + return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']); + }, + })) + .add('template', () => ({ + template: ` +
+

A template

+

rendered in vue in storybook

+
`, + })) + .add('template + component', () => ({ + components: { MyButton }, + template: 'MyButton rendered in a template', + })) + .add('template + methods', () => ({ + components: { MyButton }, + template: ` +

+ Clicking the button will navigate to another story using the 'addon-links'
+ MyButton rendered in a template + props & methods +

`, + methods: { + action: linkTo('Button'), + }, + })) + .add('JSX', () => ({ + components: { MyButton }, + render() { + return MyButton rendered with JSX; + }, + })) + .add('vuex + actions', () => ({ + components: { MyButton }, + template: 'with vuex: {{ $store.state.count }}', + store: new Vuex.Store({ + state: { count: 0 }, + mutations: { + increment(state) { + state.count += 1; // eslint-disable-line + action('vuex state')(state); + }, + }, + }), + methods: { + log() { + this.$store.commit('increment'); + }, + }, + })) + .add('whatever you want', () => ({ + components: { MyButton }, + template: + 'with awesomeness: {{ $store.state.count }}', + store: new Vuex.Store({ + state: { count: 0 }, + mutations: { + increment(state) { + state.count += 1; // eslint-disable-line + action('vuex state')(state); + }, + }, + }), + methods: { + log() { + this.$store.commit('increment'); + }, + }, + })) + .add('pre-registered component', () => ({ + /* By pre-registering component in config.js, + * the need to register all components with each story is removed. + * You'll only need the template */ + template: ` +

+ This component was pre-registered in .storybook/config.js
+ MyButton rendered in a template +

`, + })); + + + storiesOf('Features/Decorator for Vue', module) + .addDecorator(story => { + // Decorated with story function + const WrapButton = story(); + return { + components: { WrapButton }, + template: '
', + data() { + return { borderStyle: 'medium solid red' }; + }, + }; + }) + .addDecorator(() => ({ + // Decorated with `story` component + template: '
', + data() { + return { + borderStyle: 'medium solid blue', + }; + }, + })) + .add('template', () => ({ + template: 'MyButton with template', + })) + .add('render', () => ({ + render(h) { + return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']); + }, + })); + +storiesOf('Features/Addon Actions', module) + .add('Action only', () => ({ + template: 'Click me to log the action', + methods: { + log: action('log1'), + }, + })) + .add('Action and method', () => ({ + template: 'Click me to log the action', + methods: { + log: e => { + e.preventDefault(); + action('log2')(e.target); + }, + }, + })); + +storiesOf('Features/Addon Notes', module) + .add( + 'Simple note', + withNotes({ text: 'My notes on some bold text' })(() => ({ + template: + '

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', + withNotes({ + text: ` +

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: '

🤔😳😯😮
😄😩😓😱
🤓😑😶😊

', + })) + ); + +storiesOf('Features/ Addon Knobs', module) + .addDecorator(withKnobs) + .add('Simple', () => { + const name = text('Name', 'John Doe'); + const age = number('Age', 44); + const content = `I am ${name} and I'm ${age} years old.`; + + return { + template: `
${content}
`, + }; + }) + .add('All knobs', () => { + 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!'; + + button('Arbitrary action', action('You clicked it!')); + + return { + template: ` +
+

My name is ${name},

+

today is ${new Date(today).toLocaleDateString()}

+

${stockMessage}

+

Also, I have:

+
    + ${items.map(item => `
  • ${item}
    • `).join('')} +
+

${salutation}

+
+ `, + }; + }); + +/* eslint-enable react/react-in-jsx-scope */ diff --git a/examples/storybook/stories/storybase.js b/examples/storybook/stories/storybase.js new file mode 100644 index 0000000000..3090fd7278 --- /dev/null +++ b/examples/storybook/stories/storybase.js @@ -0,0 +1,86 @@ +import { storiesOf } from "@storybook/vue" +import { action } from "@storybook/addon-actions" +import { + withKnobs, + text, + number, + boolean, + array, + select, + color, + date, + object, + button +} from "@storybook/addon-knobs/vue" +// import { withSmartKnobs } from "storybook-addon-smart-knobs" +// import { withInfo } from "@storybook/addon-info" +import centered from "@storybook/addon-centered" +import { linkTo } from "@storybook/addon-links" + +/** + * Template function for Vuetify + * @param {*} cmp component inside object {cmp} + * @param {*} cmpStr template string or function returning on + */ +const vtmp = (cmp, cmpStr) => ({ + components: cmp, + template: ` + + + ${cmpStr instanceof Function ? cmpStr() : cmpStr} + + + ` +}) +/** + * Richer aLternative to storiesOf + * @param {*} cmp + * @param {*} name + * @param {*} params + */ +const nStoriesOf = (cmp, name = Object.keys(cmp)[0], params = {}) => { + let x = storiesOf(name, module) + .addDecorator(centered) + .addDecorator(withKnobs) + + if (params.withDefault) { + x.add("Default", () => ({ + render: h => h(Object.values(cmp)[0]) + })) + } + + x.addVT = (title, cmpStr) => { + x.add(title, () => vtmp(cmp, cmpStr)) + return x + } + + return x +} + +/** + * Stories of which just works + * @param {*} cmp + * @param {*} name + */ +const nStoriesOfWithDefault = (cmp, name = Object.keys(cmp)[0]) => + nStoriesOf(cmp, name, { withDefault: "withDefault" }) + +export { + nStoriesOf, + nStoriesOfWithDefault, + action, + withSmartKnobs, + withInfo, + linkTo, + withKnobs, + text, + number, + object, + boolean, + array, + select, + color, + date, + button, + vtmp +} \ No newline at end of file diff --git a/examples/storybook/stories/vuetify.story.js b/examples/storybook/stories/vuetify.story.js new file mode 100644 index 0000000000..1c5abe24b6 --- /dev/null +++ b/examples/storybook/stories/vuetify.story.js @@ -0,0 +1,116 @@ +import Vue from "vue"; +import { storiesOf } from "@storybook/vue"; +import { linkTo } from "@storybook/addon-links"; + +import VuetifyLogo from "~/components/VuetifyLogo.vue"; +import Layout from "~/components/Layout.vue"; + +import Centered from '@storybook/addon-centered'; + +storiesOf('Vuetify/Logo', module) + .addDecorator(Centered) + .add('Logo', () => ({ + render: h => h(VuetifyLogo), + })); + +const menuItems = [ + { + action: "local_activity", + title: "Attractions", + items: [{ title: "List Item" }] + }, + { + action: "restaurant", + title: "Dining", + active: true, + items: [ + { title: "Breakfast & brunch" }, + { title: "New American" }, + { title: "Sushi" } + ] + }, + { + action: "school", + title: "Education", + items: [{ title: "List Item" }] + }, + { + action: "directions_run", + title: "Family", + items: [{ title: "List Item" }] + }, + { + action: "healing", + title: "Health", + items: [{ title: "List Item" }] + }, + { + action: "content_cut", + title: "Office", + items: [{ title: "List Item" }] + }, + { + action: "local_offer", + title: "Promotions", + items: [{ title: "List Item" }] + } +]; + +const menuItemsAlt = [ + { + action: "inbox", + title: "Mailbox" + }, + { + action: "note", + title: "My Address" + }, + { + action: "assignment", + title: "In Progress", + active: true, + items: [ + { title: "Consolidation" }, + { title: "Repacking" }, + { title: "Shipping" } + ] + }, + { + action: "playlist_add_check", + title: "Registration" + }, + { + action: "account_circle", + title: "Account" + }, + { + action: "view_headline", + title: "Shipped" + } +]; + + + +storiesOf("Vuetify/V-Btn", module) + .add("Square Button", () => ({ + components: {}, + data() { + return { + items: menuItems + }; + }, + template: + 'Success' + })) + .add("with rounded button", () => ({ + components: {}, + data() { + return { + items: menuItemsAlt + }; + }, + template: + ` +Rounded button + ` + }));