Getting Started

Minimal Setup

Installation:
```
composer require b4rightnow/flux-pro
npm install --save-dev @b4rightnow/flux-pro
```
Ensure your composer.json has "minimum-stability": "dev" if using dev versions.

Publish Assets:

npm run dev  # or `npm run build` for production

Add the Flux CSS/JS to your resources/js/app.js or app.blade.php:

import '@b4rightnow/flux-pro/dist/css/flux.css';
import '@b4rightnow/flux-pro/dist/js/flux';

First Use Case: Integrate with a Livewire component:

// app/Http/Livewire/MyComponent.php
public function render()
{
    return view('livewire.my-component')->layout('layouts.app');
}

<!-- resources/views/livewire/my-component.blade.php -->
<x-flux.button wire:click="action">Click Me</x-flux.button>

Implementation Patterns

Core Workflows

Component Integration: Use Flux’s Blade components (e.g., <x-flux.button>, <x-flux.card>) in Livewire views. Example:

<x-flux.modal wire:model="isOpen">
    <x-slot name="title">Confirm Action</x-slot>
    <x-slot name="content">
        <p>Are you sure?</p>
    </x-slot>
    <x-slot name="footer">
        <x-flux.button wire:click="confirm">Confirm</x-flux.button>
    </x-slot>
</x-flux.modal>

Dynamic Styling: Leverage Flux’s utility classes (e.g., flux-text-primary, flux-bg-secondary) or custom CSS variables:
```
.my-custom-class {
    --flux-color-primary: #3b82f6;
}
```

Livewire + Flux State Management: Sync Flux state (e.g., modals, dropdowns) with Livewire properties:

// Livewire component
public $isModalOpen = false;
protected $listeners = ['updateModalState' => 'setModalState'];

public function setModalState($state)
{
    $this->isModalOpen = $state;
}

<x-flux.modal wire:model="isModalOpen" @open.window="wire:emit('updateModalState', true)">

Form Handling: Use Flux’s form components with Livewire validation:

<x-flux.form wire:submit="submit">
    <x-flux.input wire:model="name" label="Name" />
    <x-flux.button type="submit">Submit</x-flux.button>
</x-flux.form>

Advanced Patterns

Custom Components: Extend Flux’s base components via Alpine.js or custom JS:

// resources/js/flux-extensions.js
document.addEventListener('alpine:init', () => {
    Alpine.data('customComponent', () => ({
        init() {
            this.$watch('open', (value) => {
                this.$wire.emit('customEvent', value);
            });
        }
    }));
});

Dark Mode: Toggle via Livewire + Flux’s data-theme attribute:

<body class="flux-theme-{{ $darkMode ? 'dark' : 'light' }}">

Gotchas and Tips

Common Pitfalls

Asset Loading:
- Issue: Flux CSS/JS not loading.
- Fix: Ensure @b4rightnow/flux-pro is imported after Alpine.js in app.js:
```
import Alpine from 'alpinejs';
import '@b4rightnow/flux-pro';
window.Alpine = Alpine;
Alpine.start();
```
- Debug: Check browser console for 404 errors on /js/flux.js.
Livewire Conflicts:
- Issue: Flux components not updating with Livewire.
- Fix: Use wire:ignore for static Flux elements or wire:model for dynamic ones:
```
<div wire:ignore>
    <x-flux.static-component />
</div>
```
Tailwind CSS Conflicts:
- Issue: Flux styles overridden by Tailwind.
- Fix: Increase Flux’s specificity or use !important sparingly:
```
.flux-button {
    @apply !important;
}
```
Local Development:
- Issue: Local Flux repo not detected.
- Fix: Re-run composer config after cloning updates to the Flux repo.

Debugging Tips

Inspect Alpine State: Use Chrome DevTools to check Alpine’s reactivity:
```
console.log(Alpine.store('flux'));
```
Livewire Logs: Enable Livewire logging in .env:
```
LIVEWIRE_LOG_LEVEL=debug
```
Component Isolation: Test Flux components in isolation by creating a minimal Livewire component.

Extension Points

Custom Themes: Override Flux’s CSS variables in resources/css/app.css:

@layer flux-components {
    :root {
        --flux-color-primary: #1e40af;
    }
}

Alpine Plugins: Extend Flux’s Alpine functionality:

Alpine.plugin('fluxExtensions', () => {
    Alpine.directive('custom-directive', (el, { expression }, { evaluate }) => {
        // Custom logic
    });
});

Livewire Hooks: Use Livewire’s lifecycle hooks to sync with Flux:
```
public function mounted()
{
    $this->dispatch('flux-init');
}
```

Pro-Specific Features

Flux Pro Exclusives: Leverage Pro-only components (e.g., <x-flux.pro-card>) by checking the Flux Pro docs.
Enterprise Features: Use Pro’s advanced state management or analytics tools if applicable.

Flux Pro Laravel Package