es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • En Storybook, ¿cómo se puede mostrar el código completo de un componente en el área de “Mostrar código” de un documento de historia?

En Storybook, ¿cómo se puede mostrar el código completo de un componente en el área de “Mostrar código” de un documento de historia?

01 Aug, 2023 Programación

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

Para mantener los archivos .stories.mdx pequeños, escribimos los componentes “showcase” 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>Este es un gran ejemplo de componente utilizando SomeComponent</p>
    <somecomponent propa="" propb="" propc/="">
    <somecomponent propb=""></somecomponent>
  </somecomponent></div>
}

// SomeComponent.stories.mdx

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

<preview>
  <story name="Componente genérico">
    <hugecomponentshowcase></hugecomponentshowcase>
  </story>
</preview>

Esto resultará en lo siguiente cuando desee mostrar el código del ejemplo:

Ver imagen

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

<div>
  <p>Este es un gran ejemplo de componente utilizando SomeComponent</p>
  <somecomponent propa="" propb="" propc/="">
  <somecomponent propb=""></somecomponent>
</somecomponent></div>

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

He intentado agregar esto al componente Story:

<preview>
  <story name="Componente genérico" parameters="{{" docs:="" {source:="" {="" code:="" hugecomponentshowcase,="" }="" }}}="">
    <hugecomponentshowcase></hugecomponentshowcase>
  </story>
</preview>

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

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Mostrar código del componente en Storybook

    Si deseas mostrar el código JSX original de un componente de muestra en Storybook en lugar del código compilado, puedes utilizar la propiedad parameters del componente Story para pasar el código original.

    Puedes crear una cadena de texto con el código JSX utilizando el método toString() en la función del componente, y luego pasarlo como valor code de la propiedad source en el objeto parameters.

    Aquí tienes un ejemplo:

    // showcase/HugeComponentShowcase.jsx

import SomeComponent from 'components/SomeComponent';

export default function HugeComponentShowcase() {
  return <div>
    Este es un ejemplo de un componente enorme usando SomeComponent
    <somecomponent propa="" propb="" propc/="">
    <somecomponent propb=""></somecomponent>
  </somecomponent></div>
}

    // SomeComponent.stories.mdx

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

const showcaseCode = HugeComponentShowcase.toString();

<preview>
  <story name="Componente genérico" parameters="{{" docs:="" {source:="" {="" code:="" showcasecode="" }="" }="" }}="">
    <hugecomponentshowcase></hugecomponentshowcase>
  </story>
</preview>

    Esto mostrará el código JSX original del componente HugeComponentShowcase en la interfaz de Storybook, facilitando a los desarrolladores la comprensión de lo que sucede dentro del ejemplo.

Comments are closed.