Download the PHP package chandra2004/laravel-pack-ui without Composer

Laravel Pack UI

Laravel Pack UI adalah paket komponen antarmuka (UI Component Kit) dan composables enterprise-grade yang dirancang khusus untuk ekosistem Laravel + Inertia.js + Vue 3, ditenagai oleh Tailwind CSS v4 dan Google Material Symbols.

Paket ini mengadopsi filosofi headless-copy (seperti halnya Shadcn UI dan Laravel Breeze): seluruh kode komponen dipublikasikan langsung ke dalam direktori resources/js/ project Anda. Pendekatan ini memberikan kebebasan penuh bagi developer untuk menyesuaikan desain, memperluas fitur, dan menikmati performa tanpa beban runtime wrapper tambahan.

🌟 Mengapa Memilih Laravel Pack UI?

• 🚀 Smart Auto-Installer: Mendeteksi secara cerdas apakah project Anda sudah memiliki Vue 3, Inertia.js, Ziggy Router, Tailwind v4, atau Google Icons, dan otomatis mengonfigurasinya dari nol jika belum tersedia.
• 🧭 Ziggy Router Terintegrasi: Pemasangan otomatis tightenco/ziggy dan ziggy-js lengkap dengan penyuntikan directive @routes pada blade dan plugin ZiggyVue pada Vue entrypoint (route('nama.rute')).
• 🎨 Desain Modern & Konsisten: Standar border-radius harmonis (rounded-xl untuk input dan rounded-2xl untuk card/dialog), shadow lembut (shadow-2xs), serta tipografi Google Material Symbols.
• 🔒 Sistem Form & Validasi Tangguh: InputField.vue universal mencakup 10+ tipe input (email regex, phone auto-hyphen, currency mask Rp 1.500.000, 4-tahap password strength meter, autocomplete search).
• 📁 Rich File Upload & Lightbox: Mendukung 4 varian unggah berkas (avatar, dropzone hero, grid galeri multi-foto, dan list tabel dokumen) lengkap dengan pembersih memory leak blob dan modal preview resolusi penuh.
• ⚡ Kompatibel Penuh Tailwind CSS v4: Menggunakan engine performa tinggi @tailwindcss/vite dengan konfigurasi dark mode instan @custom-variant dark.
• 🌓 Manajemen Tema Bawaan: Composable useTheme terintegrasi dengan ButtonTheme.vue yang mendukung mode Terang, Gelap, dan Sinkronisasi Preferensi OS (System).

📦 Komponen & Composables yang Disediakan

🧩 Composables (State Helpers)

