How would I pass an object to a component inside a story? about blast

[nathangross]

No worries—I appreciate the response!

Passing individual vars is great for smaller, atomic components. But being able to create and pass an object would be great.

Just thinking out loud here but maybe something like:

@storybook([
    'args' => [
        'ticket' => [
            'gameIsHome' => true,
            'date' => 'date',
            'title' => 'Title',
            'sponsor' => 'Sponsor',
            'imgSrc' => 'https://source.unsplash.com/XHTBZpRBoi0',
        ],
        'someOtherVars' => 'someOtherVars',
    ],
    'argTypes' => [
        'ticket' => [
            'isObject' => true,
        ],
    ],
])

[nathangross]

Here is how I currently have it set up and things seem to be working ok.

    'args' => [
        'type' => 'Single',
        'title' => 'Season Tickets',
        'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.',
        'flag' => 'Our Most Popular',
        'price' => '$14.99',
        'imgSrc' => 'https://source.unsplash.com/XHTBZpRBoi0',
    ],
])

@php
    $ticket = compact('type', 'title', 'flag', 'price', 'imgSrc', 'description');
    $ticket = (object) $ticket;
@endphp

<x-card.ticket :ticket="$ticket" />

I'm curious if there is a better, supported way of handling this type of component

[mrtimbrook]

Hey! Sorry for the delay. The args data is all converted to json by blast so your approach is probably the best way to pass an object to the component at this time. I can look into a better way to handle it in the future.

[mikebronner]

Here is how I currently have it set up and things seem to be working ok.

    'args' => [
        'type' => 'Single',
        'title' => 'Season Tickets',
        'description' => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.',
        'flag' => 'Our Most Popular',
        'price' => '$14.99',
        'imgSrc' => 'https://source.unsplash.com/XHTBZpRBoi0',
    ],
])

@php
    $ticket = compact('type', 'title', 'flag', 'price', 'imgSrc', 'description');
    $ticket = (object) $ticket;
@endphp

<x-card.ticket :ticket="$ticket" />

I'm curious if there is a better, supported way of handling this type of component

When I try this, I get undefined variable when passing in the variable to the component, as the logic in the component depends on this being specified, and is a required attribute, not nullable. How can I work around that?