Tall Maryui Laravel Package

Getting Started

Minimal Steps to Begin

1. Installation

   composer create-project laravel/laravel your-app-name
   cd your-app-name
   composer require alexvargash/tall-maryui
   php artisan tall:install
   

   • Follow prompts for auth scaffolding and asset compilation.

2. First Use Case

   • Navigate to /login to test the pre-built maryUI-powered auth system.
   • Edit resources/views/layouts/app.blade.php to customize the base layout.
   • Modify resources/js/app.js to extend Alpine.js or Vite behavior.

Where to Look First

• Auth Flow: Check app/Http/Controllers/Auth/ for single-action controllers.
• Components: Explore resources/views/components/ for maryUI-based UI blocks.
• Assets: Inspect resources/js/ for Vite/Tailwind/Alpine setup.
• Config: Review config/tall-maryui.php for package-specific settings.

Implementation Patterns

Core Workflows

1. Component-Based UI

   • Extend maryUI components by copying from resources/views/components/ and modifying.
   • Example: Override maryui/alert.blade.php for custom alerts.

   @component('maryui.alert', ['type' => 'success'])
       Success message!
   @endcomponent
   

2. Livewire Integration

   • Use pre-built Livewire components (e.g., Auth/Login) as templates.
   • Extend with custom logic:

   // app/Http/Livewire/CustomComponent.php
   namespace App\Http\Livewire;
   use Livewire\Component;
   
   class CustomComponent extends Component {
       public function mount() {
           // Custom logic
       }
       public function render() {
           return view('livewire.custom-component');
       }
   }
   

3. Asset Customization

   • Modify vite.config.js to add plugins or adjust build settings.
   • Update resources/css/app.css to override Tailwind/maryUI styles.

4. Routing

   • Auth routes are published to routes/auth.php. Extend or override:

   // routes/web.php
   require __DIR__.'/auth.php'; // Include auth routes
   

Integration Tips

• Testing: Leverage pre-written tests in tests/Feature/Auth/ as a baseline.
• Theming: Use maryUI’s theming system via resources/css/app.css:

  @layer maryui {
      @apply maryui-theme-dark;
  }
  

• APIs: Pair with Laravel Sanctum/Passport for auth APIs while keeping maryUI for frontend.

Gotchas and Tips

Pitfalls

1. Asset Compilation

   • Forgetting to run npm install && npm run dev after modifying vite.config.js or resources/js/ will break frontend assets.
   • Fix: Add a post-install hook in package.json:

     "scripts": {
         "postinstall": "npm install && npm run dev"
     }
     

2. Livewire Component Naming

   • Overriding Livewire components (e.g., Auth/Login) requires matching the exact namespace/class name to avoid conflicts.
   • Tip: Use php artisan livewire:discover to regenerate component classes if modified manually.

3. maryUI Component Overrides

   • Custom components must be placed in resources/views/components/maryui/ to override defaults.
   • Example: Copy vendor/alexvargash/tall-maryui/resources/views/components/maryui/button.blade.php to your resources/views/components/maryui/ folder.

4. Auth Scaffold Removal

   • Deleting auth files manually can break route bindings. Use:

     php artisan tall:uninstall --auth
     

Debugging

• Blade Errors: Check resources/views/layouts/app.blade.php for missing @stack or @yield directives.
• Livewire Errors: Use php artisan livewire:discover --force to reset component bindings.
• Asset Errors: Clear Vite cache with npm run dev -- --force.

Extension Points

1. Custom Directives Add Alpine.js directives in resources/js/app.js:

   document.addEventListener('alpine:init', () => {
       Alpine.directive('focus', (el) => el.focus());
   });
   

2. Vite Plugins Extend vite.config.js with plugins like @vitejs/plugin-laravel:

   import laravel from 'laravel-vite-plugin';
   export default defineConfig({
       plugins: [
           laravel({
               input: ['resources/css/app.css', 'resources/js/app.js'],
               refresh: true,
           }),
       ],
   });
   

3. maryUI Extensions Create custom maryUI components by extending the base classes:

   @maryui
   <x-maryui.button type="button" class="bg-blue-500">
       Custom Button
   </x-maryui.button>
   @endmaryui
   

4. Testing Extend auth tests in tests/Feature/Auth/ to cover custom logic:

   public function test_custom_auth_flow() {
       $response = $this->post('/custom-login', ['email' => 'test@example.com']);
       $response->assertRedirect('/dashboard');
   }