Storybook README 插件

注意：此 README 仅适用于版本 ^5.0.0。对于旧版本，请访问 LEGACY_README.md

所有以前的 API 应该在 ^5.0.0 及以上版本中正常工作。**但 Vue 用户需要更改他们的导入路径，因为 Vue 命令已移动到它们自己的文件夹中。**

Storybook README addon

此插件与以下版本兼容

适用于 React 的 Storybook (React 示例 Storybook)
适用于 Vue 的 Storybook (Vue 示例 Storybook)

实时演示

特性

自动生成属性表（仅适用于 React）
不影响故事函数。因此，Storybook 信息现在可以正常工作。
100% 支持 Markdown
代码高亮
接受多个 README（适用于 hoc 组件 - 添加组件和原始组件的 README）
外观类似 Github 的 README
支持用于 Vue 组件的 <docs/> 标签 (example-vue/components/MyButton/MyButton.vue).

它也非常有用，因为大多数项目和组件已经拥有README.md 文件。现在可以轻松地将它们添加到您的 Storybook 中。

如果安装了 Storybook 信息插件，故事将使用.addWithInfo 方法添加。

安装

npm install --save-dev storybook-readme

或

yarn add --dev storybook-readme

适用于 React Storybook 的 Webpack 配置

无需任何操作 :)

适用于 Vue Storybook 的 Webpack 配置

仅当使用单文件组件并且想要在 Storybook 文档中使用 <docs> 标签时。

module.exports = storybookBaseConfig => {
  storybookBaseConfig.module.rules.push({
    resourceQuery: /blockType=docs/,
    use: ['storybook-readme/vue/docs-loader', 'html-loader', 'markdown-loader'],
  });
};

在 Vue 模块内部定义 <docs> 标签

<docs>
Docs inside vue module 
</docs>

<template>
  <button class="button">
    <slot></slot>
  </button>
</template>

使用它在故事中定义文档

import MyButton from '../components/MyButton/MyButton.vue';

storiesOf('Vue <docs>', module).addParameters({
  readme: {
    content: MyButton.__docs,
  },
});

设置

在.storybook/addons.js 中注册插件

import 'storybook-readme/register';

在.storybook/config.js 中添加装饰器

import { addReadme } from 'storybook-readme';
addDecorator(addReadme);

5.0 版本的重要更改：此插件的核心命令现在从不同的位置导入，具体取决于您正在使用的框架。例如，React 将从主文件夹（如上所示）导入其命令，就像在 v4.0 中一样。另一方面，Vue 现在有了一个特定于 Vue 的导入位置。请参见下文

import { addReadme } from 'storybook-readme/vue'; // <---- Vue subpackage
addDecorator(addReadme);

使用

希望它非常简单。

import React from 'react';
import { storiesOf } from '@storybook/react';

import Button from '../components/Button';
import ButtonReadme from '../components/Button/README.md';

storiesOf('Buttons', module)
  .addDecorator(withKnobs)
  .addParameters({
    readme: {
      // Show readme before story
      content: ButtonReadme,
      // Show readme at the addons panel
      sidebar: ButtonReadme,
    },
  })
  .add('Button', () => <Button />);

可以为故事覆盖文档

import React from 'react';
import { storiesOf } from '@storybook/react';

import Button from '../components/Button';
import ButtonReadme from '../components/Button/README.md';

storiesOf('Buttons', module)
  .addDecorator(withKnobs)
  .addParameters({
    readme: {
      content: ButtonReadme,
      sidebar: ButtonReadme,
    },
  })
  .add('Button', () => <Button />)
  .add('Button', () => <Button />)
  .add('Button', () => <Button />, {
    readme: {
      // override docs
      content: CustomButtonReadme,
      sidebar: CustomButtonReadme,
    },
  });

所有选项列表

将应用于一系列故事。

.addParameters({
    readme: {
      /**
       * Accepts string (markdown) or array of strings
       * string | Array<string>
       */
      content: Readme,

      /**
       * Accepts string (markdown) or array of strings
       * string | Array<string>
       */
      sidebar: Readme,

      /**
       * Override theme values
       *
       * All theme values https://github.com/tuchk4/storybook-readme/blob/master/packages/storybook-readme/src/styles/githubMarkdownCss.js#L436
       */
      theme: {},

      /**
       * Highlightjs code theme
       * Import theme at _.storybook/config.js_.
       * Full list of theme https://highlightjs.org/static/demo/.
       */
      codeTheme: 'github',

      /**
       * Wrapper for story. Usually used to set some styles
       * NOTE: will be applied only for content docs (docs around the story)
       *
       * React: React.ReactNode
       * Vue: Vue component
       */
      StoryPreview: ({ children}) => <div>{children}</div>

      /**
       * Wrapper for hedaer docs. Usually used to set some styles
       * NOTE: will be applied only for content docs (docs around the story)
       *
       * React: React.ReactNode
       * Vue: Vue component
       */
      HeaderPreview: ({ children}) => <div>{children}</div>

      /**
       * Wrapper for footer docs. Usually used to set some styles
       * NOTE: will be applied only for content docs (docs around the story)
       *
       * React: React.ReactNode
       * Vue: Vue component
       */
      FooterPreview: ({ children}) => <div>{children}</div>

      /**
       * Wrapper for content and sidebar docs. Usually used to set some styles
       * NOTE: will be applied only for content docs (docs around the story)
       *
       * React: React.ReactNode
       * Vue: Vue component
       */
      DocPreview: ({ children}) => <div>{children}</div>
    },
  })

全局配置

将应用于所有故事。注意：全局配置 仅适用于内容文档（故事周围的文档）。

import { configureReadme } from 'storybook-readme';

configureReadme({
  /**
   * Wrapper for story. Usually used to set some styles
   * React: React.ReactNode
   * Vue: Vue component
   */
  StoryPreview: ({ children }) => <div>{children}</div>,

  /**
   * Wrapper for content and sidebar docs. Usually used to set some styles
   * React: React.ReactNode
   * Vue: Vue component
   */
  DocPreview: ({ children }) => (
    <div style={{ background: '#000' }}> {children}</div>
  ),

  /**
   * Wrapper for hedaer docs. Usually used to set some styles
   * React: React.ReactNode
   * Vue: Vue component
   */
  HeaderPreview: ({ children }) => (
    <div style={{ background: 'red' }}>{children}</div>
  ),

  /**
   * Wrapper for footer docs. Usually used to set some styles
   * React: React.ReactNode
   * Vue: Vue component
   */
  FooterPreview: ({ children }) => <div>{children}</div>,

  /**
   * Header docs in markdown format
   */
  header: '',

  /**
   * Footer docs in markdown format
   */
  footer: '',
});

Readme 占位符

 占位符用于故事
 占位符用于属性表

Button variants could be imported separately.

\`\`\`js import { OutlinedButton, ContainedButton, TextButton } from 'Button'; \`\`\`

<!-- PROPS -->

Example:

<!-- STORY -->

Some docs after story

表情符号

在冒号之间使用简码将表情符号插入文档中。例如

这是一个火箭 :rocket

所有简码列表可在 Emojipedia 或 Gist/rxaviers 上找到

:rocket
:grinning
:monkey

随时建议新功能或报告错误 :)

制作人

beyondghx

标签

如何安装插件创建一个插件