Thanks for showing interest to contribute to our UI, you rock 🚀!
When it comes to open source, there are different ways you can contribute, all of which are valuable. Here's a few guidelines that should help you as you prepare your contribution.
The following steps will get you up and running to contribute to our UI:
-
Fork the repo (click the Fork button at the top right of the repo page)
-
Clone your fork locally
# With the default git CLI git clone https://github.com/<your_github_username>/RCL.git cd RCL # Or with the GitHub CLI gh repo clone <your_github_username>/RCL cd RCL
-
Setup all the dependencies and packages by running
yarn install
or simplyyarn
. This command will install dependencies and bootstrap the repo usinglerna
To improve our development process, we've set up tooling and systems. Our UI uses a monorepo structure and we treat each component as an independent package that can be consumed in isolation.
- Changeset for changes documentation, changelog generation, and release management.
- Lerna to manage installation of dependencies and running various scripts. We also have yarn workspaces enabled by default.
- Storybook for rapid UI component development and testing
- Testing Library for testing components and hooks
yarn bootstrap
: bootstraps the entire project and symlinks all dependencies for
cross-component development.
yarn dev
or yarn start
: starts storybook server and loads stories in files that end with
.stories.tsx
.
yarn build
: run build for all component packages.
yarn test
: run test for all component packages.
yarn test:cov
: run test for all component packages and get the coverage.
yarn release
: publish changed packages.
yarn pkg [package] <cmd>
: Run a command on the specific package you're working on. You can run
build
, test
, lint
commands. Also the default yarn commands like add
, remove
and so on a
possible.
Since we're using lerna monorepo + yarn workspaces by default, this enables us to run commands within component packages directly from the root.
Each component must named this way: @easyfeedback/[component]
. Let's say we want to build a button
component. Here's how to do it:
yarn workspace @easyfeedback/button build
# or
lerna run build --scope @easyfeedback/button
Shortcut: To make this shorter and more convenient, we've added an alias for each component in
the root package.json
. Now you can simply do:
# to build
yarn pkg button build
# to test
yarn pkg button test
yarn pkg button test:cov
yarn pkg button test:watch
# to lint
yarn pkg button lint
This alias is particularly useful when you're working on a specific component and want to avoid running the command for all components.
To test components in Storybook using yarn dev
or yarn start
.
Build components in isolation with Storybook using build:storybook
.
Please conform to the issue template and provide a clear path to reproduction with a code example.
Please provide thoughtful comments and some sample API code. Proposals that don't line up with our roadmap or don't have a thoughtful explanation will be closed.
-
Fork of the RCL repository and clone your fork
-
Create a new branch out of the
main
branch. We follow the convention[type/scope]
. For examplefix/accordion-hook
ordocs/menu-typo
.type
can be eitherdocs
,fix
,feat
,build
, or any other conventional commit type.scope
is just a short id that describes the scope of work. -
Make and commit your changes following the commit convention. As you develop, you can run
yarn pkg <module> build
andyarn pkg <module> test
to make sure everything works as expected. Please note that you might have to runyarn boot
first in order to install all dependencies. -
Run
yarn changeset
to create a detailed description of your changes. This will be used to generate a changelog when we publish an update. Learn more about Changeset. Please note that you might have to rungit fetch origin main:master
(where origin will be your fork on GitHub) beforeyarn changeset
works.
If you made minor changes like CI config, prettier, etc. you can run
yarn changeset add --empty
to generate an empty changeset file to document your changes.
All commits that fix bugs or add features need a test.
Please do not merge code without tests!
We try to have coverage near the 100%.
By contributing your code to the RCL GitHub repository, you agree to license your contribution under the MIT license.