npm package: @sulmoj/mirinae
Description: Mirinae - Design System for Multi Cloud Management Platform, Cloudforet
Author: sulmojjj
Latest version: 2.0.0-dev125

<h1 align="center">Mirinae - Cloudforet Design System</h1>  

<br/>

<div align="center" style="display:flex; flex-direction: column;">
    <div>
        <img width="245" src="https://user-images.githubusercontent.com/35549653/76694897-de236300-66bb-11ea-9ace-b9edde9c12da.png">
    </div>
<br/>
<div>
<a  href="https://www.apache.org/licenses/LICENSE-2.0"  target="_blank">  
<img  alt="License: Apache 2.0"  src="https://img.shields.io/badge/License-Apache 2.0-yellow.svg"  />  
</a> 
<a href="https://storybook.developer.spaceone.dev/"  target="_blank">  
    <img alt="mirinae storybook" src="https://img.shields.io/badge/Design System-SpaceOne-blueviolet.svg?logo=storybook" />  
</a> 
</div>

</div>  

  
    
 

  

<br/>

[![](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/images/0)](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/0)[![](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/images/1)](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/1)[![](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/images/2)](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/2)[![](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/images/3)](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/3)[![](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/images/4)](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/4)[![](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/images/5)](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/5)[![](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/images/6)](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/6)[![](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/images/7)](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/7)


<br/>

## 🧩 Mirinae Design System  
[Mirinae Storybook](http://storybook.developer.spaceone.dev/)  

<br/> 
<br/>

## 👨‍👩‍👧 Author

See our [OWNERS](https://github.com/cloudforet-io/mirinae/blob/master/AUTHORS) file.

<br/>
<br/>

## 📝 License

This project is [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0) licensed.

<br/>
<br/>

### Chart License
Mirinae design system internally uses amCharts for Dynamic Chart. <br/>
Before using the design system, look carefully at amCharts' license. <br/>
If you want to purchase the amCharts license that suits you and use it on your application,
see the license FAQ.

https://www.amcharts.com/online-store/licenses-explained/

## How to Use


### 1. Install

```shell
npm install @cloudforet/mirinae vue vue-router vue-fragment
```
You need to use `vue-router` plug-in in your project to use several components that have dependencies with these plug-ins.

### 2. Set plugin
   
Add following lines to ```main.js``` file. <br/>

```javascript
import MirinaeDesignSystem from '@cloudforet/mirinae';

Vue.use(MirinaeDesignSystem, pluginOptions);
```

#### Plugin Options

| Option                 | Description                                                                                                                                                                   |
|------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| vueI18n                | Whether to set your Vue I18n configs. If you use Vue I18n and want to use your Vue I18n configs, give your Vue I18n to this option. In Mirinae, some components use Vue I18n. |
| installFragment        | Whether to install Vue Fragment. Some components use Vue Fragment, so don't give this option if you have already installed it in your application.                            |

```typescript
interface MirinaeDSOptions {
    vueI18n?: VueI18n;
    installFragment?: boolean;
}
```

### 3. Set components locally

Example: 

```javascript
import { PButtonTab, PDynamicLayout } from '@cloudforet/mirinae';

export default {
    components: {
        PButtonTab,
        PDynamicLayout,
    },
    ...
}
```

### Components with dependencies
These components require plug-ins `vue-router` and `vue-i18n` installed in your project to function fully. If these plug-ins are not installed, it may not work as intended.

| Plug-in          | Components                            |
|------------------|---------------------------------------|
| Vue Router       | - `PLink` <br/> - `PBreadcrumbs`      |


<br/>

## How to Apply Styles

Mirinae Design System is based on Tailwindcss.<br/>

### Global Styles

#### Case 1. All styles
If your project doesn't use tailwindcss, add the code below to ```main.ts```.

```javascript
import '@cloudforet/mirinae/css/style.css';
import '@cloudforet/mirinae/dist/style.css';
```

### Case 2. Without tailwindcss styles
If your project use tailwindcss, you don't need to import all styles. <br/>
In that case, add codes below to your ```tailwind.config.js```.

```javascript
const mirinaeTailwind = require('@cloudforet/mirinae/tailwind.config.js')

module.exports = {
    theme: {
        ...mirinaeTailwind.theme,
        // your customized theme
    },
    variants: [...mirinaeTailwind.variants, 
    //your customized variants 
    ],
    plugins: [
        ...mirinaeTailwind.plugins,
        //your customized plugins 
    ]
}
```

Also, you need to add codes below to your ```main.js```.

```javascript
import '@cloudforet/mirinae/css/light-style.css';
import '@cloudforet/mirinae/dist/style.css';
```