Updated storybook configs, updated addons packages

.eslintignore

@@ -1,4 +1,4 @@
 node_modules
 /index.js
-!/.storybook
+.storybook/*
 src/atoms/icon/templates/*

.node-version

@@ -1 +1 @@
->=10.0.0 <=11.1.0
+>=12.13.0 <13.0.0

.storybook/main.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.@(js|mdx)'],
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-storysource',
+    '@storybook/addon-knobs',
+    '@storybook/addon-actions'
+  ]
+}

.storybook/manager.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  brandTitle: 'Alpaca UI',
+  brandImage: 'assets/icons/alpaca.svg',
+  brandUrl: 'https://github.com/SnowdogApps/alpaca-ui'
+})

.storybook/preview.js

@@ -0,0 +1,27 @@
+import { addDecorator, addParameters } from '@storybook/vue'
+
+import 'focus-visible'
+import 'svgxuse'
+
+import { withA11y } from '@storybook/addon-a11y'
+import { withKnobs } from '@storybook/addon-knobs'
+
+// Wrap every story in Alpaca App component
+import AApp from '../src/atoms/app/App.vue'
+
+addDecorator(withA11y)
+addDecorator(withKnobs)
+addDecorator(() => ({
+  components: { AApp },
+  template: `
+    <a-app style="padding: 10px;">
+      <story />
+    </a-app>
+  `
+}))
+
+addParameters({
+  docs: {
+    iframeHeight: '60px'
+  }
+});

.storybook/webpack.config.js

@@ -2,12 +2,6 @@ const StyleLintPlugin = require('stylelint-webpack-plugin')
 const path = require('path')
 
 module.exports = ({ config }) => {
-  config.module.rules.push({
-    test: /\.vue$/,
-    loader: 'storybook-addon-vue-info/loader',
-    enforce: 'post'
-  })
-
   config.module.rules.push({
     test: /\.scss$/,
     use: [
@@ -17,7 +11,6 @@ module.exports = ({ config }) => {
     ]
   })
 
-  /* PostCSS Support */
   config.module.rules.push({
     test: /\.scss$/,
     use: [

package.json

@@ -22,10 +22,12 @@
     "vue-slider-component": "^3.0.40"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^5.3.17",
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/addon-knobs": "^5.3.17",
-    "@storybook/vue": "^5.3.17",
+    "@storybook/addon-a11y": "6.0.0-beta.31",
+    "@storybook/addon-actions": "6.0.0-beta.31",
+    "@storybook/addon-docs": "6.0.0-beta.31",
+    "@storybook/addon-knobs": "6.0.0-beta.31",
+    "@storybook/addon-storysource": "6.0.0-beta.31",
+    "@storybook/vue": "6.0.0-beta.31",
     "@vue/babel-preset-app": "^3.11.0",
     "@vue/test-utils": "^1.0.0-beta.29",
     "babel-core": "^6.26.3",

src/atoms/button/Button.html

@@ -1,6 +1,8 @@
 <button
   class="a-btn"
   type="button"
+  v-bind="$attrs"
+  v-on="$listeners"
 >
   <!-- @slot Slot for button content -->
   <slot />

src/atoms/button/Button.stories.js

@@ -1,34 +1,30 @@
-import { storiesOf } from '@storybook/vue'
 import { select, text } from '@storybook/addon-knobs'
 
-import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
 import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
 import selectorsConfig from './Button.selectors.json'
 
 import AButton from './Button.vue'
 
-const info = `
-  <p>Check <b>Knobs</b> tab to edit component properties dynamically.</p><br>
-  ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
-`
-
 const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
 
-storiesOf('Test/Button', module)
-  .addParameters({ info })
-  .add('Default', () => ({
-    components: { AButton },
-    props: {
-      classKnobs: {
-        default: select('BEM Modifier', classKnobsConfig)
-      },
-      textKnobs: {
-        default: text('Text', 'Button text')
-      }
+export default {
+  title: 'Atoms/Button',
+  component: AButton
+}
+
+export const Default = () => ({
+  components: { AButton },
+  props: {
+    classKnobs: {
+      default: select('BEM Modifier', classKnobsConfig)
     },
-    template: `
-      <a-button :class="classKnobs">
-        {{ textKnobs }}
-      </a-button>
-    `
-  }))
+    textKnobs: {
+      default: text('Text', 'Button text')
+    }
+  },
+  template: `
+    <a-button :class="classKnobs">
+      {{ textKnobs }}
+    </a-button>
+  `
+})

src/atoms/button/Button.vue

@@ -3,6 +3,9 @@
 <script>
 import AButton from './Button.js'
 
+/**
+ * Check Knobs tab to edit component properties dynamicaly.
+ */
 export default {
   name: 'AlpacaButton',
   mixins: [AButton]