This is a proof of concept of a monorepo structure for serving angular components and design tokens
This is a monorepo repository using Lerna, Commitzen and Conventional Commits to maintain and manage component versions and for documentation, we use Storybook and Compodoc, you can access by clicking here
List of packages containing in this repository:
Name of package | Description |
---|---|
@thedesignsystem/components |
Angular components with each package.json file |
@thedesignsystem/tokens |
Design language elements like: colors, typography, iconography and more |
Local setup to run this project locally
- Node version 10.20.1
- If you use nvm just run the command
nvm use
in the root folder
- If you use nvm just run the command
- Install all the dependencies:
npm i
- Build all the components:
npm run build
- You can see the components of this repo by running one of these two projects:
- Angular Playground by running
npm run playground
- Storybook by running
npm run start:storybook
- Angular Playground by running
First of all, your repository needs to be looking at the npm private repository, for that, create a .npmrc
file at the root of your project and add the private repository:
registry = https://registry.npmjs.org/
@thedesignsystem:registry=http://localhost:4873/
All components in this repository are installed separately, that is, each component has its own npm package, for example if you want to install the button component:
npm i @thedesignsystem/button
This repository has a monorepo that gives you all the tokens of Design System's design language, styles and elements such as: colors, typography, elevations, embroidery, etc. To install just install the package in your repository:
npm i @thedesignsystem/tokens
In angular.json
at styles
node add the global scss
file.
"styles": [
"node_modules/@thedesignsystem/tokens/bundle/bundle-hard.scss"
]