@mwahyuk/cdi-styles

💡 Apa Saja yang Ada di Dalam Package Ini?

1. Komponen IDDS Lengkap: Langsung mengekspor seluruh komponen @idds/vue (Button, Card, Modal, Table, DatePicker, Drawer, Tabs, Pagination, dll.).
2. Auto-Branded BPOM CDI: Seluruh komponen otomatis tampil dengan warna resmi BPOM CDI (Deep Navy #004285 & BPOM Green #00a651).
3. Tailwind CSS v4 & v3 Ready: Menyediakan utility class siap pakai untuk Tailwind v4 (bg-navy-900, text-bpom-green-600, border-teal-500, dll.).
4. JS/TS Design Tokens: Menyediakan konstanta palet warna untuk grafik (ApexCharts/Chart.js) dan skrip aplikasi.

📦 Instalasi

Di proyek Vue 3 Anda:

npm install @mwahyuk/cdi-styles @tabler/icons-vue

(atau via yarn/pnpm)

yarn add @mwahyuk/cdi-styles @tabler/icons-vue
pnpm add @mwahyuk/cdi-styles @tabler/icons-vue

🚀 Panduan Penggunaan

1. Impor CSS di Entry Point Aplikasi

Di file utama aplikasi Anda (src/main.ts atau src/main.js):

import { createApp } from 'vue';
import App from './App.vue';

// Cukup 1 baris import ini untuk seluruh styling IDDS + tema BPOM CDI
import '@mwahyuk/cdi-styles/index.css';

const app = createApp(App);
app.mount('#app');

2. Gunakan Komponen di Template Vue

Semua komponen IDDS dapat langsung diimpor dari @mwahyuk/cdi-styles:

<template>
  <div class="p-6 bg-navy-tint min-h-screen">
    <Card variant="basic" class="max-w-md p-6 bg-white rounded-xl border border-slate-200 shadow-xs border-t-4 border-t-navy-800">
      <h2 class="text-xl font-bold text-navy-900 mb-2">Portal Satu Data BPOM</h2>
      <p class="text-slate-600 mb-4">
        Sistem integrasi data obat dan makanan terpadu.
      </p>

      <div class="flex gap-3">
        <!-- Tombol otomatis bertema Navy BPOM -->
        <Button hierarchy="primary" size="md">
          Ajukan Akses
        </Button>
        <Button hierarchy="secondary" size="md">
          Lihat Data
        </Button>
      </div>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { Button, Card } from '@mwahyuk/cdi-styles';
</script>

3. Integrasi dengan Tailwind CSS v4

Jika Anda menggunakan Tailwind CSS v4, cukup tambahkan di src/index.css:

@import 'tailwindcss';

/* Impor IDDS & Tema BPOM CDI */
@import '@idds/styles/tailwind/css/idds.css';
@import '@mwahyuk/cdi-styles/tailwind.css';
@import '@mwahyuk/cdi-styles/index.css';

Contoh pemakaian kelas utilitas:

<div class="bg-navy-900 text-white p-6 rounded-xl border border-slate-200">
  <span class="text-xs text-teal-400 font-bold uppercase">Layanan Resmi</span>
  <h1 class="text-2xl font-bold text-white">BPOM CDI</h1>
  <button class="bg-bpom-green-600 hover:bg-bpom-green-700 text-white px-4 py-2 rounded-lg">
    Buka Portal
  </button>
</div>

4. Menggunakan Palet Warna di Chart (ApexCharts / Chart.js)

import { bpomChartPalette, bpomColors } from '@mwahyuk/cdi-styles';

// 6 Palet warna resmi BPOM untuk grafik:
// ['#004285', '#00a651', '#59b4c3', '#027368', '#8a9130', '#3f71a3']
const chartOptions = {
  colors: bpomChartPalette,
};

🎨 Tabel Token Warna Resmi BPOM CDI

| Token | Hex | Makna & Penggunaan | | :--- | :--- | :--- | | navy-900 | #00305f | Permukaan gelap institusi & background sidebar | | navy-800 | #004285 | Warna Utama BPOM (tombol primer, judul) | | navy-tint | #f4f8fb | Latar belakang halaman & kartu sejuk | | bpom-green-600 | #00a651 | Status sukses, progres, aksi afirmatif | | teal-500 | #59b4c3 | Eyebrows & tahapan data flow | | olive-600 | #8a9130 | Area of interest & kapabilitas mendatang | | maroon-700 | #a20000 | Peringatan risiko, siber & keamanan | | slate-700 | #455a64 | Body text utama | | slate-200 | #dfe5e8 | Garis tepi (borders & dividers) |

📄 Lisensi

MIT © Pusat Data dan Informasi Badan Pengawas Obat dan Makanan (BPOM).