En este momento, en mi equipo, estamos usando Storybook v6 y el paquete @storybook/addon-docs para generar documentación para los componentes.

Para mantener pequeños los archivos .stories.mdx , escribimos los componentes de "exhibición" de la historia por separado y luego los importamos en los archivos .stories.mdx .

Por ejemplo

 // 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>

Esto dará como resultado esto cuando quieras mostrar el código de la vitrina:

Sin embargo, lo que quiero poder ver allí es:

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

o al menos todo el cuerpo de la función de HugeComponentShowcase .

He intentado agregar esto al componente Story

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

Pero esto termina mostrando el código compilado del componente y no el código JSX original.