feat: add styled system package

Author: codebender828

_templates/generator/module/package.json.ejs.t

@@ -5,7 +5,13 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",
   "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
   "author": "Jonathan Bakebwa [email protected]",

package.json

@@ -13,7 +13,7 @@
     "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",
+    "dev": "yarn playground:routes && NODE_ENV=development vite serve 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",
@@ -49,11 +49,18 @@
     "recursive-readdir": "^2.2.2",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.3",
-    "vite": "^1.0.0-rc.4",
-    "vue": "^3.0.0",
+    "vite": "^1.0.0-rc.13",
+    "vue": "^3",
     "vue-router": "4.0.0-beta.10"
   },
   "dependencies": {
-    "change-case": "^4.1.1"
+    "@chakra-ui/theme-vue": "^0.2.6",
+    "@types/lodash.mergewith": "^4.6.6",
+    "@types/tinycolor2": "^1.4.2",
+    "change-case": "^4.1.1",
+    "csstype": "^3.0.5",
+    "lodash.mergewith": "^4.6.2",
+    "object-assign": "^4.1.1",
+    "tinycolor2": "^1.4.2"
   }
 }

packages/c-accordion/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@chakra-ui/c-accordion",
+  "version": "1.0.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "description": "Chakra UI Vue | CAccordion component",
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
+  "author": "Jonathan Bakebwa [email protected]",
+  "license": "MIT",
+  "scripts": {
+    "build": "concurrently yarn:build:*",
+    "build:esm": "cross-env swc src --out-dir dist/esm/",
+    "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+  }
+}

packages/c-accordion/src/index.ts

@@ -0,0 +1,15 @@
+import { h, defineComponent, PropType } from 'vue'
+
+const CAccordion = defineComponent({
+  props: {
+    as: {
+      type: Object as PropType<string>,
+      default: 'div',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    return h(props?.as, { ...attrs }, slots.default?.())
+  },
+})
+
+export default CAccordion

packages/c-accordion/tests/c-accordion.test.ts

@@ -0,0 +1,7 @@
+import { render } from '@chakra-ui/vue-test-utils'
+import CAccordion from '../'
+
+it('should render properly', () => {
+  const { html } = render(CAccordion)
+  expect(html()).toMatchSnapshot()
+})

packages/c-accordion/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src"]
+}

packages/c-alert/package.json

@@ -17,5 +17,8 @@
     "build:esm": "cross-env swc src --out-dir dist/esm/",
     "build:cjs": "cross-env swc -C module.type=commonjs src --out-dir dist/cjs/",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+  },
+  "dependencies": {
+    "@chakra-ui/vue-styled-system": "1.0.0"
   }
 }

packages/c-alert/src/index.ts

@@ -1,4 +1,25 @@
-import { h, defineComponent, Component } from 'vue'
+import {
+  h,
+  defineComponent,
+  VNodeProps,
+  VNode,
+  Component,
+  Fragment,
+  Teleport,
+  Suspense,
+  DefineComponent,
+  onMounted,
+} from 'vue'
+
+import { css } from '@chakra-ui/vue-styled-system'
+import theme from '@chakra-ui/vue-theme'
+
+type Tag =
+  | string
+  | typeof Fragment
+  | typeof Teleport
+  | typeof Suspense
+  | Component
 
 const CAlert = defineComponent({
   props: {
@@ -7,6 +28,17 @@ const CAlert = defineComponent({
       default: 'div',
     },
   },
+  setup() {
+    onMounted(() => {
+      console.log(
+        css({
+          bg: 'blue.400',
+          p: 4,
+          color: 'white',
+        })({ theme })
+      )
+    })
+  },
   render() {
     return h(
       this.as,

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

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

packages/c-box/src/index.ts

@@ -1,4 +1,5 @@
-import { h, defineComponent, PropType } from 'vue'
+import { h, defineComponent, PropType, onMounted } from 'vue'
+import theme from '@chakra-ui/vue-theme'
 
 const CBox = defineComponent({
   props: {
@@ -7,6 +8,11 @@ const CBox = defineComponent({
       default: 'div',
     },
   },
+  setup() {
+    onMounted(() => {
+      console.log(theme.components)
+    })
+  },
   render() {
     return h(this?.as, { ...this.$props, ...this.$attrs }, this.$slots)
   },