design-system-boilerplate

Design system boilerplate for monorepo lerna + yarn workspace setup.

Contains the following modules:

Package name	Description
vue-ui-components	Themable UI components built with vue2 + typescript
icons	design-system icon font stylesheets
typography	Fonts file and font-face definitions for design-system brand font
themes	Theme tokens available in design System, like --primary-color

Features

• Typescript + Vue2
• Lerna + yarn workspace monorepo structure
• Auto-documentation by storybook
• Custom theming support by CSS variables

Getting Started

yarn install
npm run bootstrap

Build all packages

npm run build

Start storybook

npm run start

How to publish

(First time only): If you want to use private npm repository, add the following in your .npmrc:

registry=YOUR_NPM_REPO_URL
//YOUR_NPM_REPO_URL:_authToken=[SOMETOKEN]
always-auth=true
strict-ssl=false

Commit all changes and execute the following:

npm run publish

This does the following:

• bump package versions
• create a release commit
• push the tag to remote origin

Please follow the semver methodology when deciding the version number - this is important to avoid introducing unexpected breaking change on library consumer.

Other options

Generate changelog and skip publish

lerna version --conventional-commits

Resources & Reference

• IBM carbon design system
• Github design system
• Atlasian design system
• Material design guide
• good interview