expeditaea 1.0.0

package/examples/static-images/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "example-static-images",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "post-update": "yarn upgrade --latest"
+  }
+}

package/examples/static-images/pages/about.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="container">
+    <img src="~static/nuxt-black.png">
+    <h2>Thank you for testing nuxt</h2>
+    <p>Loaded from the {{ name }}</p>
+    <p>
+      <NuxtLink to="/">
+        Back home
+      </NuxtLink>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData ({ req }) {
+    return {
+      name: req ? 'server' : 'client'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: black;
+  color: white;
+  font-family: "Lucida Console", Monaco, monospace;
+  padding-top: 130px;
+  text-align: center;
+}
+a {
+  color: silver;
+}
+</style>

package/examples/static-images/pages/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="container">
+    <img src="nuxt.png">
+    <h2>Hello World.</h2>
+    <p>
+      <NuxtLink to="/about">
+        About
+      </NuxtLink>
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  font-family: sans-serif;
+  margin-top: 200px;
+  text-align: center;
+}
+</style>

package/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'

package/examples/storybook/.storybook/config.js

@@ -0,0 +1,21 @@
+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)
+
+// Automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.story.js$/)
+
+function loadStories() {
+  req.keys().forEach(req)
+}
+
+configure(loadStories, module)

package/examples/storybook/.storybook/webpack.config.js

@@ -0,0 +1,14 @@
+const path = require('path')
+const nuxtConf = require('../nuxt.config')
+
+module.exports = (sBaseConfig, configType, defaultConfig) => {
+  const srcDir = `../${nuxtConf.srcDir || ''}`
+  const rootDir = `../${nuxtConf.rootDir || ''}`
+
+  Object.assign(defaultConfig.resolve.alias, {
+    '~~': path.resolve(__dirname, rootDir),
+    '~': path.resolve(__dirname, srcDir)
+  })
+
+  return defaultConfig
+}

package/examples/storybook/README.md

@@ -0,0 +1,44 @@
+# Storybook demo for Nuxt
+
+Demo showcasing [Storybook](https://storybook.js.org/) usage with Nuxt, [Vuetify](https://vuetifyjs.com) and [Vue-Charts](http://vue-chartjs.org/)
+
+## Features
+
+* Supports `~` and `~~` Nuxt aliases
+* Contains `storybase.js` with helper classes
+* Integrates most of addons
+* Real life examples with Vuetify and Vue-Charts
+
+## Description
+
+This demo aims to integrate all the above mentioned technologies with best practices in mind.
+
+Points of interest
+
+* `.storybook` folder contains storybook configuration
+* `stories` folder has number of stories corresponding to `components`
+* Note, Storybook is configured to understand Nuxt aliases `~` and `~~`
+* Number of helpers in `storybase.js` to simplify storybook usahe
+
+## Usage
+
+To run locally in dev mode
+
+```
+npm run storybook
+```
+
+and then access the storybook from [localhost:9001](http://localhost:9001)
+
+To build static storybook to `.out` folder
+
+```
+npm run storybookoutput
+```
+
+## More reading
+
+* [Using Storybook with Nuxt](https://davidwalsh.name/storybook-nuxt) by David Walsh
+* [StoryBook for Vue](https://github.com/storybooks/storybook/tree/master/app/vue)
+* [Vue Kitchen sink Storybook demo](https://github.com/storybooks/storybook/tree/master/examples/vue-kitchen-sink)
+* [Vuetify Storybook boilerplate](https://github.com/white-rabbit-japan/vuetify-storyboard-boilerplate)

package/examples/storybook/components/Button.vue

@@ -0,0 +1,36 @@
+<template>
+  <button :style="{color: color, borderColor: color}" :class="{rounded: rounded}" class="wr-button" @click="handleClick">
+    <slot />!
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    rounded: {
+      type: Boolean,
+      default: false
+    },
+    handleClick: {
+      type: Function,
+      default: () => () => null
+    },
+    color: {
+      type: String,
+      default: '#42b983'
+    }
+  }
+}
+</script>
+
+<style>
+.rounded {
+  border-radius: 10px;
+}
+.wr-button {
+  border: 3px solid;
+  padding: 10px 20px;
+  background-color: white;
+  outline: none;
+}
+</style>

package/examples/storybook/components/Layout.vue

@@ -0,0 +1,92 @@
+<template>
+  <v-app id="inspire" dark>
+    <v-navigation-drawer
+      v-model="drawer"
+      clipped
+      fixed
+      app
+    >
+      <v-list dense>
+        <v-list-group v-for="item in items" :key="item.title" :value="item.active">
+          <v-list-tile slot="item">
+            <v-list-tile-action>
+              <v-icon>{{ item.action }}</v-icon>
+            </v-list-tile-action>
+            <v-list-tile-content>
+              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
+            </v-list-tile-content>
+            <v-list-tile-action>
+              <v-icon v-if="item.items">
+                keyboard_arrow_down
+              </v-icon>
+            </v-list-tile-action>
+          </v-list-tile>
+          <v-list-tile v-for="subItem in item.items" :key="subItem.title">
+            <v-list-tile-content>
+              <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
+            </v-list-tile-content>
+            <v-list-tile-action>
+              <v-icon>{{ subItem.action }}</v-icon>
+            </v-list-tile-action>
+          </v-list-tile>
+        </v-list-group>
+      </v-list>
+    </v-navigation-drawer>
+    <v-toolbar app fixed clipped-left>
+      <v-toolbar-side-icon @click.stop="drawer = !drawer" />
+      <v-toolbar-title>Application</v-toolbar-title>
+    </v-toolbar>
+    <v-content>
+      <v-container grid-list-md text-xs-center>
+        <v-layout row wrap>
+          <v-flex xs12>
+            <v-card dark color="primary">
+              <v-card-text class="px-0">
+                <slot />
+              </v-card-text>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-container>
+
+      <v-container fluid fill-height>
+        <v-layout justify-center align-center>
+          <v-tooltip right>
+            <v-btn slot="activator" :href="source" icon large target="_blank">
+              <v-icon large>
+                code
+              </v-icon>
+            </v-btn>
+            <span>Source</span>
+          </v-tooltip>
+        </v-layout>
+      </v-container>
+    </v-content>
+    <v-footer app fixed>
+      <span>&copy; 2017</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+export default {
+  name: 'Layout',
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    source: {
+      type: String,
+      default: ''
+    }
+  },
+  data: () => ({
+    drawer: null
+  })
+}
+</script>
+
+<style type="text/css">
+@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons");
+</style>

package/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)
+  }
+}

