Possible to dynamically set paramters via args?

[nathanshelly]

👋 First off thanks for this amazing product! Migrated from v5 to v6 recently and controls inference from Typescript prop types is absolutely amazing.

I'm wondering if it's possible to set parameters of a story based on the args so that someone could play with parameters via controls.

Here's a trivial example of what I'm interested in:

export function Foo({ fullscreen }) {
  Foo.parameters = { layout: fullscreen ? 'fullscreen' : 'centered' };

  return <div>This is a {fullscreen ? 'fullscreen' : 'centered'} component</div>;
}
Foo.args = { fullscreen: true };

Unfortunately setting that parameters inside the function doesn't have any effect in Storybook. If I add a console.log(Foo) before the return <div>... I can see that the parameters on the Foo object are indeed being set but Storybook isn't updating based on it.

My real use case here is with the storybook-addon-apollo-client. I would love to have a control that I could modify to change the mocks passed to the MockedProvider which are set on the parameters. Is there any way to achieve what I'm looking for?

[shilman]

Parameters are meant to be static, so changing them at runtime doesn't make sense.

Args are parameters that are meant to be changed at runtime. They are available everywhere parameters are available:

• As a field of the story context object context.parameters vs context.args
• Via hooks: useParameters vs useArgs

So I think rather than using args to set parameters, you can just use args instead. Would that work for your use case?

[tmeasday]

Maybe the solution is indeed to make parameters mutable. But that might just muddy the waters even further.

[lifeiscontent]

@shilman I'm in the same boat (args are static), for me personally, I'd just create another story.

[jamesonhill]

Has anyone figured out a hack or workaround to get dynamic/mutable parameters? Before I found this thread, I logged this issue: #15325. The Args announcement & docs make it seem like whatever you can do with knobs you can also accomplish using Args. Maybe it was a bug with the old version, but using knobs to control parameters has been hugely valuable but not possible with Args it seems.

[tmeasday]

@jamesonhill I replied to your issue: #15325 (comment)

TLDR here is that the parameter was not changing, the parameter was a function that needed some way to read the current value of the arg. I proposed a way to do it for the use case presented (a GraphQL resolver mock).

[jamesonhill]

To anyone else following this, the comment here worked perfectly for me: #15325 (comment)