Ui Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require sikessem/ui
   npm install -D tailwindcss  # Ensure Tailwind is installed
   

   Add the package's Blade directives to your config/app.php under aliases:

   'SikessemUI' => Sikessem\UI\Facades\SikessemUI::class,
   

2. Publish Assets

   php artisan vendor:publish --provider="Sikessem\UI\SikessemUIServiceProvider" --tag="public"
   php artisan vendor:publish --provider="Sikessem\UI\SikessemUIServiceProvider" --tag="config"
   

   Update your tailwind.config.js to include Sikessem's components:

   module.exports = {
     content: [
       './resources/**/*.blade.php',
       './vendor/sikessem/ui/resources/views/**/*.blade.php',
     ],
   }
   

3. First Use Case Render a pre-built component in a Blade view:

   @sikessem('alert', [
       'type' => 'success',
       'message' => 'Operation completed!'
   ])
   

   This outputs a Tailwind-styled alert with minimal markup.

Implementation Patterns

Component-Based Workflows

1. Reusable UI Blocks Use @sikessem directive for common UI elements (e.g., buttons, cards, modals):

   @sikessem('button', [
       'text' => 'Submit',
       'type' => 'primary',
       'icon' => 'check'
   ])
   

   • Pro Tip: Cache rendered components in Blade for performance:

     @cache(['components'])
     @sikessem('navbar', ['items' => $menuItems])
     @endcache
     

2. Dynamic Data Binding Pass Laravel collections or Eloquent models directly:

   @sikessem('table', [
       'data' => $users,
       'columns' => ['id', 'name', 'email']
   ])
   

   The package auto-converts data to a format compatible with Tailwind’s data attributes.

3. Layout Integration Extend Sikessem’s base layout (resources/views/layouts/sikessem.blade.php) for consistent theming:

   <x-sikessem-layout>
       @slot('title', 'Dashboard')
       @sikessem('sidebar', ['items' => $navItems])
       <main>...</main>
   </x-sikessem-layout>
   

4. Slot-Based Customization Override default content via Blade slots:

   @sikessem('modal', [
       'title' => 'Confirm Action',
       'slot' => '<p>Are you sure?</p>'
   ])
   

Gotchas and Tips

Pitfalls

1. Tailwind Class Conflicts

   • Sikessem components use utility classes (e.g., bg-blue-500). If your project overrides these, wrap components in a custom container:

     <div class="sikessem-isolation">
         @sikessem('card', [...])
     </div>
     

   • Fix: Extend Tailwind’s theme in tailwind.config.js to prioritize Sikessem’s classes:

     theme: {
       extend: {
         colors: {
           sikessem: {
             primary: '#3b82f6', // Override if needed
           }
         }
       }
     }
     

2. Blade Directive Caching

   • Directives like @sikessem are not cached by default. For critical paths, use @once:

     @once
     @sikessem('header', [...])
     @endonce
     

3. Component Dependencies

   • Some components (e.g., dropdown) require JavaScript. Ensure your layout includes Sikessem’s JS:

     @sikessemScript
     

Debugging

• Inspect Rendered HTML: Use @dd to debug component output:

  @php
  $output = \Sikessem\UI\Facades\SikessemUI::render('alert', ['message' => 'Test']);
  @endphp
  @dd($output)
  

• Check for Missing Config: Verify config/sikessem-ui.php exists after publishing.

Extension Points

1. Custom Components Create a new component by extending Sikessem\UI\ComponentBase:

   namespace App\Components;
   use Sikessem\UI\ComponentBase;
   
   class CustomButton extends ComponentBase {
       public function render() {
           return view('components.custom-button', $this->data);
       }
   }
   

   Register it in AppServiceProvider:

   SikessemUI::registerComponent('custom-button', \App\Components\CustomButton::class);
   

2. Overriding Default Views Publish and override Sikessem’s views:

   php artisan vendor:publish --tag="sikessem-views"
   

   Modify resources/views/vendor/sikessem-ui/alert.blade.php.

3. Tailwind Variants Add custom variants to Sikessem’s components by extending the config:

   'components' => [
       'button' => [
           'variants' => ['outline', 'ghost'], // Add new variants
       ],
   ],
   

   Then update the corresponding Blade view to handle the new variants.

Performance Tips

• Lazy-Load Components: Use Alpine.js to lazy-load heavy components (e.g., tables):

  <div x-data="{ loaded: false }" @load.window="loaded = true">
      <div x-show="loaded">
          @sikessem('table', [...])
      </div>
  </div>
  

• Precompile Assets: Run npm run build after updating Sikessem’s CSS/JS to avoid runtime processing.