• useUnsavedChanges.js – Pelindung navigasi formulir ganda (pencegah penutupan tab/browser beforeunload dan pencegat rute Inertia SPA) dengan modal konfirmasi ConfirmDialog.vue. Dokumentasi Lengkap →
• useAutoSave.js – State helper penyimpanan formulir otomatis di latar belakang dengan dirty-checking cerdas, timer debounce, batas kedaluwarsa draf, dan pemulihan draf lokal/remote. Dokumentasi Lengkap →
• useCart.js – State manager keranjang belanja global singleton dengan kalkulasi otomatis subtotal/diskon voucher/pajak PPN/ongkir, persistensi ganda localStorage, dan sinkronisasi drawer. Dokumentasi Lengkap →
• useOfflineSync.js – Antrean mutasi data saat pengguna offline (Outbox Pattern) berbasis IndexedDB + auto fallback localStorage dengan sinkronisasi otomatis dan exponential retry. Dokumentasi Lengkap →
• useScrollProgress.js – Helper pelacakan progres scroll reaktif (window maupun kontainer elemen lokal) dengan kalkulasi sisa waktu baca, status ambang atas, dan fungsi scroll mulus kembali ke atas (scrollToTop).
• useClipboard.js – Helper penyalinan teks ke clipboard dengan status copied reaktif dan fallback legacy browser.
• useDebounce.js – Pengontrol jeda eksekusi fungsi berat, debounce form pencarian realtime, dan auto-save draft.
• useThrottle.js – Pembatas frekuensi eksekusi fungsi (rate limiting) untuk event window scroll, resize, dan pencegahan spam klik.
• useExportTable.js – Ekspor array data tabel ke format CSV (BOM UTF-8 siap Microsoft Excel), format JSON, atau cetak dokumen terisolasi.
• useInitials.js – Helper ekstraksi inisial nama reaktif (pembersihan gelar, email parser, multi-kata) terintegrasi pembuatan warna avatar deterministik konsisten (DJB2 hash), gradient Tailwind, dan props siap pakai untuk Avatar UI.
• useFormat.js – Helper pemformatan lengkap & terstandarisasi: Rupiah IDR, tanggal Indonesia, relative time, telepon +62, byte size, PCI-DSS sensitive data masking, inisial nama & warna avatar, slugify URL SEO, pemotongan teks (word-boundary truncate), format angka ringkas (K/M/B), kalkulasi durasi, case converters (camel/snake/kebab/title), dan strip HTML.
• useDateFormat.js – Helper pemformatan tanggal Indonesia terstandarisasi, relative time ('5 menit yang lalu'), durasi waktu (digital, human, short), dan parsing tanggal.
• useNumberFormat.js – Helper pemformatan angka finansial: Rupiah IDR (formatRupiah), angka desimal/ribuan, persentase, compact numbers (K/M/B), ordinal ('ke-3'), dan konversi ukuran bytes.
• useStringFormat.js – Helper manipulasi teks: slugify URL SEO ramah simbol, word-boundary truncate dengan ellipsis, casing converters (titleCase, camelCase, snakeCase, kebabCase), dan pembersih stripHtml.
• useMask.js – Helper proteksi privasi & sensor data sensitif (PCI-DSS): masking nomor kartu bank, email, nomor HP, NIK KTP, serta pemformatan nomor telepon internasional/nasional.
• useFormat.js – Aggregator barrel hook yang menggabungkan seluruh modul pemformatan di atas (useDateFormat, useNumberFormat, useStringFormat, useMask, useInitials) dalam satu antarmuka praktis & 100% backward compatible.
• useLocalStorage.js – Sinkronisasi state reaktif Vue dengan localStorage browser dilengkapi auto JSON parsing dan sinkronisasi lintas-tab.
• useNetworkStatus.js – Pemantau status koneksi internet browser (online/offline) dan estimasi kecepatan jaringan.
• useServerTable.js – State manager penyinkron data tabel (search query, sorting asc/desc, custom filter, dan paginasi) dengan URL query string Inertia secara otomatis.
• useConfirm.js – Pemicu dialog konfirmasi destruktif berbasis asynchronous Promise<boolean> yang terintegrasi dengan <ConfirmDialog.vue>.
• usePermission.js – Helper otorisasi hak akses (RBAC) instan (can, hasRole, canAny, isSuperAdmin) kompatibel dengan spatie/laravel-permission dan Laravel Gates.
• useNotification.js – Pemicu notifikasi toast reaktif dari mana saja (notify.success(), notify.error(), notify.purple(), notify.dark()), sinkron otomatis dengan session flash Laravel.
• useTheme.js – State manager tema gelap/terang dengan persistensi localStorage dan sinkronisasi preferensi sistem operasi.
• useClickOutside.js – Helper penutup otomatis popover, dropdown, atau menu saat pengguna mengklik di luar area elemen.
• useFormValidation.js – Skema validasi formulir reaktif dengan preset aturan umum dan sinkronisasi galat backend Laravel.
• useSidebar.js – State manager reaktif bilah navigasi samping (ciut desktop, drawer seluler, shortcut Ctrl+B, dan persistensi localStorage). Dokumentasi Lengkap →

🚀 Instalasi di Project Laravel

Karena paket ini telah terdaftar resmi di Packagist.org, Anda dapat langsung memasangnya menggunakan composer require tanpa perlu menambahkan konfigurasi repositori manual.

Langkah 1: Pasang Paket via Composer

Jalankan perintah berikut di terminal project Laravel Anda:

Langkah 2: Jalankan Smart Auto-Installer

Setelah paket berhasil diunduh oleh Composer, jalankan perintah instalasi cerdas:

💡 Apa Saja yang Dilakukan Smart Auto-Installer?

Perintah ini akan memeriksa lingkungan project Anda secara otomatis:

