feat(modal): initialize component

Author: codebender828

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

@@ -1,5 +1,5 @@
 ---
-to: tooling/<%=h.changeCase.paramCase(name)%>/README.md
+to: packages/<%=h.changeCase.paramCase(name)%>/README.md
 ---
 
 # @chakra-ui/<%=h.changeCase.paramCase(name)%>

packages/c-modal/README.md

@@ -0,0 +1,11 @@
+# @chakra-ui/c-modal
+
+An accessible dialog modal component for Chakra UI Vue
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-modal
+# or
+npm i @chakra-ui/c-modal
+```

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

@@ -0,0 +1,3 @@
+<template>
+  <c-modal> HELLO CModal </c-modal>
+</template>

packages/c-modal/index.ts

@@ -0,0 +1 @@
+export * from './src'

packages/c-modal/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@chakra-ui/c-modal",
+  "description": "Chakra UI Vue | An accessible dialog modal component for chakra ui vue 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 <[email protected]>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "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": "rimraf ./dist && concurrently yarn:build:*",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps",
+    "build:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps --watch",
+    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
+  },
+  "dependencies": {
+    "@chakra-ui/styled-system": "^1.9.0",
+    "@chakra-ui/vue-system": "*",
+    "@chakra-ui/vue-utils": "*"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.5"
+  }
+}

packages/c-modal/src/c-modal.ts

@@ -0,0 +1,16 @@
+import { h, defineComponent, PropType } from 'vue'
+import { chakra, DOMElements } from '@chakra-ui/vue-system'
+
+const CModal = defineComponent({
+  props: {
+    as: {
+      type: [Object, String] as PropType<DOMElements>,
+      default: 'div',
+    },
+  },
+  setup(props, { slots, attrs }) {
+    return () => h(chakra(props.as), { ...attrs }, slots)
+  },
+})
+
+export default CModal

packages/c-modal/src/index.ts

@@ -0,0 +1 @@
+export { default as CModal } from './c-modal'

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

@@ -0,0 +1,7 @@
+import { render } from '../../test-utils/src'
+import { CModal } from '../src'
+
+it('should render properly', () => {
+  const { asFragment } = render(CModal)
+  expect(asFragment()).toMatchSnapshot()
+})

packages/c-modal/tsconfig.json

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