feat: resolve playground components

Author: codebender828

.eslintrc.yml

@@ -7,8 +7,9 @@ extends:
   - plugin:prettier/recommended
   - plugin:vue/essential
   - '@vue/typescript'
-parser: '@typescript-eslint/parser'
+parser: vue-eslint-parser
 parserOptions:
+  parser: '@typescript-eslint/parser'
   ecmaVersion: 12
   sourceType: module
 plugins:
@@ -22,3 +23,4 @@ rules:
       singleline:
         delimiter: comma
         requireLast: false
+  vue/no-multiple-template-root: 'off'

package.json

@@ -11,12 +11,10 @@
   "scripts": {
     "build": "lerna run build",
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
-
     "scaffold": "hygen",
     "playground:routes": "ts-node ./scripts/parse-routes.ts",
     "playground": "yarn playground:routes && NODE_ENV=development vite serve playground",
-    "playground:build": "yarn build && yarn playground:routes && NODE_ENV=production vite build playground",
-
+    "playground:build": "yarn playground:routes && NODE_ENV=production vite build playground",
     "c-alert": "yarn workspace @chakra-ui/c-alert",
     "c-box": "yarn workspace @chakra-ui/c-box",
     "c-button": "yarn workspace @chakra-ui/c-button",
@@ -32,6 +30,7 @@
     "@typescript-eslint/parser": "^2.34.0",
     "@vue/eslint-config-typescript": "^5.1.0",
     "concurrently": "^5.3.0",
+    "consola": "^2.15.0",
     "cross-env": "^7.0.2",
     "eslint": "^7.0.0",
     "eslint-config-prettier": "^6.12.0",

packages/c-alert/examples/base-alert.vue

@@ -1,16 +1,13 @@
 <template>
-  <div>
-    HELLO ALERT
-  </div>
+  <c-alert class="chakra-alert"> HELLO ALERT </c-alert>
+  <p>Alert paragraph</p>
 </template>
 
 <script lang="ts">
-import CAlert from '@chakra-ui/c-alert'
+import CAlert from '@chakra-ui/c-alert/src'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  setup () {
-    return {}
-  }
+  components: { CAlert },
 })
-</script>
+</script>

packages/c-alert/src/index.ts

@@ -1,14 +1,21 @@
-import { h, defineComponent, PropType } from 'vue'
+import { h, defineComponent, Component } from 'vue'
 
 const CAlert = defineComponent({
   props: {
     as: {
-      type: String as PropType<string>,
+      type: [String, Object],
       default: 'div',
     },
   },
   render() {
-    return h(this?.as, { ...this.$props, ...this.$attrs }, this.$slots.default)
+    return h(
+      this.as,
+      {
+        ...this.$attrs,
+        role: 'alert',
+      },
+      this.$slots.default && this.$slots.default()
+    )
   },
 })
 

packages/c-box/examples/base-box.vue

@@ -6,16 +6,16 @@
 </template>
 
 <script lang="ts">
-import CBox from '@chakra-ui/c-box'
 import { defineComponent, ref } from 'vue'
+import CBox from '@chakra-ui/c-box/src'
 
 export default defineComponent({
   setup() {
     const val = ref('Hello box')
     console.log('Base box setup ')
     return {
-      val
+      val,
     }
-  }
+  },
 })
-</script>
+</script>

packages/c-box/examples/box-with-chakra-directive.vue

@@ -1,11 +1,9 @@
 <template>
-  <c-box>
-    Boxy box
-  </c-box>
+  <c-box> Boxy box </c-box>
 </template>
 
 <script lang="ts">
-import CBox from '@chakra-ui/c-box'
+import CBox from '@chakra-ui/c-box/src'
 import { defineComponent } from 'vue'
 
 export default defineComponent({

packages/c-button/examples/base-button.vue

@@ -1,17 +1,14 @@
 <template>
   <div>
-    Base button ◻️
+    <c-button> Base button ◻️ </c-button>
   </div>
 </template>
 
 <script lang="ts">
-import CButton from '@chakra-ui/c-button'
+import CButton from '@chakra-ui/c-button/src'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  setup () {
-    
-    return {}
-  }
+  components: { CButton },
 })
-</script>
+</script>

packages/c-button/src/index.ts

@@ -1,14 +1,19 @@
 import { h, defineComponent, PropType } from 'vue'
 
 const CButton = defineComponent({
+  name: 'CButton',
   props: {
     as: {
       type: String as PropType<string>,
-      default: 'div',
+      default: 'button',
     },
   },
   render() {
-    return h(this?.as, { ...this.$props, ...this.$attrs }, this.$slots.default)
+    return h(
+      this?.as,
+      { ...this.$props, ...this.$attrs },
+      this.$slots.default && this.$slots.default()
+    )
   },
 })
 

playground/index.html

@@ -4,10 +4,10 @@
   <meta charset="UTF-8">
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vite App</title>
+  <title>Chakra UI Vue Next - Components playground</title>
 </head>
 <body>
   <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
+  <script type="module" src="/src/main.ts"></script>
 </body>
 </html>

playground/src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <section class="root">
     <sidebar class="sidebar" :stories="stories" />
-    <router-view class="main" />
+    <main class="main">
+      <router-view />
+    </main>
   </section>
 </template>