This add-on breaks "View Code"

[matthew-dean]

Our scenario. We have a story like this:

<Button>
  default
</Button>

When you go to show code in Storybook Docs it renders like this:

<Button>
  default
</Button>

However, we've set up this add on with the following decorator:

export default () => {
  addStoryDecorators(() => [
    Story => (
      <ThemeProvider theme={theme}>
        <GlobalStyles />
        <Story />
      </ThemeProvider>
    )
  ])
}

This results in Show Code showing:

<Fe
  theme={{
    // entire theme object
  }}
>
  <GlobalStyles />
  <No Display Name />
</Fe>

Is there a way to fix this?

[theKashey]

This should not happen:

• storybook-include adds decorators to the story, not changes the story any other way
• storysource works on story-file level, it could not be affected.

But might be I am improperly reading "When you go to view code in Storybook Docs". What is "view code"?

[matthew-dean]

Go to Docs. Click on "Show code"

[matthew-dean]

Without storybook-include, in Docs mode

With storybook-include

[matthew-dean]

Note that setting global decorators in preview.js does not have this effect. This is specific to this package.

[matthew-dean]

Any progress on this? Thanks!

[theKashey]

Waiting for some free time to handle tasks outside of a normal job 😞