@bigpicturemedical/medkit-ts v0.0.26

MedKit | Design System

Legends

• Installation
• Design Tokens
• NPM Package
• Style Dictionary
• Storybook
• Zeplin Integration
• Spin it up

Installation

### dependencies
yarn

### Run Unit Tests
yarn test:unit

Design Tokens

### build
yarn style-dictionary:build

### build npm package
yarn build:all

### publish npm package
 npm login
 ...
yarn publish:npm

External Use

Install npm package:

yarn add @bigpicturemedical/medkit-ts

Add SCSS Tokens into Vue istance:

### create/modify vue.config.js at root level
...
css: {
	loaderOptions: {
	sass: {
		additionalData: `@import "@bigpicturemedical/medkit-ts/build/tokens/style.scss";`,
	},
	},
}

Import static CSS (fonts) at main level:

import "@bigpicturemedical/medkit-ts/dist/medkit.esm.css";

Storybook

yarn storybook:serve

Zeplin

1. Install vscode Zeplin Extension || @zeplin/cli

• Connect Zeplin with your editor
• Copy your CLI - Token into your .env file.

2. Install plugins :

	yarn add zeplin-cli-connect-plugin-vue --dev
	yarn add @zeplin/cli-connect-storybook-plugin --dev

3. Setup configuration file at root level in .zeplin folder

4. add Component Links :

   • path: src/lib-components/Component.vue

   • zeplinNames: 'Component Name Used in Zeplin App'

{
	"plugins": [
    {
      "name": "zeplin-cli-connect-plugin-vue"
		},
		{
			"name": "@zeplin/cli-connect-storybook-plugin",
			"config": {
					"url": "http://localhost:6006",
					"startScript": "storybook:serve",
					"useDocsPage": true
			}
		}
  	],
    "projects": [],
    "styleguides": [
        "< zeplin-project-uniqueId >"
    ],
    "components": [
		{
			"path": "...",
			"zeplinNames": ["..."]
		}
	]
}

For any details please follow

Usage

yarn serve

Style Dictionary

This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can cd into this directory and run:

style-dictionary build

You should see something like this output:

Copying starter files...

Source style dictionary starter files created!

Running `style-dictionary build` for the first time to generate build artifacts:

scss
✔︎  build/tokens/scss
css
✔︎  build/tokens/css
icons
✔︎  build/tokens/icons
json
✔︎  build/tokens/json

TODO LIST:

• Snapshots (Percy)
• Documentation (VuePres)
• Build NPM Package
• CI/CD Publish an NPM package