Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cloudforet-io/mirinae
Design System for Cloudforet
https://github.com/cloudforet-io/mirinae
design-system frontend vue
Last synced: 18 days ago
JSON representation
Design System for Cloudforet
- Host: GitHub
- URL: https://github.com/cloudforet-io/mirinae
- Owner: cloudforet-io
- License: apache-2.0
- Created: 2022-09-05T01:17:10.000Z (over 2 years ago)
- Default Branch: beta
- Last Pushed: 2023-07-19T22:01:54.000Z (over 1 year ago)
- Last Synced: 2024-11-19T02:15:15.747Z (about 1 month ago)
- Topics: design-system, frontend, vue
- Language: CSS
- Homepage:
- Size: 62.1 MB
- Stars: 19
- Watchers: 6
- Forks: 9
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Mirinae - Cloudforet Design System
[](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/0)[](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/1)[](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/2)[](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/3)[](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/4)[](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/5)[](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/6)[](https://sourcerer.io/fame/WANZARGEN/spaceone-dev/spaceone-design-system/links/7)
## 🧩 Mirinae Design System
[Mirinae Storybook](http://storybook.developer.spaceone.dev/)
## 👨👩👧 Author
See our [OWNERS](https://github.com/cloudforet-io/mirinae/blob/master/AUTHORS) file.
## 📝 License
This project is [Apache 2.0](https://www.apache.org/licenses/LICENSE-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
```shell
npm install @spaceone/design-system vue vue-router vue-i18n vue-fragment @amcharts
```
### 2. Set plugin
Add following lines to ```main.js``` file.
```javascript
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. |
```typescript
interface MirinaeDSOptions {
installVueRouter?: boolean;
installVueI18n?: boolean;
installFragment?: boolean;
amchartsLicenses?: string[];
}
```
### 3. Set components locally
Example:
```javascript
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```.
```javascript
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```.
```javascript
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```.
```javascript
import '@spaceone/design-system/dist/css/light-style.css';
import '@spaceone/design-system/dist/style.css';
```