Merge pull request #91 from chakra-ui/feat/form-control

feat: add `CFormControl` component

Author: codebender828

.DS_Store

@@ -0,0 +1,36 @@
+---
+'@chakra-ui/c-accordion': minor
+'@chakra-ui/c-alert': minor
+'@chakra-ui/c-breadcrumb': minor
+'@chakra-ui/c-button': minor
+'@chakra-ui/c-close-button': minor
+'@chakra-ui/c-code': minor
+'@chakra-ui/c-color-mode': minor
+'@chakra-ui/c-flex': minor
+'@chakra-ui/c-focus-lock': minor
+'@chakra-ui/c-form-control': minor
+'@chakra-ui/c-icon': minor
+'@chakra-ui/c-modal': minor
+'@chakra-ui/c-motion': minor
+'@chakra-ui/c-popper': minor
+'@chakra-ui/c-portal': minor
+'@chakra-ui/c-reset': minor
+'@chakra-ui/c-scroll-lock': minor
+'@chakra-ui/c-spinner': minor
+'@chakra-ui/c-theme-provider': minor
+'@chakra-ui/c-visually-hidden': minor
+'@chakra-ui/vue-next': minor
+'@chakra-ui/vue-layout': minor
+'@chakra-ui/nuxt-next': minor
+'@chakra-ui/vue-system': minor
+'@chakra-ui/vue-test-utils': minor
+'@chakra-ui/vue-theme': minor
+'@chakra-ui/vue-theme-tools': minor
+'@chakra-ui/vue-utils': minor
+'@chakra-ui/vue-a11y': minor
+'@chakra-ui/vue-composables': minor
+'@chakra-ui/vue-auto-import': minor
+'@chakra-ui/vue-docs': minor
+---
+
+Create `CFormControl` component

.changeset/dry-mayflies-deny.md

@@ -4,6 +4,8 @@ dist
 yarn-error.log
 test-vite-project
 
+.DS_Store
+
 # Logs
 logs
 *.log
@@ -97,6 +99,12 @@ dist
 
 # vscode history extension
 .history
+
+# SSG
 website/.vite-ssg-temp
+
+# npmrc
 .npmrc
+
+# Cypress screenshots generated
 cypress/screenshots

.gitignore

@@ -9,25 +9,24 @@ The official working repository for V1 of Chakra UI Vue with Vue 3 support.
 yarn install
 ```
 
-### Build components
+### Watch components
 ```bash
-yarn build
-```
-
-### Bootstrap and link packages
-```bash
-yarn bootstrap
+yarn start
 ```
 
 ### Component playground (based on vite)
 ```bash
-yarn dev
+# In one background terminal (Only needs to be run once)
+yarn start
+
+# In another terminal
+yarn playground:dev
 ```
 
 ## Development Guide
 ### Major todos:
-- [ ] Documentation
-- [ ] Accessibility JS hooks (Documented in Roadmap)
+- [-] Documentation (WIP)
+- [-] Accessibility JS hooks (WIP, Documented in Roadmap)
 
 ### Creating a new commit message
 The commits follow the [conventional commit format](https://www.conventionalcommits.org/). Husky is setup to lint your commit messages to match this format. 

README.md

@@ -5,9 +5,9 @@ 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",
+  "version": "0.0.0-alpha.0",
+  "main": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
+  "module": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>",
   "author": "Jonathan Bakebwa <codebender828@gmail.com>",
   "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
   "license": "MIT",
@@ -16,13 +16,10 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
   ],
   "exports": {
     ".": {
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
+      "require": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
+      "default": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>"
     }
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chakra-ui/chakra-ui-vue-next.git"
@@ -31,22 +28,19 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
     "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"
+    "scripts": {
+    "clean": "rimraf dist"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "^1.9.0",
-    "@chakra-ui/vue-system": "*",
-    "@chakra-ui/vue-utils": "*"
+    "@chakra-ui/vue-system": "0.1.0-alpha.5"
+  },
+  "devDependencies": {
+    "vue": "^3.1.4"
   },
   "peerDependencies": {
-    "vue": ">=3.0.5"
+    "vue": "^3.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

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

@@ -4,16 +4,16 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
 
 {
   "name": "<%= '@chakra-ui/' + h.changeCase.paramCase(name)%>",
-  "version": "1.0.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "version": "0.0.0-alpha.0",
+  "main": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
+  "module": "<%= 'dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "require": "./dist/cjs/index.js",
-      "default": "./dist/esm/index.js"
+      "require": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.cjs.js' %>",
+      "default": "<%= './dist/chakra-ui-' + h.changeCase.paramCase(name) + '.esm.js' %>"
     }
   },
   "description": "<%= 'Chakra UI Vue | ' + h.changeCase.pascalCase(name) + ' module'%>",

_templates/generator/component/src-index.ts.ejs.t renamed to _templates/generator/component/src-index.tsx.ejs.t

@@ -70,14 +70,11 @@ start building, here's what you need to do:
 # 1. * Fixes all dependency resolutions in the respository*
 yarn pkgs:fix
 
-# 2. * Build core package with export from new component
-yarn core build
+# 2. Watch packages
+yarn start
 
-# 3. Start watching for changes in
-yarn pkg chakra-ui/COMPONENT_NAME watch
-
-# 4. Starts development server
-yarn dev
+# 3. In second terminal, Starts development environment
+yarn playground:dev
 ```
 
 

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

@@ -50,7 +50,7 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-typescript": "^7.12.7",
     "@chakra-ui/styled-system": "^1.10.0",
-    "@chakra-ui/utils": "1.8.2",
+    "@chakra-ui/utils": "^1.8.2",
     "@changesets/changelog-github": "^0.3.0",
     "@changesets/cli": "^2.14.1",
     "@commitlint/cli": "^11.0.0",

docs/guides/component-guide.md

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@chakra-ui/styled-system": "^1.10.0",
-    "@chakra-ui/utils": "1.8.2",
+    "@chakra-ui/utils": "^1.8.2",
     "@chakra-ui/vue-system": "0.1.0-alpha.5",
     "@chakra-ui/vue-utils": "0.1.0-alpha.5"
   },