madhasoeki / stisla
Stisla UI Components for Laravel TALL Stack (TailwindCSS v4, Alpine.js, Livewire v4)
Maintainers
Requires
- php: ^8.2
- laravel/framework: ^11.0|^12.0|^13.0
- livewire/livewire: ^3.0|^4.0
Requires (Dev)
- fakerphp/faker: ^1.24
- larastan/larastan: ^3.9
- laravel/boost: ^2.2
- laravel/pail: ^1.2.5
- laravel/pao: ^1.0.6
- laravel/pint: ^1.27
- laravel/sail: ^1.53
- mockery/mockery: ^1.6
- nunomaduro/collision: ^8.9.3
- pestphp/pest: ^4.7
- pestphp/pest-plugin-laravel: ^4.1
README
Pustaka komponen UI Stisla versi TALL Stack (TailwindCSS v4, Alpine.js, Livewire v4, Laravel). Paket ini mentransformasi komponen UI Vanilla CSS + JS Stisla v3 menjadi komponen Blade & Livewire yang modular, elegan, cerdas, dan siap pakai di ekosistem Laravel.
Daftar Isi (Table of Contents)
- Prasyarat & Persyaratan Sistem
- Instalasi Cepat
- Arsitektur & Prinsip Desain
- Panduan Kustomisasi & Theming
- Aturan Internal & Pedoman Pengembang
- Daftar Komponen & Status
Prasyarat & Persyaratan Sistem
Sebelum menggunakan paket Stisla TALL Stack, pastikan proyek Laravel Anda memenuhi persyaratan berikut:
- PHP:
^8.2 - Laravel Framework:
^11.0/^12.0/v13 - Livewire:
^3.0/^4.0(Otomatis terinstal saatstisla:installjika belum ada) - TailwindCSS:
^4.0
Instalasi Cepat
Pasang paket via Composer dan jalankan installer otomatis Stisla:
composer require madhasoeki/stisla php artisan stisla:install
Apa yang dilakukan oleh php artisan stisla:install?
- Pengecekan Livewire: Mengecek apakah Livewire terpasang. Jika belum, installer akan memasangkannya via Composer secara otomatis.
- Smart Dependencies Check: Mengecek & menyuntikkan paket npm
@stisla/css,@stisla/vanilla, danlucideke dalampackage.jsontanpa menimpa library yang sudah ada. - Script Injection: Menyuntikkan import Stisla dan listener ikon Lucide ke
resources/js/app.js. - Tailwind v4 Token Registration: Menyuntikkan skema variabel warna Stisla ke blok
@themediresources/css/app.css. - Build Bundle: Menjalankan
npm run builduntuk langsung menghasilkan bundel CSS & JS yang siap pakai.
Arsitektur & Prinsip Desain
- Token-Driven: Setiap komponen dikendalikan oleh CSS Custom Properties (
--color-*,--radius-*,--spacing,--shadow-*). - Sintaks Komponen Ringkas: Seluruh komponen dipanggil dengan namespace
stislatanpa awalanx-:<stisla::button tone="primary" icon="plus"> Tambah Data </stisla::button>
- Compound Components: Komponen kompleks dipecah menjadi komponen utama dan sub-komponen modular (misal
<stisla::accordion>dan<stisla::accordion.item>).
Panduan Kustomisasi & Theming
Kustomisasi komponen Stisla sangat fleksibel karena digerakkan sepenuhnya oleh variabel CSS (CSS Custom Properties).
A. Global Brand Color
Ubah warna brand utama dengan mendeklarasikan ulang --color-primary dan --color-primary-foreground di app.css atau :root:
:root { --color-primary: oklch(0.58 0.22 285); /* Warna Violet */ --color-primary-foreground: oklch(1 0 0); /* Warna teks di atas primary */ }
State hover, active, focus ring, dan highlight akan otomatis terhitung (re-compute) melalui fungsi color-mix(in oklch, ...).
B. Density & Spacing
Mengatur kepadatan ukuran komponen di seluruh aplikasi dengan mengubah basis --spacing:
0.2rem: Compact (Admin Dashboard / Tabel padat).0.25rem: Default.0.28rem: Comfortable (Halaman Marketing / Mode Baca).
:root { --spacing: 0.2rem; }
C. Component-Scoped Variables (:vars Prop)
Setiap komponen mendukung prop :vars untuk mengubah variabel CSS khusus pada satu instance komponen tanpa memengaruhi komponen lain:
<stisla::accordion :vars="['gap' => '1.5rem', 'radius' => '0px', 'item-open-bg' => 'oklch(0.95 0.05 280)']"> <stisla::accordion.item title="Brutalist Accordion"> Konten accordion... </stisla::accordion.item> </stisla::accordion>
D. Mode Gelap (Dark Mode)
Stisla secara otomatis mendukung mode gelap melalui atribut data-theme="dark" atau kelas .dark pada tag <html> atau wrapper:
<html data-theme="dark"> <!-- Seluruh komponen Stisla akan otomatis beralih ke tema gelap --> </html>
Aturan Internal & Pedoman Pengembang
Proyek ini dilengkapi dengan panduan standar pengoperasian untuk pengembangan dan AI Agent:
- create-component-guide.md: Standar arsitektur & struktur file komponen Blade/Livewire.
- customization-guide.md: Panduan penerapan prinsip kustomisasi Stisla.
- create-documentation-guide.md: Aturan penulisan dokumentasi komponen pengguna di folder
docs/tall/.
Daftar Komponen & Status
Berikut adalah daftar komponen Stisla yang sudah diimplementasikan:
1. Forms
| Komponen | Status | Dokumentasi TALL | Referensi Stisla |
|---|---|---|---|
| Autocomplete | Ready | docs/tall/autocomplete.md | docs/stisla/autocomplete.md |
| Checkbox | Ready | docs/tall/checkbox.md | docs/stisla/checkbox.md |
| Combobox | Ready | docs/tall/combobox.md | docs/stisla/combobox.md |
| Field | Ready | docs/tall/field.md | docs/stisla/field.md |
| Input | Ready | docs/tall/input.md | docs/stisla/input.md |
| Input Group | Ready | docs/tall/input-group.md | docs/stisla/input-group.md |
| Radio | Ready | docs/tall/radio.md | docs/stisla/radio.md |
| Select | Ready | docs/tall/select.md | docs/stisla/select.md |
| Slider | Ready | docs/tall/slider.md | docs/stisla/slider.md |
| Switch | Ready | docs/tall/switch.md | docs/stisla/switch.md |
| Textarea | Ready | docs/tall/textarea.md | docs/stisla/textarea.md |
2. Components
3. Overlays
| Komponen | Status | Dokumentasi TALL | Referensi Stisla |
|---|---|---|---|
| Dialog | Ready | docs/tall/dialog.md | docs/stisla/dialog.md |
| Drawer | Ready | docs/tall/drawer.md | docs/stisla/drawer.md |
| Menu | Ready | docs/tall/menu.md | docs/stisla/menu.md |
| Popover | Ready | docs/tall/popover.md | docs/stisla/popover.md |
| Toast | Ready | docs/tall/toast.md | docs/stisla/toast.md |
| Tooltip | Ready | docs/tall/tooltip.md | docs/stisla/tooltip.md |