Add Storybook DocsPage for Vue

packages/evergarden/.storybook/main.js

@@ -0,0 +1,47 @@
+const path = require('path')
+
+module.exports = {
+  stories: ['../src/**/examples.js'],
+  addons: [
+    '@storybook/addon-actions/register',
+    '@storybook/addon-knobs/register',
+    '@storybook/addon-links/register'
+  ],
+  presets: ['@storybook/addon-docs/preset'],
+  webpack: async config => {
+    config.resolve.alias.evergarden = path.join(__dirname, '../src')
+
+    config.module.rules.forEach(rule => {
+      if (rule.test.test('.js')) {
+        rule.use.forEach(u => {
+          if (u.loader === 'babel-loader' && u.options.plugins) {
+            u.options.babelrc = false
+            u.options.presets = u.options.presets.filter(preset => {
+              return !preset.includes('babel-preset-vue')
+            })
+            u.options.plugins.push(
+              require.resolve('babel-plugin-transform-vue-jsx')
+            )
+          }
+        })
+      }
+    })
+
+    config.module.rules.push({
+      test: /examples.[tj]sx?$/,
+      loader: require.resolve('@storybook/source-loader'),
+      options: { inspectLocalDependencies: true },
+      enforce: 'pre'
+    })
+
+    config.module.rules.push({
+      test: /(components|index).[tj]sx?$/,
+      include: path.join(__dirname, '../src'),
+      exclude: /theme/,
+      loader: 'vue-docgen-loader',
+      enforce: 'post'
+    })
+
+    return config
+  }
+}

packages/evergarden/.storybook/config.js → packages/evergarden/.storybook/preview.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { configure, addDecorator } from '@storybook/vue'
+import { addDecorator, addParameters } from '@storybook/vue'
 import { Evergarden, Box, CSSReset } from 'evergarden'
 
 Vue.use(Evergarden)
@@ -10,4 +10,8 @@ addDecorator(p => ({
   }
 }))
 
-configure(require.context('../src', true, /examples\.js$/), module)
+addParameters({
+  docs: {
+    inlineStories: true
+  }
+})

packages/evergarden/package.json

@@ -23,10 +23,11 @@
     "@babel/core": "^7.6.0",
     "@babel/plugin-syntax-jsx": "^7.2.0",
     "@babel/preset-env": "^7.6.2",
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-knobs": "^5.2.3",
-    "@storybook/addon-links": "^5.2.1",
-    "@storybook/vue": "^5.2.1",
+    "@storybook/addon-actions": "5.3.0-beta.25",
+    "@storybook/addon-docs": "5.3.0-beta.25",
+    "@storybook/addon-knobs": "5.3.0-beta.25",
+    "@storybook/addon-links": "5.3.0-beta.25",
+    "@storybook/vue": "5.3.0-beta.25",
     "babel-loader": "^8.0.6",
     "babel-plugin-transform-vue-jsx": "^3.7.0",
     "babel-preset-vue": "^2.0.2",

packages/evergarden/src/Alert/examples.js

@@ -1,7 +1,14 @@
 import { Box, Alert, AlertIcon, AlertTitle, AlertDescription } from 'evergarden'
 import { action } from '@storybook/addon-actions'
 
