Thank you for your interest in contributing! We welcome improvements and suggestions to make this project even better. Please follow the guidelines below for a smooth experience.
- Code of Conduct
- Development Setup
- Upgrading Dependencies
- Coding Standards
- Commit Guidelines
- Testing
- Building
- Submitting Changes
Please adhere to our Code of Conduct in all interactions. Respectful and inclusive behavior is expected from all contributors.
To get started with contributing, set up the project by following these steps:
- Begin by cloning the repository and navigating to its directory.
- Use the correct Node.js version specified in .nvmrc:
- Install
nvm
if you haven't already. Follow the instructions on the nvm GitHub repository. - Run
nvm use
to switch to the required Node.js version.
- Install
- Install all project dependencies to ensure a complete setup with
yarn install
. - Start the development server using
yarn start
to begin working on the project. - Start Storybook using
yarn start:storybook
to develop and test UI components in isolation. - Run tests with
yarn test
to verify that the environment is working correctly. You can also useyarn test:watch
to run the tests in watch mode,yarn test:coverage
to generate a coverage report, andyarn test:ui
to run the tests with the Vitest UI.
Keeping dependencies up-to-date is crucial for maintaining the security and performance of the project. Follow these steps to upgrade dependencies:
- Check for outdated dependencies with
yarn outdated
. - Update dependencies using
yarn upgrade
or update a specific package withyarn add <package-name>@latest
. - Ensure everything works after the upgrade by running the tests with
yarn test
. - Make sure the
yarn.lock
file is updated with the latest dependency versions by runningyarn install
. - Commit the changes to the repository with a clear commit message.
- Push the changes to your branch and create a pull request for review.
To maintain code quality and consistency, please follow these guidelines:
- Run
yarn format
to format code using Prettier andyarn lint
for linting with ESLint. - Organize imports into clearly separated groups, following this order: React imports, third-party packages, app-level aliases, and local imports.
- Arrange imports alphabetically by package name within each group to improve readability.
Use clear, descriptive commit messages following the Conventional Commits format. Add emojis to quickly convey the type of change if desired, following Git Commit Emoji conventions.
Please write tests for any new features or modifications to the project. Follow these steps to ensure your tests are effective and consistent:
- Use
yarn test
to run the tests. - Check coverage using
yarn test:coverage
to ensure all tests pass. - For an interactive testing experience, use Vitest UI with
yarn test:ui
.
For consistency and modularity, organize test code into structured sections:
- Start by mocking dependencies or libraries.
- Create helper functions to streamline repetitive logic.
- Define constants for mock data or configurations.
- Structure the main test suite using
describe
blocks and focused test cases.
Ensure tests are clear, reusable, and easy to maintain before submitting changes.
Use the following commands as needed to build and preview the project:
- Build the project for production using TypeScript and Vite with
yarn build
. - Generate a static Storybook build with
yarn build:storybook
. - Preview the production build locally using Vite with
yarn preview
.
Once you've made your changes, follow these steps to submit them for review:
- Create a feature branch with
git checkout -b feature/your-feature-name
. - Commit your changes following the commit guidelines.
- Push your branch with
git push origin feature/your-feature-name
. - Open a pull request with a title and description that clearly explain your changes.