Provide a way to opt out of the auto-applied decorator

[kylegach]

TL;DR: parameters.pseudos = false could be used to make the withPseudoState simply return the wrapped story

---

This addon globally applies the withPseudoState decorator. But, because of its usage of hooks (I think?), calling that decorator can cause problems in some contexts. In my case, it throws an error (see below) when called inside of the beforeScreenshot function of storyshots-puppeteer's imageSnapshot, but I'm guessing any usage outside of the Storybook preview context might be a problem.

Error: Storybook preview hooks can only be called inside decorators and story functions.

I've worked around this issue for now by manually applying the decorator instead of registering the addon, e.g.:

import { withPseudoState } from 'storybook-addon-pseudo-states/dist/withPseudoState'

export default {
  decorators: [withPseudoState],
}

But it'd be a much nicer API to register the addon and disable it (effectively, as Storybook doesn't allow you to truly disable/remove a decorator) for the edge cases where it causes problems.

Happy to try my hand at a PR if you agree.

[arek-widelab]

Hey @kylegach Had the same error message when I try to change my modal component state.

After click the button, it breaks. parameters.pseudos = false didn't work for me Second approach works so thanks for that

export const Preview = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>trigger</button>
      <FGModal
        isOpen={isOpen}
        onRequestClose={() => setIsOpen(false)}
        header="Header"
      >
        Dialogs inform users about a task and can contain critical information,
        require decisions, or involve multiple tasks. <br /> <br />A dialog is a
        type of modal window that appears in front of app content to provide
        critical information or ask for a decision. Dialogs disable all app
        functionality when they appear, and remain on screen until confirmed,
        dismissed, or a required action has been taken.
      </FGModal>
    </>
  );
};`

[marianaesteban]

Same issue for me, parameters.pseudos = false also didn't work. Wrapping the story in a separate component as above did. Any better solution for this other than adding that extra wrapper or having to manually add the decorator? Using the extra component also affects Code preview of Docs since it shows the wrapper instead of the actual content