-export default { title: 'Alert' }
+export default {
+  title: 'Alert',
+  component: Alert,
+  parameters: {
+    componentSubtitle: 'Simple status banner',
+    subcomponents: { AlertIcon, AlertTitle, AlertDescription }
+  }
+}
 
 export const defaults = () => ({
   render() {

packages/evergarden/src/Alert/index.js

@@ -5,29 +5,35 @@ import { mergeAttrs } from '../utils'
 export { AlertIcon, AlertTitle, AlertDescription } from './components'
 
 export const statuses = {
-  info: { icon: "info", color: "blue" },
-  warning: { icon: "warning-2", color: "orange" },
-  success: { icon: "check-circle", color: "green" },
-  error: { icon: "warning", color: "red" },
+  info: { icon: 'info', color: 'blue' },
+  warning: { icon: 'warning-2', color: 'orange' },
+  success: { icon: 'check-circle', color: 'green' },
+  error: { icon: 'warning', color: 'red' }
 }
 
 export const Alert = {
-  name: 'EverAlert',
+  name: 'Alert',
 
   inheritAttrs: false,
 
   props: {
-    variant: {
-      type: String,
-      default: 'subtle'
-    },
+    /**
+     * The primary status of the alert.
+     */
     status: {
       type: String,
       default: 'info'
+    },
+    /**
+     * Style variants on the primary status.
+     */
+    variant: {
+      type: String,
+      default: 'subtle'
     }
   },
 
-  provide () {
+  provide() {
     return {
       alertContext: this.$props
     }
@@ -40,7 +46,7 @@ export const Alert = {
       role: 'alert',
       ...createAlertStyles({
         variant,
-        color: statuses[status] && statuses[status]["color"],
+        color: statuses[status] && statuses[status]['color'],
         ...this.$evergarden
       })
     }
@@ -57,3 +63,5 @@ export const Alert = {
     )
   }
 }
+
+const component = { options: Alert }

packages/evergarden/src/Box/index.js

@@ -19,12 +19,16 @@ const Box = styled('div', { getAttrs })(systemProps, props => {
   for (const key of Object.keys(props)) {
     const trimKey = key.slice(1)
     if (pseudoNames.indexOf(trimKey) > -1) {
-      obj[pseudoConfig[trimKey]] = systemProps({...props[key], theme: props.theme})
+      obj[pseudoConfig[trimKey]] = systemProps({
+        ...props[key],
+        theme: props.theme
+      })
     }
   }
   return obj
 })
 
 Box.name = 'EverBox'
 
-export { Box }
+export { Box }
+const component = { options: Box }

packages/evergarden/src/Button/examples.js

@@ -18,7 +18,13 @@ const sizes = {
   defaultValue: 'md'
 }
 
-export default { title: 'Button' }
+export default {
+  title: 'Button',
+  component: Button,
+  parameters: {
+    componentSubtitle: 'Basic button'
+  }
+}
 
 export const basic = () => ({
   props: {

packages/evergarden/src/Button/index.js

@@ -64,3 +64,4 @@ export const Button = {
     )
   }
 }
+const component = { options: Button }

packages/evergarden/src/ButtonGroup/examples.js

@@ -1,6 +1,13 @@
 import { Button, ButtonGroup } from 'evergarden'
 
-export default { title: 'ButtonGroup' }
+export default {
+  title: 'ButtonGroup',
+  component: ButtonGroup,
+  parameters: {
+    componentSubtitle: 'Group buttons in style',
+    subcomponents: { Button }
+  }
+}
 
 export const basic = () => ({
   render(h) {

packages/evergarden/src/ButtonGroup/index.js

@@ -63,3 +63,4 @@ export const ButtonGroup = {
     )
   }
 }
+const component = { options: ButtonGroup }

packages/evergarden/src/CSSReset/index.js

@@ -24,7 +24,11 @@ export const CSSReset = {
   functional: true,
 
   render(h, { props, parent, children }) {
-    if (process.env.NODE_ENV !== 'production' && children && children.length > 0) {
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      children &&
+      children.length > 0
+    ) {
       console.error(`The <GlobalStyle> component expect no children elements.`)
     }
 
@@ -33,9 +37,7 @@ export const CSSReset = {
     const Preflight = createPreflight()
     const ThemeReset = createThemeReset(config)
 
-    return [
-      h(Preflight),
-      h(ThemeReset)
-    ]
+    return [h(Preflight), h(ThemeReset)]
   }
 }
+const component = { options: CSSReset }

packages/evergarden/src/Checkbox/examples.js

@@ -1,7 +1,13 @@
 import Vue from 'vue'
 import { Stack, Checkbox } from 'evergarden'
 
-export default { title: 'Checkbox' }
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+  parameters: {
+    componentSubtitle: 'Yes, no, or maybe'
+  }
+}
 
 export const Sizes = () => ({
   data: () => {

packages/evergarden/src/Checkbox/index.js

@@ -25,7 +25,7 @@ export const Checkbox = {
       default: 'gray'
     },
     isChecked: {
-      type: Boolean,
+      type: Boolean
     },
     isDisabled: {
       type: Boolean
@@ -48,7 +48,7 @@ export const Checkbox = {
       as: this.as,
       disabled: this.isDisabled,
       'aria-disabled': this.isDisabled,
-      'aria-checked': this.isIndeterminate ? 'mixed' : this.isChecked,
+      'aria-checked': this.isIndeterminate ? 'mixed' : this.isChecked
     }
 
     if (isInput) {
@@ -94,9 +94,7 @@ export const Checkbox = {
             )
           ]
         )
-      : h(
-        ...checkboxElement,
-        this.$slots.default
-      )
+      : h(...checkboxElement, this.$slots.default)
   }
-}
+}
+const component = { options: Checkbox }

packages/evergarden/src/Icon/examples.js

@@ -1,6 +1,12 @@
 import { Box, Icon } from 'evergarden'
 
-export default { title: 'Icons' }
+export default {
+  title: 'Icons',
+  component: Icon,
+  parameters: {
+    componentSubtitle: 'Utility icons'
+  }
+}
 
 export const basic = () => ({
   render(h) {

packages/evergarden/src/Icon/index.js

@@ -37,3 +37,4 @@ export const Icon = {
     )
   }
 }
+const component = { options: Icon }

packages/evergarden/src/IconButton/index.js

@@ -58,3 +58,4 @@ export const IconButton = {
     )
   }
 }
+const component = { options: IconButton }

packages/evergarden/src/Input/examples.js

@@ -1,6 +1,12 @@
 import { Input, Stack } from 'evergarden'
 
-export default { title: 'Input' }
+export default {
+  title: 'Input',
+  component: Input,
+  parameters: {
+    componentSubtitle: 'Handsome forms'
+  }
+}
 
 export const sizes = () => ({
   render(h) {
@@ -36,4 +42,4 @@ export const states = () => ({
       </Stack>
     )
   }
-})
+})

packages/evergarden/src/Input/index.js

@@ -73,3 +73,4 @@ export const Input = {
     )
   }
 }
+const component = { options: Input }