Storybook: A marcação do addon de informações com código embutido (backtick `) está quebrada

Criado em 15 ago. 2017 · 3Comentários · Fonte: storybookjs/storybook

Versões

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

Entrada de exemplo

Esta entrada no exemplo 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 crases.

Saída esperada

A palavra propTypes é mostrada em fonte monoespaçada, junto com a frase a que pertence.

Saída de corrente

A palavra propTypes torna-se um elemento vazio <pre><code></code></pre> , conforme mostrado abaixo.

Screenshot

Causa suspeita

O componente padrão para crase é <Code> , que é implementado como <code> dentro de <pre> , que é um elemento de bloco que divide a frase em duas.
<Code> renderiza o texto de this.props.code , mas o texto real está em this.props.children .

info bug

Fonte

MrOrz

Comentários muito úteis

Parece que code usado para as seções de código inline e de bloco.
Para código inline, deve renderizar props.children mas para o bloco de código props.code

UsulPro em 20 ago. 2017

👍2

Todos 3 comentários

@MrOrz Eu também enfrentei esse problema e vou corrigi-lo neste PR # 1501

Obrigado pela ajuda!

UsulPro em 15 ago. 2017

🎉1

É ótimo ouvir isso!

Posso apenas substituir marksyConf para contornar esse problema, portanto, não se apresse no PR, não tenha pressa;)

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 em 20 ago. 2017

Parece que code usado para as seções de código inline e de bloco.
Para código inline, deve renderizar props.children mas para o bloco de código props.code

UsulPro em 20 ago. 2017

👍2

Esta página foi útil?

0 / 5 - 0 avaliações