chore: setup docs for contribution

Author: codebender828

CODE_OF_CONDUCT.md

@@ -0,0 +1,78 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to make participation in our project and our
+community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and
+expression, level of experience, education, socio-economic status, nationality,
+personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, or to ban temporarily or permanently any
+contributor for other behaviors that they deem inappropriate, threatening,
+offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at **[email protected]**. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an
+incident. Further details of specific enforcement policies may be posted
+separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.4, available at
+https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -0,0 +1,218 @@
+Thanks for showing interest to contribute to Chakra UI 💖, you rock!
+
+When it comes to open source, there are different ways you can contribute, all
+of which are valuable. Here's a few guidelines that should help you as you
+prepare your contribution.
+
+## Setup the Project
+
+The following steps will get you up and running to contribute to Chakra UI:
+
+1. Fork the repo (click the <kbd>Fork</kbd> button at the top right of
+   [this page](https://github.com/chakra-ui/chakra-ui-vue-next))
+
+2. Clone your fork locally
+
+```sh
+git clone https://github.com/<your_github_username>/chakra-ui-vue-next.git
+cd chakra-ui
+```
+
+3. Setup all the dependencies and packages by running `yarn bootstrap`. This
+   command will install dependencies and bootstrap the repo using `lerna`
+
+> If you run into any issues during this step, kindly reach out to the Chakra UI
+> Vue team here:[https://discord.gg/cMpMfvxa](https://discord.gg/cMpMfvxa)
+
+## Development
+
+To improve our development process, we've set up tooling and systems. Chakra UI
+uses a monorepo structure and we treat each component as an independent package
+that can be consumed in isolation.
+
+### Tooling
+
+- [Lerna](https://lerna.js.org/) to manage installation of dependencies and
+  running various scripts. We also have yarn workspaces enabled by default.
+- [Testing Library](https://testing-library.com/) for testing components and
+  hooks
+- [Vite SSR](https://www.vitejs.org/) for a blazing fast documentation website.
+  versioning and changelogs
+- [Changeset](https://github.com/atlassian/changesets) for changes
+  documentation, changelog generation, and release management.
+
+### Commands
+
+**`yarn install`**: bootstraps the entire project, symlinks all dependencies for
+cross-component development and builds all components.
+
+**`yarn bootstrap`**: bootstraps the entire project and symlinks all
+dependencies for cross-component development.
+
+**`yarn dev`**: starts components playground server and loads stories in SFCs in the `packages/**/examples/*.vue` file.
+
+**`yarn docs:dev`**: run the documentation site locally.
+
+**`yarn docs:build`**: run build for all component packages.
+
+**`yarn test`**: run test for all component packages.
+
+**`yarn release`**: publish changed packages.
+
+**`yarn pkg [package] <cmd>`**: Run a command on the specific package you're
+working on. You can run `build`, `test`, `lint` commands.
+
+#### Package Aliasing and Yarn Workspace
+
+Since we're using lerna monorepo + yarn workspaces by default, this enables us
+to run commands within component packages directly from the root.
+
+Each component is named this way: `@chakra-ui/[component]`. Let's say we want to
+build the button component. Here's how to do it:
+
+> *Take note that in order to prevent template tags name clashing with HTML elements or other Vue library components,*
+> *we prefix all component names with a `c-` in kebab-case or a capital `C` in PascalCase.*
+
+```bash
+yarn workspace @chakra-ui/c-button build
+
+# or
+
+lerna run build --scope @chakra-ui/c-button
+```
+
+**Shortcut:**
+```bash
+# to build
+yarn pkg @chakra-ui/c-tabs build
+
+# to test
+yarn pkg @chakra-ui/c-tabs test
+yarn pkg @chakra-ui/c-tabs test --watch
+
+```
+
+This alias is particularly useful when you're working on a specific component
+and want to avoid running the command for all components.
+
+### Documentation
+
+The documentation site is built with Vite.js on SSR. If you'd like to contribute to the
+docs, simply run `yarn build`, and `yarn docs:dev`
+
+### Components Development Playground
+
+Build components in isolation with Storybook using `yarn dev`
+
+## Think you found a bug?
+
+Please conform to the issue template and provide a clear path to reproduction
+with a code example. The best way to show a bug is by sending a CodeSandbox
+link.
+
+You may wish to use our starters to help you get going:
+
+TODO: Add Typescript starter for `@chakra-ui/vue` v1
+TODO: Add Javascript starter for `@chakra-ui/vue` v1
+
+## Proposing new or changed API?
+
+Please provide thoughtful comments and some sample API code. Proposals that
+don't line up with our roadmap or don't have a thoughtful explanation will be
+closed.
+
+## Making a Pull Request?
+
+Pull requests need only the :+1: of two or more collaborators to be merged; when
+the PR author is a collaborator, that counts as one.
+
+### Commit Convention
+
+Before you create a Pull Request, please check whether your commits comply with
+the commit conventions used in this repository.
+
+When you create a commit we kindly ask you to follow the convention
+`category(scope or module): message` in your commit message while using one of
+the following categories:
+
+- `feat / feature`: all changes that introduce completely new code or new
+  features
+- `fix`: changes that fix a bug (ideally you will additionally reference an
+  issue if present)
+- `refactor`: any code related change that is not a fix nor a feature
+- `docs`: changing existing or creating new documentation (i.e. README, docs for
+  usage of a lib or cli usage)
+- `build`: all changes regarding the build of the software, changes to
+  dependencies or the addition of new dependencies
+- `test`: all changes regarding tests (adding new tests or changing existing
+  ones)
+- `ci`: all changes regarding the configuration of continuous integration (i.e.
+  github actions, ci system)
+- `chore`: all changes to the repository that do not fit into any of the above
+  categories
+
+If you are interested in the detailed specification you can visit
+https://www.conventionalcommits.org/ or check out the
+[Angular Commit Message Guidelines](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).
+
+### Steps to PR
+
+1. Fork of the chakra-ui-vue repository and clone your fork
+
+2. Create a new branch out of the `main` branch. We follow the convention
+   `[type/scope]`. For example `fix/accordion-hook` or `docs/menu-typo`. `type`
+   can be either `docs`, `fix`, `feat`, `build`, or any other conventional
+   commit type. `scope` is just a short id that describes the scope of work.
+
+3. Make and commit your changes following the
+   [commit convention](https://github.com/chakra-ui/chakra-ui/blob/main/CONTRIBUTING.md#commit-convention).
+   As you develop, you can run `yarn pkg <module> build` and
+   `yarn pkg <module> test` to make sure everything works as expected. Please
+   note that you might have to run `yarn boot` first in order to build all
+   dependencies.
+
+4. Run `yarn changeset` to create a detailed description of your changes. This
+   will be used to generate a changelog when we publish an update.
+   [Learn more about Changeset](https://github.com/atlassian/changesets/tree/master/packages/cli).
+   Please note that you might have to run `git fetch origin main:master` (where
+   origin will be your fork on GitHub) before `yarn changeset` works.
+
+> If you made minor changes like CI config, prettier, etc, you can run
+> `yarn changeset add --empty` to generate an empty changeset file to document
+> your changes.
+
+### Tests
+
+All commits that fix bugs or add features need a test.
+
+> **Dear Chakra UI Vue team:** Please do not merge code without tests
+
+## Want to write a blog post or tutorial
+
+That would be amazing! Reach out to the Chakra UI Vue core team here:
+https://discord.gg/dQHfcWF. We would love to support you any way we can.
+
+## Want to help improve the docs?
+
+By default, the GitHub REST API has an anonymous user rate limit. This can be
+hit during heavy local docs development if the server is frequently restarted.
+
+Creating a GitHub token and storing it as the `GITHUB_TOKEN` environment
+variable allows the user to avoid the limit.
+
+Visit
+https://github.com/settings/tokens/new?description=Chakra+website+development to
+create a new personal access token. After creating the token, be sure to copy
+the token string to your clipboard.
+
+You'll then run the following command in the terminal that you'll start the docs
+from:
+
+```sh
+export GITHUB_TOKEN=<PASTE YOUR TOKEN HERE>
+```
+
+## License
+
+By contributing your code to the chakra-ui-vue GitHub repository, you agree to
+license your contribution under the MIT license.

README.md

@@ -26,42 +26,9 @@ yarn dev
 
 ## Development Guide
 ### Major todos:
-- [ ] Documentation (to be based on Nuxt 3)
+- [ ] Documentation
 - [ ] Accessibility JS hooks (Documented in Roadmap)
 
-### 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'`. 
-
-  * 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": "*",
-      ...
-    }
-    ```
-
-* Run `yarn core build` and then `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.
-
 ### 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

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

@@ -5,7 +5,7 @@ to: packages/<%=h.changeCase.paramCase(name)%>/src/<%=h.changeCase.paramCase(nam
 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, String] as PropType<DOMElements>,
@@ -16,5 +16,3 @@ const <%= h.changeCase.pascalCase(name) %> = defineComponent({
     return () => h(chakra(props.as), { ...attrs }, slots)
   },
 })
-
-export default <%= h.changeCase.pascalCase(name) %>

_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 './<%=h.changeCase.paramCase(name)%>'
+export * from './<%=h.changeCase.paramCase(name)%>'