[Feature Request]: Suppoert WireUI v2 blade components

[joskfg]

Feature Description

As WireUI v1, I want to be able to have autocomplete for the blade components in WireUI v2 that currently is in beta.

Related: https://github.com/laravel-idea/plugin/issues/682#issuecomment-1514226381 Current config in beta: https://github.com/wireui/wireui/blob/v2.0.0-beta.0/ide.json

Thanks

[ph7jack]

Hello @adelf, I'll be glad to help with this. Please tell me what we need to change to allow Laravel IDEA to recognize WireUI components.

[adelf]

Hello. There is no good way to fetch them automatically. But there is workaround starting from 8.2.5 version.

ide.json file:

{
    "$schema": "https://laravel-ide.com/schema/laravel-ide-v2.json",
    "blade": {
        "components": {
            "list": [
                {
                    "name": "alert",
                    "className": "WireUi\\Components\\Alert\\Index"
                },
                {
                    "name": "avatar",
                    "className": "WireUi\\Components\\Avatar\\Index"
                },
                {
                    "name": "badge",
                    "className": "WireUi\\Components\\Badge\\Base"
                },
                {
                    "name": "mini-badge",
                    "className": "WireUi\\Components\\Badge\\Mini"
                },
                {
                    "name": "button",
                    "className": "WireUi\\Components\\Button\\Base"
                },
                {
                    "name": "mini-button",
                    "className": "WireUi\\Components\\Button\\Mini"
                },
                {
                    "name": "card",
                    "className": "WireUi\\Components\\Card\\Index"
                },
                {
                    "name": "checkbox",
                    "className": "WireUi\\Components\\Switcher\\Checkbox"
                },
                {
                    "name": "color-picker",
                    "className": "WireUi\\Components\\ColorPicker\\Picker"
                },
                {
                    "name": "datetime-picker",
                    "className": "WireUi\\Components\\DatetimePicker\\Picker"
                },
                {
                    "name": "description",
                    "className": "WireUi\\Components\\Label\\Description"
                },
                {
                    "name": "dialog",
                    "className": "WireUi\\Components\\Dialog\\Index"
                },
                {
                    "name": "dropdown",
                    "className": "WireUi\\Components\\Dropdown\\Base"
                },
                {
                    "name": "dropdown.item",
                    "className": "WireUi\\Components\\Dropdown\\Item"
                },
                {
                    "name": "dropdown.header",
                    "className": "WireUi\\Components\\Dropdown\\Header"
                },
                {
                    "name": "error",
                    "className": "WireUi\\Components\\Errors\\Single"
                },
                {
                    "name": "errors",
                    "className": "WireUi\\Components\\Errors\\Multiple"
                },
                {
                    "name": "icon",
                    "className": "WireUi\\Components\\Icon\\Index"
                },
                {
                    "name": "input",
                    "className": "WireUi\\Components\\TextField\\Input"
                },
                {
                    "name": "currency",
                    "className": "WireUi\\Components\\TextField\\Currency"
                },
                {
                    "name": "maskable",
                    "className": "WireUi\\Components\\TextField\\Maskable"
                },
                {
                    "name": "number",
                    "className": "WireUi\\Components\\TextField\\Number"
                },
                {
                    "name": "password",
                    "className": "WireUi\\Components\\TextField\\Password"
                },
                {
                    "name": "phone",
                    "className": "WireUi\\Components\\TextField\\Phone"
                },
                {
                    "name": "label",
                    "className": "WireUi\\Components\\Label\\Base"
                },
                {
                    "name": "link",
                    "className": "WireUi\\Components\\Link\\Index"
                },
                {
                    "name": "modal",
                    "className": "WireUi\\Components\\Modal\\Index"
                },
                {
                    "name": "modal-card",
                    "className": "WireUi\\Components\\Modal\\Card"
                },
                {
                    "name": "native-select",
                    "className": "WireUi\\Components\\Select\\Native"
                },
                {
                    "name": "notifications",
                    "className": "WireUi\\Components\\Notifications\\Index"
                },
                {
                    "name": "radio",
                    "className": "WireUi\\Components\\Switcher\\Radio"
                },
                {
                    "name": "select",
                    "className": "WireUi\\Components\\Select\\Base"
                },
                {
                    "name": "select.option",
                    "className": "WireUi\\Components\\Select\\Option"
                },
                {
                    "name": "select.user-option",
                    "className": "WireUi\\Components\\Select\\UserOption"
                },
                {
                    "name": "textarea",
                    "className": "WireUi\\Components\\TextField\\Textarea"
                },
                {
                    "name": "time-picker",
                    "className": "WireUi\\Components\\TimePicker\\Picker"
                },
                {
                    "name": "time-selector",
                    "className": "WireUi\\Components\\TimePicker\\Selector"
                },
                {
                    "name": "toggle",
                    "className": "WireUi\\Components\\Switcher\\Toggle"
                },
                {
                    "name": "popover",
                    "className": "WireUi\\Components\\Popover\\Index"
                },
                {
                    "name": "switcher",
                    "className": "WireUi\\Components\\Wrapper\\Switcher"
                },
                {
                    "name": "text-field",
                    "className": "WireUi\\Components\\Wrapper\\TextField"
                }
            ]
        }
    }
}

I generated it using this script:

use WireUi\WireUiConfig as Config;

class WireUiIdeJsonCommand extends Command
{
    protected $signature = 'wireui:ide_json';

    protected $description = 'Command description';

    public function handle(): void
    {
        $json = [
            "\$schema" => "https://laravel-ide.com/schema/laravel-ide-v2.json"
        ];

        $list = [];
        foreach (Config::defaultComponents() as $component) {
            $list[] = [
                'name' => $component['alias'],
                'className' => $component['class'],
            ];
        }

        $json['blade'] = [
            'components' => [
                'list' => $list,
            ]
        ];

        file_put_contents(base_path('ide.json'), json_encode($json,
            JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES
        ));
    }
}

[ph7jack]

Thanks a lot, @adelf. I'll test it later today and let you know.

[ph7jack]

@adelf It works well. Is it possible to add the component properties in the suggestions (manually, since the component uses magic properties)?