bug(addon-docs): Code styling preview bug in CSF format

[ocBruno]

Describe the bug
Code styling is not rendered correctly

To Reproduce

1. Reproduction available in
   https://github.com/ocBruno/components/tree/fix/replace-addon-info-addon-docs
2. Some discussions which might be relevant
   WIP: feat(storybook): add addon-docs HospitalRun/components#241

Expected behavior
Correct code styling preview

Screenshots
Working component styling preview:

Component styling preview bug:

Code snippets
DefaultNavbar provides correct styling while linked list doesn't:

export const DefaultNavbar = () => (
  <Navbar
    navItems={[
      {
        type: 'icon',
        src:
          'https://raw.githubusercontent.com/HospitalRun/hospitalrun.github.io/master/favicon.png',
        onClick: () => {
          Toast('success', 'Icon clicked!!', 'Success')
        },
      },
      {
        type: 'header',
        label: 'HospitalRun',
        onClick: () => {
          Toast('success', 'Header clicked!!', 'Success')
        },
      },
      {
        type: 'link',
        label: 'Link',
        onClick: () => {
          Toast('success', 'Link clicked!!', 'Success')
        },
      },
      {
        type: 'link',
        label: 'Link 2',
        onClick: () => {
          Toast('success', 'Link clicked!!', 'Success')
        },
      },
      {
        type: 'search',
        className: 'ml-auto mr-3',
        onClickButton: () => {
          Toast('success', 'Button clicked!!', 'Success')
        },
        onChangeInput: () => {
          Toast('success', 'Search box changed!!', 'Success')
        },
      },
    ]}
  />
)

export const NavbarWithLinkedList = () => (
  <Navbar
    bg="dark"
    variant="dark"
    navItems={[
      {
        type: 'icon',
        src:
          'https://raw.githubusercontent.com/HospitalRun/hospitalrun.github.io/master/favicon.png',
        onClick: () => {
          Toast('success', 'Icon clicked!!', 'Success')
        },
      },
      {
        type: 'header',
        label: 'HospitalRun',
        onClick: () => {
          Toast('success', 'Header clicked!!', 'Success')
        },
      },
      {
        type: 'link',
        label: 'Link',
        onClick: () => {
          Toast('success', 'Link clicked!!', 'Success')
        },
      },
      {
        type: 'link-list',
        label: 'Link List',
        onClick: () => {
          Toast('success', 'Link list clicked!!', 'Success')
        },
        children: [
          {
            type: 'link',
            label: 'Sublink1',
            onClick: () => {
              Toast('success', 'Sublink1 clicked!!', 'Success')
            },
          },
          {
            type: 'link',
            label: 'Sublink2',
            onClick: () => {
              Toast('success', 'Sublink2 clicked!!', 'Success')
            },
          },
        ],
      },
      {
        type: 'search',
        placeholderText: 'Custom',
        className: 'ml-auto',
        buttonText: 'Text',
        buttonColor: 'secondary',
        onClickButton: () => {
          Toast('success', 'Search button clicked!!', 'Success')
        },
        onChangeInput: () => {
          Toast('success', 'Search box changed!!', 'Success')
        },
      },
    ]}
  />
)

System:
OS: Windows 10 10.0.18362
CPU: (12) x64 AMD Ryzen 5 3600X 6-Core Processor
Binaries:
Node: 12.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.21.1 - C:\Program Files\nodejs\yarn.CMD
npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0
Additional context
Removing the link-list makes the preview render correctly so I'm thinking it might be a problem parsing the nested objects.

Possible bug
I'm not sure if this is supposed to show the arguments that can be passed to create the component, if it's a bug, or if there is something wrong with my config.

Thanks and if any help is needed to fix this issue leave me a message!

[ocBruno]

I'm going to look into this bug but as it's my first storybook issue if anyone has any ideas or is currently working on this please let me know!

[shilman]

@ocBruno if you want help debugging this, please jump on the Storybook discord and hopefully somebody can give you a hand! https://discord.gg/UUt2PJb

[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!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!