README

Vasui UI adalah perpustakaan komponen UI dasar dan token desain yang ringan, modular, dan modern yang dirancang menggunakan Vanilla HTML, CSS, dan JS.

Proyek ini sangat fleksibel dan siap didistribusikan via NPM (untuk proyek frontend berbasis JS/Webpack/Vite) maupun Composer (untuk proyek berbasis PHP/Laravel).

Fitur Utama

Zero Dependencies: Tidak bergantung pada framework CSS/JS tertentu (seperti Tailwind atau React).
Design Tokens: Variabel CSS bawaan untuk warna, tipografi, bayangan, sudut lengkung, dan jarak yang konsisten.
Dark Mode Support: Cukup gunakan atribut data-theme="dark" pada tag <html> atau <body>.
Integrasi Mudah: Siap digunakan langsung di Laravel, HTML statis, WordPress, dll.

📦 Panduan Instalasi

1. Menggunakan NPM

Install package ke proyek frontend Anda:

npm install vasui-ui-design

Catatan: Selama pengembangan lokal sebelum dipublish ke NPM registry, Anda bisa menginstall dari path direktori lokal:

npm install /path/to/ui-design

Integrasi Aset:

Import CSS dan JS ke file entrypoint Anda (misalnya di Vite atau Webpack):

// Di file JS utama Anda (e.g., app.js)
import 'vasui-ui-design/dist/tokens.css';
import 'vasui-ui-design/dist/components.css';
import 'vasui-ui-design/dist/components.js';

2. Menggunakan Composer (PHP / Laravel)

Jika ingin memanggilnya di proyek Laravel Anda, tambahkan package lokal ini ke file composer.json proyek Laravel Anda:

"repositories": [
    {
        "type": "path",
        "url": "../ui-design"
    }
]

Kemudian jalankan:

composer require vasui/ui-design

Publish Aset ke Laravel:

Setelah di-install via Composer, publikasikan aset CSS dan JS statis ke direktori public/ Laravel Anda dengan menjalankan perintah artisan berikut:

php artisan vendor:publish --tag=vasui-ui-assets

Aset akan disalin ke folder public/vendor/vasui/ dan siap dipanggil di layout Blade Anda:

<link rel="stylesheet" href="{{ asset('vendor/vasui/tokens.css') }}">
<link rel="stylesheet" href="{{ asset('vendor/vasui/components.css') }}">
<script src="{{ asset('vendor/vasui/components.js') }}" defer></script>

🛠️ Panduan Penggunaan Komponen

1. Buttons

Gunakan class .btn yang dipadukan dengan varian warna dan ukuran.

<!-- Variants -->
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-outline">Outline Button</button>
<button class="btn btn-ghost">Ghost Button</button>

<!-- Sizes -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-md">Medium (Default)</button>
<button class="btn btn-primary btn-lg">Large</button>

<!-- States -->
<button class="btn btn-primary" disabled>Disabled</button>
<button class="btn btn-primary btn-loading">Loading</button>

2. Forms & Inputs

Mendukung input teks standar, drop-down select, checkbox, dan radio button.

Text Input:

<div class="form-group">
  <label class="form-label" for="username">Username</label>
  <input type="text" id="username" class="input-text" placeholder="Masukkan username...">
  <span class="form-helper">Username minimal 5 karakter.</span>
</div>

<!-- Input Error State -->
<div class="form-group">
  <label class="form-label" for="email">Email</label>
  <input type="email" id="email" class="input-text input-error" value="format-salah">
  <span class="form-helper error-text">Format email salah.</span>
</div>

Select Dropdown:

<div class="form-group">
  <label class="form-label" for="role">Role</label>
  <div class="select-wrapper">
    <select id="role" class="select">
      <option value="" disabled selected>Pilih salah satu role...</option>
      <option value="admin">Admin</option>
      <option value="user">User</option>
    </select>
  </div>
</div>

Checkbox & Radio:

<!-- Checkbox -->
<label class="checkbox-label">
  <input type="checkbox" checked>
  <span class="checkbox-custom"></span>
  Ingat saya
</label>

<!-- Radio Button -->
<label class="radio-label">
  <input type="radio" name="payment" checked>
  <span class="radio-custom"></span>
  Transfer Bank
</label>

3. Modal Dialog

Kontrol buka/tutup modal secara instan via global JS helper UI.modal.

<!-- Trigger Button -->
<button class="btn btn-primary" onclick="UI.modal.open('my-modal')">Buka Modal</button>

<!-- Modal Container -->
<div id="my-modal" class="modal-overlay">
  <div class="modal">
    <div class="modal-header">
      <h3 class="modal-title">Judul Modal</h3>
      <button class="modal-close">&times;</button>
    </div>
    <div class="modal-body">
      <p>Konten atau formulir di dalam modal...</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary" onclick="UI.modal.close('my-modal')">Batal</button>
      <button class="btn btn-primary" onclick="alert('Aksi dikonfirmasi!'); UI.modal.close('my-modal')">Konfirmasi</button>
    </div>
  </div>
</div>

4. Alert (Pesan Umpan Balik)

Mendukung penutupan alert secara otomatis lewat tombol close.

<div class="alert alert-success">
  <span class="alert-icon">✓</span>
  <div class="alert-content">
    <h5 class="alert-title">Berhasil!</h5>
    <p class="alert-description">Data merchant telah disimpan.</p>
  </div>
  <button class="alert-close">&times;</button>
</div>

Pilihan varian alert: alert-info, alert-success, alert-warning, alert-danger.

5. Data Tables

Tabel data responsif dengan efek striped dan hover.

<div class="table-container">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Budi Santoso</td>
        <td>Aktif</td>
      </tr>
    </tbody>
  </table>
</div>

6. Cards

<div class="card card-hover">
  <div class="card-header">
    <h4 class="card-title">Judul Kartu</h4>
  </div>
  <div class="card-body">
    <p>Konten kartu...</p>
  </div>
  <div class="card-footer">
    <span>Footer info</span>
  </div>
</div>

🎨 Kustomisasi Design Tokens

Anda bisa dengan mudah menimpa (override) token warna, font, shadow, dll pada file CSS utama Anda menggunakan CSS variables:

:root {
  /* Override font default */
  --font-sans: 'Inter', sans-serif;
  
  /* Ganti warna utama brand Anda */
  --color-primary-500: #e02424; /* Merah */
  --color-primary-600: #c81e1e;
}

Lisensi

Proyek ini didistribusikan di bawah lisensi MIT.

vasui/ui-design

包简介

README 文档