Skip to main content
First off, thanks for taking the time to contribute! The following is a set of guidelines for contributing to React Components. Feel free to propose changes to this document in a pull request.

​
Pull Requests

Feel free to open a pull-request to contribute to this project. Working on your first Pull Request? You can learn how from this free series: How to Contribute to an Open Source Project on GitHub Guidelines for pull requests:
  • Make your commit messages as descriptive as possible. Include as much information as you can. Explain anything that the file diffs themselves won’t make apparent.
  • Document your pull request. Explain your fix, link to the relevant issue, add screenshots when adding new components.
  • Make sure the target of your pull request is the relevant branch. Most bugfixes or new features should go to the main branch.
  • Include only related work. If your pull request has unrelated commits, it won’t be accepted.

​
Components Requests

Before creating a new component request, please search to see if someone has requested the component already. If there is an open request, please add a 👍. If the component has not already been requested, create an issue with a title of Component request: <component name> and add as much information as possible.

​
Development

You will need minimum version of Node.js 16.15+
After cloning the project you need to run: 
npm install # Install dependencies, including the workspace packages

​
Run Storybook

To test changes in a local project, you can use npm run storybook to run Storybook in localhost and test your changes. 
# in packages/react-components
npm run storybook

​
Project Structure

Root directories: 
react-components
|
└── src
    ├── assets
    ├── components
    └── constants

​
Components

All the components are distributed by folders. If you want to create a new component, create a new folder and generate a new .tsx file. You will need to export your new component in the index.ts file: 
export { default as ProgressBar } from './ProgressBar/ProgressBar';
Also, create a .stories.tsx file to add it to the Storybook. You can create the unit test for the component directly in this file using @storybook/test.

​
Constants

A group of constants like Color, that are used to give styles to the components.
Important: Please, do not make any changes to the constants files.

​
Environment Variables

To use <Input type="location"/>, you will need to add a new environment variable to your .env file:
GOOGLE_MAPS_API=YOUR_API_KEY
Please, replace YOUR_API_KEY with your Google Maps API Key.

​
Chromatic Visual Testing

To run Chromatic visual tests, you need to set up the project token as an environment variable: 
# For local development, add to your .env file:
CHROMATIC_PROJECT_TOKEN=your_chromatic_token_here

# Then run:
npm run chromatic
For CI/CD (GitHub Actions):
  1. Go to repository Settings → Secrets and variables → Actions
  2. Add a new secret named CHROMATIC_PROJECT_TOKEN
  3. The GitHub workflow will automatically use this secret
Security Note: Never commit API keys or tokens directly to the repository. Always use environment variables or secrets management.

Build docs developers (and LLMs) love

Get started for freeTalk to us