Mog Laravel Package

Getting Started

First Steps

1. Installation Add the package via Composer:

   composer require prvious/mog
   

   Publish the configuration (if available) and assets:

   php artisan vendor:publish --provider="Prvious\Mog\MogServiceProvider"
   

2. Basic Setup Register the package in config/app.php under providers (if not auto-discovered):

   Prvious\Mog\MogServiceProvider::class,
   

3. First Use Case: Adding a Component Import and use a basic component in a Livewire view:

   use Prvious\Mog\Components\Button;
   
   // In your Livewire component
   public function render()
   {
       return view('livewire.your-component', [
           'button' => Button::make('Click Me')
               ->onClick('yourAction')
               ->primary(),
       ]);
   }
   

4. Documentation Check the GitHub README for component-specific examples and API references.

Implementation Patterns

Component Integration

• Livewire Component Wrapping Use Mog components as slots or child components in Livewire:

  // In your Livewire component
  public function render()
  {
      return view('livewire.parent-component', [
          'mogComponent' => (new \Prvious\Mog\Components\Card())
              ->title('Dashboard')
              ->content(view('livewire.child-content')),
      ]);
  }
  

• Dynamic Configuration Chain methods for fluent configuration:

  $alert = \Prvious\Mog\Components\Alert::make('Success!')
      ->success()
      ->dismissible()
      ->onDismiss('handleDismiss');
  

• Reusable Component Logic Extract shared component logic into a trait or helper:

  use Prvious\Mog\Support\MogHelper;
  
  public function buildButton()
  {
      return MogHelper::button()
          ->text('Submit')
          ->disabled($this->isProcessing)
          ->onClick('submitForm');
  }
  

Workflow Integration

• Form Handling Pair with Livewire forms for seamless validation and submission:

  use Prvious\Mog\Components\Form;
  
  public function render()
  {
      return Form::make()
          ->submit('save')
          ->fields([
              TextInput::make('name')->rules('required'),
          ]);
  }
  

• State Management Use Livewire’s reactivity to update Mog components dynamically:

  public $isLoading = false;
  
  public function fetchData()
  {
      $this->isLoading = true;
      // API call...
      $this->isLoading = false;
  }
  
  // In view:
  Button::make('Load Data')
      ->loading($isLoading)
      ->onClick('fetchData'),
  

• Theming Override default styles via resources/css/app.css or publish the package’s assets:

  php artisan mog:publish-assets
  

Gotchas and Tips

Pitfalls

• Livewire Compatibility Ensure the Mog package version aligns with your Livewire version (check release notes). Symptom: Components fail to render or throw MethodNotFoundException. Fix: Update Livewire or downgrade mog.

• Blade vs. Livewire Rendering Mog components are designed for Livewire. Using them in plain Blade views may break reactivity. Workaround: Wrap in a Livewire component or use ->toHtml() for static output.

• Overriding Defaults Customizing global defaults (e.g., colors) requires modifying the published config:

  // config/mog.php
  'colors' => [
      'primary' => '#3b82f6', // Tailwind default
  ],
  

  Tip: Cache config after changes:

  php artisan config:cache
  

Debugging

• Component Inspection Use dd() or dump() to inspect component state:

  $button = Button::make('Test')->primary();
  dd($button->toArray()); // Debug attributes/methods
  

• Livewire Hooks Leverage Livewire’s hooks to debug component lifecycle:

  protected $listeners = ['mog:debug' => 'handleDebug'];
  
  public function handleDebug($component)
  {
      \Log::info('Mog component:', $component->toArray());
  }
  

Extension Points

• Custom Components Extend existing components or create new ones by subclassing:

  namespace App\Mog;
  
  use Prvious\Mog\Components\Button;
  
  class AppButton extends Button
  {
      public function appStyle()
      {
          $this->attributes['class'] .= ' app-button';
          return $this;
      }
  }
  

• Service Provider Hooks Bind custom components in the MogServiceProvider:

  public function boot()
  {
      $this->app->bind(\Prvious\Mog\Contracts\Component::class, function () {
          return new \App\Mog\AppButton();
      });
  }
  

• Asset Overrides Override package assets by publishing and modifying:

  php artisan mog:publish-assets
  

  Edit files in public/vendor/mog/.

Pro Tips

• Lazy Loading Defer component rendering until needed:

  @if ($showComponent)
      {{ $mogComponent->render() }}
  @endif
  

• Testing Test components in isolation using Livewire’s testing helpers:

  use Livewire\Testing\TestableLivewire;
  
  public function test_button_renders()
  {
      $this->livewire(YourComponent::class)
          ->assertSee('Click Me');
  }
  

• Performance Avoid recreating components in loops. Cache instances:

  protected $cachedComponents = [];
  
  public function getButton()
  {
      if (!isset($this->cachedComponents['button'])) {
          $this->cachedComponents['button'] = Button::make('Cached');
      }
      return $this->cachedComponents['button'];
  }