addon-info doesn't handle React.forwardRef appropriately

[vpicone]

Describe the bug
When forwarding a ref to a child component, the component shows up as <Unknown>. You can set the display name of the wrapper component to the name of the child component, but this means less legible devtools.

To Reproduce
Steps to reproduce the behavior:

1. Export a component with a React.forwardRef wrapper:
2. View the story source section of addon-info

Note: If you set the displayName of the wrapper component, addon-info will use that. However, simply using the displayName from the child makes for less readable dev tools, it looks like component nested within itself.

Expected behavior
Story source should ignore the wrapper component <ForwardRef> and display the child before displaying <Unknown>

Code snippets

<Unknown> - currently happening w/o intervention

import React, { forwardRef } from 'react';

const withForwardRef = Component => {
  const forwarder = forwardRef((props, ref) => (
    <Component {...props} innerRef={ref} />
  ));
  return forwarder;
};

export default withForwardRef;

<ForwardRef(Component)> - good for dev tools bad for story

import React, { forwardRef } from 'react';

const withForwardRef = Component => {
  const forwarder = forwardRef((props, ref) => (
    <Component {...props} innerRef={ref} />
  ));
  forwarder.displayName = `ForwardRef(${Component.displayName || Component.name})`; // use display name if provided
  return forwarder;
};

export default withForwardRef;

<Component> (duplicate child) good for story, bad for dev tools

import React, { forwardRef } from 'react';

const withForwardRef = Component => {
  const forwarder = forwardRef((props, ref) => (
    <Component {...props} innerRef={ref} />
  ));
  forwarder.displayName = Component.displayName || Component.name; // use display name if provided
  return forwarder;
};

export default withForwardRef;

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!