Merge pull request #9 from chakra-ui/feature/icon-component

feature: icon component

Author: codebender828

_templates/generator/component/README.md.ejs.t

@@ -0,0 +1,15 @@
+---
+to: packages/<%=h.changeCase.paramCase(name)%>/README.md
+---
+
+# @chakra-ui/<%=h.changeCase.paramCase(name)%>
+
+<%=h.changeCase.sentence(description)%>
+
+## Installation
+
+```sh
+yarn add @chakra-ui/<%=h.changeCase.paramCase(name)%>
+# or
+npm i @chakra-ui/<%=h.changeCase.paramCase(name)%>
+```

_templates/generator/component/component.ts.ejs.t

@@ -3,17 +3,16 @@ to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
 ---
 
 import { h, defineComponent, PropType } from 'vue'
+import { chakra, DOMElements } from '@chakra-ui/vue-system'
 
-const <%= h.changeCase.pascalCase(name) %> = defineComponent({
+export const <%= h.changeCase.pascalCase(name) %> = defineComponent({
   props: {
     as: {
-      type: Object as PropType<string>,
+      type: [Object, String] as PropType<DOMElements>,
       default: 'div',
     },
   },
   setup(props, { slots, attrs }) {
-    return h(props?.as, { ...attrs }, slots.default?.())
+    return () => h(chakra(props.as), { ...attrs }, slots)
   },
 })
-
-export default <%= h.changeCase.pascalCase(name) %>

_templates/generator/component/examples.vue.ejs.t

@@ -0,0 +1,17 @@
+---
+to: packages/<%=h.changeCase.paramCase(name)%>/examples/base-<%=h.changeCase.paramCase(name)%>.vue
+---
+
+<template>
+  <<%=h.changeCase.pascalCase(name)%>> HELLO <%=h.changeCase.pascalCase(name)%> <<%=h.changeCase.pascalCase(name)%>>
+</template>
+
+<script lang="ts">
+import { <%=h.changeCase.pascalCase(name)%> } from '@chakra-ui/<%=h.changeCase.paramCase(name)%>/src'
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Base<%= h.changeCase.pascalCase(name) %>Example',
+  components: { <%= h.changeCase.pascalCase(name) %> },
+})
+</script>

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

@@ -4,18 +4,35 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
 
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
+  "description": "<%= 'Chakra UI Vue | ' + h.changeCase.sentence(description) + ' component'%>",
   "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",
+  "author": "Jonathan Bakebwa <codebender828@gmail.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
   "files": [
     "dist"
   ],
-  "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' component'%>",
-  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next.git",
-  "author": "Jonathan Bakebwa [email protected]",
-  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui=vue-next/issues"
+  },
+  "sideEffects": false,
   "scripts": {
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
@@ -25,5 +42,13 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
     "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/styled-system": "^1.4.1",
+    "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.5"
   }
 }

_templates/generator/component/test-file.test.ts.ejs.t

@@ -2,10 +2,9 @@
 to: packages/<%=h.changeCase.paramCase(name)%>/tests/<%=h.changeCase.paramCase(name)%>.test.ts
 ---
 import { render } from '../../test-utils/src'
-import <%= h.changeCase.pascalCase(name) %> from '../'
-
+import { <%= h.changeCase.pascalCase(name) %> } from '../src'
 
 it('should render properly', () => {
-  const { html } = render(<%= h.changeCase.pascalCase(name) %>)
-  expect(html()).toMatchSnapshot()
+  const { asFragment } = render(<%= h.changeCase.pascalCase(name) %>)
+  expect(asFragment()).toMatchSnapshot()
 })

nodemon.json

@@ -0,0 +1,6 @@
+{
+  "watch": ["packages", "scripts/parse-routes.ts"],
+  "ext": "vue",
+  "ignore": ["packages/**/*.test.ts"],
+  "exec": "yarn playground:routes"
+}

package.json

@@ -13,7 +13,7 @@
     "bootstrap": "yarn run lerna bootstrap",
     "scaffold": "hygen",
     "build": "lerna run build --no-private --stream",
-    "dev": "yarn playground:routes && NODE_ENV=development vite serve playground --config ./vite.config.ts",
+    "dev": "concurrently 'NODE_ENV=development vite serve playground --config ./vite.config.ts' 'yarn playground:routes'",
     "playground:routes": "ts-node ./scripts/parse-routes.ts",
     "playground:build": "yarn install && yarn build && yarn playground:routes && NODE_ENV=production vite build playground --config ./vite.config.ts",
     "test": "jest",
@@ -23,7 +23,8 @@
     "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",
+    "c-icon": "yarn workspace @chakra-ui/c-icon",
+    "system": "yarn workspace @chakra-ui/vue-system",
     "theme": "yarn workspace @chakra-ui/vue-theme",
     "nuxt": "yarn workspace @chakra-ui/nuxt-next",
     "test-utils": "yarn workspace @chakra-ui/vue-test-utils"
@@ -62,13 +63,15 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^7.0.0",
+    "feather-icons-paths": "^1.0.8",
     "fs-extra": "^9.0.1",
     "husky": "^4.3.8",
     "hygen": "^6.0.4",
     "jest": "^26.6.3",
     "jest-transform-stub": "^2.0.0",
     "lerna": "^3.22.1",
     "lint-staged": "^10.5.3",
+    "nodemon": "^2.0.7",
     "prettier": "^2.1.2",
     "pretty": "^2.0.0",
     "recursive-readdir": "^2.2.2",

packages/c-accordion/package.json

@@ -19,6 +19,6 @@
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
   },
   "dependencies": {
-    "@chakra-ui/system-vue": "1.0.0"
+    "@chakra-ui/vue-system": "*"
   }
 }

packages/c-accordion/src/index.ts

@@ -1,5 +1,5 @@
 import { h, defineComponent, PropType } from 'vue'
-import { chakra, DOMElements } from '@chakra-ui/system-vue'
+import { chakra, DOMElements } from '@chakra-ui/vue-system'
 
 const CAccordion = defineComponent({
   props: {

packages/c-alert/examples/fix-hover.vue

@@ -0,0 +1,12 @@
+<template>
+  <chakra.div
+    bg="blue.400"
+    :_hover="{ bg: 'yellow.500' }"
+    font-weight="bold"
+    color="white"
+    px="4"
+    py="3"
+  >
+    Fixing pseudo styles
+  </chakra.div>
+</template>