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!