package/examples/storybook/components/Logo.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="VueToNuxtLogo">
+    <div class="Triangle Triangle--two" />
+    <div class="Triangle Triangle--one" />
+    <div class="Triangle Triangle--three" />
+    <div class="Triangle Triangle--four" />
+  </div>
+</template>
+
+<style>
+.VueToNuxtLogo {
+  display: inline-block;
+  animation: turn 2s linear forwards 1s;
+  transform: rotateX(180deg);
+  position: relative;
+  overflow: hidden;
+  height: 180px;
+  width: 245px;
+}
+
+.Triangle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+.Triangle--one {
+  border-left: 105px solid transparent;
+  border-right: 105px solid transparent;
+  border-bottom: 180px solid #41B883;
+}
+
+.Triangle--two {
+  top: 30px;
+  left: 35px;
+  animation: goright 0.5s linear forwards 3.5s;
+  border-left: 87.5px solid transparent;
+  border-right: 87.5px solid transparent;
+  border-bottom: 150px solid #3B8070;
+}
+
+.Triangle--three {
+  top: 60px;
+  left: 35px;
+  animation: goright 0.5s linear forwards 3.5s;
+  border-left: 70px solid transparent;
+  border-right: 70px solid transparent;
+  border-bottom: 120px solid #35495E;
+}
+
+.Triangle--four {
+  top: 120px;
+  left: 70px;
+  animation: godown 0.5s linear forwards 3s;
+  border-left: 35px solid transparent;
+  border-right: 35px solid transparent;
+  border-bottom: 60px solid #fff;
+}
+
+@keyframes turn {
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+
+@keyframes godown {
+  100% {
+    top: 180px;
+  }
+}
+
+@keyframes goright {
+  100% {
+    left: 70px;
+  }
+}
+</style>

package/examples/storybook/components/VuetifyLogo.vue

@@ -0,0 +1,16 @@
+<template>
+  <img class="VuetifyLogo" alt="Vuetify Logo" src="data:image/png;base64,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">
+</template>
+
+<style>
+.VuetifyLogo {
+  width: 180px;
+  transform: rotateY(560deg);
+  animation: turn 3.5s ease-out forwards 1s;
+}
+@keyframes turn {
+  100% {
+    transform: rotateY(0deg);
+  }
+}
+</style>

package/examples/storybook/components/Welcome.vue

@@ -0,0 +1,124 @@
+<template>
+  <v-app>
+    <v-container fluid>
+      <div class="main">
+        <h1>Welcome to STORYBOOK</h1>
+        <p>
+          This is a UI component dev environment for your app.
+        </p>
+
+        <p>
+          The repo for this project exists here
+          <a
+            class="link"
+            href="https://github.com/white-rabbit-japan/vuetify-storyboard-boilerplate"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            vuetify-storyboard-boilerplate
+          </a>
+        </p>
+
+        <p>
+          We've added some basic stories inside the
+
+          <code class="code">
+            src/stories
+          </code>
+          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.)
+        </p>
+        <p>
+          See these sample
+
+          <a class="link" role="button" tabIndex="0" @click.prevent="showApp">
+            stories
+          </a>
+          for a component called
+
+          <code class="code">
+            Button
+          </code> .
+        </p>
+        <p>
+          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
+          <code class="code">
+            Button
+          </code> component located at
+          <code class="code">
+            src/stories/Button.js
+          </code>.)
+        </p>
+        <p>
+          This is just one thing you can do with Storybook.
+          Have a look at the
+
+          <a class="link" href="https://github.com/storybooks/storybook" target="_blank" rel="noopener noreferrer">
+            Storybook
+          </a>
+          repo for more information.
+        </p>
+        <p class="note">
+          <b>NOTE:</b>
+          Have a look at the
+
+          <code class="code">
+            .storybook/webpack.config.js
+          </code>
+          to add webpack loaders and plugins you are using in this project.
+        </p>
+      </div>
+    </v-container>
+  </v-app>
+</template>
+
+<script>
+export default {
+  name: 'Welcome',
+
+  props: {
+    showApp: {
+      type: Function,
+      default: () => console.log('Welcome to storybook!') // eslint-disable-line
+    }
+  }
+}
+</script>
+
+<style>
+.main {
+  margin: 15px;
+  max-width: 600px;
+  line-height: 1.4;
+  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans,
+  sans-serif;
+}
+
+.logo {
+  width: 200px;
+}
+
+.link {
+  color: #1474f3;
+  text-decoration: none;
+  border-bottom: 1px solid #1474f3;
+  padding-bottom: 2px;
+}
+
+.code {
+  font-size: 15px;
+  font-weight: 600;
+  padding: 2px 5px;
+  border: 1px solid #eae9e9;
+  border-radius: 4px;
+  background-color: #f3f2f2;
+  color: #3a3a3a;
+}
+
+.note {
+  opacity: 0.5;
+}
+</style>

