Getting Started

Minimal Steps

Installation:

composer require artisanpack-ui/livewire-ui-components
php artisan livewire-ui-components:install
npm run dev

First Component Usage:

<!-- resources/views/example.blade.php -->
<x-artisanpack-button color="primary">Click Me</x-artisanpack-button>

Verify Installation:
- Check /artisanpack/theme-preview route for interactive theme customization
- Test basic components in a Livewire component:
```
<x-artisanpack-card>
    <x-slot:header>Test Card</x-slot:header>
    <p>Basic card content</p>
</x-artisanpack-card>
```

Where to Look First

Documentation Wiki: Components Overview
Theme Preview Tool: /artisanpack/theme-preview (interactive customization)
Component Browser: Search for components by category in the wiki

First Use Case: Dashboard Page

<!-- resources/views/dashboard.blade.php -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <x-artisanpack-kpi-card title="Users" value="1,245" trend="+12%">
        <x-slot:footer>
            <x-artisanpack-button size="sm" color="primary">View All</x-artisanpack-button>
        </x-slot:footer>
    </x-artisanpack-kpi-card>

    <x-artisanpack-kpi-card title="Revenue" value="$45,231" trend="-3%">
        <x-slot:footer>
            <x-artisanpack-button size="sm" color="primary">Details</x-artisanpack-button>
        </x-slot:footer>
    </x-artisanpack-kpi-card>
</div>

Implementation Patterns

Core Workflows

1. Component Integration Pattern

<!-- resources/views/livewire/form.blade.php -->
<x-artisanpack-form>
    <x-slot:header>
        <h2 class="text-2xl font-bold">User Profile</h2>
    </x-slot:header>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <x-artisanpack-input label="Name" wire:model="name" />
        <x-artisanpack-select label="Role" wire:model="role">
            <option value="">Select Role</option>
            <option value="admin">Administrator</option>
            <option value="editor">Editor</option>
        </x-artisanpack-select>

        <x-artisanpack-datepicker label="Birth Date" wire:model="birth_date" />
        <x-artisanpack-file-upload label="Profile Picture" wire:model="profile_picture" />
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-4">
            <x-artisanpack-button color="secondary" wire:click="$emit('cancel')">Cancel</x-artisanpack-button>
            <x-artisanpack-button color="primary" wire:click="$emit('save')">Save</x-artisanpack-button>
        </div>
    </x-slot:footer>
</x-artisanpack-form>

2. Data Table with Export

// app/Http/Livewire/UserTable.php
namespace App\Http\Livewire;

use ArtisanPack\LivewireUIComponents\Traits\WithTableExport;
use Livewire\Component;

class UserTable extends Component
{
    use WithTableExport;

    public $exportFormats = ['csv', 'xlsx'];

    public function getTableExportData()
    {
        return User::query()
            ->select('id', 'name', 'email', 'created_at')
            ->get()
            ->map(function ($user) {
                return [
                    'ID' => $user->id,
                    'Name' => $user->name,
                    'Email' => $user->email,
                    'Created At' => $user->created_at->format('Y-m-d'),
                ];
            });
    }

    public function render()
    {
        return view('livewire.user-table', [
            'users' => User::paginate(10)
        ]);
    }
}

<!-- resources/views/livewire/user-table.blade.php -->
<x-artisanpack-table :data="$users" exportable export-formats="$exportFormats" export-filename="users">
    <x-slot:header>
        <h2 class="text-2xl font-bold">User Management</h2>
    </x-slot:header>

    <x-slot:columns>
        <x-artisanpack-table-column label="ID" sortable wire:sort="id" />
        <x-artisanpack-table-column label="Name" sortable wire:sort="name" />
        <x-artisanpack-table-column label="Email" />
        <x-artisanpack-table-column label="Actions">
            <x-slot:cell="$user">
                <x-artisanpack-button size="sm" color="primary" wire:click="edit({{ $user->id }})">Edit</x-artisanpack-button>
            </x-slot:cell>
        </x-artisanpack-table-column>
    </x-slot:columns>
</x-artisanpack-table>

3. Theming Workflow

# Generate custom theme
php artisan artisanpack:generate-theme

# Or use interactive mode
php artisan artisanpack:generate-theme --interactive

# Apply glass preset
php artisan artisanpack:generate-theme --preset glass-liquid-light

# Generate accessibility theme
php artisan artisanpack:generate-theme --accessibility-preset high-contrast-dark

Integration Tips

Livewire Component Structure:

// app/Http/Livewire/ComplexForm.php
namespace App\Http\Livewire;

use ArtisanPack\LivewireUIComponents\Traits\WithFormValidation;
use Livewire\Component;

class ComplexForm extends Component
{
    use WithFormValidation;

    public $name;
    public $email;
    public $terms_accepted = false;

    protected $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email',
        'terms_accepted' => 'accepted',
    ];

    public function save()
    {
        $this->validate();

        // Save logic
    }

    public function render()
    {
        return view('livewire.complex-form');
    }
}

Modal Usage Pattern:

<!-- resources/views/livewire/user-management.blade.php -->
<x-artisanpack-button color="primary" wire:click="$emit('open-modal', 'confirm-delete')">
    Delete User
</x-artisanpack-button>

<x-artisanpack-modal wire:model="showDeleteModal" id="confirm-delete" size="md">
    <x-slot:header>
        <h3 class="text-lg font-bold">Confirm Deletion</h3>
    </x-slot:header>

    <div class="py-4">
        <p class="text-gray-600">Are you sure you want to delete this user?</p>
    </div>

    <x-slot:footer>
        <div class="flex justify-end gap-4">
            <x-artisanpack-button color="secondary" wire:click="$emit('close-modal')">Cancel</x-artisanpack-button>
            <x-artisanpack-button color="error" wire:click="deleteUser">Delete</x-artisanpack-button>
        </div>
    </x-slot:footer>
</x-artisanpack-modal>

Dashboard Layout:

<!-- resources/views/dashboard.blade.php -->
<div class="space-y-6">
    <!-- Widget Grid -->
    <x-artisanpack-widget-grid columns="1 md:2 lg:4">
        <x-artisanpack-kpi-card title="Active Users" value="1,245" trend="+12%">
            <x-slot:footer>
                <x-artisanpack-button size="sm" color="primary">View</x-artisanpack-button>
            </x-slot:footer>
        </x-artisanpack-kpi-card>

        <x-artisanpack-kpi-card title="Revenue" value="$45,231" trend="-3%">
            <x-slot:footer>
                <x-artisanpack-button size="sm" color="primary">Details</x-artisanpack-button>
            </x-slot:footer>
        </x-artisanpack-kpi-card>
    </x-artisanpack-widget-grid>

    <!-- Data Table -->
    <x-artisanpack-table :data="$recentOrders" exportable>
        <x-slot:header>
            <h2 class="text-2xl font-bold">Recent Orders</h2>
        </x-slot:header>
        <!-- Table columns -->
    </x-artisanpack-table>
</div>

Gotchas and Tips

Common Pitfalls

Missing JavaScript Dependencies:
- Symptom: Charts or date pickers not working
- Solution: Ensure you've installed required npm packages:
```
npm install apexcharts flatpickr
```
- Configuration: Add to `resources/js/app.js

Livewire Ui Components Laravel Package

Getting Started

Minimal Steps

Where to Look First

First Use Case: Dashboard Page

Implementation Patterns

Core Workflows

1. Component Integration Pattern

2. Data Table with Export

3. Theming Workflow

Integration Tips

Gotchas and Tips

Common Pitfalls