How to display a component that uses the $errors variable in Story with explicit passing?

[suginoki45]

Hi!
Please excuse my poor English.
Thank you for the great library.

Let me ask a question as there does not seem to be the same issue in the past.

Environment

My environment is:

M1 Macbook Air
macOS 12.2.1
Blast v1.8

Description

I have a component that changes its style when an error occurs, like this:

@props([
    'name' => '',
    'errors' => null,
])

<input {{ $attributes->class(['!border-rose-600' => $errors->has($name)])
    ->merge([
        'type' => 'text',
        'name' => $name,
        'class' => 'w-full !text-base py-3 px-5 border border-solid border-transparent focus:outline-none focus:border-primary-400 rounded-xl',
    ]) }} />

I want to display this component in Storybook, but since the $errors variable is undefined.
I tried to override the has() method explicitly by using storybook or php directive, but you received an error message and could not achieve your goal.

@storybook([
    'args' => [
        'errors' => (object) [
            'has' => function () {
                return true;
            }
        ]
    ]
])

<x-input :errors="$errors" placeholder="Enter text here"></x-input>

// error message -> Call to a member function has() on array

@php
    $errors = (object) [
        'has' => function () {
            return true;
        },
    ];
@endphp

<x-input :errors="$errors" placeholder="Enter text here"></x-input>

// error message -> Call to undefined method stdClass::has()

Is there a way to display this component in Story?

[wojciechczerniak]

Looks like the ShareErrorsFromSession middleware is missing: #51

We can do what it does internally:

@storybook([ 'name' => 'Email input' ])

@php(view()->share('errors', new \Illuminate\Support\ViewErrorBag))

<x-input name="email"/>

Or use that to mock the error and input state:

@storybook([ 'name' => 'Email input' ])

@php
$errors = new \Illuminate\Support\ViewErrorBag();

$errors->default = new \Illuminate\Support\MessageBag([
    'email' => 'The email field is required.'
]);

view()->share('errors', $errors);
@endphp

<x-input name="email"/>

With some more coding errors and state can be controlled from storybook.