Livewirestack Laravel Package

Getting Started

Minimal Steps to Begin

1. Installation

   composer require exonos/livewirestack
   

   Publish the package assets (if needed):

   php artisan vendor:publish --provider="Exonos\Livewirestack\LivewirestackServiceProvider" --tag="public"
   

2. First Use Case: Quick Form Integration

   • Create a Livewire component:

     php artisan make:livewire UserProfile
     

   • Import and use a Livewirestack component (e.g., InputText):

     @livewireScripts
     @livewireStyles
     
     <x-livewirestack::input-text
         wire:model="name"
         label="Full Name"
         placeholder="Enter your name"
     />
     

   • Reference the Installation Guide for Tailwind/Alpine setup.

Implementation Patterns

Core Workflows

1. Rapid UI Assembly

   • Pattern: Use pre-built components (e.g., Card, Modal, Dropdown) as drop-in replacements for vanilla Livewire/Alpine markup.
   • Example:

     <x-livewirestack::card title="User Settings">
         <x-slot name="content">
             <x-livewirestack::input-text wire:model="email" label="Email" />
         </x-slot>
     </x-livewirestack::card>
     

2. State Management

   • Pattern: Leverage Livewire’s reactivity with Livewirestack’s props (e.g., disabled, required).
   • Example:

     <x-livewirestack::button
         type="submit"
         :disabled="$processing"
         wire:click="save"
     >
         Save
     </x-livewirestack::button>
     

3. Dynamic Forms

   • Pattern: Combine with Livewire’s wire:ignore and Alpine.js for dynamic fields.
   • Example:

     <div x-data="{ open: false }">
         <x-livewirestack::button @click="open = true">Add Field</x-livewirestack::button>
         <x-livewirestack::modal :open="open" @close="open = false">
             <x-livewirestack::input-text wire:model="dynamicFields.{{ uuidv4() }}" label="Dynamic Field" />
         </x-livewirestack::modal>
     </div>
     

4. Theming

   • Pattern: Override Tailwind classes via class prop or custom CSS.
   • Example:

     <x-livewirestack::button class="bg-blue-600 hover:bg-blue-700">Custom Theme</x-livewirestack::button>
     

5. Integration with Laravel Features

   • Pattern: Use with Laravel Fortify/Passport for auth flows:

     <x-livewirestack::auth-card>
         <x-slot name="login">
             <x-livewirestack::input-email wire:model="email" label="Email" />
             <x-livewirestack::input-password wire:model="password" label="Password" />
         </x-slot>
     </x-livewirestack::auth-card>
     

Gotchas and Tips

Pitfalls

1. Asset Conflicts

   • Issue: Tailwind/Alpine JS conflicts if not properly scoped.
   • Fix: Use @vite or @stack directives to isolate assets:

     @push('scripts')
         @livewireScripts
     @endpush
     

2. Livewire Property Binding

   • Issue: Some components may require explicit wire:model binding (e.g., wire:model.defer for laggy inputs).
   • Tip: Use wire:model.lazy for non-critical fields to reduce server hits.

3. Modal Z-Index

   • Issue: Modals may appear behind other elements.
   • Fix: Override Tailwind’s z-50 in your component:

     <x-livewirestack::modal class="z-[100]">
     

4. Form Validation Styling

   • Issue: Default error messages may not align with your theme.
   • Tip: Extend Livewirestack’s validation classes in tailwind.config.js:

     module.exports = {
         theme: {
             extend: {
                 colors: {
                     error: '#ef4444',
                 },
             },
         },
     };
     

Debugging

1. Component Props

   • Tip: Use {{ dd($this->props) }} in Livewire components to inspect passed props from Livewirestack components.

2. Alpine.js Events

   • Tip: Log Alpine events for dynamic components:

     <div x-data @click="console.log('Clicked')">...</div>
     

3. Livewire Hooks

   • Tip: Debug component lifecycle with:

     public function mounting()
     {
         \Log::info('Component mounted');
     }
     

Extension Points

1. Custom Components

   • Pattern: Extend existing components by copying their Blade files from vendor/exonos/livewirestack/resources/views to resources/views/vendor/livewirestack.
   • Example:

     <!-- resources/views/vendor/livewirestack/input-text.blade.php -->
     @extends('livewirestack::input-text')
     @section('classes')
         {{ parent::classes() }} custom-class
     @endsection
     

2. Slot Overrides

   • Tip: Use x-slot to replace default content:

     <x-livewirestack::card>
         <x-slot name="header">
             Custom Header
         </x-slot>
     </x-livewirestack::card>
     

3. JavaScript Extensions

   • Pattern: Attach Alpine.js logic via x-init:

     <x-livewirestack::dropdown x-data="{ open: false }" x-init="open = $wire.entering('dropdown-open')">
     

4. Server-Side Logic

   • Tip: Use Livewire’s updated* hooks to sync UI state:

     public function updatedName()
     {
         $this->validate(['name' => 'required|min:3']);
     }