Storybook README 插件使用教程

Storybook README 插件使用教程

storybook-readme React Storybook addon to render README files in github style 项目地址: https://gitcode.com/gh_mirrors/st/storybook-readme

1. 项目介绍

storybook-readme 是一个 React Storybook 的插件，用于在 Storybook 中渲染 GitHub 风格的 README 文件。该插件支持 React、Vue 和 HTML 的 Storybook，并且可以自动生成组件的 props 表，提供 100% 的 Markdown 支持，以及代码高亮等功能。

2. 项目快速启动

安装

首先，你需要安装 storybook-readme 插件：

npm install --save-dev storybook-readme
# 或者使用 yarn
yarn add --dev storybook-readme

Webpack 配置

React Storybook

如果你使用的是 React Storybook，通常不需要额外的 Webpack 配置。但如果你使用 TypeScript，则需要在 Webpack 配置中添加 markdown-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'markdown-loader',
          },
        ],
      },
    ],
  },
};

Vue Storybook

对于 Vue Storybook，如果你使用的是单文件组件（SFC）并且使用了 <docs> 标签，则需要进行以下配置：

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

配置 Storybook

注册插件

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

import 'storybook-readme/register';

添加装饰器

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

import { addDecorator, configure } from '@storybook/react';
import { addReadme } from 'storybook-readme';

addDecorator(addReadme);

function loadStories() {
  require('../stories/index.js');
}

configure(loadStories, module);

使用示例

在 Storybook 中使用 storybook-readme 插件：

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 />);

3. 应用案例和最佳实践

自动生成 Props 表

storybook-readme 插件可以自动生成 React 组件的 props 表，这使得文档更加完整和易于理解。

多 README 文件支持

你可以为高阶组件（HOC）添加多个 README 文件，分别描述组件本身和原始组件的文档。

代码高亮

插件支持代码高亮，使得文档中的代码示例更加清晰易读。

4. 典型生态项目

Storybook

storybook-readme 是基于 Storybook 的插件，Storybook 是一个用于开发和展示 UI 组件的开源工具。它支持 React、Vue、Angular 等多种前端框架。

Markdown

storybook-readme 完全支持 Markdown 语法，使得文档编写更加灵活和高效。

PrismJS

插件使用 PrismJS 进行代码高亮，支持多种代码主题，可以根据需要进行自定义。

通过以上步骤，你可以快速上手并使用 storybook-readme 插件，为你的 Storybook 项目添加丰富的文档支持。

storybook-readme React Storybook addon to render README files in github style 项目地址: https://gitcode.com/gh_mirrors/st/storybook-readme