feat(system): add system architecture

Author: codebender828

package.json

@@ -19,6 +19,8 @@
     "c-alert": "yarn workspace @chakra-ui/c-alert",
     "c-box": "yarn workspace @chakra-ui/c-box",
     "c-button": "yarn workspace @chakra-ui/c-button",
+    
+    "system": "yarn workspace @chakra-ui/system-vue",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next"
   },
   "license": "MIT",

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

@@ -8,6 +8,7 @@ import CAlert from '@chakra-ui/c-alert/src'
 import { defineComponent } from 'vue'
 
 export default defineComponent({
+  name: 'BaseAlertExample',
   components: { CAlert },
 })
 </script>

packages/c-alert/package.json

@@ -16,7 +16,11 @@
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   },
   "dependencies": {
     "@chakra-ui/vue-styled-system": "1.0.0",

packages/c-alert/src/index.ts

@@ -1,17 +1,20 @@
-import { h, defineComponent } from 'vue'
+import { h, defineComponent, PropType } from 'vue'
 
 import { css } from '@chakra-ui/styled-system'
 import { css as emotionCss, cx } from '@emotion/css'
 import theme from '@chakra-ui/vue-theme'
+import { chakra } from '@chakra-ui/system-vue'
+import { DOMElements } from '@chakra-ui/system-vue/dist/types/system.utils'
 
 const CAlert = defineComponent({
+  name: 'CAlert',
   props: {
     as: {
-      type: [String, Object],
+      type: [String, Object] as PropType<DOMElements>,
       default: 'div',
     },
   },
-  render() {
+  setup(props, { slots, attrs }) {
     const alertStyles = css({
       bg: 'blue.400',
       p: 4,
@@ -23,15 +26,16 @@ const CAlert = defineComponent({
 
     const className = emotionCss(alertStyles)
 
-    return h(
-      this.as,
-      {
-        ...this.$attrs,
-        class: cx('chakra-alert', className),
-        role: 'alert',
-      },
-      this.$slots.default && this.$slots.default()
-    )
+    return () =>
+      h(
+        chakra[props.as],
+        {
+          ...attrs,
+          class: cx('chakra-alert', className),
+          role: 'alert',
+        },
+        slots
+      )
   },
 })
 

packages/system/package.json

@@ -13,7 +13,11 @@
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   },
   "dependencies": {
     "@chakra-ui/vue-styled-system": "^1.0.0"

packages/system/src/index.ts

@@ -1,26 +1,39 @@
-import {
-  Component,
-  defineComponent,
-  Fragment,
-  Suspense,
-  Teleport,
-  h,
-} from 'vue'
-import { DOMElements } from './system.utils'
+import { defineComponent, h } from 'vue'
+import { domElements, DOMElements } from './system.utils'
 
-type Tag =
-  | string
-  | typeof Fragment
-  | typeof Teleport
-  | typeof Suspense
-  | Component
-
-export const chakra = (tag: DOMElements, componentProps = {}) => {
+/**
+ * Creates a Chakra UI Vue component
+ * @param tag Tag
+ * @param componentProps Component Props
+ */
+// @ts-ignore
+export const chakra: IChakraFactory = (
+  tag: DOMElements,
+  componentProps = {}
+): any => {
   return defineComponent({
     inheritAttrs: false,
     props: componentProps,
     setup(props, { slots, attrs }) {
-      return () => h(tag, {}, slots)
+      return () =>
+        h(
+          tag,
+          {
+            ...props,
+            ...attrs,
+          },
+          slots
+        )
     },
   })
 }
+
+type IChakraFactory = {
+  [key in DOMElements]: any
+} & {
+  (tag: DOMElements): any
+}
+
+domElements.forEach((tag) => {
+  chakra[tag] = chakra(tag)
+})

packages/system/src/system.types.ts

@@ -0,0 +1,10 @@
+import { Component, Fragment, Suspense, Teleport } from 'vue'
+
+export type Tag =
+  | string
+  | typeof Fragment
+  | typeof Teleport
+  | typeof Suspense
+  | Component
+
+export type As<Props = any> = Tag