chore(lerna): publishing package

.gitignore

@@ -30,3 +30,4 @@ packages/*/coverage
 packages/*/dist
 packages/*/node_modules
 **/.nuxt/
+lerna-debug.log

README.md

@@ -3,37 +3,142 @@
 [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
+<p align="center">
+  <a href="https://github.com/chakra-ui/chakra-ui-vue">
+    <img src="https://res.cloudinary.com/xtellar/image/upload/v1584203487/chakra-ui/chakra-ui-vue.png" alt="chakra-ui symbol" width="300" />
+  </a>
+</p>
 
-<h1 align="center">chakra-ui/vue</h1>
-<h4 align="center">Build scalable, accessible, and light-weight, Vue.js applications with ease. [WIP]</h4>
+<h2 align="center">Build scalable and accessible Vue.js applications with ease.</h2>
 
-### 📦 Components
-A complete list of all components to be built can be found here 👇🏽.
+**chakra-ui-vue** gives you a set of accessible and composable Vue components that you can use to build your favourite applications and sites.
 
-<a href="https://www.notion.so/b379efc7b0f24060b840be7f6c2d0bbb?v=e32ed8a0bce04621975feef3ff344c07" target="_blank"><h3>🥝 View All Components</h3></a>
+> Hello, friend! 😄
+> **chakra-ui-vue** is currently under development. A more detailed documentation site is in the pipeline soon! Check out our [storybook]() and [Codesandbox Starters]().
+
+## Features
+
+- **Ease of Styling:** Chakra UI contains a set of layout components like `Box` and
+  `Stack` that make it easy to style your components by passing props.
+  [Learn more](https://chakra-ui.com/style-props)
+- **Flexible & composable**: Chakra UI components are built on top of a Vue UI Primitive for endless composability.
+- **Accessible**. Chakra UI components follows the WAI-ARIA guidelines
+  specifications and have the right `aria-*` attributes.
+- **Dark Mode 😍**: Most components in Chakra UI are dark mode compatible.
+
+## Installation
+```bash
+yarn add @chakra-ui/vue emotion
+```
+or
+```bash
+npm install @chakra-ui/vue emotion
+```
+
+## Usage
+**1. Import the Chakra UI plugin in your `main.js` file.**
+
+```js
+import Vue from 'vue';
+import Chakra from '@chakra-ui/vue'
+import App from './App.vue'
+
+Vue.use(Chakra)
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+}).$mount()
+
+```
+**2. Wrap your application inside the Chakra `ThemeProvider`.** We also recommend that you include the `CSSReset` component to normalize all browser styling.
+
+_In `App.vue` file._
+```html
+<template>
+  <ThemeProvider>
+    <CSSReset />
+
+    <!--
+      Your application code goes here! 😁
+    -->
+
+  </ThemeProvider>
+</template>
+
+<script>
+import { ThemeProvider, CSSReset } from '@chakra-ui/core'
+
+export default {
+  name: 'App',
+  components: {
+    ThemeProvider,
+    CSSReset
+  }
+}
+</script>
+```
+If you'd like to toggle your app between dark and light mode, you can also wrap your application inside the `ColorModeProvider` component.
+
+**3. Hurray!🎉 Now the fun can begin**. You can start using components like so:
+```html
+<template>
+  <ThemeProvider>
+    <CSSReset />
+
+    <!--
+      Your application code goes here! 😁
+    -->
+    <Button variantColor="blue">
+      Chakra consumed ⚡️
+    </Button>
+  </ThemeProvider>
+</template>
+
+<script>
+import {
+  ThemeProvider,
+  CSSReset,
+  Button
+} from '@chakra-ui/core'
+
+export default {
+  name: 'App',
+  components: {
+    ThemeProvider,
+    CSSReset,
+    Button
+  }
+}
+</script>
+```
 
 ### Browse All Components
 You can also view all developed components in Storybook!
 
-<a href="https://kiwi-ui.netlify.com" target="_blank"><h3>🔖 View Storybook</h3></a>
+<a href="https://chakra-ui-vue.netlify.com" target="_blank"><h3>🔖 View Storybook</h3></a>
 
+
+### Development:
 ```bash
 yarn install
 yarn bootstrap
 yarn serve
 ```
 
+
+
 #### Project TODO:
 - [x] Setup Storybook for components UI
 - [x] Theme Provider
 - [x] Develop styling scheme for components with styled system
 - [x] Setup Vue.js plugin system
   - [x] Provide Theme
-  - [x] Observe theme and set it dynamically in javascript with ease.
+  - [x] Observe theme and set it dynamically in javascript plugin.
 - [x] Provide icons API for icons component
 - [x] Accessibility and WIA-ARIA standard implementation
 - [ ] Setup NPM distribution
-- [ ] Set up type system for components export with Typescript
+- [ ] Set up type system for plugin & components export with Typescript
 
 
 ## Contributors ✨
@@ -45,8 +150,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://jbakebwa.dev"><img src="https://avatars2.githubusercontent.com/u/21237954?v=4" width="100px;" alt=""/><br /><sub><b>Jonathan Bakebwa</b></sub></a><br /><a href="https://github.com/codebender828/kiwi-ui/commits?author=codebender828" title="Code">💻</a></td>
-    <td align="center"><a href="http://twitter.com/imesutkoca"><img src="https://avatars2.githubusercontent.com/u/342666?v=4" width="100px;" alt=""/><br /><sub><b>Mesut</b></sub></a><br /><a href="https://github.com/codebender828/kiwi-ui/commits?author=koca" title="Code">💻</a></td>
+    <td align="center"><a href="https://jbakebwa.dev"><img src="https://avatars2.githubusercontent.com/u/21237954?v=4" width="100px;" alt=""/><br /><sub><b>Jonathan Bakebwa</b></sub></a><br /><a href="https://github.com/codebender828/kiwi-ui/commits?author=codebender828" title="Code">💻</a> <a href="https://github.com/codebender828/kiwi-ui/commits?author=codebender828" title="Tests">⚠️</a> <a href="https://github.com/codebender828/kiwi-ui/commits?author=codebender828" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://twitter.com/imesutkoca"><img src="https://avatars2.githubusercontent.com/u/342666?v=4" width="100px;" alt=""/><br /><sub><b>Mesut</b></sub></a><br /><a href="https://github.com/codebender828/kiwi-ui/commits?author=koca" title="Code">💻</a> <a href="https://github.com/codebender828/kiwi-ui/commits?author=koca" title="Tests">⚠️</a></td>
     <td align="center"><a href="http://bit.ly/becomeworldclass"><img src="https://avatars0.githubusercontent.com/u/24433274?v=4" width="100px;" alt=""/><br /><sub><b>Omereshone Kelvin Oghenerhoro</b></sub></a><br /><a href="https://github.com/codebender828/kiwi-ui/commits?author=DominusKelvin" title="Documentation">📖</a></td>
   </tr>
 </table>

package.json

@@ -9,10 +9,8 @@
     "packages/*"
   ],
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "yarn build:dist && vue-cli-service build",
-    "build:dist": "cd ./packages/chakra-ui-core && yarn build && cd ../../",
-    "dev": "yarn workspace chakra-ui-core dev",
+    "build": "yarn workspace @chakra-ui/vue build",
+    "dev": "yarn workspace @chakra-ui/vue dev",
     "lint": "vue-cli-service lint",
     "lerna:build": "lerna run build",
     "test": "jest",
@@ -59,7 +57,6 @@
     "@vue/cli-plugin-pwa": "^3.11.0",
     "@vue/cli-plugin-unit-jest": "^3.11.0",
     "@vue/cli-service": "^3.11.0",
-    "@vue/composition-api": "^0.3.2",
     "@vue/eslint-config-standard": "^4.0.0",
     "@vue/test-utils": "1.0.0-beta.29",
     "aria-hidden": "^1.1.1",

packages/chakra-ui-core/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "chakra-ui-core",
+  "name": "@chakra-ui/vue",
   "version": "0.1.0",
-  "description": "🥝  A Scalable, Accessible, High Performance, Vue.js UI component library",
+  "description": "Build Accessible and Scalable Vue.js applications with ease",
   "author": "Jonathan Bakebwa <jonas@akkadu-team.com>",
   "license": "MIT",
   "main": "dist/cjs/index.js",

packages/chakra-ui-core/src/ThemeProvider/index.js

@@ -1,4 +1,5 @@
 import { colorModeObserver } from '../utils/color-mode-observer'
+import Fragment from '../Fragment'
 
 const ThemeProvider = {
   name: 'ThemeProvider',
@@ -30,8 +31,8 @@ const ThemeProvider = {
       }
     }
   },
-  render () {
-    return this.$slots.default
+  render (h) {
+    return h(Fragment, this.$slots.default)
   }
 }
 

packages/chakra-ui-theme/package.json

@@ -1,28 +1,28 @@
 {
-  "name": "kiwi-ui-theme",
+  "name": "@chakra-ui/theme-vue",
   "version": "0.1.0",
-  "description": "chakra-ui/vue default theme object",
+  "description": "Default theme for @chakra-ui/vue default theme object",
   "keywords": [
     "chakra",
     "ui",
     "vue",
     "theme"
   ],
   "author": "Jonathan Bakebwa <excellence@jbakebwa.dev>",
-  "homepage": "https://github.com/codebender828/kiwi-ui#readme",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue#readme",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
     "src"
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/codebender828/kiwi-ui.git"
+    "url": "git+https://github.com/chakra-ui/chakra-ui-vue.git"
   },
   "scripts": {
     "test": "echo \"Test: run test on theme\""
   },
   "bugs": {
-    "url": "https://github.com/codebender828/kiwi-ui/issues"
+    "url": "https://github.com/chakra-ui/chakra-ui-vue/issues"
   }
 }