Tall Kit Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require datalogix/tall-kit
   npm install @tallkit/blade
   

   Add the Blade provider to config/app.php:

   'providers' => [
       // ...
       Datalogix\TallKit\TallKitServiceProvider::class,
   ],
   

2. Publish Assets

   php artisan vendor:publish --provider="Datalogix\TallKit\TallKitServiceProvider" --tag="public"
   npm run dev
   

3. First Use Case Use the sidebar component in a Blade view:

   @tallkit('sidebar', [
       'title' => 'Dashboard',
       'items' => [
           ['label' => 'Home', 'href' => '/'],
           ['label' => 'Profile', 'href' => '/profile'],
       ]
   ])
   

Implementation Patterns

Core Workflow

1. Component Registration Register components via the service provider or manually in AppServiceProvider:

   TallKit::registerComponents([
       'sidebar' => SidebarComponent::class,
       'custom-component' => CustomComponent::class,
   ]);
   

2. Dynamic Component Rendering Use the @tallkit directive with props:

   @tallkit('button', [
       'type' => 'primary',
       'label' => 'Submit',
       'onClick' => 'handleSubmit()'
   ])
   

3. Slot-Based Layouts Leverage slots for nested content (e.g., table with custom headers/footers):

   @tallkit('table', [
       'headers' => ['Name', 'Email']
   ])
       @slot('body')
           @foreach($users as $user)
               <tr>
                   <td>{{ $user->name }}</td>
                   <td>{{ $user->email }}</td>
               </tr>
           @endforeach
       @endslot
   @endslot
   

4. Integration with Alpine.js Combine with Alpine for interactivity:

   @tallkit('message', [
       'type' => 'success',
       'x-data' => '{
           show: true
       }',
       'x-show' => 'show'
   ])
   

Advanced Patterns

• Custom Components Extend TallKit\Component to create reusable UI elements:

  class MyComponent extends TallKit\Component {
      public function render() {
          return <<<'blade'
          <div x-data="{ open: false }">
              <button @click="open = !open">Toggle</button>
              <div x-show="open">Content</div>
          </div>
          blade;
      }
  }
  

• Prop Validation Validate props in the component class:

  public function validateProps(array $props) {
      return Validator::make($props, [
          'type' => 'required|in:primary,secondary',
          'label' => 'required|string',
      ]);
  }
  

• Asset Management Use the @tallkitStyles and @tallkitScripts directives for scoped assets:

  @tallkitStyles('sidebar')
  @tallkitScripts('table')
  

Gotchas and Tips

Common Pitfalls

1. Missing Alpine.js Ensure @tallkit/blade is installed and Alpine is loaded in your layout:

   @vite(['resources/js/app.js', 'node_modules/@tallkit/blade/dist/alpine.js'])
   

2. Prop Mismatches Validate props in the component class to avoid runtime errors. Example:

   public function validateProps(array $props) {
       return Validator::make($props, [
           'items' => 'required|array',
           'items.*.label' => 'required|string',
       ]);
   }
   

3. Caching Issues Clear Blade cache after adding new components:

   php artisan view:clear
   

4. Overriding Defaults Avoid overriding core TALLKit components (e.g., button, table) unless necessary. Prefix custom components (e.g., my-button).

Debugging Tips

• Inspect Props Use dd($props) in the component’s render() method to debug passed data.
• Check Console Enable Alpine debug mode in resources/js/app.js:

  Alpine.plugin(AlpineDebugger);
  

• Log Component Rendering Add logging in the TallKitServiceProvider to track component usage:

  TallKit::extend(function ($view) {
      $view->after(function ($view) {
          \Log::debug('Rendered component: ' . $view->getName());
      });
  });
  

Extension Points

1. Custom Directives Extend the @tallkit directive by publishing the config:

   php artisan vendor:publish --provider="Datalogix\TallKit\TallKitServiceProvider" --tag="config"
   

   Then modify config/tall-kit.php to add custom directives.

2. Global Props Set default props in the service provider:

   TallKit::setDefaultProps([
       'button' => ['theme' => 'dark'],
   ]);
   

3. Theming Override default styles by publishing the assets:

   php artisan vendor:publish --provider="Datalogix\TallKit\TallKitServiceProvider" --tag="public"
   

   Then extend the CSS in public/css/tall-kit.css.

4. Localization Use Laravel’s localization features with props:

   @tallkit('message', [
       'type' => 'warning',
       'message' => __('messages.warning'),
   ])