`prop={Component}` breaks "show code" view

[emillaine]

Describe the bug
Passing a (nontrivial) component as a prop causes the source code view to be overly verbose.

For example, modifying the react-ts example as follows:

import {Paper} from "@material-ui/core";

export const WithArgs = (args) => <EmojiButton {...args} component={Paper} />;
//                                                       ^^^^^^^^^^^^^^^^^

Expected "show code" output:

<EmojiButton
  component={Paper}
  label="With args"
/>

Actual "show code" output:

<EmojiButton
  component={{
    $$typeof: Symbol(react.forward_ref),
    Naked: {
      $$typeof: Symbol(react.forward_ref),
      propTypes: {
        children: () => {},
        className: function noRefCheck() {},
        classes: function noRefCheck() {},
        component: function noRefCheck() {},
        elevation: function noRefCheck() {},
        square: function noRefCheck() {},
        variant: function noRefCheck() {}
      },
      render: function noRefCheck() {}
    },
    displayName: 'WithStyles(ForwardRef(Paper))',
    options: {
      defaultTheme: {
        breakpoints: {
          between: function noRefCheck() {},
          down: function noRefCheck() {},
          keys: [
            'xs',
            'sm',
            'md',
            'lg',
            'xl'
          ],
          only: function noRefCheck() {},
          up: function noRefCheck() {},
          values: {
            lg: 1280,
            md: 960,
            sm: 600,
            xl: 1920,
            xs: 0
          },
          width: function noRefCheck() {}
        },
        direction: 'ltr',
        mixins: {
          gutters: function noRefCheck() {},
          toolbar: {
            '@media (min-width:0px) and (orientation: landscape)': {
              minHeight: 48
            },
            '@media (min-width:600px)': {
              minHeight: 64
            },
            minHeight: 56
          }
        },
        overrides: {},
        palette: {
          action: {
            activatedOpacity: 0.12,
            active: 'rgba(0, 0, 0, 0.54)',
            disabled: 'rgba(0, 0, 0, 0.26)',
            disabledBackground: 'rgba(0, 0, 0, 0.12)',
            disabledOpacity: 0.38,
            focus: 'rgba(0, 0, 0, 0.12)',
            focusOpacity: 0.12,
            hover: 'rgba(0, 0, 0, 0.04)',
            hoverOpacity: 0.04,
            selected: 'rgba(0, 0, 0, 0.08)',
            selectedOpacity: 0.08
          },
          augmentColor: function noRefCheck() {},
          background: {
            default: '#fafafa',
            paper: '#fff'
          },
          common: {
            black: '#000',
            white: '#fff'
          },
          contrastThreshold: 3,
          divider: 'rgba(0, 0, 0, 0.12)',
          error: {
            contrastText: '#fff',
            dark: '#d32f2f',
            light: '#e57373',
            main: '#f44336'
          },
          getContrastText: function noRefCheck() {},
          grey: {
            '50': '#fafafa',
            '100': '#f5f5f5',
            '200': '#eeeeee',
            '300': '#e0e0e0',
            '400': '#bdbdbd',
            '500': '#9e9e9e',
            '600': '#757575',
            '700': '#616161',
            '800': '#424242',
            '900': '#212121',
            A100: '#d5d5d5',
            A200: '#aaaaaa',
            A400: '#303030',
            A700: '#616161'
          },
          info: {
            contrastText: '#fff',
            dark: '#1976d2',
            light: '#64b5f6',
            main: '#2196f3'
          },
          primary: {
            contrastText: '#fff',
            dark: '#303f9f',
            light: '#7986cb',
            main: '#3f51b5'
          },
          secondary: {
            contrastText: '#fff',
            dark: '#c51162',
            light: '#ff4081',
            main: '#f50057'
          },
          success: {
            contrastText: 'rgba(0, 0, 0, 0.87)',
            dark: '#388e3c',
            light: '#81c784',
            main: '#4caf50'
          },
          text: {
            disabled: 'rgba(0, 0, 0, 0.38)',
            hint: 'rgba(0, 0, 0, 0.38)',
            primary: 'rgba(0, 0, 0, 0.87)',
            secondary: 'rgba(0, 0, 0, 0.54)'
          },
          tonalOffset: 0.2,
          type: 'light',
          warning: {
            contrastText: 'rgba(0, 0, 0, 0.87)',
            dark: '#f57c00',
            light: '#ffb74d',
            main: '#ff9800'
          }
        },
        props: {},
        shadows: [
          'none',
          '0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)',
          '0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)',
          '0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
          '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)',
          '0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)',
          '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
          '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)',
          '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
          '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)',
          '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)',
          '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)',
          '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
          '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)',
          '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)',
          '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)',
          '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)',
          '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)',
          '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)',
          '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)',
          '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)',
          '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)',
          '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)',
          '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)',
          '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)'
        ],
        shape: {
          borderRadius: 4
        },
        spacing: function noRefCheck() {},
        transitions: {
          create: function noRefCheck() {},
          duration: {
            complex: 375,
            enteringScreen: 225,
            leavingScreen: 195,
            short: 250,
            shorter: 200,
            shortest: 150,
            standard: 300
          },
          easing: {
            easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
            easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
            easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
            sharp: 'cubic-bezier(0.4, 0, 0.6, 1)'
          },
          getAutoHeightDuration: function noRefCheck() {}
        },
        typography: {
          body1: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '1rem',
            fontWeight: 400,
            letterSpacing: '0.00938em',
            lineHeight: 1.5
          },
          body2: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '0.875rem',
            fontWeight: 400,
            letterSpacing: '0.01071em',
            lineHeight: 1.43
          },
          button: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '0.875rem',
            fontWeight: 500,
            letterSpacing: '0.02857em',
            lineHeight: 1.75,
            textTransform: 'uppercase'
          },
          caption: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '0.75rem',
            fontWeight: 400,
            letterSpacing: '0.03333em',
            lineHeight: 1.66
          },
          fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
          fontSize: 14,
          fontWeightBold: 700,
          fontWeightLight: 300,
          fontWeightMedium: 500,
          fontWeightRegular: 400,
          h1: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '6rem',
            fontWeight: 300,
            letterSpacing: '-0.01562em',
            lineHeight: 1.167
          },
          h2: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '3.75rem',
            fontWeight: 300,
            letterSpacing: '-0.00833em',
            lineHeight: 1.2
          },
          h3: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '3rem',
            fontWeight: 400,
            letterSpacing: '0em',
            lineHeight: 1.167
          },
          h4: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '2.125rem',
            fontWeight: 400,
            letterSpacing: '0.00735em',
            lineHeight: 1.235
          },
          h5: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '1.5rem',
            fontWeight: 400,
            letterSpacing: '0em',
            lineHeight: 1.334
          },
          h6: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '1.25rem',
            fontWeight: 500,
            letterSpacing: '0.0075em',
            lineHeight: 1.6
          },
          htmlFontSize: 16,
          overline: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '0.75rem',
            fontWeight: 400,
            letterSpacing: '0.08333em',
            lineHeight: 2.66,
            textTransform: 'uppercase'
          },
          pxToRem: function noRefCheck() {},
          round: function noRefCheck() {},
          subtitle1: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '1rem',
            fontWeight: 400,
            letterSpacing: '0.00938em',
            lineHeight: 1.75
          },
          subtitle2: {
            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
            fontSize: '0.875rem',
            fontWeight: 500,
            letterSpacing: '0.00714em',
            lineHeight: 1.57
          }
        },
        zIndex: {
          appBar: 1100,
          drawer: 1200,
          mobileStepper: 1000,
          modal: 1300,
          snackbar: 1400,
          speedDial: 1050,
          tooltip: 1500
        }
      },
      name: 'MuiPaper'
    },
    propTypes: {
      classes: function noRefCheck() {},
      innerRef: function noRefCheck() {}
    },
    render: function noRefCheck() {},
    useStyles: function noRefCheck() {}
  }}
  label="With args"
