expeditaea 1.0.0

package/examples/storybook/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "example-storybook",
+  "version": "1.0.0",
+  "description": "sample storybook setup for nuxt",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "precommit": "yarn run lint",
+    "storybook": "start-storybook -p 9001 -c .storybook",
+    "storybookoutput": "build-storybook -c .storybook -o .out",
+    "post-update": "yarn upgrade --latest"
+  },
+  "dependencies": {
+    "chart.js": "^2.7.1",
+    "nuxt": "latest",
+    "vue-chartjs": "^3.1.1",
+    "vuetify": "1.2.6"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^4.0.0-alpha.24",
+    "@storybook/addon-centered": "^4.0.0-alpha.24",
+    "@storybook/addon-knobs": "^4.0.0-alpha.24",
+    "@storybook/addon-links": "^4.0.0-alpha.24",
+    "@storybook/addon-notes": "^4.0.0-alpha.24",
+    "@storybook/addon-storyshots": "^4.0.0-alpha.24",
+    "@storybook/addon-viewport": "^4.0.0-alpha.24",
+    "@storybook/addons": "^4.0.0-alpha.24",
+    "@storybook/vue": "^4.0.0-alpha.24",
+    "babel-preset-vue": "^2.0.2",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1"
+  }
+}

package/examples/storybook/pages/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <v-layout column justify-center align-center>
+    <v-flex xs12 sm8 md6>
+      <div class="text-xs-center">
+        <logo />
+        <vuetify-logo />
+      </div>
+      <v-card>
+        <v-card-title class="headline">
+          Welcome to the Vuetify + Nuxt template
+        </v-card-title>
+        <v-card-text>
+          <p>Vuetify is a progressive Material Design component framework for Vue.js. It was designed to empower developers to create amazing applications.</p>
+          <p>
+            For more information on Vuetify, check out the <a href="https://vuetifyjs.com" target="_blank">
+              documentation
+            </a>.
+          </p>
+          <p>
+            If you have questions, please join the official <a href="https://chat.vuetifyjs.com/" target="_blank" title="chat">
+              discord
+            </a>.
+          </p>
+          <p>
+            Find a bug? Report it on the github <a href="https://github.com/vuetifyjs/vuetify/issues" target="_blank" title="contribute">
+              issue board
+            </a>.
+          </p>
+          <p>Thank you for developing with Vuetify and I look forward to bringing more exciting features in the future.</p>
+          <div class="text-xs-right">
+            <em><small>&mdash; John Leider</small></em>
+          </div>
+          <hr class="my-3">
+          <a href="https://nuxtjs.org/" target="_blank">
+            Nuxt Documentation
+          </a>
+          <br>
+          <a href="https://github.com/nuxt/nuxt.js" target="_blank">
+            Nuxt GitHub
+          </a>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer />
+          <v-btn color="primary" flat nuxt to="/inspire">
+            Continue
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script>
+import Logo from '~/components/Logo.vue'
+import VuetifyLogo from '~/components/VuetifyLogo.vue'
+
+export default {
+  components: {
+    Logo,
+    VuetifyLogo
+  }
+}
+</script>

package/examples/storybook/pages/inspire.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-layout>
+    <v-flex text-xs-center>
+      <img src="/v.png" alt="Vuetify.js" class="mb-5">
+      <blockquote class="blockquote">
+        &#8220;First, solve the problem. Then, write the code.&#8221;
+        <footer>
+          <small>
+            <em>&mdash;John Johnson</em>
+          </small>
+        </footer>
+      </blockquote>
+    </v-flex>
+  </v-layout>
+</template>

package/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.base,
+    error: colors.deepOrange.accent4,
+    success: colors.green.accent3
+  }
+})

package/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 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).

package/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: `
+<div>
+  <line-chart :data="{
+    labels: [1,2,3],
+    datasets: [
+      {
+        label: 'Sample',
+        backgroundColor: 'green',
+        data: ['1','2','3']
+      }
+    ]
+  }" :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')
+
+    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: `
+        <div  style="position: relative; height:40vh; width:80vw">
+        <line-chart :data="{
+            labels: [${defaultLabel}],
+          datasets: [
+            {
+              label: '${title}',
+              backgroundColor: '${myColor}',
+              data: [${defaultValue}]
+            }
+          ]
+        }" :options="{ maintainAspectRatio: ${maintainAspectRatio}, responsive:${responsive}, onResize }"/>
+      </div>
+      `
+    }
+  })
+  .addVT('with Vuetify', () => {
+    const data = { "'a'": 1, "'b'": 2, "'c'": 3 }
+    return `
+        <line-chart :data="{
+          labels: [${Object.keys(data)}],
+          datasets: [
+            {
+              label: 'list 1',
+              backgroundColor: '#41b883',
+              data: [${Object.values(data)}]
+            }
+          ]
+        }" :options="{ maintainAspectRatio: false, responsive:true}"/>
+  `
+  })
+  .addVT(
+    'with Vuetify2',
+    `<line-chart :data="{
+          labels: [1,2,3],
+          datasets: [
+            {
+              label: 'list 2',
+              backgroundColor: '#41b883',
+              data: ['1','2','3']
+            }
+          ]
+        }" :options="{ maintainAspectRatio: false, responsive:true}"/>
+  `
+  )

package/examples/storybook/stories/Logo.story.js

@@ -0,0 +1,45 @@
+import {
+  nStoriesOf,
+  // action,
+  // boolean,
+  // text,
+  // color,
+  // array,
+  object
+} from './storybase.js'
+
+import Logo from '~/components/Logo.vue'
+
+// nStoriesOf({ Logo }, "Logo 1")
+// .addDecorator(story => (
+//   <div style={{textAlign: 'center'}}>
+//     {story()}
+//   </div>
+// ))
+//   .add("with some data", () => ({
+//     components: { Logo },
+//     template: `
+//   <logo :data="{  }  "/>`
+//   }))
+
+nStoriesOf({ Logo }, 'Logo ')
+  .add('with some data', () => ({
+    components: { Logo },
+    template: `
+       <v-app dark style="min-width:400px">
+      <v-container  fill-height>
+      <v-flex xs12>
+  <logo :data="{  }  "/>
+  </v-flex>
+  </v-container></v-app>`
+  }))
+  .addVT('with App layout', '<logo :data="{  }  "/>')
+  .addVT('with a knob', () => {
+    const data = JSON.stringify(
+      object('Data', {
+        name: 'Apple',
+        count: 132
+      })
+    )
+    return `<logo  :data='${data}' />`
+  })

