🎨 Tema VisualMinimalis & Konsisten: Berfokus pada kejelasan antarmuka dengan penerapan prinsip styled design pada warna, spacing, dan typography untuk menciptakan UI yang bersih dan modern.

📦 Instalasi Gunakan npm untuk menginstal library ini ke dalam proyek Anda:Bashnpm install kaff-components@latest

🚀 Penggunaan (Usage) Library ini mengembalikan objek HTML asli (HTMLElement). Untuk menggunakannya di framework modern seperti React, gunakan useRef dan appendChild untuk merender komponen ke dalam DOM.1. Implementasi Layout & NavigasiBerikut adalah contoh penggunaan komponen Navbar, Sidebar, dan Button dalam satu dashboard interaktif:JavaScript

import { useEffect, useRef, useState } from 'react'; import { Navbar, Sidebar, Button } from 'kaff-components';

function App() { const [active, setActive] = useState('dashboard'); const navRef = useRef(null); const sideRef = useRef(null); const contentRef = useRef(null);

useEffect(() => { // Render Navbar dengan Kustomisasi if (navRef.current) { navRef.current.innerHTML = ''; navRef.current.appendChild(Navbar({ brand: 'Kaff Design System', backgroundColor: '#007bff', links: [] })); }

// Render Sidebar & Logika Navigasi
if (sideRef.current) {
  sideRef.current.innerHTML = '';
  const sidebarElement = Sidebar({ 
    items: ['Button', 'Input', 'Card'],
    activeColor: '#333'
  });
  sideRef.current.appendChild(sidebarElement);

  // Event Listener untuk Navigasi Antar Komponen
  sidebarElement.querySelectorAll('div').forEach(item => {
    item.onclick = () => setActive(item.innerText.toLowerCase());
  });
}

}, []);

return ( <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}> <div style={{ display: 'flex', flex: 1 }}> <main style={{ flex: 1, padding: '20px', background: '#121212', color: 'white' }}> Preview: {active.toUpperCase()} ); }

🛠️ Komponen Tersedia (API) Library ini mendukung kustomisasi penuh melalui props pada setiap komponennya:KomponenProperti / ParameterFungsiNavbarbrand, links, backgroundColor, textColorNavigasi bar bagian atas dengan dukungan tautan.Sidebaritems, width, activeColorNavigasi samping dengan efek hover kustom.Containerchildren, maxWidth, paddingPembungkus tata letak agar konten tetap simetris di tengah.Buttontext, colorTombol aksi utama dengan berbagai varian warna.Badgelabel, colorLabel penanda status atau informasi versi.

🛡️ Keamanan & DistribusiTwo-Factor Authentication (2FA): Setiap proses publikasi ke registry npm diverifikasi menggunakan Security Key/Passkey (PIN atau Biometrik perangkat Windows) untuk menjamin keamanan kode.Semantic Versioning: Mengikuti standar penomoran versi (Major.Minor.Patch) untuk menjaga stabilitas ketergantungan antar proyek.

🏗️ Struktur Folder Proyeksrc/components/: Berisi logika utama komponen yang ditulis dalam TypeScript.dist/: Berisi file hasil kompilasi yang siap digunakan di lingkungan produksi (.js, .mjs, .d.ts).

Dibuat oleh Fillah - STIKOM PGRI Banyuwangi.