/>

---

To Reproduce

1. Checkout this branch: https://github.com/emlai/storybook/tree/issue-16995-repro
2. Run cd examples/react-ts && yarn && yarn storybook
3. Navigate to http://localhost:9011/?path=/docs/examples-emoji-button--with-args
4. Click "show code"

System
Environment Info:

System:
OS: macOS 11.6
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Binaries:
Node: 16.13.0 - /usr/local/bin/node
Yarn: 3.0.0-git.20210727.hash-3cbbb672 - /usr/local/bin/yarn
npm: 8.1.0 - /usr/local/bin/npm
Browsers:
Chrome: 96.0.4664.93
Safari: 14.1.2
npmPackages:
@storybook/addon-essentials: 6.5.0-alpha.3 => 6.5.0-alpha.3
@storybook/addon-storyshots: 6.5.0-alpha.3 => 6.5.0-alpha.3
@storybook/addon-storysource: 6.5.0-alpha.3 => 6.5.0-alpha.3
@storybook/cli: 6.5.0-alpha.3 => 6.5.0-alpha.3
@storybook/components: 6.5.0-alpha.3 => 6.5.0-alpha.3
@storybook/react: 6.5.0-alpha.3 => 6.5.0-alpha.3
@storybook/theming: 6.5.0-alpha.3 => 6.5.0-alpha.3

[iMoses-Apiiro]

even when the code isn't verbose it's an annoying bug..

i wish I could map these to show the displayName of the component as the prop and not these jsx objects

[iMoses-Apiiro]

It seems that the bug lies in a dependency package.

algolia/react-element-to-jsx-string#613

[emillaine]

Still reproduces with Storybook 7.0.6.

[lnmp4000]

This also seems to be an issue when the component is wrapped in a React Memo, for example using an Icon from @mui/icons-material results in:

 SuccessIconType={{
      $$typeof: Symbol(react.memo),
      compare: null,
      type: {
        $$typeof: Symbol(react.forward_ref),
        render: () => {}
      }
    }}

[wosephjeber]

This is still an issue in Storybook 8.6.6. A previous comment in this thread indicates that the problem lies with a dependency (react-element-to-jsx-string) but that no longer seems to be a Storybook dependency.

From what I can tell, it's only an issue when using args in a story. If I define a story as a function with no args, components passed as props render as expected. For example:

export function MyStory() {
  return (
    <Button icon={PlusIcon}>Add item</Button>
  )
}

The downsides there are that a) I can't use args to make the story more interactive, and b) the source block shows the whole function, not just the returned JSX syntax.