1. Pemeriksaan & Instalasi Otomatis Backend (Composer):
   • Jika project belum memiliki inertiajs/inertia-laravel, installer mengeksekusi composer require inertiajs/inertia-laravel.
   • Jika project belum memiliki tightenco/ziggy, installer mengeksekusi composer require tightenco/ziggy.
2. Pemeriksaan & Instalasi Frontend (Node.js/npm):
   • Memastikan vue (^3.5) dan @vitejs/plugin-vue (^6.0) terpasang.
   • Memastikan @inertiajs/vue3 (^2.0) terpasang.
   • Memastikan ziggy-js (^2.4) terpasang untuk navigasi rute Laravel di Vue.
   • Memastikan tailwindcss (^4.0) dan @tailwindcss/vite terpasang.
   • Memastikan material-symbols (^0.47) terpasang.
3. Konfigurasi Otomatis Template & Entrypoint:
   • resources/views/app.blade.php: Menyisipkan directive @routes, @inertiaHead, dan @inertia secara otomatis.
   • resources/js/app.js: Mengonfigurasi createInertiaApp dan mendaftarkan plugin ZiggyVue (createApp().use(ZiggyVue)).
   • resources/css/app.css: Menyisipkan directive @import 'tailwindcss'; dan @import 'material-symbols';.
   • vite.config.js: Mengonfigurasi plugin vue(), tailwindcss(), dan path alias 'ziggy-js' serta '@'.
4. Konfigurasi Flash Session Inertia (HandleInertiaRequests.php):
   • Otomatis membuat atau memperbarui method share() pada app/Http/Middleware/HandleInertiaRequests.php untuk membagikan session flash (success, error, warning, info, message, alert).
   • Mendaftarkan middleware ke bootstrap/app.php (Laravel 11/12) sehingga setiap redirect controller dengan ->with('success', '...') otomatis memicu toast notification di frontend melalui useNotification.js.
5. Penerbitan Komponen, Composables & Layouts:
   • Menyalin seluruh file komponen ke resources/js/Components/Pack/.
   • Menyalin seluruh file composable ke resources/js/Composables/Pack/.
   • Menyalin seluruh file tata letak dasbor ke resources/js/Layouts/.

Opsi Perintah Tambahan:

🔄 Panduan Pembaruan Versi (Upgrade & Update Guide)

Ketika paket chandra2004/laravel-pack-ui merilis pembaruan versi (baik berupa Patch, Minor, maupun Major), ikuti 3 langkah berikut agar aplikasi Anda mendapatkan fitur, perbaikan bug, dan komponen terbaru:

Langkah 1: Update Versi Package via Composer

Jalankan perintah berikut di terminal project Anda:

📌 Ketentuan Batasan Versi (Version Constraints):

• Pembaruan Patch (v1.3.0 $\to$ v1.3.1) & Minor (v1.3.0 $\to$ v1.4.0):
  Jika file composer.json project Anda menggunakan format default "chandra2004/laravel-pack-ui": "^1.3", Composer akan otomatis menarik versi patch dan minor terbaru yang kompatibel saat Anda mengeksekusi composer update.
• Pembaruan Mayor / Breaking Changes (v1.x $\to$ v2.0.0):
  Composer sengaja tidak mengupdate ke versi mayor secara otomatis guna mencegah error akibat perubahan struktur API (breaking changes). Untuk beralih ke versi mayor baru, perbarui constraint secara eksplisit:

Langkah 2: Terbitkan Ulang Komponen Terbaru ke Project Anda

[!IMPORTANT] Karena komponen Vue dan Composables disalin langsung (published) ke dalam direktori aplikasi Anda (resources/js/Components/Pack/ dan resources/js/Composables/Pack/), menjalankan composer update saja hanya memperbarui berkas di folder vendor/, bukan berkas komponen yang digunakan di project Anda.

Jalankan perintah installer dengan opsi --force untuk menyinkronkan berkas komponen terbaru ke project Anda:

Atau jika Anda hanya ingin memperbarui file komponen UI saja tanpa menyentuh file konfigurasi blade/app:

[!WARNING] Penting Sebelum Menjalankan --force:
Jika Anda pernah memodifikasi kode secara manual di dalam berkas resources/js/Components/Pack/..., opsi --force akan menimpa (overwrite) perubahan kustom tersebut. Pastikan Anda telah melakukan git commit atau backup kode terlebih dahulu.

