Kompas UI Library

Kompas UI Library merupakan komponen terpusat yang di peruntukan proyek Harian Kompas.

Instal

Untuk memulai membuat komponen, perlu dilakukan kloning dan pemasangan proyek dengan versi yang di sarankan:

// versi node >= v20.12.2
git clone [email protected]:pt-kompas-media-nusantara/kompas-ui-library.git

Lalu untuk memasang proyek di lokal, jalankan npm install.

npm install

Penggunaan

Jalankan ini untuk memulai pengembangan komponen yang berjalan di App.vue:

npm run dev

Jalankan ini untuk pengembangan dengan implementasi komponen di storybook:

// Disarankan membuat file storybook terkait dengan format namakomponen.stories.ts di folder yang sama
npm run storybook

Note

• Untuk menyematkan hasil komponen yang sudah di buat, dapat di deklarasikan di src\index.ts sebelum dipublish ke npm
• Class di tailwind ditambahkan prefix kul- agar tidak tabrakan dengan style tailwind di proyek yang di sematkan hasil package ini
• Disarankan untuk style yang disematkan dimasukan ke <style module scoped>

Lint

Untuk pengecekan format penulisan jalankan:

npm run lint

Implementasi hasil package

Pasang package hasil build npm di proyek lokal:

// https://www.npmjs.com/package/@kompasid/ui-library
npm i @kompasid/ui-library

Lalu buat plugin di proyek seperti ini untuk secara otomatis import komponen:

import UiLibrary from '@kompasid/ui-library'
import '@kompasid/ui-library/dist/style.css'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(UiLibrary)
})