Сборник рассказов / HTML для Addon-Docs - PullRequest
Новая
       9

Сборник рассказов / HTML для Addon-Docs

0 голосов
/ 01 апреля 2020

Как добавить документы в формате 'mdx' для моей истории ie в Storybook / HTML? Как я могу соединить мои example.stories. js с example.stories.mdx, как должен выглядеть example.stories.mdx? В официальной документации есть пример для React, но я не могу найти руководство, посвященное Storybook / HTML.

1 Ответ

0 голосов
/ 14 апреля 2020

Ключ в том, чтобы писать истории и документы отдельно, встраивая истории в документы, используя их идентификаторы (идентификатор истории можно найти в URL, что-то вроде stories--story).

Давайте скажем, у вас есть index.stories.js файл: 

import docs from './docs.mdx';  // this import is important

export default {
  title: 'Demo',
  parameters: {  // specify the docs MDX content here
    docs: {
      page: docs, 
    }
  }
};

export const Heading = () => '<h1>Hello World</h1>';

export const Button = () => {
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.innerText = 'Hello Button';
  btn.addEventListener('click', e => console.log(e));
  return btn;
};

И соответствующий docs.mdx файл будет содержать вложенные истории: 

import { Story, Preview } from '@storybook/addon-docs/blocks';

# Index

Writing `Markdown` here:

<Preview>
  <Story id="demo--heading" />
  <Story id="demo--button" />
</Preview>

And an individual story:

<Story id="demo--heading" />

Подробнее:

...