Symfony Kernel Tabler Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require allsoftware/symfony-kernel-tabler
   

   Add the bundle to config/bundles.php:

   return [
       // ...
       Allsoftware\SymfonyKernelTabler\AllsoftwareKernelTablerBundle::class => ['all' => true],
   ];
   

2. First Use Case: Tabler Integration The bundle provides a foundation for integrating Tabler.io (via kevinpapst/tabler-bundle) into a Symfony kernel. Start by configuring Tabler in config/packages/kevinpapst_tabler.yaml:

   kevinpapst_tabler:
       assets:
           base_path: '%kernel.project_dir%/public/build/tabler'
           version: '1.0.0'
   

   Ensure your assets/ are built (e.g., via Vite/Webpack) and point to the correct path.

3. Kernel Configuration Extend the base kernel by creating a custom kernel class (e.g., Kernel.php):

   use Allsoftware\SymfonyKernelTabler\Kernel\TablerKernel;
   
   class Kernel extends TablerKernel
   {
       public function __construct(string $environment, bool $debug)
       {
           parent::__construct($environment, $debug);
           $this->registerBundles(); // Override if needed
       }
   }
   

4. Twig Integration The bundle includes Twig extensions for Tabler. Use it in templates:

   {{ tabler_assets() }} {# Loads Tabler CSS/JS #}
   <button class="btn btn-primary">Tabler Button</button>
   

Implementation Patterns

Workflow: Rapid Tabler-Powered Admin Panel

1. Base Template Setup Create a base template (templates/base.html.twig) leveraging Tabler’s grid system:

   {% extends 'tabler/base.html.twig' %}
   {% block title %}Dashboard{% endblock %}
   
   {% block content %}
       <div class="page-content">
           <div class="row">
               <div class="col-md-12">
                   {# Dynamic content here #}
               </div>
           </div>
       </div>
   {% endblock %}
   

2. Dynamic Components Use Twig includes for reusable Tabler components (e.g., cards, modals):

   {% include 'components/card.html.twig' with {
       'title': 'Users',
       'content': 'User management goes here'
   } %}
   

3. Form Integration Combine Symfony Forms with Tabler styling:

   {{ form_start(form) }}
       <div class="mb-3">
           {{ form_label(form.name) }}
           {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
       </div>
       <button type="submit" class="btn btn-primary">Save</button>
   {{ form_end(form) }}
   

4. Event-Driven Extensions Dispatch events for custom logic (e.g., post-Tabler asset load):

   // In a controller or service
   $this->get('event_dispatcher')->dispatch(
       new TablerAssetsLoadedEvent(),
       TablerAssetsLoadedEvent::NAME
   );
   

Integration Tips

• Asset Pipeline: Use Symfony’s AssetMapper to version Tabler assets dynamically:

  {{ asset('build/tabler/css/tabler.min.css', {'version': '1.0.0'}) }}
  

• Doctrine UUIDs: The bundle includes ramsey/uuid-doctrine. Configure in config/packages/doctrine.yaml:

  doctrine:
      orm:
          entity_managers:
              default:
                  mappings:
                      App:
                          type: attribute
                          is_bundle: false
                          dir: '%kernel.project_dir%/src/Entity'
                          prefix: 'App\Entity'
                          alias: App
  

• Security: Extend Symfony’s security with Tabler’s UI (e.g., login page):

  {% extends 'tabler/auth.html.twig' %}
  {% block body %}
      <form method="post">
          {{ form_widget(form._token) }}
          {{ form_row(form.email) }}
          {{ form_row(form.password) }}
          <button type="submit" class="btn btn-primary">Login</button>
      </form>
  {% endblock %}
  

Gotchas and Tips

Pitfalls

1. Asset Path Mismatch

   • Issue: Tabler assets not loading due to incorrect base_path in kevinpapst_tabler.yaml.
   • Fix: Verify public/build/tabler exists and matches your build output. Use absolute paths if needed:

     kevinpapst_tabler:
         assets:
             base_path: '/var/www/html/build/tabler' # Full server path
     

2. Kernel Override Conflicts

   • Issue: Custom kernel not inheriting TablerKernel features.
   • Fix: Ensure TablerKernel is the parent class and call parent::__construct():

     class AppKernel extends TablerKernel {
         public function __construct(string $environment, bool $debug) {
             parent::__construct($environment, $debug); // Critical!
         }
     }
     

3. Twig Extensions Missing

   • Issue: tabler_assets() or other Twig functions not recognized.
   • Fix: Clear cache and verify the bundle is enabled in bundles.php. Run:

     php bin/console cache:clear
     

4. UUID Doctrine Conflict

   • Issue: UUID fields not working with Doctrine ORM.
   • Fix: Ensure ramsey/uuid-doctrine is installed and configured in doctrine.yaml. Example entity:

     use Ramsey\Uuid\Doctrine\UuidType;
     
     #[ORM\Entity]
     class User {
         #[ORM\Id]
         #[ORM\Column(type: UuidType::NAME)]
         private ?UuidInterface $id = null;
     }
     

Debugging Tips

• Check Bundle Load Order: Use php bin/console debug:container --parameter=kernel.bundles to verify AllsoftwareKernelTablerBundle is loaded.
• Log Tabler Events: Dispatch a test event to debug event listeners:

  $this->get('event_dispatcher')->dispatch(
      new \Symfony\Contracts\EventDispatcher\GenericEvent(),
      'test.event'
  );
  

• Asset Debugging: Use Symfony’s AssetMapper debug mode:

  {% set assets = asset('build/tabler/css/tabler.min.css', {'debug': true}) %}
  

Extension Points

1. Custom Twig Extensions Add new Twig functions by extending the bundle’s compiler pass:

   // src/EventSubscriber/TwigExtensionSubscriber.php
   use Twig\TwigFunction;
   
   class TwigExtensionSubscriber implements EventSubscriberInterface {
       public static function getSubscribedEvents(): array {
           return [
               KernelEvents::CONTROLLER => 'onKernelController',
           ];
       }
   
       public function onKernelController(ControllerEvent $event): void {
           $twig = $event->getContainer()->get('twig');
           $twig->addFunction(new TwigFunction('custom_tabler_function', [$this, 'renderCustomTabler']));
       }
   }
   

2. Dynamic Asset Loading Override asset paths at runtime via a service:

   # config/services.yaml
   services:
       App\Service\TablerAssetResolver:
           arguments:
               $basePath: '%env(TABLER_ASSETS_PATH)%'
   

   Then inject into controllers or Twig extensions.

3. Event-Driven Theming Subscribe to TablerAssetsLoadedEvent to modify assets dynamically:

   $eventDispatcher->addListener(TablerAssetsLoadedEvent::NAME, function (TablerAssetsLoadedEvent $event) {
       $event->addCss('custom.css');
   });