Estoy usando react-styleguidist para crear documentación para mi proyecto nextjs. Por algunas razones convenientes, tengo varios componentes exportados en un archivo.

Estructura del proyecto

 -components - UI - Form.tsx - Button.tsx - Layout.tsx

Por ejemplo, tengo 3 componentes exportados en mi Layout.tsx

 // JSDoc For Container export const Container = ({className, children, ...props}: ContainerProps) => ( <div {...props} classname={classNames("container max-w-7xl mx-auto", className)}> {children} </div> ) // JSDoc for Another Component export const AnotherComponent = (props) => ( <div> {/* Component Code */} </div> ) // JSDoc for Third Component export const ThirdComponent = (props) => ( <div> {/* Component Code */} </div> )

Tengo, por ejemplo, estos 3 componentes en mi archivo de diseño, pero styleguidist muestra solo el componente Container y su documentación relacionada basada en el tipo JSDocs y Props

Mi configuración de Styleguidist

 const path = require("path"); const sections = require("./section.js"); module.exports = { propsParser: require("react-docgen-typescript").parse, resolver: require('react-docgen').resolver .findAllExportedComponentDefinitions, theme: { fontFamily: { base: '"Poppins", sans-serif', monospace: ["Fira Code"], } }, contextDependencies: [ path.resolve(__dirname, "section.js") ], components: "components/**/*.tsx", require: [path.join(__dirname, 'docs/dist/dist.css')], };

De hecho, probé con secciones personalizadas de los documentos de styleguidist , aún así pude obtener solo un componente en lugar de los 3.

Nota: Mantener cada componente en diferentes archivos hará que el manejo del proyecto sea más difícil. Quiero saber si hay alguna otra solución que no sea mantener todos y cada uno de los componentes en su archivo respectivo.