npm package: @mekari/mekari-ui-vue
Description: --- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import 
Author: Mekari
Latest version: 1.2.4

# Mekari UI Vue
---
General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import the styling from Mekari UI Toolkit on your application first before using components from Mekari UI Vue.

# Prerequisite
---
- Node (Recommended to use >= v10.0.0)
- Yarn (Recommended to use >= v1.22.0)

# Setup
---
Before running the setup, make sure to fulfill the prerequisite above. After that, the repo needed to be cloned, and then run the initial setup script. Here is the snippet:
```
git clone git@bitbucket.org:mid-kelola-indonesia/mekari-ui-vue.git
cd mekari-ui-vue
yarn
```

# Storybook
---
Mekari UI Vue uses [Storybook](https://github.com/storybookjs/storybook) to see a preview of the components and its documentation. The preview of component can be updated dynamically using option provided from control panel.

## Run Storybook
The storybook needed to be run first in order to be able to see the preview the components on Mekari UI Vue. By default, the storybook will be run on [http://localhost:6006](http://localhost:6006). Here is the snippet to run storybook on Mekari UI Vue:
```
yarn storybook
```

## Build Storybook
In some case, you need the static version of storybook so you can embed it on some other pages. This can be done using `build-storybook` command from storybook. The built code by default will be located in `/build` directory. Here is the snippet to build storybook:
```
yarn build-storybook
```

# Development
---
Sometimes, the Mekari UI Vue and Mekari UI Toolkit developed at same time. Because of that, sometimes the package version of Mekari UI Toolkit used in Mekari UI Vue on storybook from npmjs will not be the same with the current Mekari UI Toolkit that is still in development. To handle this, you can use the source of Mekari UI Toolkit to use from local machine like this:
```
//package.json

.
.
.
"dependencies": {
  "mekari-ui-toolkit": "file:/location/to/mekari-ui-toolkit",
  .
  .
  .
},
.
.
.
```


After that, make sure mekari-ui-toolkit on node_modules is using the right version. You can check it on `yarn.lock`. It will look like this:
```
//yarn.lock

.
.
.
mekari-ui-toolkit:
  version "1.0.11" -> this version is based on version in package.json
  resolved "/location/to/mekari-ui-toolkit"
.
.
.
```


Or if you really want to make sure 100% your mekari-ui-tollkit is using version from your local machine, you can run these commands on your root mekari-ui-vue directory:
```
rm -rf ./node_modules/@mekari/mekari-ui-toolkit
rm yarn.lock
yarn
```
# Further Reading
You can read more documentation on many how to in Mekari UI Vue [here](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-vue/src/master/HOWTO.md).

If you want to contribute to Mekari UI, you can read [this guide](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-vue/src/master/CONTRIBUTING.md).