Workflow
- Create your branch from main
- Run
yarn
to setup the development environment. - Make the changes you want and test them out in the demo website before sending a pull request.
- Add all necessary information and examples in your pull request.
Commit message convention
We follow conventional commits convention ✨
The commit contains the following structural elements, to communicate intent to the consumers of your library:
- fix: patches a bug in your codebase
- feat: introduces a new feature to the codebase
- BREAKING CHANGE: introduces a breaking API change
- refactor: introduce code refactor
- docs: changes into documentation
- test: adding or updating tests
- chore: tooling changes, chore changes
We have a pre-commit hook to verify if your commit is correct 🚔
Writing components
Each component will consist of:
ComponentName
: Folder with name of component (PascalCase)src/index.tsx
: The React componentsrc/styles.ts
: Any relatedstyled-components
src/utils.ts
: utils for this componentsrc/docs
: documentation for this component See moretests/index.test.ts
: Jest / react-testing-library tests for this component
Adding icons
Check the Icon README
Reporting issues
You can report issues on our github project 🐛
Documentation
Our documentation is based on NextJS with mdx files and nodejs script.
For a Component
All component documentation is now located in its repository's docs
folder:
index.mdx
:- Header: Contains the following information:
ariakit
: Link (if used in this component, will be transformed into a button on the page header)description
: From ChatGPTname
packageName
: Name of the npm packageusage
: If needed, for example, if the import is different from the component name
- Header: Contains the following information:
/examples
:- overview.mdx: The main example shown at the top of the component page
- Others: Your other examples
properties.json
: Auto-generated withyarn watch
. It includes the list of the component's properties.
For a foundation page
Simply add your new page on it, it's magic!