84,621
返回整合

Storybook 擴充功能，用於顯示元件的 README（適用於 React 和 Vue）。從 storybook-readme 分叉而來

在 Github 上檢視

Storybook README 擴充功能

注意：此 README 僅適用於 ^5.0.0 版本。對於較舊的版本，請參閱 LEGACY_README.md

所有先前的 API 在 ^5.0.0 及更高版本中應能正常運作。但是 Vue 使用者需要變更其匯入路徑，因為 Vue 命令已移至其自己的資料夾中。

Storybook README addon

此擴充功能與以下相容

即時展示

功能

  • 自動產生 props 表格（僅適用於 React）
  • 不影響故事函式。因此 Storybook Info 現在可以正常運作。
  • 100% 支援 Markdown
  • 程式碼高亮顯示
  • 接受多個 README（適用於 hoc 元件 - 新增元件和原始元件的 README）
  • 看起來像 Github 的 README
  • 支援 Vue 元件的 <docs/> 標籤（example-vue/components/MyButton/MyButton.vue）。

這也很有用，因為大多數專案和元件已經有README.md檔案。現在很容易將它們新增到您的 Storybook 中。

如果安裝了 Storybook Info 擴充功能，將會使用 .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 預留位置

  • 故事的 <!-- STORY --> 預留位置
  • props 表格的 <!-- PROPS --> 預留位置
Button variants could be imported separately.

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

<!-- PROPS -->

Example:

<!-- STORY -->

Some docs after story

表情符號

使用冒號之間的簡碼，將表情符號插入文件中。例如

這是火箭：rocket

這是火箭：rocket

所有簡碼的列表可在 Emojipedia 或 Gist/rxaviers 中找到

  • ：rocket
  • ：grinning
  • ：monkey

歡迎隨時建議新功能或報告錯誤 :)

由以下人員製作
  • beyondghx
    beyondghx
標籤
如何安裝擴充功能 建立擴充功能