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

[nathangross]

For instance, I have a typical blade component called ticket.blade.php. Inside that component I render things like ticket->title and $ticket->price. In typical Laravel fashion, I render the component by passing a whole ticket object (eloquent model) to the component like <x-card.ticket :ticket="$ticket" />

How would I do similar inside a story file? How can I pass a single $ticket object to the component inside a story?

In the button example, there are single variables like $label, etc. but I can't figure out how to create a story with an object rather than just individual vars.

Hopefully that question makes sense :) Thanks!

[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.

[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,
        ],
    ],
])

[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?