Rating Star For Filament Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require l3aro/rating-star-for-filament
   

   Publish the package assets (if needed):

   php artisan vendor:publish --provider="L3aro\RatingStarForFilament\RatingStarForFilamentServiceProvider" --tag="rating-star-assets"
   

2. Basic Usage Add the rating field to a Filament form/resource:

   use L3aro\RatingStarForFilament\Fields\RatingStar;
   
   RatingStar::make('rating')
       ->required()
       ->max(5)
       ->default(3),
   

3. First Use Case Integrate into a Filament Resource or Page:

   public static function form(Form $form): Form
   {
       return $form
           ->schema([
               RatingStar::make('user_rating')
                   ->columns(5)
                   ->max(5),
           ]);
   }
   

Implementation Patterns

Common Workflows

1. Dynamic Rating Ranges Use max() and min() to control allowed values:

   RatingStar::make('service_rating')
       ->max(10)
       ->min(1)
       ->default(5),
   

2. Conditional Display Hide/show based on logic:

   RatingStar::make('review_rating')
       ->visible(fn ($record) => $record->isApproved()),
   

3. Validation Rules Extend Filament’s validation:

   RatingStar::make('product_rating')
       ->rules(['required', 'integer', 'between:1,5']),
   

4. Database Integration Ensure the column type matches (e.g., tinyint for 1–5 ratings):

   Schema::table('products', function (Blueprint $table) {
       $table->tinyInteger('rating')->default(0);
   });
   

5. Custom Styling Override default assets via published CSS/JS:

   // config/rating-star.php
   'star_color' => '#FFD700',
   'empty_color' => '#D3D3D3',
   

Gotchas and Tips

Pitfalls

1. Column Type Mismatch

   • Issue: Rating values (e.g., 3.5) may fail if the DB column is tinyint.
   • Fix: Use integer or decimal columns for half-star support.

2. Asset Loading Conflicts

   • Issue: Custom CSS/JS may override package styles.
   • Fix: Use ->extraAttributes(['class' => 'custom-rating']) and scope selectors.

3. Half-Star Precision

   • Issue: Default max(5) assumes whole numbers.
   • Fix: Set ->max(10) and divide by 2 in logic:

     $rating = $record->rating / 2;
     

4. Filament Version Compatibility

   • Issue: May break with major Filament updates.
   • Fix: Check the Filament docs for breaking changes.

Debugging Tips

• Inspect Rendered HTML: Use browser dev tools to verify star icons load.
• Check Console Logs: Enable debug: true in config for JS errors.
• Test Edge Cases: Validate null, 0, and max values in forms.

Extension Points

1. Custom Icons Override SVG icons via ->starIcon() and ->emptyStarIcon():

   RatingStar::make('rating')
       ->starIcon('heroicon-o-star')
       ->emptyStarIcon('heroicon-o-star'),
   

2. Event Hooks Listen for rating changes:

   RatingStar::make('rating')
       ->afterStateUpdated(fn ($state, $set) => Log::info("Rating updated to: {$state}")),
   

3. Localization Translate labels/tooltips:

   RatingStar::make('rating')
       ->label(__('filament-rating::rating.label'))
       ->helperText(__('filament-rating::rating.helper')),