Right now in my team we are using Storybook v6 and the @storybook/addon-docs package in order to generate documentation for ponents.

In order to keep the .stories.mdx files small we write the story "showcase" ponents separately and then import them in the .stories.mdx files.

For example

// showcase/HugeComponentShowcase.jsx

import SomeComponent from 'ponents/SomeComponent';

export default function HugeComponentShowcase() {
  return <div>
    <p>This is a huge ponent showcase using SomeComponent</p>
    <SomeComponent propA propB propC/>
    <SomeComponent propB />
  </div>
}

// SomeComponent.stories.mdx

import { Meta, Story, Preview, Props } from '@storybook/addon-docs';
import HugeComponentShowcase from 'showcase/HugeComponentShowcase'; 

<Preview >
  <Story name="Generic ponent" >
    <HugeComponentShowcase />
  </Story>
</Preview>

This will result in this when you want to display the code of the showcase:

However what I want to be able to see there is:

<div>
  <p>This is a huge ponent showcase using SomeComponent</p>
  <SomeComponent propA propB propC/>
  <SomeComponent propB />
</div>

or at least the whole function body of HugeComponentShowcase.

I have tried adding this to the Story ponent

<Preview >
  <Story name="Generic ponent" parameters={{ docs: {source: { code: HugeComponentShowcase, } }}}>
    <HugeComponentShowcase />
  </Story>
</Preview>

But this ends up showing the piled code of the ponent and not the original JSX code.

Right now in my team we are using Storybook v6 and the @storybook/addon-docs package in order to generate documentation for ponents.

In order to keep the .stories.mdx files small we write the story "showcase" ponents separately and then import them in the .stories.mdx files.

For example

// showcase/HugeComponentShowcase.jsx

import SomeComponent from 'ponents/SomeComponent';

export default function HugeComponentShowcase() {
  return <div>
    <p>This is a huge ponent showcase using SomeComponent</p>
    <SomeComponent propA propB propC/>
    <SomeComponent propB />
  </div>
}

// SomeComponent.stories.mdx

import { Meta, Story, Preview, Props } from '@storybook/addon-docs';
import HugeComponentShowcase from 'showcase/HugeComponentShowcase'; 

<Preview >
  <Story name="Generic ponent" >
    <HugeComponentShowcase />
  </Story>
</Preview>

This will result in this when you want to display the code of the showcase:

However what I want to be able to see there is:

<div>
  <p>This is a huge ponent showcase using SomeComponent</p>
  <SomeComponent propA propB propC/>
  <SomeComponent propB />
</div>

or at least the whole function body of HugeComponentShowcase.

I have tried adding this to the Story ponent

<Preview >
  <Story name="Generic ponent" parameters={{ docs: {source: { code: HugeComponentShowcase, } }}}>
    <HugeComponentShowcase />
  </Story>
</Preview>

But this ends up showing the piled code of the ponent and not the original JSX code.

• javascript
• reactjs
• angular
• storybook

• 1 Does this help? blog.krawaller.se/posts/… – evolutionxbox Commented Jan 3, 2022 at 17:48
• Hm, that's definitely one way to do it. It's not solving exactly the same issue but it gives an idea of how my issue can be tackled. I was hoping there was some baked-in way to achieve the desired result without having to write a webpack loader, but as I said, that's one way to do it, if there is no other option :) – Dimitris Karagiannis Commented Jan 3, 2022 at 17:59
• 2 Storybook tends to focus on using the ponents, not the code of the ponents themselves. – evolutionxbox Commented Jan 3, 2022 at 18:01

1 Answer 1

The only I've found to show the desired code on storybook, when using .mdx files it's by using the <Canvas mdxSource={'whatever you want to display'} ></Canvas>