Is it possible and valid to modify context parameters in decorator?

[MaximKondratev]

I have some stories that are only shown for mobile browsers. My setup requires both providing a context and setting parameters.viewport.defaultViewport to one of mobile viewports so it opens in mobile view.

Since decorators are meant to provide some sort of context wrapping, following decorator would work:

import { Decorator } from '@storybook/react';
import mobileStoryTag from './mobileStoryTag';

const mobileStoryDecorator: Decorator = (Story, context) => {
    if (context.tags.includes(mobileStoryTag) {
        return (
            <MobileContextProvider>
                {Story()}
            </MobileContextProvider>
        );
    }

    return Story();
}

I provide custom tag to story that should be rendered as mobile. And it works as expected, mobile context wraps the story.

Next I am trying to add some context modification to decorator:

const mobileStoryDecorator: Decorator = (Story, context) => {
    if (context.tags.includes(mobileStoryTag) {
        context.parameters.viewport.defaultViewport = 'MyMobileViewport';

        return (
            <MobileContextProvider>
                {Story()}
            </MobileContextProvider>
        );
    }

    return Story();
}

And it also "works", but not as I expect. If I write minimal story:

export const MyMobileStory: StoryObj = {
    render: (args, context) => {
        console.log(context.parameters.viewport.defaultViewport);

        return <div/>;
    },
    tags: [mobileStoryTag],
}

console.log will print MyMobileViewport, but default viewport will not be selected. Moreover, opening another story after this one will actually apply MyMobileViewport to default viewport this time.

My previous workaround with Storybook 6.5 was HOC-based per story, but now it is harder to type with Storybook 7 StoryObj and having a lot of StoryFn stories that I do not want to migrate to StoryObj right now.

So the question is: is it possible and valid to modify context in decorator? Am I doing it wrong? Or is it only for wrapping render part of a story, but not for modifying context?

[h-goncalves]

Hey mate, have you figured out something about this approach?
I see that there are no answers, but was wondering if you came with a work-arround for it
(i really wanted for this to be possible, cause i want to change some argTypes dynamically without the use of the argTypes object)

[Marklb]

ArgTypes don't have a way to dynamically change that I know of. There is probably a workaround, but I don't know if it would be simple to notify everything of that change. ArgTypes are used to initialize things before the story renders, so I suspect there would be some side-effects if they were changed from something such as a decorator. I have seen that asked a few times, but I don't remember any solutions being provided.

[h-goncalves]

Ah i see that indeed some rendering issues could rise from it. Thought it was fine, cause it's possible to have them declared on story level with the StoryObj

tnx anyway 👍

[Marklb]

So the question is: is it possible and valid to modify context in decorator? Am I doing it wrong? Or is it only for wrapping render part of a story, but not for modifying context?

I don't know the actual answer to the question, but I think that assumption is mostly correct. Decorators are called when a story is preparing to render or a change has happened that could have caused args to be different and a new render or updating of args needs to happen. By the time a decorator is called, the parameters have already been parsed.

The docs define parameters as "Parameters are a set of static, named metadata about a story, typically used to control the behavior of Storybook features and addons.", so I think the intention is that they are not able to be dynamically changed, but depending on the addon you may can come up with a workaround. I think the Viewports addon tracks the current viewport selection in globals, so you may be able to use the useGlobals hook to update the current selection.