Thursday, August 26, 2021

storybook - display the literal code in "show code" story block

 We were having a problem where the "show code" button for some of our components in storybook was being over-interpreted; like our formik config object was just showing as [Object object] and else where we were seeing children elements showing up as <MDXCreateElement> instead of the actual child.

One work around is to make sure you have docs.source.type = 'code';

Like in the meta of our .mdx that might be 

<Meta
  title='Components/Form'
  component={Form}
  docs: {
    source: {
      type: 'code'
    }
  }
  }}
/>

or we could do it globally in our preview.tsx, where we had a 

export const parameters = { docs: } 

All ready to go.

The downside is, this makes it so the "show code" content is no longer dynamic; we aren't applying it globally because we like the idea of having the source / properties for the current set of parameters shown. (like the code for a disabled button or whatever)

No comments:

Post a Comment