Install for development
- node v18+
To install node:
Please follow this guide
To install yarn :
npm i -g yarn
Note about the project architecture
The project use a monorepo architecture using lerna. Lerna help us to manage the distribution and the versioning of multiple packages into the same repository. It also create symlink between the individual packages nodes_modules so they can be used in one another as npm dependencies.
When releasing the design system, lerna will automatically generate changelogs for the global/parent repo, as well as for the individual packages and select a version number based on the commit syntax. It's why it is very important that you follow the contributing guidelines.
Please read the docs to learn more about it.
Clone the repo and start the development environment
Clone the repo :
git clone firstname.lastname@example.org:adeo/mozaic-design-system.git
Move to the repo :
Install dependencies and create symlink between packages :
Add a github personal access tokens :
follow those instruction and select
repo as a scope for you personal access token.
Copy your token in your clipboard
.env file at the root of the project and add the following (replacing XXX by your token):
Lunch the dev server :
Targeting compillation of selected previews directory
Compiling previews take a long time, and most of the time you need only to compile the previews you are working on.
To target only previews contained in a directory, add a preview parameter to the develop command containing a path relative to
yarn develop previews=Components/Buttons
Lint and fix your css files using stylelint
Please note that stylelint is not able to fix everything, so run
and make the required changes.
lint are run at pre-commit, so you can't commit uggly stuffs ;).
Create a production build :
If you want more explanation, please go to the related wiki page.
Each branch is deployed when creating a Pull Request. A
view deployment button is displayed into the Pull Request's timeline at the bottom.