Getting Started

Minimal Steps to First Use

Install the Package:
```
composer require bebo925/tall
php artisan tall:install
```
- This scaffolds:
  - JS dependencies (via npm install).
  - tailwind.config.js with TALL preset.
  - Updated webpack.mix.js (migrates to Vite).
  - app.blade.php layout file.
  - vite.config.js (edit host for HMR).
Verify Setup:
- Run npm install && npm run dev to compile assets.
- Check resources/views/app.blade.php for the <x-tall::messages> component (handles flash messages).
First Component Usage:
```
<x-tall::button style="primary">Click Me</x-tall::button>
```
- Place this in any Blade file to render a styled button.

Flash Messages:

session()->flash('message', [
    'type' => 'success',
    'message' => 'Action completed!'
]);

Messages appear automatically via <x-tall::messages> in app.blade.php.

Where to Look First

Component Documentation: Focus on the README usage examples for:
- Buttons (<x-tall::button>).
- Inputs (<x-tall::input.text>, <x-tall::input.checkbox>).
- Panels (<x-tall::panel>) and tables (<x-tall::table>).
Configuration Files:
- tailwind.config.js: Customize Tailwind (e.g., colors, fonts).
- vite.config.js: Adjust HMR host for local development.
Published Views:
```
php artisan vendor:publish --tag="tall-views"
```
- Override default components (e.g., resources/views/vendor/tall/).

First Use Case: Form Page

<x-tall::page-heading title="User Profile">
    <x-slot name="actions">
        <x-tall::button style="primary" wire:click="save">Save</x-tall::button>
    </x-slot>
</x-tall::page-heading>

<x-tall::panel title="Edit Details">
    <x-slot name="body">
        <x-tall::input label="Full Name" error="name">
            <x-tall::input.text wire:model.defer="name" />
        </x-tall::input>
        <x-tall::input label="Email" error="email">
            <x-tall::input.text wire:model.defer="email" />
        </x-tall::input>
    </x-slot>
</x-tall::panel>

Key Features Used:

Nested components for form fields.
Livewire integration (wire:model.defer).
Error handling via error="property_name" (assumes Laravel validation).

Implementation Patterns

Core Workflows

1. Component-Based UI Development

Pattern: Use Blade components as "Lego blocks" for rapid UI assembly.

<!-- Reusable panel with actions -->
<x-tall::panel title="Settings">
    <x-slot name="body">
        <x-tall::input label="Notification Email">
            <x-tall::input.text wire:model.defer="email" />
        </x-tall::input>
    </x-slot>
    <x-slot name="footer">
        <x-tall::button style="primary" wire:click="update">Save</x-tall::button>
    </x-slot>
</x-tall::panel>

Tip: Leverage slots (body, footer) for flexible content placement.

2. Livewire + Alpine Integration

Pattern: Combine Livewire reactivity with Alpine.js for dynamic behavior.

<x-tall::input label="Search">
    <x-tall::input.text
        wire:model.defer="searchQuery"
        x-on:keyup.enter="$wire.search()"
    />
</x-tall::input>

Tip: Use x-on for Alpine events alongside Livewire directives (wire:click, wire:model).

3. Modal Workflow

Pattern: Trigger modals via Livewire events.

// In Livewire component
$this->dispatch('openModal', [
    'component' => 'tall-confirmation-dialog',
    'arguments' => [
        'message' => 'Delete item?',
        'title' => 'Confirm',
        'style' => 'danger',
    ]
]);

<!-- In Blade view -->
<x-tall::modal>
    <x-slot name="title">Confirm Action</x-slot>
    <x-slot name="actions">
        <x-tall::button style="danger" wire:click="delete">Delete</x-tall::button>
    </x-slot>
</x-tall::modal>

Tip: Ensure wire-elements/modal is installed (included via tall:install).

4. Table Rendering

Pattern: Dynamic tables with server-side data.

<x-tall::table>
    <x-slot name="head">
        <x-tall::table.heading>Name</x-tall::table.heading>
        <x-tall::table.heading>Status</x-tall::table.heading>
    </x-slot>
    <x-slot name="body">
        @foreach($users as $user)
            <x-tall::table.row>
                <x-tall::table.cell>{{ $user->name }}</x-tall::table.cell>
                <x-tall::table.cell>
                    <span class="{{ $user->status === 'active' ? 'text-green-500' : 'text-red-500' }}">
                        {{ $user->status }}
                    </span>
                </x-tall::table.cell>
            </x-tall::table.row>
        @endforeach
    </x-slot>
</x-tall::table>

Tip: Use Tailwind classes for cell styling (e.g., text-green-500).

5. Flash Messages and Notifications

Pattern: Global notifications via session or Livewire.

// Laravel session flash
session()->flash('message', [
    'type' => 'success',
    'message' => 'User created!',
]);

// Livewire dispatch
$this->dispatch('message', [
    'type' => 'error',
    'message' => 'Validation failed!',
]);

<x-tall::messages dark="true"></x-tall::messages>

Tip: Customize message styles by overriding the tall-messages component.

Integration Tips

1. Customizing Tailwind Config

Extend tailwind.config.js to add custom colors or fonts:

module.exports = {
    presets: [require('tall-preset')],
    theme: {
        extend: {
            colors: {
                brand: '#1DA1F2', // Example custom color
            },
        },
    },
};

Tip: Use purge: [] cautiously to avoid removing unused Tailwind classes.

2. Overriding Components

Publish and modify views:

php artisan vendor:publish --tag="tall-views" --force

Edit resources/views/vendor/tall/button.blade.php to customize button styles.

3. Vite Configuration

Update vite.config.js for HMR:

export default defineConfig({
    server: {
        host: 'localhost', // Required for HMR
        hmr: {
            host: 'localhost',
        },
    },
});

Tip: Use ?noCache queries in dev for faster reloads.

4. Livewire Component Integration

Extend Livewire components with TALL components:

<div>
    <x-tall::page-heading title="Dashboard">
        <x-slot name="actions">
            <x-tall::button style="primary" wire:click="create">New Item</x-tall::button>
        </x-slot>
    </x-tall::page-heading>

    @if ($showModal)
        <x-tall::modal>
            <x-slot name="title">Create Item</x-slot>
            <!-- Modal content -->
        </x-tall::modal>
    @endif
</div>

Tip: Use $this->dispatch() for modal events and $this->listen() for responses.

5. Form Validation

Bind Livewire properties to TALL inputs:

<x-tall::input label="Username" error="username">
    <x-tall::input.text wire:model.defer="username" />
</x-tall::input>

Tip: Validate in Livewire:

public function rules() {
    return ['username' => '

Tall Laravel Package