feat: create form-control component and context

Author: codebender828

.DS_Store

@@ -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

@@ -0,0 +1,11 @@
+# @chakra-ui/c-form-control
+
+Form control component is used to manage form controls such input fields checkbox and radio buttons it provides components and context that make your form fields accessible by default
+
+## Installation
+
+```sh
+yarn add @chakra-ui/c-form-control
+# or
+npm i @chakra-ui/c-form-control
+```

docs/guides/component-guide.md

@@ -0,0 +1,3 @@
+<template>
+  <c-form-control> HELLO CFormControl </c-form-control>
+</template>

packages/c-form-control/README.md

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

packages/c-form-control/examples/base-c-form-control.vue

@@ -0,0 +1,42 @@
+{
+  "name": "@chakra-ui/c-form-control",
+  "description": "Chakra UI Vue | Form control component is used to manage form controls such input fields checkbox and radio buttons it provides components and context that make your form fields accessible by default component",
+  "version": "0.0.0-alpha.0",
+  "main": "dist/chakra-ui-c-form-control.cjs.js",
+  "module": "dist/chakra-ui-c-form-control.esm.js",
+  "author": "Jonathan Bakebwa <[email protected]>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui-vue-next#readme",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/chakra-ui-c-form-control.cjs.js",
+      "default": "./dist/chakra-ui-c-form-control.esm.js"
+    }
+  },
+  "repository": "https://github.com/chakra-ui/chakra-ui-vue-next/tree/master/packages/c-form-control",
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui-vue-next/issues"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@chakra-ui/vue-composables": "^0.1.0-alpha.4",
+    "@chakra-ui/vue-system": "0.1.0-alpha.5",
+    "@chakra-ui/vue-utils": "^0.1.0-alpha.5",
+    "@chakra-ui/utils": "^1.8.2"
+  },
+  "devDependencies": {
+    "vue": "^3.1.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/c-form-control/index.ts

@@ -0,0 +1,64 @@
+/**
+ * Hey! Welcome to @chakra-ui/vue-next CFormControl
+ *
+ * Form control component is used to manage form controls such input fields checkbox and radio buttons it provides components and context that make your form fields accessible by default
+ *
+ * @see Docs     https://next.vue.chakra-ui.com/c-form-control
+ * @see Source   https://github.com/chakra-ui/chakra-ui-vue-next/blob/master/packages/c-form-control/src/c-form-control/c-form-control.ts
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
+ */
+
+import { h, defineComponent, ComputedRef, computed, PropType, toRefs } from 'vue'
+import { chakra, ComponentWithProps, DeepPartial, DOMElements, useMultiStyleConfig, StylesProvider, omitThemingProps } from '@chakra-ui/vue-system'
+import { CFormControlProps, useFormControlProvider } from './use-form-control'
+import { mergeWith } from '@chakra-ui/utils'
+import { createContext } from '@chakra-ui/vue-utils'
+
+type CFormControlProviderContext = ComputedRef<Omit<
+  ReturnType<typeof useFormControlProvider>,
+  "rootProps"
+>>
+
+const [
+  FormControlProvider,
+  useFormControlContext
+] = createContext<CFormControlProviderContext>()
+
+export { useFormControlContext }
+
+/**
+ * `CFormControl` provides context such as
+ * `isInvalid`, `isDisabled`, and `isRequired` to form elements.
+ *
+ * This is commonly used in form elements such as `input`,
+ * `select`, `textarea`, etc.
+ */
+
+export const CFormControl: ComponentWithProps<
+DeepPartial<CFormControlProps>
+> = defineComponent({
+  props: {
+    as: {
+      type: [Object, String] as PropType<DOMElements>,
+      default: 'div',
+    },
+  },
+  setup(_props, { slots, attrs }) {
+    const { as, ...props } = toRefs(_props)
+    const ownProps = computed(() => props)
+    const styles = useMultiStyleConfig('Form', props)
+
+    const { rootProps, ..._context } = useFormControlProvider(ownProps.value)
+
+    const context: CFormControlProviderContext = computed(() => _context)
+
+    FormControlProvider(context)
+    StylesProvider(styles)
+
+    return () => (
+      <chakra.div as={as.value} {...rootProps.value} __css={styles.value.container} __label="form-control">
+        {slots}
+      </chakra.div>
+    )
+  },
+})

packages/c-form-control/package.json

@@ -0,0 +1,2 @@
+export * from './c-form-control'
+export * from './use-form-control'