feat: cleanup playground

Author: codebender828

packages/system/src/index.ts

@@ -18,7 +18,7 @@ export const chakra: IChakraFactory = (
   componentName?: string
 ): any => {
   // Increment ids
-  id++
+  ++id
 
   return defineComponent({
     inheritAttrs: false,
@@ -28,8 +28,9 @@ export const chakra: IChakraFactory = (
       const { styles, attrs: _attrs } = extractStyleAttrs(rest)
       const className = _css(css(styles)({ theme }))
 
-      const _componentName =
-        `chakra-${componentName}` || `chakra-component-${id}`
+      const _componentName = componentName
+        ? `chakra-${componentName}`
+        : `chakra-component-${id}`
 
       return () =>
         h(
@@ -54,3 +55,5 @@ type IChakraFactory = {
 domElements.forEach((tag) => {
   chakra[tag] = chakra(tag)
 })
+
+export { domElements }

packages/system/src/system.utils.ts

@@ -40,6 +40,7 @@ export const domElements = [
   'label',
   'li',
   'mark',
+  'main',
   'nav',
   'ol',
   'p',

playground/src/App.vue

@@ -1,10 +1,15 @@
 <template>
-  <section class="root">
-    <sidebar class="sidebar" :stories="routes" />
-    <main class="main">
+  <chakra.section d="flex" height="inherit" w="inherit">
+    <sidebar :stories="routes" />
+    <chakra.main w="full" border-left="1px solid" border-color="gray.400" padding="4">
       <router-view />
-    </main>
-  </section>
+
+      <chakra.button :bg="['teal.500']" color="white" px="4" py="3">
+        Button
+      </chakra.button>
+
+    </chakra.main>
+  </chakra.section>
 </template>
 
 <script lang="ts">
@@ -42,29 +47,3 @@ html {
   width: inherit;
 }
 </style>
-
-<style scoped>
-.root {
-  display: flex;
-  height: inherit;
-  width: inherit;
-}
-
-.sidebar {
-  height: 100%;
-  widows: 200px;
-  margin: 0;
-  list-style-type: none;
-  padding: 1rem;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
-}
-
-a {
-  color: black !important;
-}
-
-.main {
-  width: 100%;
-  padding: 1rem;
-}
-</style>

playground/src/components/Sidebar.vue

@@ -1,48 +1,43 @@
 <script>
+import { chakra } from '@chakra-ui/system-vue'
 import { defineComponent, h } from 'vue'
 import { RouterLink } from 'vue-router'
-import { routes } from '../router'
 
 
 const Stories = defineComponent({
   props: ['stories'],
-  setup(props) {
+  inheritAttrs: false,
+  setup(props, { attrs }) {
     return () => {
-      return h(
-        'ul',
-        props.stories
-        .filter(story => story.path !== '/*')
-        .map(story =>
-          h(
-            'li',
-            {
-              key: story.path
-            },
-            story.children
-              ? h('h3', story.name)
-              : [h(RouterLink, { to: story.path }, story.path === '/' ? () => [h('img', { class: ['logo'], src: 'https://res.cloudinary.com/xtellar/image/upload/v1584242872/chakra-ui/chakra-ui-vue.png' })] : () => story.name)],
-            story.children && h(Stories, { stories: story.children })
-          )
+      return h(chakra.nav, [
+        h(
+          chakra.ul,
+          {
+            p: 0,
+            h: '100%',
+            m: 0,
+            listStyleType: 'none',
+            padding: 4,
+          },
+          props.stories
+            .filter(story => story.path !== '/*')
+            .map(story =>
+              h(
+                chakra.li,
+                {
+                  pl: 4,
+                  key: story.path
+                },
+                story.children
+                  ? h(chakra.h3, story.name)
+                  : [h(RouterLink, { to: story.path }, story.path === '/' ? () => [h(chakra.img, { w: '120px', src: 'https://res.cloudinary.com/xtellar/image/upload/v1584242872/chakra-ui/chakra-ui-vue.png' })] : () => story.name)],
+                story.children && h(Stories, { stories: story.children })
+              )
+            ),   
         )
-      )
+      ])
     }
   },
 })
-
 export default Stories
 </script>
-
-<style>
-ul {
-  /* list-style-type: none; */
-  padding: 0;
-}
-
-li > ul {
-  padding-left: 1rem;
-}
-
-.logo {
-  width: 120px;
-}
-</style>

playground/src/main.ts

@@ -1,9 +1,15 @@
 import { createApp } from 'vue'
 import ChakraUIVuePlugin from '@chakra-ui/vue-next'
+import { domElements, chakra } from '@chakra-ui/system-vue'
 import App from './App.vue'
 import router from './router'
 
-createApp(App)
+const app = createApp(App)
   .use(router)
   .use(ChakraUIVuePlugin, {})
-  .mount('#app')
+
+domElements.forEach((tag) => {
+  app.component(`chakra.${tag}`, chakra(tag))
+})
+
+app.mount('#app')