将 Storybook 文档与 Svelte 结合使用

Question

为 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!',
  },
});

我将如何使用 Storybook Docs 添加任意 Markdown 文档？

Answer 1

首先，确保您的 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 { 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" />