mrv-design-system

Introduction

mrv-design-system is a library built to help developers and designers to create consistent, beautiful and accessible digital products

How to use

For learning how to use the library, please check the docs: https://eloquent-ardinghelli-8232c7.netlify.com/

Development guide

Setup

Install all the dependencies with yarn install. You can use Storybook to test the components in real time when developing them by running yarn storybook.

Building

To completely build the lib, run the yarn prepare command.

Testing

The visual tests use Docker to run, so you will need it in order to run all the tests of the project.

• To run all the tests, run yarn test.
• To run the Jest tests, run yarn test:jest.
• To run the visual tests, run yarn test:visual.

When a visual change is created (due to spacing, colors, new components, etc), you need to run the visual tests to create the new snapshots and run yarn backstop:approve to approve the new visual changes. More info about BackstopJS can be checked here: https://github.com/garris/BackstopJS

Locally testing the library

To test the library with a local project (target project), we recommend using the library yalc: you can install it globally with npm i -g yalc.

After doing the changes you want, publish (this is a local publish) the library with yalc publish and install it in the target project with yalc add mrv-design-system.

If you installed some dependency in the library, you will need to update the dependencies in your target project (yarn install) after running yalc add.