Dall Laravel Package

Getting Started

Minimal Steps to Begin

1. Install via Composer

   composer require better-futures-studio/dall
   

   Run the preset installer:

   php artisan dall:install
   

   This publishes assets, config, and sets up Vite for Alpine.js/daisyUI.

2. First Use Case: Scaffold a New View Create a new Blade view (e.g., resources/views/layouts/app.blade.php):

   <x-app-layout>
       @yield('content')
   </x-app-layout>
   

   Extend it in child views:

   @extends('layouts.app')
   @section('content') ... @endsection
   

3. Quick Theme Switcher Add the theme switcher component to your layout:

   <x-theme-switcher />
   

   Users can toggle themes (e.g., light, dark, cupcake) dynamically.

Implementation Patterns

Core Workflows

1. Asset Management

   • Vite compiles Alpine.js + daisyUI. Modify vite.config.js to add custom assets:

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

   • Rebuild assets after changes:

     npm run dev
     

2. Livewire Integration Use Livewire for reactive components. Example:

   // app/Http/Livewire/ExampleComponent.php
   public function render() {
       return view('livewire.example-component');
   }
   

   <!-- resources/views/livewire/example-component.blade.php -->
   <div x-data="{ open: false }">
       <button @click="open = !open">Toggle</button>
       <!-- Livewire content -->
   </div>
   

3. Pagination Views Replace default pagination with daisyUI’s:

   {{ $posts->links('vendor.pagination.daisyui') }}
   

   Customize in resources/views/vendor/pagination/daisyui.blade.php.

4. Theme Customization

   • Disable unused themes in tailwind.config.js:

     daisyui: {
         themes: ['light', 'dark'], // Only enable these
     }
     

   • Override theme colors via CSS variables.

Integration Tips

• Alpine.js + Livewire: Use Alpine for client-side interactivity (e.g., modals) and Livewire for server-driven logic.
• Blade Components: Leverage @component directives for reusable UI (e.g., <x-card />).
• Dark Mode: DaisyUI’s dark mode integrates with Laravel’s dark class. Toggle via:

  // Alpine.js
  document.documentElement.classList.toggle('dark');
  

Gotchas and Tips

Pitfalls

1. Vite Build Failures

   • Issue: Missing dependencies (e.g., @tailwindcss/typography).
   • Fix: Install via:

     npm install @tailwindcss/typography daisyui
     

   • Debug: Check npm run dev output for errors.

2. Theme Switcher Not Persisting

   • Issue: LocalStorage not updating.
   • Fix: Ensure the theme-switcher component uses Alpine.js to sync with localStorage:

     <x-theme-switcher :themes="['light', 'dark']" />
     

     Default themes are pre-configured; extend via props.

3. Livewire + Alpine Conflicts

   • Issue: Alpine directives not working inside Livewire.
   • Fix: Use wire:ignore on Alpine-managed elements:

     <div wire:ignore x-data="{ ... }">
         <!-- Alpine logic -->
     </div>
     

4. Tailwind/DaisyUI Version Mismatches

   • Issue: DaisyUI styles break after updates.
   • Fix: Pin versions in package.json:

     "daisyui": "^x.y.z",
     "tailwindcss": "^3.0.0"
     

   • Tip: Run npx tailwindcss -i input.css -o output.css --watch to debug.

Debugging Tips

• Inspect DaisyUI Classes: Use browser dev tools to verify classes like btn-primary are applied.
• Clear Vite Cache: If styles don’t update:

  npm run build
  

• Check tailwind.config.js: Ensure plugins include DaisyUI:

  plugins: [require('daisyui')],
  

Extension Points

1. Custom DaisyUI Themes Extend themes in tailwind.config.js:

   daisyui: {
       themes: [
           {
               mytheme: {
                   'primary': '#3b82f6',
                   'secondary': '#10b981',
               },
           },
       ],
   }
   

2. Livewire Component Styling Scope DaisyUI classes to Livewire components:

   <div x-data x-init="$wire.init()">
       <button class="btn btn-primary">Action</button>
   </div>
   

3. Alpine.js Event Listeners Listen for theme changes globally:

   // resources/js/app.js
   document.addEventListener('theme-changed', (e) => {
       console.log('Theme updated to:', e.detail);
   });