Skip to main content

Contributions

We love contributions!❤️

The team responsible for this repository is @mercell/frontend. We love contributions and encourage people to submit pull requests on the changes they want to see!

Setup​

The repository is serves multiple packages and is managed by a framework called rushjs.

First install rushjs globally by simply running the command:

yarn global add @microsoft/rush

Next clone the repository:

git clone git@github.com:Mercell/frontend-core.git

Enter the repository and install the dependencies.

cd frontend-core
rush update

Important! Rushjs manages the dependencies so avoid using normal package managers. Read more about this at rushjs new developer guide

Finally do a build to check that everyone is working as expected:

rush build

Now that you have everything up and running head over to rushjs everyday commands to learn more about how to work with the repository.

Developing design system components​

Testing components during development in a monorepo can be a bit cumbersome. We tried simplifying it a bit:

If you are developing components you are best served by running two seperate processes: First start the mono repo build watcher:

rush build:watch

Then start storybook in parallell:

cd apps/storybook && rushx storybook

This will enable hot reload with reloading times around ~5s.

If your working with tailwind plugins, then hot reloading only work if the plugin is local to the storybook project. The recommend approach is to develop and experiment in apps/storybook/src/debug-plugin.js or use the Design kit playground before migrating the plugin into @mercell/tailwind.

If you have ideas on how to further improve this don't hesitate to reach out!

Workflow​

Working with a monorepo and package distribution requires a bit of discpline, luckily rushjs helps with streamlining this.

Important! Rushjs manages the dependencies so avoid using normal package managers. Read more about this at rushjs new developer guide

A typical flow goes as this:

  1. Resync the respository using: git pull
  2. Checkout out a new branch git checkout -b feature/<branch-name>
  3. Update dependencies: rush update
  4. Perform your code modifications.
  5. Commit your changes using git commit.
  6. Version and add changelogs by answering the questions from the command rush change
  7. Include the generated files under /common/change folder in the commit
  8. Commit your changelogs and version changes by using git commit.
  9. Open a pull request from your branch into master.
  10. Once a codeowner has approved your changes and all required checks have passed merge your pull request.

Setting up a new package​

To simplify the process of creating new packages we have made a rush auto-installer command, rush init-package. This can easily be used by running:

rush init-package

This command will ask you a series of questions and setup a typescript package that will be built without any need for modifications.

After that, run

rush update
rush rebuild

If you use the package as a component in the storybook, run the following command

cd apps/storybook && rush add -p $COMPONENT_NAME --make-consistent
rush update
rush rebuild

if will add your package to storybook's dependencies and rebuild the project