feat(v-chakra): support callback as directive value

Author: codebender828

packages/chakra-ui-core/src/CBox/index.js

@@ -1,3 +1,2 @@
 import CBox from './CBox'
 export default CBox
-export * from './CBox'

packages/chakra-ui-core/src/directives/chakra.directive.js

@@ -1,9 +1,7 @@
 import { css } from 'emotion'
-import __css from '@styled-system/css'
-import { systemProps } from '../CBox'
+import Css from '../Css'
 import styleProps from '../config/props'
-import { forwardProps, camelize } from '../utils'
-import { parsePseudoStyles } from '../CPseudoBox/utils'
+import { camelize } from '../utils'
 
 /** Filter attrs and return object of chakra props */
 function filterChakraProps (attrs) {
@@ -24,27 +22,38 @@ function purifyAttrs (el, props) {
 }
 
 /** Creates className from styles object */
-function createClassName (styleObject, theme) {
-  const pure = filterChakraProps(forwardProps(styleObject))
-  const { pseudoStyles, baseProps } = parsePseudoStyles(pure)
-  const baseStyles = systemProps({ ...baseProps, theme })
-  const _pseudoStyles = __css(pseudoStyles)(theme)
-  const className = css({ ...baseStyles, ..._pseudoStyles })
+function createClassName (styleObject, theme, hasBindingValue = false) {
+  const pure = filterChakraProps(styleObject)
+  if (hasBindingValue) {
+    const className = css(Css(styleObject)(theme))
+    return [className, pure]
+  }
+  const className = css(Css(pure)(theme))
   return [className, pure]
 }
 
 /** Creates Chakra Directive */
 export default function createCharkaDirective (theme) {
   return {
     bind (el, binding, vnode) {
+      console.log(vnode)
       const [className, pure] = createClassName(vnode.data.attrs, theme)
       el.classList.add(className)
       purifyAttrs(el, pure)
 
-      if (binding.value && typeof binding.value === 'object') {
-        const [className, pure] = createClassName(binding.value, theme)
-        el.classList.add(className)
-        purifyAttrs(el, pure)
+      if (binding.value) {
+        if (typeof binding.value === 'object') {
+          const [className, pure] = createClassName(binding.value, theme, true)
+          el.classList.add(className)
+          purifyAttrs(el, pure)
+        }
+
+        if (typeof binding.value === 'function') {
+          const styles = binding.value(theme)
+          const [className, pure] = createClassName(styles, theme, true)
+          el.classList.add(className)
+          purifyAttrs(el, pure)
+        }
       }
     }
   }

packages/chakra-ui-core/src/directives/chakra.stories.js

@@ -2,14 +2,54 @@ import { storiesOf } from '@storybook/vue'
 
 storiesOf('Directives | Chakra', module)
   .add('Base usage - No arguments', () => ({
+    template: `
+      <div>
+        <div v-chakra p="3" bg="red.100" rounded="md" color="red.500" font-weight="bold">Welcome to Chakra directive</div>
+      </div>
+    `
+  }))
+  .add('With value | Styles object', () => ({
     template: `
       <div>
         <div v-chakra="{
-          _hover: {
-            color: 'green.400',
-            fontWeight: 'bold'
+          p: 3,
+          shadow: 'sm',
+          h1: {
+            bg: 'blue.100'
+          },
+        }">
+          <h1>Title</h1>
+          <p>Text</p>
+        </div>
+      </div>
+    `
+  }))
+  .add('With value | Function', () => ({
+    template: `
+      <div>
+        <div v-chakra="theme => ({
+          shadow: 'sm',
+          bg: theme.colors.blue[800],
+          color: theme.colors.yellow[300],
+          p: {
+            fontWeight: 'bold',
+            p: 3
           }
-        }" p="3" color="red.400" font-weight="bold">Welcome to Chakra directive</div>
+        })">
+          <p>Computed styles</p>
+        </div>
+      </div>
+    `
+  }))
+  .add('Demo button', () => ({
+    template: `
+      <div>
+        <button v-chakra="{
+          ':hover': { bg: 'green.400' },
+          ':focus': { shadow: 'outline' }
+        }" font-weight="bold" px="4" py="3" color="white" rounded="md" bg="blue.400" outline="none">
+          Button
+        </button>
       </div>
     `
   }))