Merge branch 'develop' into develop

Author: codebender828

package.json

@@ -39,6 +39,7 @@
     "deploy-storybook": "storybook-to-ghpages -- --out=.out",
     "now-build-storybook": "build-storybook -o dist/storybook",
     "docs:dev": "yarn docs-dev",
+    "docs:lint": "yarn workspace chakra-ui-docs lint",
     "theme:dev": "yarn workspace @chakra-ui/theme-vue build",
     "docs-dev": "yarn workspace chakra-ui-docs dev",
     "evalbundle": "bundlesize"

packages/chakra-ui-core/src/utils/playground.stories.js

@@ -1,7 +1,7 @@
 /* eslint import/namespace: [2, { allowComputed: true }] */
 import { storiesOf } from '@storybook/vue'
 import Vue from 'vue'
-import CodeBlock from '../../../../website/components/CodeBlock.js'
+import { MDXCodeBlock } from '../../../../website/components/code'
 import * as ChakraComponents from '..'
 
 Object.keys(ChakraComponents).forEach((key) => {
@@ -18,7 +18,9 @@ Object.keys(ChakraComponents).forEach((key) => {
 
 storiesOf('Playground', module)
   .add('New', () => ({
-    components: { CodeBlock: CodeBlock({ live: true, lang: 'vue', className: 'lang-vue' }) },
+    components: {
+      CodeBlock: MDXCodeBlock({ live: true, lang: 'vue', className: 'lang-vue' })
+    },
     template: `
       <c-box max-w="500px" h="100vh" mt="200px">
         <h2 v-chakra font-weight="bold" font-size="xl">Chakra UI Vue Playground ⚡️</h2>

website/components/MDXComponents.js

@@ -1,6 +1,6 @@
 import { css } from 'emotion'
 import { CHeading, CBox, Css, CPseudoBox, CCode, CText } from '@chakra-ui/vue'
-import CodeBlock from './CodeBlock'
+import { MDXCodeBlock } from './code'
 import { stringToUrl } from '~/utils'
 import pages from '~/utils/all-routes'
 
@@ -115,8 +115,7 @@ const MDXComponents = {
       )
     }
   }),
-  // eslint-disable-next-line
-  'code': CodeBlock,
+  code: MDXCodeBlock,
   pre: props => ({
     name: 'Box',
     render () {

website/components/CodeBlock.js renamed to website/components/code/code-block.vue

@@ -1,16 +1,16 @@
+<script>
 import 'prismjs'
 import PrismEditor from 'vue-prism-editor'
-import '../css/night-owl.css'
 import 'vue-prism-editor/dist/VuePrismEditor.css'
-import copy from 'copy-to-clipboard'
-import LiveEditor from './LiveEditor'
+import '../../css/night-owl.css'
 
-function getLanguage (string) {
-  return string.slice(string.indexOf('-') + 1)
-}
+import LiveEditor from './live-editor/live-editor.vue'
+import { getLanguage } from './utils'
+import { CopyTextMixin } from './mixins'
 
-const CodeBlock = props => ({
+export default {
   name: 'CodeBlock',
+  mixins: [CopyTextMixin],
   props: {
     lang: {
       type: String,
@@ -31,36 +31,14 @@ const CodeBlock = props => ({
     autoStyleLineNumbers: {
       type: Boolean,
       default: true
-    },
-    live: Boolean
-  },
-  data () {
-    return {
-      text: undefined,
-      copyTimeout: null,
-      copyButtonText: 'Copy'
-    }
-  },
-  methods: {
-    async copy () {
-      // Copy text to clipboard
-      await copy(this.text)
-
-      // Handle timeouts for copy button text
-      if (this.copyTimeout) { clearTimeout(this.copyTimeout) }
-      this.copyButtonText = 'Copied!'
-      this.copyTimeout = setTimeout(() => {
-        this.copyButtonText = 'Copy'
-        clearTimeout(this.copyTimeout)
-      }, 1000)
     }
   },
   render (h) {
-    const language = getLanguage(props.className)
+    const language = getLanguage(this.lang)
     const code = this.$slots.default[0].text
     this.text = code
 
-    if (!props.live) {
+    if (this.isReadOnly) {
       return h('CBox', {
         attrs: {
           rounded: 'md',
@@ -95,18 +73,15 @@ const CodeBlock = props => ({
       ])
     } else {
       const liveEditor = h(LiveEditor, {
-        props: {
-          code
-        }
+        props: { code }
       })
 
-      if (props.browser) {
+      if (process.browser) {
         return h('client-only', [liveEditor])
       } else {
         return liveEditor
       }
     }
   }
-})
-
-export default CodeBlock
+}
+</script>

website/components/code/code-group/code-group.vue

@@ -0,0 +1,80 @@
+<script>
+import {
+  CTab,
+  CTabs,
+  CTabList,
+  CTabPanel,
+  CTabPanels
+} from '@chakra-ui/vue'
+import CodeBlock from '../code-block.vue'
+import { tryParseBoolean } from '../utils'
+
+export default {
+  name: 'CodeGroup',
+  props: {
+    lang: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    live: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  render (h) {
+    const getPanelCode = (vnode) => {
+      // traverse until we reach the *Text* node
+      let lastVNode = null
+      let node = vnode
+      while (node?.componentOptions?.children) {
+        lastVNode = node
+        node = node?.componentOptions?.children[0]
+      }
+
+      if (!lastVNode?.tag.includes(CodeBlock.name)) {
+        // node is not a CodeBlock component, reset this
+        lastVNode = null
+      }
+
+      return { code: node?.text, codeBlock: lastVNode }
+    }
+
+    const tabs = this.$scopedSlots.default()
+    const tabLabels = tabs.map(vnode => h(CTab, { attrs: { py: 2 } }, [vnode.componentOptions.propsData.label]))
+    const tabPanels = tabs.map((vnode) => {
+      const { code, codeBlock } = getPanelCode(vnode)
+
+      const lang = vnode.componentOptions?.propsData.lang || this.lang
+      const live = tryParseBoolean(vnode.componentOptions?.propsData.live) ?? this.live
+
+      if (codeBlock) {
+        const codeBlockLangProp = codeBlock.data?.className || codeBlock?.data?.lang
+        const codeBlockLiveProp = tryParseBoolean(codeBlock.data?.live)
+
+        // merge component and mdx options, predefined mdx codeblock values take precedence
+        codeBlock.componentOptions.propsData.lang = codeBlockLangProp || lang
+        codeBlock.componentOptions.propsData.isReadOnly = !(codeBlockLiveProp ?? live)
+        return h(CTabPanel, [codeBlock])
+      }
+
+      return h(CTabPanel, [h(CodeBlock, { props: { lang, isReadOnly: !live } }, [code])])
+    })
+
+    return h(CTabs, {
+      props: { size: 'sm', variantColor: 'vue' },
+      attrs: { rounded: 'md', bg: '#011627', color: 'white' }
+    }, [
+      h(CTabList, { attrs: { borderColor: 'vue.800' } }, tabLabels),
+      h(CTabPanels, tabPanels)
+    ])
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep [role="tab"][aria-selected] {
+  color: #3caa79 !important; // vue.500
+}
+</style>

website/components/code/code-group/code-tab.vue

@@ -0,0 +1,21 @@
+<script>
+export default {
+  name: 'CodeTab',
+  props: {
+    label: {
+      type: String,
+      required: true
+    },
+    lang: {
+      type: String,
+      required: false,
+      default: null
+    },
+    live: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  }
+}
+</script>

website/components/code/index.js

@@ -0,0 +1,36 @@
+import CodeBlock from './code-block.vue'
+import LiveEditor from './live-editor/live-editor.vue'
+import CodeGroup from './code-group/code-group.vue'
+import CodeTab from './code-group/code-tab.vue'
+import { CopyTextMixin } from './mixins'
+
+const MDXCodeBlock = (props) => {
+  const isReadOnly = !props.live
+  const lang = props.className || props.lang || 'vue'
+
+  return {
+    name: 'CodeBlock',
+    extend: CodeBlock,
+    mixins: [CopyTextMixin],
+    props: {
+      ...CodeBlock.props,
+      isReadOnly: {
+        type: Boolean,
+        default: isReadOnly
+      },
+      lang: {
+        type: String,
+        default: lang
+      }
+    },
+    render: CodeBlock.render
+  }
+}
+
+export {
+  CodeBlock,
+  CodeGroup,
+  CodeTab,
+  LiveEditor,
+  MDXCodeBlock
+}

website/components/live-editor-layout.vue renamed to website/components/code/live-editor/live-editor-layout.vue

@@ -1,10 +1,14 @@
+<script>
 import copy from 'copy-to-clipboard'
 import Layout from './live-editor-layout.vue'
 
-const LiveEditor = {
+export default {
   name: 'LiveEditor',
   props: {
-    code: String
+    code: {
+      type: String,
+      default: null
+    }
   },
   data () {
     return {
@@ -15,6 +19,13 @@ const LiveEditor = {
       codeText: undefined
     }
   },
+  watch: {
+    codeText (newVal, oldVal) {
+      if (this.error && (newVal !== oldVal)) {
+        this.error = null
+      }
+    }
+  },
   async mounted () {
     await this.$nextTick()
     this.copyButton = this.$el.querySelector('[chakra-copy-button]')
@@ -35,13 +46,6 @@ const LiveEditor = {
       })
     }
   },
-  watch: {
-    codeText (newVal, oldVal) {
-      if (this.error && (newVal !== oldVal)) {
-        this.error = null
-      }
-    }
-  },
   methods: {
     async copy () {
       // Copy text to clipboard
@@ -83,5 +87,4 @@ const LiveEditor = {
     ])
   }
 }
-
-export default LiveEditor
+</script>

website/components/LiveEditor.js renamed to website/components/code/live-editor/live-editor.vue

@@ -0,0 +1,26 @@
+import copy from 'copy-to-clipboard'
+
+export const CopyTextMixin = {
+  data () {
+    return {
+      text: undefined,
+      copyTimeout: null,
+      copyButtonText: 'Copy'
+    }
+  },
+  methods: {
+    async copy () {
+      // Copy text to clipboard
+      await copy(this.text)
+
+      // Handle timeouts for copy button text
+      this.copyTimeout && clearTimeout(this.copyTimeout)
+
+      this.copyButtonText = 'Copied!'
+      this.copyTimeout = setTimeout(() => {
+        this.copyButtonText = 'Copy'
+        clearTimeout(this.copyTimeout)
+      }, 1000)
+    }
+  }
+}