Decorators in HTML edition of Storybook

[dgibson666]

I'm following up on a question I posted on discord. I am trying to wrap all of my stories inside of a component and it was pointed out that decorators were exactly what I wanted. However, the examples given (linked) are for React and I can't seem to get them working in the HTML version of Storybook.
https://storybook.js.org/docs/html/writing-stories/decorators

The docs say:
This snippet doesn’t exist for HTML yet. Contribute it in a PR now. In the meantime, here’s the React snippet.

Using the snippet verbatim throws an error and tells me that to use JSX, rename preview.js to preview.jsx. If I do that, Storybook builds, but it doesn't apply the decorator.

Is this possible in the HTML version?

[renatewr]

I am using HTML version as well, and we are using a few decorators!

.storbyook/preview.js

const withWrapper = (story, context) => {
  if (context.args.myArg) {
    document.body.style.width = '94%';
    document.body.style.margin = '0 auto';
//wrap your story in whatever code you like
    return `<div>${story()}</div>`;
  }
  return `${story()}`;
};


export const decorators = [withWrapper];

[dgibson666]

Thanks @renatewr . I got it working. I think it was user error, as we were already exporting decorators and I didn't see it. But docs for my build (HTML/Vite) would certainly improve confidence in using features like this.

Now I am trying to adjust the story's root to not show the wrapping tags in the HTML panel, but having trouble finding where that goes. I could do that in an older project.

Edit: This is part of the HTML add-on, which is why I was having trouble finding it. All good now.

[mariohernandez]

Hi @dgibson666 do you mind posting a snippet of how you are configuring and using decorators in Storybook HTML? Trying to make sure I am not missing out on your findings. Thank you.