Add Commands for Quick Prototyping

[mouse0270]

so, one of the features I used to love from Fabricator was the ability to use a command that would create a block and template that I could easily modify. It just felt easier then manually creating everything.

I've created the following command for the Blocks php artisan filament-peek:block {name}. I am hoping to also make one for layouts along with Maybe making a command that will update content sections with all of the blocks in Peek, that way its a little less the user as to manually create and instead can just run a few commands to get setup.

Removed link to file, don't like that, thought it would show it as text

[mouse0270]

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Str;

class FilamentPeekBlockCommand extends Command
{
  /**
   * The name and signature of the console command.
   *
   * @var string
   */
  protected $signature = 'filament-peek:block {name : The name of the block to create}';

  /**
   * The console command description.
   *
   * @var string
   */
  protected $description = 'Create a new Filament block class and corresponding Blade view';

  /**
   * Execute the console command.
   */
  public function handle()
  {
    $name = $this->argument('name');
    $className = Str::studly($name);
    $kebabName = Str::kebab($name);
    
    // Create the block directory if it doesn't exist
    $blockDirectory = app_path('Filament/Peek/Blocks');
    if (!File::exists($blockDirectory)) {
      File::makeDirectory($blockDirectory, 0755, true);
      $this->info("Created directory: {$blockDirectory}");
    }
    
    // Create the view directory if it doesn't exist
    $viewDirectory = resource_path('views/filament/components/blocks');
    if (!File::exists($viewDirectory)) {
      File::makeDirectory($viewDirectory, 0755, true);
      $this->info("Created directory: {$viewDirectory}");
    }
    
    // Generate the block class
    $blockPath = $blockDirectory . '/' . $className . '.php';
    $blockContent = $this->getBlockTemplate($className, $name);
    
    if (File::exists($blockPath)) {
      if (!$this->confirm("Block class {$className} already exists. Overwrite?")) {
        $this->info('Block class creation cancelled.');
        return;
      }
    }
    
    File::put($blockPath, $blockContent);
    $this->info("Created block class: {$blockPath}");
    
    // Generate the Blade view
    $viewPath = $viewDirectory . '/' . $kebabName . '.blade.php';
    $viewContent = $this->getViewTemplate();
    
    if (File::exists($viewPath)) {
      if (!$this->confirm("Blade view {$kebabName}.blade.php already exists. Overwrite?")) {
        $this->info('Blade view creation cancelled.');
        return;
      }
    }
    
    File::put($viewPath, $viewContent);
    $this->info("Created Blade view: {$viewPath}");
    
    $this->newLine();
    $this->info("✅ Filament block '{$name}' created successfully!");
    $this->newLine();
    $this->line("Block class: App\\Filament\\Peek\\Blocks\\{$className}");
    $this->line("Blade view: filament.components.blocks.{$kebabName}");
  }
  
  /**
   * Get the block class template.
   */
  private function getBlockTemplate(string $className, string $name): string
  {
    return <<<PHP
<?php

namespace App\Filament\Peek\Blocks;

use Filament\Forms\Components\Builder\Block;
use Filament\Forms\Components\RichEditor;

class {$className}
{
  public static function make(
    string \$name = '{$name}',
    string \$context = 'form',
  ): Block {
    return Block::make(\$name)
      ->schema([
        RichEditor::make('text'),
      ]);
  }
}
PHP;
  }
  
  /**
   * Get the Blade view template.
   */
  private function getViewTemplate(): string
  {
    return <<<'BLADE'
@props(['text'])

{!! $text !!}
BLADE;
  }
}

[pboivin]

Hi @mouse0270 , thanks for sharing, this is pretty cool! I'll consider adding this to the demo project, it makes a lot of sense.

In Peek 3.x (for Filament v4), I've decided to deprecate the Builder Preview feature, and I'm still thinking of a replacement solution. I'll keep this in mind as I explore in this direction.

[mouse0270]

Does Builder Preview the option where the From Controls are on the left and the Preview content is on the left? Or is there a feature I am missing?

[mouse0270]

It does appear that is the feature you are deprecating. Darn, that is the feature my clients use and enjoy, my entire platform is built around that. It will be sad to see it go. I hope the replacement will be just as amazing.

[pboivin]

Yes, it's indeed the split view with the form and the preview on either side. No worries though, because the feature will be supported (even if deprecated) for the duration of Peek 3.x, and the replacement should follow the same idea, but probably simpler (less code in Peek itself) and more flexible (e.g. add a preview modal to your own Livewire component, instead of using a built-in thing). Let me know if you have any ideas, I'm always looking for feedback :)

[mouse0270]

honestly, just trying to get as close as I can to a page builder. I really miss things like Twill or even PHPagebuilder. I looked into plugins that implemented something like GrapeJS but they just didn't seem to have the polish or features like Peek does.

The only major feature I can think of is not really a peek feature but a huge modification to how the add Blocks is done. Its kinda of confusing to users to know what "Hero" or "Call To Action"

So I wish there was some way to display and SVG or Image of the block preview the user would see. For example something like this terrible mockup.

Where the user could see previews of blocks and drag them into the Editor instead of having to scroll to the bottom hit Add Block, then drag it to the position they want it in. But this is probably A LOT of work.