Contributing to Mantine
First of all, thank you for showing interest in contributing to Mantine! All your contributions are extremely valuable to the project!
Ways to contribute
- Improve documentation: Fix incomplete or missing docs, bad wording, examples or explanations.
- Give feedback: We are constantly working on making Mantine better. Please share how you use Mantine, what features are missing and what is done well via GitHub Discussions or Discord.
- Share Mantine: Share links to the Mantine docs with everyone who might be interested! Share Mantine on Twitter here.
- Contribute to the codebase: Propose new features via GitHub Issues, or find an existing issue that you are interested in and work on it!
- Give us a code review: Help us identify problems with the source code or make Mantine more performant.
Contributing workflow
- Decide on what you want to contribute.
- If you want to implement a new feature, discuss it with the maintainer (GitHub Discussions or Discord) before jumping into coding.
- After finalizing issue details, as you begin working on the code, please make sure to follow commit conventions.
- Run tests with
npm test
and submit a PR once all tests have passed. - Get a code review and fix all issues noticed by the maintainer.
- If you cannot finish your task or if you change your mind – that's totally fine! Just let us know in the GitHub issue that you created during the first step of this process. The Mantine community is friendly – we won't judge or ask any questions if you decide to cancel your submission.
- Your PR is merged. You are awesome!
Commit convention
Mantine is a monorepo, thus it is important to write correct commit messages to keep the git history clean and consistent. All commits made in this repository are divided into 3 groups:
- package commits Related to any particular package.
- docs commits Related to the documentation.
- core commits Only related to repository tooling and not associated with any package.
Commit messages consists of 3 parts:
Examples:
[core] Fix documentation deployment script
– Change made in repository script, it is not related to documentation or any package[docs] Update report issues link
– Change related to documentation website[@asuikit/core] Button: Add theme focus styles
– Change in@asuikit/core
package at Button component[@asuikit/hooks] use-list-state: Add remove handler
– Change in@asuikit/hooks
package at use-list-state hook
Git branches
- master – current version, patches for current minor version (1.0.x)
- dev – contains next minor version (1.x.0) - Most likely, you will want to create a PR to this branch.
Get started with Mantine locally
- Install the editorconfig extension for your editor.
- Fork the repository, then clone or download your fork.
- Install dependencies with yarn –
yarn
- Build local version of all packages –
npm run build:all
- Build local version of specific packages –
npm run build @asuikit/core @asuikit/demos @asuikit/hooks
- To start storybook –
npm run storybook
- To start docs –
npm run docs
- To rebuild props descriptions –
npm run docs:docgen
npm scripts
All npm scripts are located at main package.json. Individual packages do not have dedicated scripts.
Development scripts
storybook
– Starts the storybook development server. To start storybook for specific component, use thenpm run storybook Tooltip
command.docs
– Starts the docs development server.
Testing scripts
syncpack
– runs syncpacktypecheck
– runs TypeScript typechecking withtsc --noEmit
on all packages and docslint
– runs ESLint on src folderjest
– runs tests with jesttest
– runs all above testing scripts
Docs scripts
docs:docgen
– generates components types information with docgen scriptdocs:sizes
– generates bundle size information for all packagesdocs:clean
– runsgatsby clean
docs:build
– runs all above docs scripts and build production docs bundledocs:deploy
– runs all above docs scripts and deploys docs to GitHub Pages