🌟 Fitur Utama

• Khusus Angular Modern: Komponen dibangun menggunakan fitur terbaru Angular seperti Control Flow, Standalone Components, dan Signals.
• Berbasis Tailwind CSS v4: Mudah dikustomisasi menggunakan utilitas Tailwind CSS langsung di template.
• Ringan & Cepat: Tidak bergantung pada library berat—hanya menggunakan set ikon Tabler Icons sebagai dependensi opsional.
• Aksesibilitas Terjaga: Mendukung efek hover, focus, dan indikator disabled secara konsisten di semua komponen.

🚀 Instalasi

npm install @rizwangustama/exp-library-ui

Persiapan Dependensi

1. Install Tabler Icons & Tailwind CSS (jika belum ada):

npm install @tabler/icons-webfont tailwindcss

2. Tambahkan ke file global styles aplikasi Anda (styles.css):

/* Import Tabler Icons */
@import '@tabler/icons-webfont/dist/tabler-icons.min.css';

/* Import Tailwind CSS */
@import 'tailwindcss';

/* Agar Tailwind dapat memindai style dari library ini */
@source '../node_modules/@rizwangustama/exp-library-ui';

📦 Komponen Tersedia

| Komponen | Selector | Deskripsi | |---|---|---| | ExpButton | <exp-button> | Tombol dengan berbagai varian (primary, secondary, danger, ghost) dan ukuran (sm, md, lg) | | ExpInput | <exp-input> | Input teks dengan dukungan tipe text, email, password, number, serta ikon di kiri/kanan | | ExpCheckbox | <exp-checkbox> | Kotak centang dengan two-way binding | | ExpRadio | <exp-radio> | Tombol pilihan dalam satu grup | | ExpSelect | <exp-select> | Dropdown canggih: searchable, multi-select, dan kustom ng-template | | ExpTable | <exp-table> | Tabel data dinamis yang sederhana dan modern | | ExpIcon | <exp-icon> | Wrapper ikon Tabler Icons dengan ukuran yang dapat dikustomisasi |

💻 Panduan Penggunaan

Import komponen yang dibutuhkan langsung di komponen standalone Anda:

import { ExpButton, ExpInput, ExpSelect } from '@rizwangustama/exp-library-ui';

@Component({
  imports: [ExpButton, ExpInput, ExpSelect],
  ...
})
export class MyComponent {}

Button

<exp-button variant="primary" size="lg">Simpan Data</exp-button>
<exp-button variant="secondary" size="md">Batal</exp-button>
<exp-button variant="danger" size="sm">Hapus</exp-button>
<exp-button variant="ghost">Selengkapnya</exp-button>

Input (dengan Icon)

<exp-input type="email" placeholder="Alamat Email" iconPosition="left">
  <exp-icon icon name="mail" size="lg"></exp-icon>
</exp-input>

<exp-input type="password" placeholder="Kata Sandi" iconPosition="right">
  <exp-icon icon name="lock" size="lg"></exp-icon>
</exp-input>

Checkbox & Radio

<exp-checkbox [(checked)]="isAgreed">Saya setuju dengan syarat & ketentuan</exp-checkbox>

<exp-radio name="gender" value="pria" [(selectedValue)]="gender">Pria</exp-radio>
<exp-radio name="gender" value="wanita" [(selectedValue)]="gender">Wanita</exp-radio>

Select (Multi-select & Searchable)

<exp-select
  [options]="cityList"
  bindLabel="name"
  bindValue="id"
  [searchable]="true"
  [multiple]="true"
  placeholder="Pilih Kota..."
  [(value)]="selectedCities">
</exp-select>

Table

// Di dalam class komponen
columns = [
  { field: 'id', header: 'ID' },
  { field: 'name', header: 'Nama Lengkap' },
  { field: 'email', header: 'Email' },
];
data = [
  { id: 1, name: 'Budi Santoso', email: '[email protected]' },
  { id: 2, name: 'Siti Aminah', email: '[email protected]' },
];

<exp-table [columns]="columns" [data]="data"></exp-table>

Icon

Mendukung ukuran standar (xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl) maupun kelas Tailwind kustom.

<exp-icon name="home" size="3xl" class="text-blue-500"></exp-icon>
<exp-icon name="user" size="xl"></exp-icon>
<exp-icon name="settings" size="md"></exp-icon>

🛠️ Pengembangan Library

Clone repository dan instal dependensi:

git clone https://github.com/rizwangustama/exp-library-ui.git
cd exp-library-ui
npm install

Jalankan build library dalam mode watch (perubahan otomatis ter-rebuild):

ng build exp-library-ui --watch

Uji perubahan melalui aplikasi showcase:

ng serve showcase-app

Jalankan unit test:

ng test

🔗 Tautan

• NPM Package
• GitHub Repository
• Tabler Icons
• Angular Documentation