Merge pull request #35 from chakra-ui/develop

chore: release setup

Author: codebender828

.github/workflows/pr.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.19]
+        node-version: [14]
     steps:
     - name: Checkout
       uses: actions/checkout@v2

.github/workflows/release.yml

@@ -22,10 +22,10 @@ jobs:
         # so that Changesets can generate changelogs with the correct commits
         fetch-depth: 0
 
-    - name: Use Node.js 12.x
+    - name: Use Node.js 14.x
       uses: actions/setup-node@master
       with:
-        node-version: 12.19
+        node-version: 14
 
     - name: Install dependencies
       run: yarn install --frozen-lockfile && yarn bootstrap

.gitignore

@@ -96,4 +96,5 @@ dist
 .pnp.*
 
 # vscode history extension
-.history
+.history
+website/.vite-ssg-temp

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "johnsoncodehk.volar"
+  ]
+}

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "volar.tsPlugin": true
 }

README.md

@@ -25,32 +25,55 @@ yarn dev
 ```
 
 ## Development Guide
-### 1. Creating new components
-Chakra UI Vue uses [hygen](https://www.hygen.io/) to generate new components. The component templates can be found in the `_templates/generator/component` directory
+### Major todos:
+- [ ] Documentation (to be based on Nuxt 3)
+- [ ] Accessibility JS hooks (Documented in Roadmap)
 
-```bash
-yarn hygen component --name <COMPONENT_NAME> --description="MY_COMPONENT_DESCRIPTION"
-```
+### Creating new components
+Chakra UI Vue uses [hygen](https://www.hygen.io/) to generate new components. The component templates can be found in the `_templates/generator/component` directory.
+
+* Run the hygen command to generate your new component. 
+  ```bash
+  yarn hygen generator component --name <COMPONENT_NAME> --description="MY_COMPONENT_DESCRIPTION"
+  ```
+  This creates a new package with the name `<COMPONENT_NAME>` with some basic sanity tests.
+
+* Run `yarn workspace @chakra-ui/COMPONENT_NAME build && yarn bootstrap` to build and link your component in the monorepo.
+
+* Add the script for your package workspace in the global `package.json` file. `"COMPONENT_NAME": "yarn workspace @chakra-ui/COMPONENT_NAME",` goes under `scripts`.
+  
+* Before you can play around with your new component in the playground you will have to export your component from the `@chakra-ui/vue-next` package in the  `core` directory under `packages`.
+
+  * Inside the `index.ts` file, you will have to add `export * from '@chakra-ui/COMPONENT_NAME'`. 
 
-This creates a new package with the name `<COMPONENT_NAME>` with some basic sanity tests.
+  * Your component also needs to be added as a dependency inside the `package.json` of the `@chakra-ui/vue-next` package as following: 
+    ```jsx
+    "dependencies": {
+      ...
+      "@chakra-ui/COMPONENT_NAME": "*",
+      ...
+    }
+    ```
 
-After creating your new package, run `yarn workspace @chakra-ui/COMPONENT_NAME && yarn bootstrap` to build and link your component in the monorepo.
+* Run `yarn core build` and then `yarn dev` to view your new component in the playground.
 
-Run `yarn dev` to view your new component in the playground.
+* When you make changes to your component, you will need to rebuild your package to have the changes applied in for example the playground `yarn workspace @chakra-ui/COMPONENT_NAME build` or `yarn COMPONENT_NAME build`. Alternatively, you can use the watch command. `yarn workspace @chakra-ui/COMPONENT_NAME watch` or `yarn COMPONENT_NAME watch`.
 
 **Additional notes:**
 Add a script for your package workspace in the `package.json` file.
 
-### Major todos:
-- [ ] Documentation (to be based on Nuxt 3)
-- [ ] Accessibility JS hooks (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. 
+```bash
+type(scope?): subject #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")
+```
 
-#### Contributors' note:
-Hi!
+For example:
 
-I'm excited to finally get this project out in the open. I love working on Chakra! Of recent, between my startup(mid-pivot), school, ministry, and family, I have a limited amount of time every day, so I may not be very active online on Twitter/Discord/Github to respond to issues very actively. The reason for this is that I find that I'm most productive when I have less presence on social media(I need it to deliver my best work <3). Notwithstanding, I indeed am oft pleasantly surprised when I do see the help and support from the community and different contributors! Thank you!
+```bash
+git commit -m "feat(component): create x component"
 
-I have the entire Chakra UI core team members and Vue community to thank for their support, and for every contributor who does so by opening issues, writing tests and fixing bugs. I'm generally reachable by email at `[email protected]` or on `@codebender828` on Twitter and on the Chakra UI Discord.
+git commit -m "chore: update x dependencies"
+```
 
-For now I'll be hacking away at this! Blessings!
+For more information visit: [github.com/conventional-changelog/commitlint/#what-is-commitlint](https://github.com/conventional-changelog/commitlint/#what-is-commitlint)

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

@@ -2,4 +2,4 @@
 to: packages/<%=h.changeCase.paramCase(name)%>/src/index.ts
 ---
 
-export { default as <%= h.changeCase.pascalCase(name) %> } from '@chakra-ui/<%=h.changeCase.paramCase(name)%>'
+export { default as <%= h.changeCase.pascalCase(name) %> } from './<%=h.changeCase.paramCase(name)%>'

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

@@ -29,17 +29,17 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
   },
   "sideEffects": false,
   "scripts": {
-    "build": "concurrently yarn:build:*",
+    "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"
+    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "^1.4.1",
+    "@chakra-ui/styled-system": "^1.9.0",
     "@chakra-ui/vue-system": "*",
     "@chakra-ui/vue-utils": "*"
   },

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

@@ -17,12 +17,12 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
   "author": "Jonathan Bakebwa [email protected]",
   "license": "MIT",
   "scripts": {
-    "build": "concurrently yarn:build:*",
+    "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",
     "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"
+    "watch:types": "cross-env tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch --incremental"
   }
 }

docs/.vitepress/config.js

@@ -27,6 +27,7 @@ module.exports = {
     sidebar: {
       '/setup/': getSetupSidebar(),
       '/components/': getSetupSidebar(),
+      '/composables/': getSetupSidebar(),
       '/': getSetupSidebar()
     }
   }
@@ -52,6 +53,12 @@ function getSetupSidebar() {
         { text: 'CSS reset', link: '/components/css-reset' },
         { text: 'Visually hidden', link: '/components/visually-hidden' },
       ]
+    },
+    {
+      text: 'Composables',
+      children: [
+        { text: 'usePopper', link: '/composables/use-popper' }
+      ]
     }
   ]
 }
@@ -70,13 +77,5 @@ function getComponentsSidebar() {
         { text: 'Visually hidden', link: '/components/visually-hidden' },
       ]
     },
-    // {
-    //   text: 'Theme',
-    //   children: [
-    //     { text: 'Homepage', link: '/config/homepage' },
-    //     { text: 'Algolia Search', link: '/config/algolia-search' },
-    //     { text: 'Carbon Ads', link: '/config/carbon-ads' }
-    //   ]
-    // }
   ]
 }