package/examples/storybook/stories/MyButton.story.js

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

package/examples/storybook/stories/Welcome.story.js

@@ -0,0 +1,14 @@
+
+import { storiesOf } from '@storybook/vue'
+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: '<div align=center><welcome :showApp="action" /></div>',
+    methods: { action: linkTo('Button') }
+  }))

package/examples/storybook/stories/collection.story.js

@@ -0,0 +1,227 @@
+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('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: `
+      <div>
+        <h1>A template</h1>
+        <p>rendered in vue in storybook</p>
+      </div>`
+  }))
+  .add('template + component', () => ({
+    components: { MyButton },
+    template: '<my-button>MyButton rendered in a template</my-button>'
+  }))
+  .add('template + methods', () => ({
+    components: { MyButton },
+    template: `
+      <p>
+        <em>Clicking the button will navigate to another story using the 'addon-links'</em><br/>
+        <my-button :rounded="true" :handle-click="action">MyButton rendered in a template + props & methods</my-button>
+      </p>`,
+    methods: {
+      action: linkTo('Button')
+    }
+  }))
+  .add('JSX', () => ({
+    components: { MyButton },
+    render () {
+      return <my-button>MyButton rendered with JSX</my-button>
+    }
+  }))
+  .add('vuex + actions', () => ({
+    components: { MyButton },
+    template: '<my-button :handle-click="log">with vuex: {{ $store.state.count }}</my-button>',
+    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:
+      '<my-button :handle-click="log">with awesomeness: {{ $store.state.count }}</my-button>',
+    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: `
+      <p>
+        <em>This component was pre-registered in .storybook/config.js</em><br/>
+        <my-button>MyButton rendered in a template</my-button>
+      </p>`
+  }))
+
+storiesOf('Features/Decorator for Vue', module)
+  .addDecorator((story) => {
+    // Decorated with story function
+    const WrapButton = story()
+    return {
+      components: { WrapButton },
+      template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
+      data () {
+        return { borderStyle: 'medium solid red' }
+      }
+    }
+  })
+  .addDecorator(() => ({
+    // Decorated with `story` component
+    template: '<div :style="{ border: borderStyle }"><story/></div>',
+    data () {
+      return {
+        borderStyle: 'medium solid blue'
+      }
+    }
+  }))
+  .add('template', () => ({
+    template: '<my-button>MyButton with template</my-button>'
+  }))
+  .add('render', () => ({
+    render (h) {
+      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')
+    }
+  }))
+  .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)
+      }
+    }
+  }))
+
+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>'
+    }))
+  )
+  .add(
+    'Note with HTML',
+    withNotes({
+      text: `
+      <h2>My notes on emojies</h2>
+
+      <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>'
+    }))
+  )
+
+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: `<div>${content}</div>`
+    }
+  })
+  .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 &dollar;${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: `
+          <div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
+            <h1>My name is ${name},</h1>
+            <h3>today is ${new Date(today).toLocaleDateString()}</h3>
+            <p>${stockMessage}</p>
+            <p>Also, I have:</p>
+            <ul>
+              ${items.map(item => `<li key=${item}>${item}</li>`).join('')}
+            </ul>
+            <p>${salutation}</p>
+          </div>
+        `
+    }
+  })

package/examples/storybook/stories/storybase.js

@@ -0,0 +1,82 @@
+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 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: `
+     <v-app style="min-width:400px">
+        <v-container fluid fill-height>
+        <v-flex xs12>${cmpStr instanceof Function ? cmpStr() : cmpStr}</v-flex>
+        </v-container>
+    </v-app>
+    `
+})
+/**
+ * Richer aLternative to storiesOf
+ * @param {*} cmp
+ * @param {*} name
+ * @param {*} params
+ */
+const nStoriesOf = (cmp, name = Object.keys(cmp)[0], params = {}) => {
+  const 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,
+  linkTo,
+  withKnobs,
+  text,
+  number,
+  object,
+  boolean,
+  array,
+  select,
+  color,
+  date,
+  button,
+  vtmp
+}