fix eslint issues

This commit is contained in:
Huseyn Guliyev 2018-02-06 03:06:45 +00:00
parent cdba427776
commit da2a9ac569
11 changed files with 187 additions and 200 deletions

View File

@ -10,10 +10,10 @@ export default {
default: () => () => null
},
color: {
default: "#42b983"
default: '#42b983'
}
}
};
}
</script>
<style>

View File

@ -65,7 +65,7 @@
<script>
export default {
name: "layout",
name: 'layout',
data: () => ({
drawer: null
@ -74,7 +74,7 @@ export default {
items: Array,
source: String
}
};
}
</script>
<style type="text/css">

View File

@ -68,7 +68,7 @@ export default {
props: {
showApp: {
type: Function,
default: () => console.log('Welcome to storybook!')
default: () => console.log('Welcome to storybook!') // eslint-disable-line
}
}
}

View File

@ -1,7 +1,5 @@
const pkg = require('./package')
const nodeExternals = require('webpack-node-externals')
module.exports = {
mode: 'universal',

View File

@ -5,12 +5,12 @@ import {
text,
color,
array
} from "./storybase.js"
} from './storybase.js'
import LineChart from "~/components/LineChart"
import LineChart from '~/components/LineChart'
nStoriesOfWithDefault({ LineChart })
.add("with some data", () => ({
.add('with some data', () => ({
components: { LineChart },
template: `
<div>
@ -26,14 +26,14 @@ nStoriesOfWithDefault({ LineChart })
}" :options="{ maintainAspectRatio: false, responsive:true}"/>
</div>`
}))
.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")
.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", [
const defaultValue = array('Values', [1, 2, 3, 6, 3, 8])
const defaultLabel = array('Labels', [
"'a'",
"'b'",
"'c'",
@ -44,7 +44,7 @@ nStoriesOfWithDefault({ LineChart })
return {
components: { LineChart },
methods: { onResize: action("resized") },
methods: { onResize: action('resized') },
template: `
<div style="position: relative; height:40vh; width:80vw">
<line-chart :data="{
@ -61,7 +61,7 @@ nStoriesOfWithDefault({ LineChart })
`
}
})
.addVT("with Vuetify", () => {
.addVT('with Vuetify', () => {
const data = { "'a'": 1, "'b'": 2, "'c'": 3 }
return `
<line-chart :data="{
@ -77,8 +77,8 @@ nStoriesOfWithDefault({ LineChart })
`
})
.addVT(
"with Vuetify2",
`<line-chart :data="{
'with Vuetify2',
`<line-chart :data="{
labels: [1,2,3],
datasets: [
{

View File

@ -1,15 +1,14 @@
import {
nStoriesOf,
action,
boolean,
text,
color,
array,
// action,
// boolean,
// text,
// color,
// array,
object
} from "./storybase.js"
import Logo from "~/components/Logo.vue"
} from './storybase.js'
import Logo from '~/components/Logo.vue'
// nStoriesOf({ Logo }, "Logo 1")
// .addDecorator(story => (
@ -23,8 +22,8 @@ import Logo from "~/components/Logo.vue"
// <logo :data="{ } "/>`
// }))
nStoriesOf({ Logo }, "Logo ")
.add("with some data", () => ({
nStoriesOf({ Logo }, 'Logo ')
.add('with some data', () => ({
components: { Logo },
template: `
<v-app dark style="min-width:400px">
@ -34,11 +33,11 @@ nStoriesOf({ Logo }, "Logo ")
</v-flex>
</v-container></v-app>`
}))
.addVT("with App layout", '<logo :data="{ } "/>')
.addVT("with a knob", () => {
.addVT('with App layout', '<logo :data="{ } "/>')
.addVT('with a knob', () => {
let data = JSON.stringify(
object("Data", {
name: "Apple",
object('Data', {
name: 'Apple',
count: 132
})
)

View File

@ -1,15 +1,14 @@
import { storiesOf } from '@storybook/vue';
import MyButton from '~/components/Button.vue';
import Centered from '@storybook/addon-centered';
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", () => ({
storiesOf('Button', module)
.addDecorator(Centered)
.add('rounded button', () => ({
template: '<my-button :rounded="true"> 👍 A Button with rounded edges</my-button>'
}))
.add("normal button", () => ({
.add('normal button', () => ({
components: { MyButton },
template: '<my-button :rounded="false">A Button with square edges</my-button>'
}));
}))

View File

@ -1,15 +1,15 @@
import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import { storiesOf } from '@storybook/vue'
// import { action } from '@storybook/addon-actions'
import { linkTo } from '@storybook/addon-links'
import Welcome from '~/components/Welcome.vue';
import Welcome from '~/components/Welcome.vue'
storiesOf('Welcome', module).add('to Storybook', () => ({
render: h => h(Welcome),
render: h => h(Welcome)
}))
.add("with Link To Button", () => ({
.add('with Link To Button', () => ({
components: { Welcome },
template: '<div align=center><welcome :showApp="action" /></div>',
methods: { action: linkTo("Button") }
}));
methods: { action: linkTo('Button') }
}))

View File

@ -1,10 +1,10 @@
/* 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 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,
@ -14,37 +14,34 @@ import {
select,
color,
date,
button,
} from '@storybook/addon-knobs/vue';
button
} from '@storybook/addon-knobs/vue'
import MyButton from '~/components/Button.vue';
import MyButton from '~/components/Button.vue'
//storiesOf('App', module).add('App', () => ({
// 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..']),
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']);
},
return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton'])
}
}))
.add('template', () => ({
template: `
<div>
<h1>A template</h1>
<p>rendered in vue in storybook</p>
</div>`,
</div>`
}))
.add('template + component', () => ({
components: { MyButton },
template: '<my-button>MyButton rendered in a template</my-button>',
template: '<my-button>MyButton rendered in a template</my-button>'
}))
.add('template + methods', () => ({
components: { MyButton },
@ -54,14 +51,14 @@ storiesOf('Features/Method for rendering Vue', module)
<my-button :rounded="true" :handle-click="action">MyButton rendered in a template + props & methods</my-button>
</p>`,
methods: {
action: linkTo('Button'),
},
action: linkTo('Button')
}
}))
.add('JSX', () => ({
components: { MyButton },
render() {
return <my-button>MyButton rendered with JSX</my-button>;
},
return <my-button>MyButton rendered with JSX</my-button>
}
}))
.add('vuex + actions', () => ({
components: { MyButton },
@ -71,15 +68,15 @@ storiesOf('Features/Method for rendering Vue', module)
mutations: {
increment(state) {
state.count += 1; // eslint-disable-line
action('vuex state')(state);
},
},
action('vuex state')(state)
}
}
}),
methods: {
log() {
this.$store.commit('increment');
},
},
this.$store.commit('increment')
}
}
}))
.add('whatever you want', () => ({
components: { MyButton },
@ -90,15 +87,15 @@ storiesOf('Features/Method for rendering Vue', module)
mutations: {
increment(state) {
state.count += 1; // eslint-disable-line
action('vuex state')(state);
},
},
action('vuex state')(state)
}
}
}),
methods: {
log() {
this.$store.commit('increment');
},
},
this.$store.commit('increment')
}
}
}))
.add('pre-registered component', () => ({
/* By pre-registering component in config.js,
@ -108,63 +105,62 @@ storiesOf('Features/Method for rendering Vue', module)
<p>
<em>This component was pre-registered in .storybook/config.js</em><br/>
<my-button>MyButton rendered in a template</my-button>
</p>`,
}));
</p>`
}))
storiesOf('Features/Decorator for Vue', module)
storiesOf('Features/Decorator for Vue', module)
.addDecorator(story => {
// Decorated with story function
const WrapButton = story();
const WrapButton = story()
return {
components: { WrapButton },
template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
data() {
return { borderStyle: 'medium solid red' };
},
};
return { borderStyle: 'medium solid red' }
}
}
})
.addDecorator(() => ({
// Decorated with `story` component
template: '<div :style="{ border: borderStyle }"><story/></div>',
data() {
return {
borderStyle: 'medium solid blue',
};
},
borderStyle: 'medium solid blue'
}
}
}))
.add('template', () => ({
template: '<my-button>MyButton with template</my-button>',
template: '<my-button>MyButton with template</my-button>'
}))
.add('render', () => ({
render(h) {
return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
},
}));
return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton'])
}
}))
storiesOf('Features/Addon Actions', module)
.add('Action only', () => ({
template: '<my-button :handle-click="log">Click me to log the action</my-button>',
methods: {
log: action('log1'),
},
log: action('log1')
}
}))
.add('Action and method', () => ({
template: '<my-button :handle-click="log">Click me to log the action</my-button>',
methods: {
log: e => {
e.preventDefault();
action('log2')(e.target);
},
},
}));
e.preventDefault()
action('log2')(e.target)
}
}
}))
storiesOf('Features/Addon Notes', module)
.add(
'Simple note',
withNotes({ text: 'My notes on some bold text' })(() => ({
template:
'<p><strong>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.</strong></p>',
'<p><strong>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.</strong></p>'
}))
)
.add(
@ -176,50 +172,50 @@ storiesOf('Features/Addon Notes', module)
<em>It's not all that important to be honest, but..</em>
Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
`,
`
})(() => ({
template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>',
template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>'
}))
);
)
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.`;
const name = text('Name', 'John Doe')
const age = number('Age', 44)
const content = `I am ${name} and I'm ${age} years old.`
return {
template: `<div>${content}</div>`,
};
template: `<div>${content}</div>`
}
})
.add('All knobs', () => {
const name = text('Name', 'Jane');
const name = text('Name', 'Jane')
const stock = number('Stock', 20, {
range: true,
min: 0,
max: 30,
step: 5,
});
step: 5
})
const fruits = {
apples: 'Apple',
bananas: 'Banana',
cherries: 'Cherry',
};
const fruit = select('Fruit', fruits, 'apple');
const price = number('Price', 2.25);
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 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 &dollar;${price} each.`
: `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
: `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`
const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!'
button('Arbitrary action', action('You clicked it!'));
button('Arbitrary action', action('You clicked it!'))
return {
template: `
@ -233,8 +229,8 @@ storiesOf('Features/ Addon Knobs', module)
</ul>
<p>${salutation}</p>
</div>
`,
};
});
`
}
})
/* eslint-enable react/react-in-jsx-scope */

View File

@ -1,5 +1,5 @@
import { storiesOf } from "@storybook/vue"
import { action } from "@storybook/addon-actions"
import { storiesOf } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import {
withKnobs,
text,
@ -11,11 +11,11 @@ import {
date,
object,
button
} from "@storybook/addon-knobs/vue"
} 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"
import centered from '@storybook/addon-centered'
import { linkTo } from '@storybook/addon-links'
/**
* Template function for Vuetify
@ -44,7 +44,7 @@ const nStoriesOf = (cmp, name = Object.keys(cmp)[0], params = {}) => {
.addDecorator(withKnobs)
if (params.withDefault) {
x.add("Default", () => ({
x.add('Default', () => ({
render: h => h(Object.values(cmp)[0])
}))
}
@ -63,14 +63,12 @@ const nStoriesOf = (cmp, name = Object.keys(cmp)[0], params = {}) => {
* @param {*} name
*/
const nStoriesOfWithDefault = (cmp, name = Object.keys(cmp)[0]) =>
nStoriesOf(cmp, name, { withDefault: "withDefault" })
nStoriesOf(cmp, name, { withDefault: 'withDefault' })
export {
nStoriesOf,
nStoriesOfWithDefault,
action,
withSmartKnobs,
withInfo,
linkTo,
withKnobs,
text,
@ -83,4 +81,4 @@ export {
date,
button,
vtmp
}
}

View File

@ -1,116 +1,113 @@
import Vue from "vue";
import { storiesOf } from "@storybook/vue";
import { linkTo } from "@storybook/addon-links";
import { storiesOf } from '@storybook/vue'
// import { linkTo } from '@storybook/addon-links'
import VuetifyLogo from "~/components/VuetifyLogo.vue";
import Layout from "~/components/Layout.vue";
import VuetifyLogo from '~/components/VuetifyLogo.vue'
// import Layout from '~/components/Layout.vue'
import Centered from '@storybook/addon-centered';
import Centered from '@storybook/addon-centered'
storiesOf('Vuetify/Logo', module)
.addDecorator(Centered)
.add('Logo', () => ({
render: h => h(VuetifyLogo),
}));
render: h => h(VuetifyLogo)
}))
const menuItems = [
{
action: "local_activity",
title: "Attractions",
items: [{ title: "List Item" }]
action: 'local_activity',
title: 'Attractions',
items: [{ title: 'List Item' }]
},
{
action: "restaurant",
title: "Dining",
action: 'restaurant',
title: 'Dining',
active: true,
items: [
{ title: "Breakfast & brunch" },
{ title: "New American" },
{ title: "Sushi" }
{ title: 'Breakfast & brunch' },
{ title: 'New American' },
{ title: 'Sushi' }
]
},
{
action: "school",
title: "Education",
items: [{ title: "List Item" }]
action: 'school',
title: 'Education',
items: [{ title: 'List Item' }]
},
{
action: "directions_run",
title: "Family",
items: [{ title: "List Item" }]
action: 'directions_run',
title: 'Family',
items: [{ title: 'List Item' }]
},
{
action: "healing",
title: "Health",
items: [{ title: "List Item" }]
action: 'healing',
title: 'Health',
items: [{ title: 'List Item' }]
},
{
action: "content_cut",
title: "Office",
items: [{ title: "List Item" }]
action: 'content_cut',
title: 'Office',
items: [{ title: 'List Item' }]
},
{
action: "local_offer",
title: "Promotions",
items: [{ title: "List Item" }]
action: 'local_offer',
title: 'Promotions',
items: [{ title: 'List Item' }]
}
];
]
const menuItemsAlt = [
{
action: "inbox",
title: "Mailbox"
action: 'inbox',
title: 'Mailbox'
},
{
action: "note",
title: "My Address"
action: 'note',
title: 'My Address'
},
{
action: "assignment",
title: "In Progress",
action: 'assignment',
title: 'In Progress',
active: true,
items: [
{ title: "Consolidation" },
{ title: "Repacking" },
{ title: "Shipping" }
{ title: 'Consolidation' },
{ title: 'Repacking' },
{ title: 'Shipping' }
]
},
{
action: "playlist_add_check",
title: "Registration"
action: 'playlist_add_check',
title: 'Registration'
},
{
action: "account_circle",
title: "Account"
action: 'account_circle',
title: 'Account'
},
{
action: "view_headline",
title: "Shipped"
action: 'view_headline',
title: 'Shipped'
}
];
]
storiesOf("Vuetify/V-Btn", module)
.add("Square Button", () => ({
storiesOf('Vuetify/V-Btn', module)
.add('Square Button', () => ({
components: {},
data() {
return {
items: menuItems
};
}
},
template:
'<v-btn color="success">Success</v-btn>'
}))
.add("with rounded button", () => ({
.add('with rounded button', () => ({
components: {},
data() {
return {
items: menuItemsAlt
};
}
},
template:
`<v-btn color="warning" large round dark>
Rounded button
</v-btn>`
}));
}))