Stacking dehydrateStateUsing methods

[edstevo]

I am proposing this change to improve some functionality in line with the Code quality tips in the filament documentation: https://filamentphp.com/docs/4.x/resources/code-quality-tips

Recently, I've taken to directly extending some Schema classes instead of following the suggestions in "Code quality tips" page.

Suggested:

  namespace App\Filament\Resources\Customers\Schemas\Components;
  
  use Filament\Forms\Components\TextInput;
  
  class CustomerNameInput
  {
      public static function make(): TextInput
      {
          return TextInput::make('name')
              ->label('Full name')
              ->required()
              ->maxLength(255)
              ->placeholder('Enter your full name')
              ->belowContent('This is the name that will be displayed on your profile.');
      }
  }

Example one of my approach:

  namespace App\Filament\Shared\Schemas;
  
  use Filament\Forms\Components\TextInput;
  use Filament\Support\Icons\Heroicon;
  use Illuminate\Support\Str;
  
  class PhoneInput extends TextInput
  {
    public static function make(?string $name = null): static
    {
        return parent::make($name)
            ->suffixIcon(Heroicon::Phone)
            ->tel()
            ->nullable()
            ->dehydrateStateUsing(fn ($state) => Str::squish($state));
    }
  }

Utilised like:

PhoneInput::make('phone')->required();

Example two of my approach:

  namespace App\Filament\Shared\Schemas;
  
  use Filament\Forms\Components\TextInput as BaseTextInput;
  use Illuminate\Support\Str;
  
  class TextInput extends BaseTextInput
  {
      public function removeWhitespace(): static
      {
          return $this->dehydrateStateUsing(fn ($state) => Str::squish($state));
      }
  }

Utilised like:

TextInput::make('post_code')->required()->removeWhitespace();

But in example two, if I have one Text Input where I need to removeWhitespace and Capitalise the text then I don't have the ability to do this currently.

For example with a postcode, if it is entered like " wo98 0AJ" and I want it to be "WO98 0AJ", ideally I could do something like this:

  namespace App\Filament\Shared\Schemas;
  
  use Filament\Forms\Components\TextInput as BaseTextInput;
  use Illuminate\Support\Str;
  
  class TextInput extends BaseTextInput
  {
      public function removeWhitespace(): static
      {
          return $this->dehydrateStateUsing(fn ($state) => Str::squish($state));
      }

      public function capitalise(): static
      {
          return $this->dehydrateStateUsing(fn ($state) => Str::upper($state));
      }
  }

and then call

App\Filament\Shared\Schemas\TextInput::make('post_code')->removeWhitespace()->capitalise()->required();

So the idea here is to "stack" the dehydration callbacks, like a pipeline, to then be executed. This allows for a flexible class that keeps the concerns in one place.

I have submitted a pull-request on the repo where the code would need to be changed: filamentphp/schemas#1. Please let me know if this would be a valuable contribution and how I might be able to test it to reinforce the framework.

[Estigy]

Yeah, I'd like to support this.
To go one step further, I would like even more places where currently you can add only a single callback to be a stackable list of callbacks.
Example: Have some transformation function applied via formatStateUsing() and then add the money() transformation on top of it.

[edstevo]

I did a new pull-request in the right place: #17608

@Estigy - I tried to have a go with your stacked formatStateUsing but had issues testing TextEntry components. I also wasn't sure on your exact use case.

I came across something like what you are suggesting in the past when I tried to add VAT to a price, and then wanted to format it to money, but in the end, I appended an attribute on the model itself and passed that through to the money() transformer.

[Estigy]

My use case was that I wanted the last callback to be the money() formatter and add another callback before that would break down the calculated yearly sum to months/weeks/days/etc.

Just as you did, I managed to do this calculation somewhere else in the end: I used the divideBy parameter of the money formatter to eg. devide by 12 for monthly values. (I guess the parameter was intended to divide by multiple of 10, but ... ;-) )