Storybook: Info addon markdown dengan kode inline (backtick `) rusak

Dibuat pada 15 Agu 2017 · 3Komentar · Sumber: storybookjs/storybook

Versi

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

Contoh masukan

Entri ini dalam contoh resmi

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] }
);

Perhatikan bahwa propTypes diapit oleh backticks.

Keluaran yang diharapkan

Kata propTypes ditampilkan dalam font monospace, bersama dengan kalimat tempatnya.

Keluaran saat ini

Kata propTypes menjadi elemen <pre><code></code></pre> kosong, seperti yang ditunjukkan di bawah ini.

Screenshot

Diduga penyebab

Komponen default untuk backtick adalah <Code> , yang diimplementasikan sebagai <code> di dalam <pre> , yang merupakan elemen blok yang memecah kalimat menjadi dua.
<Code> merender teks dari this.props.code , tetapi teks sebenarnya ada di this.props.children .

info bug

Sumber

MrOrz

Komentar yang paling membantu

Sepertinya code digunakan untuk bagian kode inline dan blok.
Untuk kode sebaris itu harus membuat props.children tetapi untuk blok kode props.code

UsulPro pada 20 Agu 2017

👍2

Semua 3 komentar

@MrOrz Saya menghadapi masalah ini juga dan akan memperbaikinya di PR #1501 ini

Terima kasih untuk bantuannya!

UsulPro pada 15 Agu 2017

🎉1

Sangat menyenangkan mendengarnya!

Saya bisa menimpa marksyConf untuk mengatasi masalah ini, jadi jangan terburu-buru mengerjakan PR, luangkan waktu Anda;)

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 pada 20 Agu 2017

Sepertinya code digunakan untuk bagian kode inline dan blok.
Untuk kode sebaris itu harus membuat props.children tetapi untuk blok kode props.code

UsulPro pada 20 Agu 2017

👍2

Apakah halaman ini membantu?

0 / 5 - 0 peringkat