storybookjs · shilman · Oct 24, 2019 · Oct 24, 2019 · Nov 15, 2019 · Nov 15, 2019
diff --git a/examples/vue-kitchen-sink/README.md b/examples/vue-kitchen-sink/README.md
@@ -1,3 +1,24 @@
-# Storybook Demo
+# vue-kitchen-sink-v3
 
-This is a demo app to test VueJs integration with Storybook. Run `yarn install` to sync Storybook module with the source code and run `yarn storybook` to start the Storybook.
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/examples/vue-kitchen-sink/index.html b/examples/vue-kitchen-sink/index.html
diff --git a/examples/vue-kitchen-sink/jest.config.js b/examples/vue-kitchen-sink/jest.config.js
@@ -8,9 +8,4 @@ module.exports = {
     '.*\\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
   },
   moduleFileExtensions: [...config.moduleFileExtensions, 'vue'],
-  moduleNameMapper: {
-    ...config.moduleNameMapper,
-    // TMP: disable MDX until we upgrade vue-kitchen-sink to latest
-    '\\.mdx': '<rootDir>/__mocks__/fileMock.js',
-  },
 };
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
@@ -1,19 +1,42 @@
 {
-  "name": "vue-example",
+  "name": "vue-kitchen-sink",
   "version": "5.3.0-alpha.45",
   "private": true,
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
-    "build-storybook": "build-storybook -s public",
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
-    "storybook": "start-storybook -p 9009 -s public"
+    "build": "vue-cli-service build",
+    "build-storybook": "build-storybook",
+    "lint": "vue-cli-service lint",
+    "serve": "vue-cli-service serve",
+    "storybook": "start-storybook -p 6006"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "eslintConfig": {
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "@storybook/eslint-config-storybook",
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "root": true,
+    "rules": {
+      "react/react-in-jsx-scope": 0
+    }
   },
   "dependencies": {
-    "vue": "^2.6.8",
-    "vuex": "^3.1.0"
+    "core-js": "^3.3.2",
+    "vue": "^2.6.10",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
+    "@babel/core": "^7.6.4",
     "@storybook/addon-a11y": "5.3.0-alpha.45",
     "@storybook/addon-actions": "5.3.0-alpha.45",
     "@storybook/addon-backgrounds": "5.3.0-alpha.45",
@@ -30,14 +53,22 @@
     "@storybook/addons": "5.3.0-alpha.45",
     "@storybook/source-loader": "5.3.0-alpha.45",
     "@storybook/vue": "5.3.0-alpha.45",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-loader": "^8.0.5",
-    "cross-env": "^6.0.3",
-    "file-loader": "^4.2.0",
-    "prop-types": "^15.7.2",
-    "svg-url-loader": "^3.0.2",
-    "vue-loader": "^15.7.0",
-    "webpack": "^4.33.0",
-    "webpack-dev-server": "^3.8.2"
+    "@vue/babel-preset-jsx": "^1.1.1",
+    "@vue/cli-plugin-babel": "^4.0.0",
+    "@vue/cli-plugin-eslint": "^4.0.0",
+    "@vue/cli-service": "^4.0.0",
+    "babel-eslint": "^10.0.3",
+    "babel-loader": "^8.0.6",
+    "babel-preset-vue": "^2.0.2",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "jest-vue-preprocessor": "^1.7.0",
+    "storybook-addon-vue-info": "^1.2.1",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
   }
 }
diff --git a/examples/vue-kitchen-sink/public/favicon.ico b/examples/vue-kitchen-sink/public/favicon.ico
diff --git a/examples/vue-kitchen-sink/public/index.html b/examples/vue-kitchen-sink/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>vue-kitchen-sink-v3</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue-kitchen-sink-v3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/examples/vue-kitchen-sink/src/App.vue b/examples/vue-kitchen-sink/src/App.vue
@@ -1,31 +1,17 @@
 <template>
   <div id="app">
-    <img src="./logo.png">
-    <h1></h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
-      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
-      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
-      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
-    </ul>
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
   </div>
 </template>
 
 <script>
+import HelloWorld from './components/HelloWorld.vue'
+
 export default {
   name: 'app',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
+  components: {
+    HelloWorld
   }
 }
 </script>
@@ -39,22 +25,4 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
-
-h1, h2 {
-  font-weight: normal;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-
-a {
-  color: #42b983;
-}
 </style>
diff --git a/examples/vue-kitchen-sink/src/assets/logo.png b/examples/vue-kitchen-sink/src/assets/logo.png
diff --git a/examples/vue-kitchen-sink/src/components/HelloWorld.vue b/examples/vue-kitchen-sink/src/components/HelloWorld.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/examples/vue-kitchen-sink/src/index.js → examples/vue-kitchen-sink/src/main.js b/examples/vue-kitchen-sink/src/index.js → examples/vue-kitchen-sink/src/main.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import App from './App.vue';
 
-// eslint-disable-next-line
+Vue.config.productionTip = false;
+
 new Vue({
-  el: '#app',
   render: h => h(App),
-});
+}).$mount('#app');
diff --git a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
@@ -58,7 +58,6 @@ templateMethods.story = {
 export const JSX = () => ({
   components: { MyButton },
   render() {
-    // eslint-disable-next-line react/react-in-jsx-scope
     return <my-button>MyButton rendered with JSX</my-button>;
   },
 });

diff --git a/examples/vue-kitchen-sink/webpack.config.js b/examples/vue-kitchen-sink/webpack.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
 const webpack = require('webpack');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');

diff --git a/package.json b/package.json
@@ -175,6 +175,7 @@
     "eslint": "^6.5.1",
     "eslint-plugin-cypress": "^2.7.0",
     "eslint-plugin-react": "^7.15.1",
+    "eslint-plugin-vue": "^6.0.1",
     "esm": "^3.2.25",
     "github-release-from-changelog": "^2.1.0",
     "glob": "^7.1.3",
@@ -278,4 +279,4 @@
       ]
     ]
   }
-}
+}