Storybook: 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.