PHP code example of blackpig-creatif / filament-component-picker

1. Go to this page and download the library: Download blackpig-creatif/filament-component-picker library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

blackpig-creatif / filament-component-picker example snippets




return [

    /*
    |--------------------------------------------------------------------------
    | Default Component Directory
    |--------------------------------------------------------------------------
    |
    | The default directory where component picker will look for components.
    | This path is relative to resources/views/components/
    |
    | Default: 'richeditor'
    | Example: components/richeditor/attribution.blade.php
    |
    */

    'default_directory' => env('COMPONENT_PICKER_DEFAULT_DIR', 'richeditor'),

    /*
    |--------------------------------------------------------------------------
    | Fallback Directory
    |--------------------------------------------------------------------------
    |
    | If a component is not found in the default directory, the picker will
    | fall back to this directory.
    |
    | Default: null (will search in components root)
    | Example: 'shared' would search in components/shared/
    |
    */

    'fallback_directory' => env('COMPONENT_PICKER_FALLBACK_DIR', null),

    /*
    |--------------------------------------------------------------------------
    | Auto-discover Components
    |--------------------------------------------------------------------------
    |
    | Automatically discover all components in the default directory and
    | make them available in the picker without explicit configuration.
    |
    */

    'auto_discover' => env('COMPONENT_PICKER_AUTO_DISCOVER', true),

    /*
    |--------------------------------------------------------------------------
    | Default Options
    |--------------------------------------------------------------------------
    |
    | Components that should always be available in the picker.
    | These are added to auto-discovered components.
    |
    | Use dot notation for nested components:
    | - 'attribution' will look in: richeditor/, then components/
    | - 'shared.attribution' will look in: shared/, then components/
    | - 'marketing.cta.button' will look in: marketing/cta/, then components/
    |
    */

    'default_options' => [
        // 'shared.cta-button',
        // 'shared.cta-icon',
    ],

    /*
    |--------------------------------------------------------------------------
    | Excluded Components
    |--------------------------------------------------------------------------
    |
    | Components to exclude from auto-discovery.
    | Use simple names (without directory prefix).
    |
    */

    'excluded_components' => [
        // 'internal-component',
        // 'deprecated-widget',
    ],

    /*
    |--------------------------------------------------------------------------
    | Component Labels
    |--------------------------------------------------------------------------
    |
    | Custom labels for components in the picker dropdown.
    | If not specified, labels are auto-generated from component names.
    |
    | Example: 'cta-button' becomes 'Cta Button'
    |
    */

    'component_labels' => [
        // 'attribution' => 'Photo Attribution',
        // 'cta-button' => 'Call to Action Button',
    ],

    /*
    |--------------------------------------------------------------------------
    | Shortcode Parser
    |--------------------------------------------------------------------------
    |
    | Configuration for the shortcode parser that renders components
    | on the frontend.
    |
    */

    'parser' => [
        // Cache parsed component configurations
        'cache' => env('COMPONENT_PICKER_CACHE', true),

        // Cache duration in seconds (default: 1 hour)
        'cache_duration' => 3600,

        // Log parsing errors
        'log_errors' => env('COMPONENT_PICKER_LOG_ERRORS', true),
    ],

];



namespace App\Filament\Resources;

use BlackpigCreatif\FilamentComponentPicker\Actions\ComponentPickerAction;
use Filament\Forms\Components\RichEditor;
use Filament\Resources\Resource;

class BlogPostResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                RichEditor::make('content')
                    ->

ComponentPickerAction::make('insertComponent')
    ->excludeOptions(['internal-component', 'deprecated-widget'])

ComponentPickerAction::make('insertComponent')
    ->withoutAutoDiscovery()
    ->addOptions(['shared.cta-button']) // Only show these

ComponentPickerAction::make('insertComponent')
    ->excludeOptions(function (array $options) {
        // Remove all components starting with 'admin-'
        return array_filter($options, fn($key) => !str_starts_with($key, 'admin-'), ARRAY_FILTER_USE_KEY);
    })

'component_labels' => [
    'attribution' => 'Photo Attribution',
    'cta-button' => 'Call to Action Button',
],
bash
php artisan vendor:publish --tag="blackpig-creatif-component-picker-config"
blade
{{-- resources/views/components/richeditor/attribution.blade.php --}}
@props([
    'photographer' => '',
    'link' => ''
])

<div {{ $attributes->merge(['class' => 'text-sm text-gray-600 italic']) }}>
    Photo by <a href="{{ $link }}" target="_blank" class="underline">{{ $photographer }}</a>
</div>
blade
{{-- resources/views/components/richeditor/callout.blade.php --}}
@props([
    'title' => '',
    'content' => '',
    'type' => 'info'
])

<div class="callout callout-{{ $type }}">
    <h4>{{ $title }}</h4>
    <p>{{ $content }}</p>
</div>
blade
{{-- resources/views/blog/show.blade.php --}}
@php
    use BlackpigCreatif\FilamentComponentPicker\Services\ShortcodeParser;
@endphp

<article>
    <h1>{{ $post->title }}</h1>

    <div class="content">
        {!! ShortcodeParser::parse($post->content) !!}
    </div>
</article>

resources/views/components/
├── richeditor/              # Default directory (auto-discovered)
│   ├── attribution.blade.php
│   ├── callout.blade.php
│   └── quote.blade.php
├── shared/                  # Explicitly added components
│   ├── cta-button.blade.php
│   └── cta-icon.blade.php
└── marketing/
    └── newsletter.blade.php