0.0.26 • Published 4 years ago

@bigpicturemedical/medkit-ts v0.0.26

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

MedKit | Design System

Legends

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.
  1. Install plugins :
	yarn add zeplin-cli-connect-plugin-vue --dev
	yarn add @zeplin/cli-connect-storybook-plugin --dev
  1. Setup configuration file at root level in .zeplin folder
  2. add Component Links :

{
	"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:

0.0.26

4 years ago

0.0.25

4 years ago

0.0.24

4 years ago

0.0.23

4 years ago

0.0.22

4 years ago

0.0.21

4 years ago

0.0.20

4 years ago

0.0.19

4 years ago

0.0.17

4 years ago

0.0.18

4 years ago

0.0.16

4 years ago

0.0.15

4 years ago

0.0.13

4 years ago

0.0.14

4 years ago

0.0.11

4 years ago

0.0.12

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.5

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago