Jarenui Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require leenuxus/jarenui
   

   Publish the config (if available) with:

   php artisan vendor:publish --provider="JarenUI\JarenUIServiceProvider" --tag="config"
   

2. First Use Case Include the package in your resources/views/app.blade.php (or layout file):

   @livewireStyles
   @livewireScripts
   @jarenuiStyles
   @jarenuiScripts
   

   Use a basic component in a Blade view:

   <x-jarenui::card title="Hello World">
       <p>This is a reusable card component.</p>
   </x-jarenui::card>
   

3. Where to Look First

   • Component Documentation: Check the resources/views/vendor/jarenui directory for available components (e.g., card.blade.php, button.blade.php).
   • Livewire Integration: Review the app/Http/Livewire directory for any bundled Livewire components (if included).
   • Config File: Inspect config/jarenui.php for customization options (e.g., default colors, icons).

Implementation Patterns

Blade Component Usage

• Basic Components

  <!-- Card -->
  <x-jarenui::card>
      <x-slot name="title">Title</x-slot>
      <p>Content here.</p>
  </x-jarenui::card>
  
  <!-- Button -->
  <x-jarenui::button type="primary">Click Me</x-jarenui::button>
  

• Slot-Based Customization Most components support slots for flexibility:

  <x-jarenui::alert type="success">
      <x-slot name="icon">✅</x-slot>
      <p>Success message!</p>
  </x-jarenui::alert>
  

Livewire Integration

• Extend Existing Components If the package includes Livewire components (e.g., LivewireCard), extend them:

  namespace App\Http\Livewire;
  
  use JarenUI\Livewire\LivewireCard;
  
  class CustomCard extends LivewireCard
  {
      public $customProperty = "Extra data";
  
      public function render()
      {
          return view('livewire.custom-card', [
              'customProperty' => $this->customProperty,
          ]);
      }
  }
  

• Create New Livewire Components Use the package’s design system for consistency:

  use Livewire\Component;
  use JarenUI\Support\Traits\HasJarenUIStyles;
  
  class MyComponent extends Component
  {
      use HasJarenUIStyles;
  
      public function render()
      {
          return view('livewire.my-component')->withJarenUIStyles();
      }
  }
  

Theming and Styling

• Customize via Config Override defaults in config/jarenui.php:

  'colors' => [
      'primary' => '#3b82f6', // Tailwind-like syntax
  ],
  

• Tailwind CSS Compatibility The package likely assumes Tailwind. Extend your tailwind.config.js:

  module.exports = {
      plugins: [
          require('jarenui/tailwind')(), // Hypothetical plugin
      ],
  };
  

Workflow Tips

1. Component Discovery Run php artisan jarenui:list (if the package includes a CLI command) to see available components.
2. Partial Overrides Copy the package’s Blade views to resources/views/vendor/jarenui to customize without forking.
3. Livewire Events Listen for component events (e.g., @livewire('jarenui.card', 'opened')).

Gotchas and Tips

Pitfalls

1. No Official Documentation

   • The package is "personal," so assume minimal docs. Inspect the source (vendor/leenuxus/jarenui) for usage.
   • Example: Check src/Traits/HasJarenUIStyles.php for shared functionality.

2. Livewire Version Mismatch

   • If the package uses Livewire v2 but your project uses v1 (or vice versa), conflicts may arise. Pin versions in composer.json:

     "require": {
         "livewire/livewire": "^2.0"
     }
     

3. Tailwind Dependencies

   • The package may rely on Tailwind classes (e.g., bg-primary). Ensure Tailwind is installed and configured.

4. Namespace Collisions

   • Avoid naming conflicts with x-jarenui:: prefix. If you create similar components, use unique namespaces (e.g., x-myapp::).

Debugging

• Component Not Found? Verify the view exists in vendor/leenuxus/jarenui/resources/views or your local override. Clear Blade cache:

  php artisan view:clear
  

• Livewire Component Errors Check for missing use Livewire\Component; or incorrect slot names in Blade views.

• CSS/JS Loading Issues Ensure @jarenuiStyles and @jarenuiScripts are included after @livewireStyles in your layout.

Extension Points

1. Create Custom Components Extend existing components by copying their Blade/Livewire files to your project and modifying:

   cp vendor/leenuxus/jarenui/resources/views/components/card.blade.php resources/views/components/
   

2. Add New Features Fork the package and submit PRs (if open to contributions). Example:

   • Add a Modal component by copying from another package or building from scratch using the package’s design system.

3. Configuration Overrides Publish and extend the config:

   php artisan vendor:publish --tag="config" --force
   

   Then add custom options to config/jarenui.php.

Pro Tips

• Use @once for Shared Styles Avoid duplicate @jarenuiStyles directives in nested views:

  @once
      @jarenuiStyles
  @endonce
  

• Leverage Livewire for Dynamic Content Combine JarenUI’s static components with Livewire for interactive elements:

  <x-jarenui::card>
      <livewire:my-dynamic-content />
  </x-jarenui::card>
  

• Test Locally First Since the package is personal, test changes in a local Laravel project before deploying to production.