Mirinae - Cloudforet Design System

🧩 Mirinae Design System

Mirinae Storybook

👨‍👩‍👧 Author

See our OWNERS file.

📝 License

This project is Apache 2.0 licensed.

Chart License

Mirinae design system internally uses amCharts for Dynamic Chart.
Before using the design system, look carefully at amCharts' license.
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

npm install @spaceone/design-system vue vue-router vue-i18n vue-fragment @amcharts

2. Set plugin

Add following lines to main.js file.

import MirinaeDesignSystem from '@spaceone/design-system';

Vue.use(MirinaeDesignSystem, pluginOptions);

Plugin Options

Option	Description
installVueRouter	Whether to install Vue Router. Some components use Vue Router, so don't give this option if you have already installed it in your application.
installVueI18n	Whether to install Vue I18n. Some components use Vue I18n, so don't give this option if you have already installed it in your application.
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.
amchartsLicenses	If you use the amcharts library such as Dynamic Chart, license the amcharts as a string array.

interface MirinaeDSOptions {
    installVueRouter?: boolean;
    installVueI18n?: boolean;
    installFragment?: boolean;
    amchartsLicenses?: string[];
}

3. Set components locally

Example:

import { PButtonTab, PDynamicLayout } from '@spaceone/design-system';

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

How to Apply Styles

Mirinae Design System is based on Tailwindcss.

Global Styles

Case 1. All styles

If your project doesn't use tailwindcss, add the code below to main.ts.

import '@spaceone/design-system/dist/css/style.css';
import '@spaceone/design-system/dist/style.css';

Case 2. Without tailwindcss styles

If your project use tailwindcss, you don't need to import all styles.
In that case, add codes below to your tailwind.config.js.

const mirinaeTailwind = require('@spaceone/design-system/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.

import '@spaceone/design-system/dist/css/light-style.css';
import '@spaceone/design-system/dist/style.css';

cloudforet-io/mirinae