Используйте документы Storybook с Svelte - PullRequest
Новая
       31

Используйте документы Storybook с Svelte

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

Кажется, что единственный правильный способ написания пользовательских документов для аддона Storybook Docs - это использование MDX, что подразумевает, что он предназначен в первую очередь для React. На странице аддона явно указан Svelte как совместимый фреймворк, но, похоже, нет никаких инструкций по развертыванию.

Предположим, у меня есть простой компонент: button.svelte: 

<script>
  export let text;
</script>

<button on:click>{text}</button>

И соответствующая история , button.stories.js: 

import Button from './button.svelte';

export default {
  title: 'Button',
};

export const button = () => ({
  Component: Button,
  props: {
    text: 'press me!',
  },
});

Как бы мне go добавить произвольную документацию по уценке с помощью Storybook Docs?

1 Ответ

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

Сначала убедитесь, что ваше дополнение Storybook Docs настроено для анализа MDX, установив все необходимые зависимости . 

yarn add -D react react-is babel-loader

Затем вы можете записать документы MDX в отдельный файл с помощью .mdx расширение, встраивание ваших историй вместо явного их написания.

Создайте файл ./docs.mdx в том же каталоге, что и button.stories.js, с нужной вам документацией: 

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

# Button

One can write __proper Markdown__ here, as well as embed stories:

<!-- the IDs can be retrieved from the URL when opening a story -->
<Preview>
  <Story id="button--button" />
  <Story id="button--other" />
</Preview>

<!-- or an individual story -->
<Story id="button--flat" />

Затем измените ваш button.stories.js следующим образом: 

import Button from './button.svelte';
import docs from './docs.mdx';  // add this import

export default {
  title: 'Button',
  parameters: {  // and this parameters section
    docs: {
      page: docs,
    },
  },
};

export const button = () => ({
  Component: Button,
  props: {
    text: 'press me!',
  },
});

// Another story just for demonstration
export const other = () => ({
  Component: Button,
  props: {
    text: 'me too!',
  },
});
...