refactor(docs): use regular component for codeblocks

Author: codebender828

package.json

@@ -24,7 +24,7 @@
     "csb:install": "yarn && yarn bootstrap",
     "bootstrap": "lerna bootstrap --use-workspaces",
     "build:dev": "yarn workspace @chakra-ui/vue run rollup --config rollup.dev.config.js",
-    "build": "yarn workspace @chakra-ui/vue build",
+    "build": "lerna run build --no-private --stream",
     "dev": "yarn workspace @chakra-ui/vue dev",
     "lint": "eslint packages",
     "lerna:build": "lerna run build",
@@ -151,7 +151,7 @@
     "mdx-vue": "^1.0.2",
     "mdx-vue-loader": "^1.0.2",
     "node-fetch": "^2.6.0",
-    "nuxt": "2.14.6",
+    "nuxt": "2.13.3",
     "portal-vue": "^2.1.6",
     "prettier": "^1.19.1",
     "prismjs": "^1.19.0",
@@ -177,8 +177,8 @@
     "vue-meta": "^2.3.3",
     "vue-prism-editor": "^0.5.1",
     "vue-router": "^3.1.6",
-    "vue-server-renderer": "2.6.12",
-    "vue-template-compiler": "2.6.12",
+    "vue-server-renderer": "^2.6.12",
+    "vue-template-compiler": "^2.6.12",
     "watch": "^1.0.2",
     "yarn": "^1.22.10"
   },

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

@@ -36,8 +36,6 @@ const Chakra = {
     // Recursively merge extended theme variables
     const mergedTheme = toCSSVar(merge(defaultTheme, options.extendTheme))
 
-    console.log('mergedTheme', mergedTheme)
-
     Vue.directive('chakra', createClientDirective(mergedTheme))
 
     // Bind theme and icons to prototype

packages/chakra-ui-nuxt/lib/plugin.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { createClientDirective } from '@chakra-ui/vue/src/directives'
 import { colorModeObserver } from '@chakra-ui/vue/src/utils'
 import { toCSSVar } from '@chakra-ui/styled-system'
-import merge from 'lodash.mergeWith'
+import { mergeWith as merge } from '@chakra-ui/utils'
 import defaultTheme from '@chakra-ui/theme-vue'
 
 
@@ -11,8 +11,6 @@ const extendTheme = <%= JSON.stringify(options.extendTheme || {}, null, 2) %>
 // Recursively merge extended theme variables
 const mergedTheme = toCSSVar(merge(defaultTheme, extendTheme))
 
-console.log('ChakraPlugin', mergedTheme)
-
 Vue.prototype.$chakra = {
   theme: mergedTheme,
   icons: <%= JSON.stringify(options.icons, null, 2) %>

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

@@ -1,4 +1,4 @@
-<template functional>
+<template>
   <div class="preview-code">
     <div class="preview-panel">
       <slot name="preview" />

website/components/code/live-editor/live-editor.vue

@@ -70,16 +70,36 @@ export default {
         props: {
           status: 'error',
           variant: 'solid'
+        },
+        attrs: {
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          overflowX: 'scroll'
         }
-      }, this.error.message),
+      }, [
+        h('c-text', {
+          attrs: {
+            fontWeight: 'bold',
+            mb: 3
+          }
+        }, this.error.message),
+        h('c-box', {
+          props: { as: 'span' },
+          attrs: {
+            fontFamily: 'mono',
+            fontSize: 'sm',
+            whiteSpace: 'line-break'
+          }
+        }, this.error.stack)
+      ]),
       h('VueLive', {
         props: {
           code,
           layout: Layout
         },
         on: {
           error: (error) => {
-            console.info('FANCY_ERROR', error)
+            console.error('LIVE_CODE_ERROR: ', error)
             this.error = error
           }
         }

website/nuxt.config.js

@@ -30,7 +30,7 @@ export default {
   plugins: [
     'plugins/links.js',
     'plugins/editor.js',
-    // 'plugins/chakra-ui.js',
+    'plugins/globals.js',
     'plugins/vue-meta.js',
     'plugins/skip-to.js'
   ],

website/plugins/chakra-ui.js renamed to website/plugins/globals.js

@@ -2,15 +2,12 @@ import Vue from 'vue'
 import * as Chakra from '@chakra-ui/vue'
 import Lorem from 'vue-lorem-ipsum'
 import CarbonAd from '@/components/CarbonAd'
-import { extend, iconSet } from '~/utils/icons'
-
-Vue.use(Chakra.default, {
-  icons: {
-    iconPack: 'fa',
-    iconSet,
-    extend
-  }
-})
 
 Vue.component('Lorem', Lorem)
 Vue.component('CarbonAd', CarbonAd)
+
+Object.keys(Chakra).forEach((key) => {
+  if (typeof Chakra[key] === 'object' && Chakra[key].name) {
+    Vue.component(Chakra[key].name, Chakra[key])
+  }
+})