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

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

For example

// showcase/HugeComponentShowcase.jsx

import SomeComponent from 'components/SomeComponent';

export default function HugeComponentShowcase() {
  return <div>
    <p>This is a huge component 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 component" >
    <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 component 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 component

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

But this ends up showing the compiled code of the component and not the original JSX code.