{"id":22671400,"url":"https://github.com/cloudforet-io/mirinae","last_synced_at":"2025-04-12T12:22:48.621Z","repository":{"id":58835901,"uuid":"532701560","full_name":"cloudforet-io/mirinae","owner":"cloudforet-io","description":"Design System for Cloudforet","archived":false,"fork":false,"pushed_at":"2023-07-19T22:01:54.000Z","size":65166,"stargazers_count":19,"open_issues_count":12,"forks_count":9,"subscribers_count":6,"default_branch":"beta","last_synced_at":"2025-03-26T07:04:23.203Z","etag":null,"topics":["design-system","frontend","vue"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudforet-io.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-05T01:17:10.000Z","updated_at":"2024-07-16T02:15:22.000Z","dependencies_parsed_at":"2022-09-08T18:31:17.794Z","dependency_job_id":null,"html_url":"https://github.com/cloudforet-io/mirinae","commit_stats":null,"previous_names":[],"tags_count":604,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudforet-io%2Fmirinae","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudforet-io%2Fmirinae/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudforet-io%2Fmirinae/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudforet-io%2Fmirinae/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudforet-io","download_url":"https://codeload.github.com/cloudforet-io/mirinae/tar.gz/refs/heads/beta","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248557847,"owners_count":21124168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-system","frontend","vue"],"created_at":"2024-12-09T16:14:54.212Z","updated_at":"2025-04-12T12:22:48.595Z","avatar_url":"https://github.com/cloudforet-io.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eMirinae - Cloudforet Design System\u003c/h1\u003e  \n\n\u003cbr/\u003e\n\n\u003cdiv align=\"center\" style=\"display:flex; flex-direction: column;\"\u003e\n    \u003cdiv\u003e\n        \u003cimg width=\"245\" src=\"https://user-images.githubusercontent.com/35549653/76694897-de236300-66bb-11ea-9ace-b9edde9c12da.png\"\u003e\n    \u003c/div\u003e\n\u003cbr/\u003e\n\u003cdiv\u003e\n\u003ca  href=\"https://www.apache.org/licenses/LICENSE-2.0\"  target=\"_blank\"\u003e  \n\u003cimg  alt=\"License: Apache 2.0\"  src=\"https://img.shields.io/badge/License-Apache 2.0-yellow.svg\"  /\u003e  \n\u003c/a\u003e \n\u003ca href=\"https://storybook.developer.spaceone.dev/\"  target=\"_blank\"\u003e  \n    \u003cimg alt=\"mirinae storybook\" src=\"https://img.shields.io/badge/Design System-SpaceOne-blueviolet.svg?logo=storybook\" /\u003e  \n\u003c/a\u003e \n\u003c/div\u003e\n\n\u003c/div\u003e  \n\n  \n    \n \n\n  \n\n\u003cbr/\u003e\n\n[![](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)\n\n\n\u003cbr/\u003e\n\n## 🧩 Mirinae Design System  \n[Mirinae Storybook](http://storybook.developer.spaceone.dev/)  \n\n\u003cbr/\u003e \n\u003cbr/\u003e\n\n## 👨‍👩‍👧 Author\n\nSee our [OWNERS](https://github.com/cloudforet-io/mirinae/blob/master/AUTHORS) file.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## 📝 License\n\nThis project is [Apache 2.0](https://www.apache.org/licenses/LICENSE-2.0) licensed.\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n### Chart License\nMirinae design system internally uses amCharts for Dynamic Chart. \u003cbr/\u003e\nBefore using the design system, look carefully at amCharts' license. \u003cbr/\u003e\nIf you want to purchase the amCharts license that suits you and use it on your application,\nsee the license FAQ.\n\nhttps://www.amcharts.com/online-store/licenses-explained/\n\n## How to Use\n\n\n### 1. Install\n\n```shell\nnpm install @spaceone/design-system vue vue-router vue-i18n vue-fragment @amcharts\n```\n\n### 2. Set plugin\n   \nAdd following lines to ```main.js``` file. \u003cbr/\u003e\n\n```javascript\nimport MirinaeDesignSystem from '@spaceone/design-system';\n\nVue.use(MirinaeDesignSystem, pluginOptions);\n```\n\n#### Plugin Options\n\n| Option | Description |\n| --- | ---- |\n| 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. |\n| 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. |\n| 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. |\n| amchartsLicenses | If you use the amcharts library such as Dynamic Chart, license the amcharts as a string array. |\n\n```typescript\ninterface MirinaeDSOptions {\n    installVueRouter?: boolean;\n    installVueI18n?: boolean;\n    installFragment?: boolean;\n    amchartsLicenses?: string[];\n}\n```\n\n### 3. Set components locally\n\nExample: \n\n```javascript\nimport { PButtonTab, PDynamicLayout } from '@spaceone/design-system';\n\nexport default {\n    components: {\n        PButtonTab,\n        PDynamicLayout,\n    },\n    ...\n}\n```\n\n\u003cbr/\u003e\n\n## How to Apply Styles\n\nMirinae Design System is based on Tailwindcss.\u003cbr/\u003e\n\n### Global Styles\n\n#### Case 1. All styles\nIf your project doesn't use tailwindcss, add the code below to ```main.ts```.\n\n```javascript\nimport '@spaceone/design-system/dist/css/style.css';\nimport '@spaceone/design-system/dist/style.css';\n```\n\n### Case 2. Without tailwindcss styles\nIf your project use tailwindcss, you don't need to import all styles. \u003cbr/\u003e\nIn that case, add codes below to your ```tailwind.config.js```.\n\n```javascript\nconst mirinaeTailwind = require('@spaceone/design-system/tailwind.config.js')\n\nmodule.exports = {\n    theme: {\n        ...mirinaeTailwind.theme,\n        // your customized theme\n    },\n    variants: [...mirinaeTailwind.variants, \n    //your customized variants \n    ],\n    plugins: [\n        ...mirinaeTailwind.plugins,\n        //your customized plugins \n    ]\n}\n```\n\nAlso, you need to add codes below to your ```main.js```.\n\n```javascript\nimport '@spaceone/design-system/dist/css/light-style.css';\nimport '@spaceone/design-system/dist/style.css';\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudforet-io%2Fmirinae","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudforet-io%2Fmirinae","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudforet-io%2Fmirinae/lists"}