0.0.26 • Published 4 years ago
@bigpicturemedical/medkit-ts v0.0.26
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
- Install
vscode Zeplin Extension
||@zeplin/cli
- Connect Zeplin with your editor
- Copy your CLI - Token into your
.env
file.
- Install plugins :
yarn add zeplin-cli-connect-plugin-vue --dev
yarn add @zeplin/cli-connect-storybook-plugin --dev
- Setup configuration file at root level in
.zeplin
folder 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
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