feat: storybook

.gitignore

@@ -11,6 +11,7 @@ node_modules/
 /tests/e2e/screenshots/
 /tests/unit/coverage/
 jsconfig.json
+storybook-static
 
 # Local Env Files
 .env.local

config/storybook/main.js

@@ -0,0 +1,23 @@
+module.exports = {
+  stories: ['../../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-actions',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        babelOptions: {
+          presets: [
+            [
+              '@vue/cli-plugin-babel/preset',
+              {
+                jsx: false,
+              },
+            ],
+          ],
+        },
+      },
+    },
+    '@storybook/addon-knobs',
+    '@storybook/addon-links',
+  ],
+}

package.json

@@ -3,32 +3,31 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "dev:e2e": "cross-env VUE_APP_TEST=e2e vue-cli-service test:e2e --mode=development",
     "build": "vue-cli-service build --modern",
+    "test:unit": "cross-env VUE_APP_TEST=unit vue-cli-service test:unit",
+    "test:e2e": "cross-env VUE_APP_TEST=e2e vue-cli-service test:e2e --headless",
+    "lint": "run-s lint:all:*",
     "build:ci": "yarn build --report",
-    "lint:eslint": "eslint --fix",
-    "lint:stylelint": "stylelint --fix",
-    "lint:markdownlint": "markdownlint",
-    "lint:prettier": "prettier --write --loglevel warn",
+    "dev": "vue-cli-service serve",
+    "dev:e2e": "cross-env VUE_APP_TEST=e2e vue-cli-service test:e2e --mode=development",
+    "docker": "docker-compose exec dev yarn",
+    "docs": "vuepress dev",
     "lint:all:eslint": "yarn lint:eslint --ext .js,.vue .",
-    "lint:all:stylelint": "yarn lint:stylelint \"src/**/*.{vue,scss}\"",
     "lint:all:markdownlint": "yarn lint:markdownlint \"docs/*.md\" \"*.md\"",
     "lint:all:prettier": "yarn lint:prettier \"**/*.{js,json,css,scss,vue,html,md}\"",
-    "lint": "run-s lint:all:*",
-    "test:unit": "cross-env VUE_APP_TEST=unit vue-cli-service test:unit",
-    "test:unit:file": "yarn test:unit --bail --findRelatedTests",
-    "test:unit:watch": "yarn test:unit --watch --notify --notifyMode change",
-    "test:unit:ci": "yarn test:unit --coverage --ci",
-    "test:e2e": "cross-env VUE_APP_TEST=e2e vue-cli-service test:e2e --headless",
+    "lint:all:stylelint": "yarn lint:stylelint \"src/**/*.{vue,scss}\"",
+    "lint:eslint": "eslint --fix",
+    "lint:markdownlint": "markdownlint",
+    "lint:prettier": "prettier --write --loglevel warn",
+    "lint:stylelint": "stylelint --fix",
+    "new": "cross-env HYGEN_TMPLS=generators hygen new",
+    "storybook:build": "vue-cli-service storybook:build -c config/storybook",
+    "storybook:serve": "vue-cli-service storybook:serve -p 6006 -c config/storybook",
     "test": "run-s test:unit test:e2e",
     "test:ci": "run-s test:unit:ci test:e2e",
