README

Library UI bertema Neo Brutalism. Library ini terdiri dari dua bagian yang bisa digunakan secara fleksibel:

1. Laravel Package: Menyediakan Blade Components terintegrasi (seperti Mary UI).
2. NPM Package: Murni Tailwind CSS plugin yang bisa dipakai di framework apapun (React, Vue, Next.js, dll).

Pilih metode instalasi di bawah ini sesuai dengan project Anda.

🚀 OPSI A: Untuk Project Laravel (Direkomendasikan)

Jika Anda menggunakan Laravel, Anda akan mendapatkan Blade Components (<x-neo::button>) beserta Tailwind plugin-nya dalam 1 langkah mudah via Composer.

1. Install via Composer

composer require vrcorp/laravel-neo-ui

(Anda tidak perlu menginstal via NPM, file plugin JavaScript sudah otomatis ter-download di dalam folder vendor)

2. Setup tailwind.config.js

Tambahkan file blade ke content dan load plugin dari folder vendor:

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/vrcorp/laravel-neo-ui/resources/views/**/*.blade.php' // Wajib untuk scan class Blade
    ],
    plugins: [
        require('./vendor/vrcorp/laravel-neo-ui/tailwind-plugin/index.js')({
            prefix: '' // Ubah ke 'neo-' jika ingin class diprefix (misal: .neo-btn)
        })
    ]
}

3. Cara Penggunaan

Di Laravel, Anda memiliki 2 pilihan cara pemakaian. Karena core style berasal dari Tailwind, style override otomatis berjalan meskipun Anda tidak memakai Blade Component.

3. Cara Penggunaan (HTML Murni)

Plugin otomatis meng-inject font Space Grotesk dan style Neo Brutalism.

<!-- Button -->
<button class="btn btn-primary">Submit</button>

<!-- Card -->
<div class="card">Card Content</div>

<!-- Badge & Alert -->
<span class="badge badge-info">New</span>
<div class="alert alert-success">Berhasil disimpan!</div>

<!-- Checkbox & Radio (Kotak tegas brutalist) -->
<input type="checkbox" class="checkbox" />
<input type="radio" class="radio" />

4. Cara Penggunaan (Blade Components)

Menggunakan Blade component lebih praktis karena menangani state bawaan.

Note: Khusus untuk komponen <x-neo::modal>, Anda wajib menginstall Alpine.js di project Laravel Anda.

<!-- Button dengan loading -->
<x-neo::button variant="primary" loading="true">Submit</x-neo::button>

<!-- Badge & Alert -->
<x-neo::badge variant="danger">Error</x-neo::badge>
<x-neo::alert icon="💡" variant="warning">Perhatian!</x-neo::alert>

<!-- Checkbox & Radio -->
<x-neo::checkbox name="agree" />
<x-neo::radio name="gender" />

<!-- Modal Popup -->
<!-- Trigger Modal via Alpine.js event -->
<button x-data @click="$dispatch('open-modal', { id: 'promo-modal' })" class="btn">
    Buka Modal
</button>

<x-neo::modal id="promo-modal" title="Promo Khusus!">
    <p>Dapatkan diskon 50% hari ini.</p>
    
    <x-slot:actions>
        <button x-data @click="$dispatch('close-modal', { id: 'promo-modal' })" class="btn">Tutup</button>
        <button class="btn btn-primary">Ambil Promo</button>
    </x-slot:actions>
</x-neo::modal>

🚀 OPSI B: Untuk Framework Lain (React, Vue, HTML murni)

Jika Anda TIDAK menggunakan Laravel, Anda bisa menginstal murni Tailwind Plugin-nya saja melalui NPM.

1. Install via NPM

npm install neo-brutalism-tailwind

2. Setup tailwind.config.js

Load plugin yang baru saja Anda install dari NPM:

module.exports = {
    content: [
        './src/**/*.{html,js,jsx,vue,ts,tsx}', // Sesuaikan dengan framework Anda
    ],
    plugins: [
        require('neo-brutalism-tailwind')({
            prefix: '' // Ubah ke 'neo-' jika ingin class diprefix (misal: .neo-btn)
        })
    ]
}

3. Cara Penggunaan (HTML/JSX)

Karena Anda tidak memiliki Blade Components, gunakan class HTML biasa. Plugin akan otomatis men-generate style-nya.

<!-- Bergaya Neo Brutalism -->
<button class="btn btn-primary">Submit</button>

<div class="card">
    <p>Card Content</p>
</div>

<input type="text" class="input" placeholder="Enter name" />

📦 Deployment / Publishing (Khusus Untuk Anda Sebagai Pembuat)

Sebagai pembuat library ini, Anda memiliki dua tempat untuk mempublikasikan karya Anda agar bisa dinikmati oleh kedua kelompok pengguna di atas.

1. Publish Tailwind Plugin ke NPM (Untuk Opsi B)

1. Buka terminal dan masuk ke folder tailwind-plugin:

   cd tailwind-plugin

2. Pastikan Anda sudah login ke NPM (npm login).
3. Publish package:

   npm publish

2. Publish Laravel Package ke Packagist (Untuk Opsi A)

1. Inisialisasi Git di root folder project Anda (vrcorp/laravel-neo-ui), commit semua kode, lalu push ke GitHub.
2. Kunjungi Packagist.org dan klik Submit.
3. Masukkan URL repository GitHub Anda. Packagist akan mendeteksi composer.json dan merilis package Laravel Anda.