Merge pull request #4 from chakra-ui/feature/styled-system

feature: system

Author: codebender828

.gitignore

@@ -1,4 +1,6 @@
 node_modules
 dist
-playground/src/.generated/*
+# playground/src/.generated/*
 .vercel
+yarn-error.log
+test-vite-project

README.md

@@ -30,4 +30,4 @@ I'm excited to finally get this project out in the open. I love working on Chakr
 
 I have the entire Chakra UI core team members and Vue community to thank for their support, and for every contributor who does so by opening issues, writing tests and fixing bugs. I'm generally reachable by email at `[email protected]` or on `@codebender828` on Twitter and on the Chakra UI Discord.
 
-For now I'll be hacking away at these projects! Blessings!
+For now I'll be hacking away at this! Blessings!

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

@@ -20,6 +20,10 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
     "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"
   }
 }

lerna.json

@@ -1,6 +1,16 @@
 {
-  "packages": [
-    "packages/*"
-  ],
-  "version": "0.0.0"
-}
+  "packages": ["packages/*", "website", "tooling/*"],
+  "version": "independent",
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "registry": "https://registry.npmjs.org/",
+  "command": {
+    "version": { "exact": true },
+    "publish": {
+      "conventionalCommits": true,
+      "message": "chore(release): publish",
+      "ignoreChanges": ["**/stories/**", "**/tests/**"],
+      "allowBranch": "master"
+    }
+  }
+}

package.json

@@ -14,11 +14,14 @@
     "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "scaffold": "hygen",
     "playground:routes": "ts-node ./scripts/parse-routes.ts",
-    "dev": "yarn playground:routes && NODE_ENV=development vite serve playground",
-    "playground:build": "yarn install && yarn build && yarn playground:routes && NODE_ENV=production vite build playground",
+    "dev": "yarn playground:routes && NODE_ENV=development vite serve playground --config ./vite.config.ts",
+    "playground:build": "yarn install && yarn build && yarn playground:routes && NODE_ENV=production vite build playground --config ./vite.config.ts",
+    "core": "yarn workspace @chakra-ui/vue-next",
     "c-alert": "yarn workspace @chakra-ui/c-alert",
+    "c-theme-provider": "yarn workspace @chakra-ui/c-theme-provider",
     "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",
@@ -32,7 +35,11 @@
     "@types/recursive-readdir": "^2.2.0",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "4.0.1",
+    "@vitejs/plugin-vue": "^1.0.6",
+    "@vue/compiler-sfc": "^3.0.5",
     "@vue/eslint-config-typescript": "^5.1.0",
+    "@vuedx/typecheck": "^0.4.1",
+    "@vuedx/typescript-plugin-vue": "^0.4.1",
     "concurrently": "^5.3.0",
     "consola": "^2.15.0",
     "cross-env": "^7.0.2",
@@ -52,18 +59,26 @@
     "recursive-readdir": "^2.2.2",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.2",
-    "vite": "^1.0.0-rc.13",
-    "vue": "^3",
+    "vite": "^2.0.0-beta.44",
+    "vue": "^3.0.5",
     "vue-router": "4.0.0-beta.10"
   },
   "dependencies": {
+    "@chakra-ui/styled-system": "^1.4.1",
+    "@emotion/css": "^11.1.3",
+    "@emotion/server": "^11.0.0",
+    "@types/lodash.camelcase": "^4.3.6",
+    "@types/lodash.kebabcase": "^4.1.6",
     "@types/lodash.mergewith": "^4.6.6",
     "@types/tinycolor2": "^1.4.2",
     "change-case": "^4.1.1",
     "css-get-unit": "^1.0.1",
     "csstype": "^3.0.5",
+    "lodash.camelcase": "^4.3.0",
+    "lodash.kebabcase": "^4.1.1",
     "lodash.mergewith": "^4.6.2",
     "object-assign": "^4.1.1",
+    "react": "^17.0.1",
     "tinycolor2": "^1.4.2"
   }
 }

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

@@ -1,5 +1,14 @@
 <template>
-  <c-alert class="chakra-alert"> HELLO ALERT </c-alert>
+  <c-alert
+    font-weight="bold"
+    px="4"
+    py="3"
+    :bg="['yellow.300', 'blue.200']"
+    aria-role="alert"
+    rounded="md"
+  >
+    HELLO ALERT
+  </c-alert>
   <p>Alert paragraph</p>
 </template>
 
@@ -8,6 +17,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,10 +16,15 @@
     "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",
+    "@chakra-ui/system-vue": "1.0.0",
     "@chakra-ui/vue-theme": "^1.0.0"
   }
 }

packages/c-alert/src/index.ts

@@ -1,53 +1,25 @@
-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
+import { h, defineComponent, PropType } from 'vue'
+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',
     },
   },
-  setup() {
-    onMounted(() => {
-      console.log(
-        css({
-          bg: 'blue.400',
-          p: 4,
-          color: 'white',
-        })({ theme })
+  setup(props, { slots, attrs }) {
+    return () =>
+      h(
+        chakra(props.as, 'alert'),
+        {
+          ...attrs,
+          role: 'alert',
+        },
+        slots
       )
-    })
-  },
-  render() {
-    return h(
-      this.as,
-      {
-        ...this.$attrs,
-        role: 'alert',
-      },
-      this.$slots.default && this.$slots.default()
-    )
   },
 })
 

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

@@ -13,7 +13,6 @@ export default defineComponent({
   components: { CBox },
   setup() {
     const val = ref('Hello box')
-    console.log('Base box setup ')
 
     return { val }
   },

packages/c-theme-provider/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@chakra-ui/c-theme-provider",
+  "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 | CThemeProvider 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 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",
+    "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-next": "^1.0.0"
+  }
+}