Storybook: El descuento del complemento de información con código en línea (tilde invertido `) está roto

Creado en 15 ago. 2017 · 3Comentarios · Fuente: storybookjs/storybook

Versiones

@storybook/react v3.2.4
@storybook/addon-info v3.2.4

Entrada de ejemplo

Esta entrada en el ejemplo oficial

storiesOf('Button').addWithInfo(
  'simple usage (custom propTables)',
  `
      This is the basic usage with the button with providing a label to show the text.
      Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
      So, we need to give relevant React component classes manually using \`propTypes\` option as shown below:
      ~~~js
      storiesOf('Button')
        .addWithInfo(
          'simple usage (custom propTables)',
          <info>,
          <storyFn>,
          { inline: true, propTables: [Button]}
        );
      ~~~
    `,
  () => (
    <div>
      <Button label="The Button" onClick={action('onClick')} />
      <br />
    </div>
  ),
  { inline: true, propTables: [Button] }
);

Observe que propTypes está entre comillas invertidas.

Rendimiento esperado

La palabra propTypes se muestra en fuente monoespaciada, junto con la oración a la que pertenece.

Salida de corriente

La palabra propTypes convierte en un elemento <pre><code></code></pre> vacío, como se muestra a continuación.

Screenshot

Causa sospechada

El componente predeterminado para el acento inverso es <Code> , que se implementa como <code> dentro de <pre> , que es un elemento de bloque que divide la oración en dos.
<Code> representa el texto de this.props.code , pero el texto real está en this.props.children .

info bug

Fuente

MrOrz

Comentario más útil

Parece que code usa para las secciones de código en línea y de bloque.
Para el código en línea, debería representar props.children pero para el bloque de código props.code

UsulPro en 20 ago. 2017

👍2

Todos 3 comentarios

@MrOrz También enfrenté este problema y lo solucionaré en este PR # 1501

¡Gracias por la ayuda!

UsulPro en 15 ago. 2017

🎉1

¡Es genial escuchar eso!

Puedo simplemente sobrescribir marksyConf para solucionar este problema, así que no se apresure en el PR, tómese su tiempo;)

ex:


import React from 'react';
import { configure } from '@storybook/react';
import { setDefaults } from '@storybook/addon-info';

function Code({ children }) {
  return <code>{children}</code>;
}

function loadStories() {/* loading stories here */}

setDefaults({ marksyConf: { code: Code } });
configure(loadStories, module);

MrOrz en 20 ago. 2017

Parece que code usa para las secciones de código en línea y de bloque.
Para el código en línea, debería representar props.children pero para el bloque de código props.code

UsulPro en 20 ago. 2017

👍2

¿Fue útil esta página

0 / 5 - 0 calificaciones