-    "new": "cross-env HYGEN_TMPLS=generators hygen new",
-    "docs": "vuepress dev",
-    "docker": "docker-compose exec dev yarn"
-  },
-  "gitHooks": {
-    "pre-commit": "cross-env PRE_COMMIT=true lint-staged"
+    "test:unit:ci": "yarn test:unit --coverage --ci",
+    "test:unit:file": "yarn test:unit --bail --findRelatedTests",
+    "test:unit:watch": "yarn test:unit --watch --notify --notifyMode change"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "1.2.27",
@@ -46,15 +45,20 @@
     "vuex": "3.1.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "4.2.x",
-    "@vue/cli-plugin-e2e-cypress": "4.2.x",
-    "@vue/cli-plugin-eslint": "4.2.x",
-    "@vue/cli-plugin-unit-jest": "4.2.x",
-    "@vue/cli-service": "4.2.x",
+    "@babel/core": "^7.9.0",
+    "@storybook/addon-actions": ">=5.3.0",
+    "@storybook/addon-docs": ">=5.3.0",
+    "@storybook/addon-knobs": ">=5.3.0",
+    "@storybook/addon-links": ">=5.3.0",
+    "@storybook/vue": ">=5.3.0",
+    "@vue/cli-plugin-babel": "~4.4.6",
+    "@vue/cli-plugin-e2e-cypress": "~4.4.6",
+    "@vue/cli-plugin-eslint": "~4.4.6",
+    "@vue/cli-plugin-unit-jest": "~4.4.6",
+    "@vue/cli-service": "~4.4.6",
     "@vue/eslint-config-prettier": "6.0.x",
     "@vue/eslint-config-standard": "5.1.x",
     "@vue/test-utils": "1.0.0-beta.31",
-    "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.x",
     "cross-env": "7.0.x",
     "eslint": "6.8.x",
@@ -77,15 +81,15 @@
     "stylelint-config-recess-order": "2.0.x",
     "stylelint-config-standard": "20.0.x",
     "stylelint-scss": "3.14.x",
+    "vue-cli-plugin-storybook": "~1.3.0",
     "vue-template-compiler": "2.6.11",
     "vuepress": "1.3.x"
   },
-  "resolutions": {
-    "@vue/cli-plugin-unit-jest/jest": "25.1.x",
-    "@vue/cli-plugin-unit-jest/babel-jest": "25.1.x"
-  },
   "engines": {
     "node": ">=10.13.3",
     "yarn": ">=1.0.0"
+  },
+  "gitHooks": {
+    "pre-commit": "cross-env PRE_COMMIT=true lint-staged"
   }
 }

src/stories/index.stories.js

@@ -0,0 +1,31 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { action } from '@storybook/addon-actions'
+import { linkTo } from '@storybook/addon-links'
+
+import MyButton from '@components/_base-button.vue'
+
+export default {
+  component: MyButton,
+  title: 'Button',
+}
+
+export const withText = () => ({
+  components: { MyButton },
+  template: '<my-button @click="action">Hello Button</my-button>',
+  methods: { action: action('clicked') },
+})
+
+export const withJSX = () => ({
+  render() {
+    return (
+      <MyButton onClick={linkTo('Button', 'With Some Emoji')}>
+        With JSX
+      </MyButton>
+    )
+  },
+})
+
+export const withSomeEmoji = () => ({
+  components: { MyButton },
+  template: '<my-button>😀 😎 👍 💯</my-button>',
+})

src/stories/index.stories.mdx

@@ -0,0 +1,39 @@
+import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
+import { action } from "@storybook/addon-actions";
+import { linkTo } from '@storybook/addon-links'
+import MyButton from '@components/_base-button.vue';
+
+<Meta title="MDX|Button" component={MyButton} />
+
+# Button
+
+<Props of={MyButton} />
+
+This is a simple button with some text in it.
+
+<Preview>
+  <Story name="With Text">
+    {{
+        components: { MyButton },
+        template: '<my-button @click="action">Hello Button</my-button>',
+        methods: { action: action("clicked") }
+    }}
+  </Story>
+</Preview>
+
+You can perform some action when the button is clicked.
+
+<Preview>
+  <RMyButton onClick={linkTo('Button', 'With Some Emoji')}>With JSX</RMyButton>
+</Preview>
+
+You can even have Emoji in the button.
+
+<Preview>
+  <Story name="With Some Emoji">
+    {{
+        components: { MyButton },
+        template: '<my-button>😀 😎 👍 💯</my-button>'
+    }}
+  </Story>
+</Preview>