Langkah 3: Kompilasi Ulang Asset Frontend

Setelah berkas komponen terbaru diperbarui di project Anda, jalankan build Vite:

📖 Contoh Penggunaan Sederhana

Semua komponen dapat langsung di-import menggunakan path alias standar @/Components/Pack/...:

1. Form Lengkap dengan Validasi (InputField.vue & ButtonSubmit.vue)

2. Notifikasi Toast & Dialog Konfirmasi (useNotification & Modal.vue)

3. Pengubah Tema Dark / Light (ButtonTheme.vue)

📚 Dokumentasi Lengkap (Documentation Index)

Dokumentasi teknis menyeluruh yang mengupas tuntas seluruh daftar properti (props), events, slots, method expose, aturan validasi, serta contoh implementasi praktis telah dikelompokkan secara terstruktur dan modular di dalam direktori doc/:

🛠️ Prasyarat & Instalasi

• 📖 Panduan Setup & Instalasi (doc/setup.md) — Font Google Material Symbols, konfigurasi Tailwind CSS v4 / v3, konfigurasi backend Middleware Laravel HandleInertiaRequests, dan optimasi build bundler Vite.

🏛️ Tata Letak (Layouts)

• 🖥️ UIDashboardLayout (UIDashboardLayout.vue) — Kerangka tata letak dasbor (shell layout) enterprise siap pakai dengan integrasi modular SidebarComponent.vue, bilah atas (topbar), modal pencarian global ⌘K, lencana notifikasi, saklar tema, breadcrumbs, dan profil pengguna.

🧩 Komponen UI (Components)

