The goal of this document is to outline the process we follow internally to develop any Chakra components. At Chakra UI, we strive to make the entire codebase high-quality, readable, and easy to contribute.
At the top level, we have a 5 step process to building components:
READMEfor the component
We believe collaboration and communication encourages a mix of expertise, ideas and perspectives to come together to achieve the level of quality we need for Chakra UI.
There are two recommended ways to share your component ideas:
#💡-api-discussionChannel to get a conversation rolling.
To help us to give quality feedback, we recommended that you follow this structure for any component or hook you want to contribute:
Assuming your component idea was accepted by the core team, and you need to start building, here's what you need to do:
yarn create:pkgcommand to bootstrap a package and symlink with lerna.
package.jsonwith more relevant content. You need to update
Voila! You're ready to write some beautiful code!
Whether you're developing a component or hook, we have a set of best practices we advice to follow to deliver on the quality expectations.
@chakra-ui/utilspackage to be sure we don't already have the hook you're looking to create.
Add types for custom hook props and return type
The end goal of this ensure all Chakra UI components are as strongly typed as possible to enable teams leverage the library.
The initial component setup include
build scripts you can use to
bundle the component for NPM.
Ensure you run these commands before creating a PR.
README.mdcomponent to the package
Clean Code Guide: https://github.com/labs42io/clean-code-typescript
Best TypeScript Practices:https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
Common React testing library scenarios: https://react-testing-library-examples.netlify.com/
Common Testing Practices: https://github.com/mawrkus/js-unit-testing-guide#unit-tests