How to contribute

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 component
    • src/styles.ts: Any related styled-components
    • src/utils.ts : utils for this component
    • src/docs : documentation for this component See more
    • tests/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 ChatGPT
      • name
      • packageName: Name of the npm package
      • usage: If needed, for example, if the import is different from the component name
  • /examples:
    • overview.mdx: The main example shown at the top of the component page
    • Others: Your other examples
  • properties.json: Auto-generated with yarn watch. It includes the list of the component's properties.

For a foundation page

Simply add your new page on it, it's magic!