Doc code preview "No display name"

[fcisio]

Describe the bug
The Doc code preview does not display the component name correctly.

To Reproduce

1. Create a component with emotion js "Styled"
2. Create a component with "Theme UI"
3. Use those components in stories
4. Check the doc code preview

Expected behavior
The component name should display normally

Screenshots

Code snippets

[shilman]

@fcisio Is this still broken in the latest alpha? We made some improvements in #12638

[shilman]

@andezzat any chance you can take a look at this as follow-on to your "exotic components" fix? 🙏

[fcisio]

Hi @shilman
The [object Object] seems to be fixed. But still having issues with "No Display Name".

I found a quick fix for now:

Burger.displayName = "Burger"
const Template = (args) => <Burger {...args} />

[andezzat]

The [object Object] seems to be fixed. But still having issues with "No Display Name".

It sounds like styled(MyComp) doesn't assign displayName. I'm not sure if that's an SB issue then..

[shilman]

@andezzat is there any way we can detect that it's a styled component and automatically extract the display name from the wrapped component?

[zeckdude]

@shilman I'm experiencing a similar issue, but only when I use a decorator.

Without a decorator, the code preview shows me this:

<Tooltip title="Hi there!">
  <Button size="small">
    Open based on hover
  </Button>
</Tooltip>

With the decorator, I get this:

<div
  style={{
    margin: '3em'
  }}
>
  <No Display Name />
</div>

Here's my full story:

export const Minimal = args => {
  return (
    <Tooltip title="Hi there!" placement="top" {...args}>
      <Button type="primary" size="small">
        Open based on hover
      </Button>
    </Tooltip>
  );
};
Minimal.decorators = [
  Story => (
    <div style={{ margin: '3em' }}>
      <Story />
    </div>
  ),
];

I doubt it's an issue with the Tooltip component, since the code preview works fine without the decorator. Please let me know if you think this is related or if I should create a new issue.

[gptt916]

Exact same issue as @zeckdude described, issue only shows when I'm using a decorator.

My story looks like this:

export default {
  title: 'CheckboxTree',
  component: CheckboxTree,
  decorators: [
    withKnobs,
    (Story) => <div style={{ maxWidth: '256px' }}><Story/></div>
  ],
};

export const Valid = (args) => <CheckboxTree {...args} />

Valid.args = {
  nodes: validData
}

[shilman]

What happens if you use {Story()} instead of <Story />?

[gptt916]

@shilman It works that way, thank you!

Perhaps the documentation needs to be updated here: https://storybook.js.org/docs/react/writing-stories/decorators

[shilman]

cc @tmeasday @jonniebigodes not sure what to do about this 🤦

[tmeasday]

Oh man.

[Naxos84]

I can confirm that {Story()} fixes this issue when using the decorator in Storybook 6.0.27.

I guess that you don't have a solution for that by now?

[aaronnuu]

When I use the {Story()} solution to fix the <No display name /> issue then all of my hooks within the story stop working (I assume because my story component is now not being called by React.createElement)

[shilman]

I will try to fix this as part of #12022, and the recommendation will be to use <Story /> for consistency's sake.

[andykenward]

This is happening on "@storybook/react": "6.3.2" when using a decorator on an individual story.
I am using TypeScript 4.3.4.

// .storybook/main.js

module.exports = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-essentials",
    {
      name: "@storybook/preset-scss",
      options: {
        cssLoaderOptions: {
          modules: {
            localIdentName: CSS_MODULE_STORYBOOK_SCOPE_NAME
          }
        }
      }
    }
  ],
  typescript: {
    reactDocgen: "react-docgen-typescript"
  }
};

This

// component.stories.tsx

 decorators: [
    (Story) => (
      <StoryWrapperDefault>
        <Story />
      </StoryWrapperDefault>
    )
  ]

Output in show code docs.

<StoryWrapperDefault>
  <No Display Name />
</StoryWrapperDefault>

Changing the decorator to the above fix

// Component.stories.tsx

decorators: [(Story) => <StoryWrapperDefault>{Story()}</StoryWrapperDefault>]

Output in show code docs

<StoryWrapperDefault>
  <VoiceSearch
    onClose={() => {}}
    onSubmit={function noRefCheck() {}}
    open
  />
</StoryWrapperDefault>

[shilman]

@andykenward if you want to get rid of the decorator you can set the excludeDecorators parameter #14652

        docs: {
          source: {
            excludeDecorators: true,
          },
        },
      },

@jonniebigodes we need to rework the doc blocks documentation soon 🙈

[jonniebigodes]

@shilman indeed we do, I'll follow up with you so that we can coordinate how best to document this and move on from there. Sounds good?

[penx]

I will try to fix this as part of #12022, and the recommendation will be to use for consistency's sake.

@shilman #12022 is now closed but I still get this issue. It's great that I can use {Story()} but I had to come across this issue before I found the workaround. Something in the docs would be great if you don't think this can be fixed?

[moatorres]

What happens if you use {Story()} instead of <Story />?

Might be obvious for many, but shilman's comment means (using zeckdude's example above):

Minimal.decorators = [
  Story => (
    <div style={{ margin: '3em' }}>
      {Story()} // instead of <Story />
    </div>
  ),
];

[dechamp]

What happens if you use {Story()} instead of <Story />?

Why does this work?

[dechamp]

@andykenward if you want to get rid of the decorator you can set the excludeDecorators parameter #14652

        docs: {
          source: {
            excludeDecorators: true,
          },
        },
      },

@jonniebigodes we need to rework the doc blocks documentation soon 🙈

You are so awesome! Thank you! I've be scouring the web for an answer and just found this while i happened to be on the main issue of this thread, thank you!!!!

[jinyoung4478]

What happens if you use {Story()} instead of <Story />?

Thank you for your help! 😊

[fishkes]

@andykenward if you want to get rid of the decorator you can set the excludeDecorators parameter #14652

        docs: {
          source: {
            excludeDecorators: true,
          },
        },
      },

@jonniebigodes we need to rework the doc blocks documentation soon 🙈

Thanks @shilman! for anyone wandering where to add it, you can put it in ./storybook/preview.js

[bradlocking]

What happens if you use {Story()} instead of <Story />?

Why does this work?

Can I also get an answer to this?