package/examples/storybook/layouts/default.vue

@@ -0,0 +1,102 @@
+<template>
+  <v-app dark>
+    <v-navigation-drawer
+      v-model="drawer"
+      :mini-variant="miniVariant"
+      :clipped="clipped"
+      fixed
+      app
+    >
+      <v-list>
+        <v-list-tile
+          v-for="(item, i) in items"
+          :key="i"
+          :to="item.to"
+          router
+          exact
+        >
+          <v-list-tile-action>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title v-text="item.title" />
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+    </v-navigation-drawer>
+    <v-toolbar :clipped-left="clipped" fixed app>
+      <v-toolbar-side-icon @click="drawer = !drawer" />
+      <v-btn
+        icon
+        @click.stop="miniVariant = !miniVariant"
+      >
+        <v-icon>{{ miniVariant ? 'chevron_right' : 'chevron_left' }}</v-icon>
+      </v-btn>
+      <v-btn
+        icon
+        @click.stop="clipped = !clipped"
+      >
+        <v-icon>web</v-icon>
+      </v-btn>
+      <v-btn
+        icon
+        @click.stop="fixed = !fixed"
+      >
+        <v-icon>remove</v-icon>
+      </v-btn>
+      <v-toolbar-title v-text="title" />
+      <v-spacer />
+      <v-btn
+        icon
+        @click.stop="rightDrawer = !rightDrawer"
+      >
+        <v-icon>menu</v-icon>
+      </v-btn>
+    </v-toolbar>
+    <v-content>
+      <v-container>
+        <nuxt />
+      </v-container>
+    </v-content>
+    <v-navigation-drawer
+      v-model="rightDrawer"
+      :right="right"
+      temporary
+      fixed
+    >
+      <v-list>
+        <v-list-tile @click.native="right = !right">
+          <v-list-tile-action>
+            <v-icon light>
+              compare_arrows
+            </v-icon>
+          </v-list-tile-action>
+          <v-list-tile-title>Switch drawer (click me)</v-list-tile-title>
+        </v-list-tile>
+      </v-list>
+    </v-navigation-drawer>
+    <v-footer :fixed="fixed" app>
+      <span>&copy; 2017</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      clipped: false,
+      drawer: true,
+      fixed: false,
+      items: [
+        { icon: 'apps', title: 'Welcome', to: '/' },
+        { icon: 'bubble_chart', title: 'Inspire', to: '/inspire' }
+      ],
+      miniVariant: false,
+      right: true,
+      rightDrawer: false,
+      title: 'Vuetify.js'
+    }
+  }
+}
+</script>

package/examples/storybook/nuxt.config.js

@@ -0,0 +1,40 @@
+const pkg = require('./package')
+
+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'
+  ]
+}