gstvribs / monorepo-angular-component-library

This is a proof of concept of a monorepo structure for angular components and design tokens specially designed for design systems

The Design System

This is a proof of concept of a monorepo structure for serving angular components and design tokens

Getting started

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

Setup

Local setup to run this project locally

Tools:

• Node version 10.20.1
  • If you use nvm just run the command nvm use in the root folder

Configuration

• 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

Configure this project and how to install them at your project

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/

Installing components

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

Installing tokens

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"
]