• 🔔 Alert (Alert.vue) — Inline banner alert dengan auto-close, progress countdown bar, varian (soft, solid, outline), & dismissible.
• 👤 Avatar & AvatarGroup (Avatar.vue / AvatarGroup.vue) — Foto profil avatar dengan fitur Profile Dropdown Menu terintegrasi, cincin cerita Instagram (Story Ring), indikator radar pulse online, verified badge, tumpukan tim AvatarGroup, dan 5 pilar UI.
• 🏷️ Badge (Badge.vue) — Label status (varian soft, solid, outline, dot), pulsing ping indicator, ikon, & removable tag.
• 🧭 Breadcrumb (Breadcrumb.vue) — Navigasi breadcrumb terintegrasi Inertia Link dengan auto-collapse ellipsis & penjajaran presisi ikon.
• 🔘 ButtonSubmit (ButtonSubmit.vue) — Tombol aksi polimorfik (button, Link, a) dengan model interaktif media sosial (YouTube Like/Dislike segmented pill, YouTube Subscribe dengan bell notification, Instagram Heart Like pop, Instagram Follow), pendaran ambient glow, gradien, dan 5 pilar UI.
• 🌓 ButtonTheme (ButtonTheme.vue) — Tombol pengubah mode gelap/terang (varian icon, button, switch, segmented) tersinkronisasi OS & localStorage.
• 🃏 Card & Subkomponen (Card.vue / CardSlider.vue / CardProduct.vue) — Kontainer kartu multifungsi dengan 5 pilar UI (warna tema, bentuk radius/variant, teks/badges, icon, responsif), product card e-commerce (dual-image hover swap, rating, diskon, stok urgency bar, flash sale countdown), card slider dengan tombol prev/next & touch swipe, 3D flip card, dan spotlight radial glow Linear/Vercel.
• 🛡️ ConfirmDialog (ConfirmDialog.vue) — Dialog konfirmasi modal destruktif global terhubung langsung dengan useConfirm().
• 🔽 Dropdown (Dropdown.vue) — Menu aksi popover dengan navigasi keyboard lengkap (ARIA compliant) & click-outside dismissal.
• 📝 InputField & Sub-Komponen (InputField.vue) — Facade universal form input mendelegasikan 12 sub-komponen: Text, Password, DatePicker, File (Dropzone), Select, Color, Radio, Checkbox, Textarea, Range, Switch, OTP, & Mask.
• 🪟 Modal (Modal.vue) — Dialog overlay via <Teleport> dengan Focus Trap, ukuran responsif (sm hingga full), posisi dialog, & Expose API.
• 📄 Pagination (Pagination.vue) — Komponen navigasi halaman kompatibel Laravel LengthAwarePaginator dan mode client-side.
• 📑 SidebarComponent (SidebarComponent.vue / Sidebar.vue) — Bilah samping modular mandiri (standalone) dengan 5 pilar kustomisasi (warna aksen, gaya item soft/solid/outline, radius, varian bordered/floating), menu bertingkat, mobile drawer, dan slot kustom.
• 💀 Skeleton (Skeleton.vue) — Kerangka placeholder loader dengan efek animasi shimmer wave modern untuk teks, avatar, kartu, dan tabel.
• 🪜 Stepper (Stepper.vue) — Penunjuk alur wizard multi-langkah horizontal/vertikal, mode sekuensial linear, & penanda status error.
• 📊 TableComponent (TableComponent.vue) — Tabel data enterprise dengan 5 pilar kustomisasi (warna semantik, bentuk radius/size, teks/header judul & bilah aksi massal, ikon, responsif sticky first column & scroll indicator), multi-column skeleton loader, dan ekspor CSV.
• 📑 Tabs (Tabs.vue) — Navigasi tab modular dengan 5 pilar kustomisasi (warna soft/solid/outline, bentuk radius/size, teks & deskripsi 2 baris, ikon left/top, responsif scroll panah), 4 tata letak modern (underline floating, pills, macOS segmented, folder cards), dan aksesibilitas WAI-ARIA.
• 📁 FileDropzone (FileDropzone.vue) — Area unggah berkas drag-and-drop mandiri dengan 4 varian tata letak, pratinjau thumbnail, progress bar, validasi otomatis, dan pembersih memori blob URL.
• 🔍 FilterToolbar (FilterToolbar.vue) — Bilah penyaringan data tabel terpadu dengan pencarian debounced, tombol preset tanggal cepat, dropdown status, tombol reset dinamis ber-counter badge, dan integrasi otomatis useServerTable.js.
• 🖼️ ProductGallery (ProductGallery.vue) — Galeri foto produk modular untuk e-commerce/showroom dengan 5 pilar standar UI (warna tema Pack UI, bentuk radius/aspect, thumbnail caption cards, floating badges dengan icon & penjelasan yang mengalir kebawah lalu kesamping, serta gestur usap sentuh mobile touch swipe dan modal lightbox zoom).
• 📝 RichTextEditor (RichTextEditor.vue) — Editor teks kaya modern minimalis bertenaga Tiptap v2 dengan 5 pilar kustomisasi, unggah berkas gambar lokal (drag & drop / paste), pratinjau responsif multi-viewport (Desktop, Tablet, Mobile), dan statistik kata/karakter.
• ⭐ Rating (Rating.vue) — Komponen rating interaktif & display dengan 5 pilar standar UI (warna tema Pack UI, bentuk varian card/pill/radius, teks sentimen deskriptif, ikon Material Symbols animasi, & responsif sentuhan mobile touchmove), presisi fraksional desimal (1.3/5), serta integrasi pola Rating Review & Breakdown Drawer responsif (Bottom Sheet di HP & Slide-over di Desktop).
• 🚀 CTA Button (CtaButton.vue / ButtonCta.vue) — Tombol konversi tinggi (tipe direct, split, menu child options, speed-dial fab, hold to confirm, dan copy) dengan animasi glow & shine.
• 📍 LocationPicker (LocationPicker.vue / InputLocation.vue) — Komponen pemilih titik tag lokasi peta interaktif (Leaflet + OpenStreetMap), deteksi GPS instan, auto reverse-geocoding, dan perolehan koordinat lat/lng.
• 🏷️ TagInput (InputTag.vue / TagInput.vue) — Komponen input tag fleksibel dengan 4 pilar kustomisasi (warna soft/solid/outline, bentuk radius/size, teks/scoped slots #tag & #option, ikon & perataan vertikal presisi), dropdown anti-clipping di Card, navigasi Tab/Enter, auto-split paste, limit max-tags, dan varian warna acak harmonis.
• 📜 ScrollProgress (ScrollProgress.vue) — Indikator progres scroll cerdas berkinerja tinggi (60fps passive listener) dengan 5 pilar UI, 4 mode tampilan anti-monoton (bar, floating-pill, circular, minimal), 9 tema warna solid, perpaduan Icon + Teks, dan estimasi waktu baca.
• 💬 ToastNotification (ToastNotification.vue) — Floating toast notification system dengan 4 pilar kustomisasi (warna semantik/varian, bentuk radius/size, teks/scoped slot, & icon), countdown bar, 6 posisi sudut layar, & multi-toast stack.
• 🛒 CartDrawer (CartDrawer.vue) — Panel drawer keranjang belanja enterprise dengan reaktivitas global useCart, stepper kuantitas, validasi stok, kupon diskon berjenjang, dan bar progres gratis ongkir.
• 💾 AutoSaveStatus (AutoSaveStatus.vue) — Indikator status penyimpanan draf otomatis dan banner pemulihan draf form kotor (idle, saving, saved, error).

⚙️ Composables

• 🎯 useClickOutside — Hook pendeteksi interaksi klik di luar elemen target (dropdown, popover, modal).
• 📋 useClipboard — Penyalinan teks ke clipboard dengan status copied reaktif dan fallback legacy browser.
• 🛡️ useConfirm — Dialog konfirmasi berbasis Promise async terintegrasi modal dialog global.
• ⏱️ useDebounce — Pengontrol laju eksekusi fungsi penundaan input realtime dan ref reaktif tertunda.
• ⚡ useThrottle — Pembatas frekuensi pemanggilan fungsi (rate limiting) untuk scroll, resize, dan anti-spam click.
• 📤 useExportTable — Ekspor array data tabel ke format CSV Excel (BOM UTF-8), JSON, dan print preview.
• 🔤 useInitials — Ekstraksi inisial nama reaktif pintar, pembersihan gelar, dan warna avatar deterministik konsisten berbasis hashing string.
• 🇮🇩 useFormat — Utilitas formatting standar Indonesia (Rupiah, tanggal lokal, relative time, telepon, byte, masking, inisial, slugify, truncate, durasi, compact number, & case converters).
• 🛡️ useFormValidation — Validasi skema form reaktif dengan preset rules (required, email, min, max, confirmed, dll) serta sinkronisasi galat Laravel.
• 💾 useLocalStorage — Penyimpanan state reaktif di localStorage dengan sinkronisasi lintas-tab.
• 🌐 useNetworkStatus — Pemantau konektivitas jaringan internet (online/offline) & kecepatan.
• 💬 useNotification — State manager & trigger API toast notification (notify.success, notify.error, notify.promise, aksi undo callback).
• 🔑 usePermission — Otorisasi hak akses frontend (RBAC) kompatibel Spatie Laravel Permission dan Laravel Gates.
• 📊 useServerTable — Sinkronisasi otomatis state data table (search, sort, filter, pagination) dengan query URL Inertia.js.
• 🌓 useTheme — State manager pengatur tema gelap/terang, sinkronisasi OS mediaQuery, & class .dark Tailwind CSS.
• 📜 useScrollProgress — Pelacakan progres scroll reaktif (window / kontainer elemen lokal) dengan kalkulasi sisa waktu baca, status ambang batas atas, dan fungsi scroll to top.
• 🛒 useCart — State manager keranjang belanja e-commerce multi-item dengan kalkulasi diskon kupon, ambang batas gratis ongkir, dan persistensi ganda.
• 💾 useAutoSave — Composable penyimpanan draf otomatis latar belakang dengan dirty diffing, timer debounce, dan pemulihan draf form.
• 🛡️ useUnsavedChanges — Pencegah navigasi tidak sengaja saat formulir dalam kondisi kotor (isDirty) untuk browser refresh dan router SPA Inertia.
• 📶 useOfflineSync — Antrean mutasi data saat pengguna offline (Outbox Pattern) berbasis IndexedDB + auto-fallback localStorage yang 100% berjalan di browser tanpa background worker daemon Laravel.

📄 Lisensi

Paket ini dirilis di bawah lisensi terbuka Chandra Tri Antomo. Bebas digunakan untuk project pribadi maupun komersial.