react storybook addon chapters

[[非推奨]このアドオンはもはや維持されておらず、ストーリーブックのネイティブネスティングとコンポーネントの階層を支持して非推奨と見なされています。代わりに、ストーリーブックバージョン6を使用することをお勧めします。

React Storybookの章アドオン

React Storybookの章Addonでは、ストーリー内の複数のコンポーネントを、より小さなカテゴリ（章）とサブカテゴリ（セクション）に分解して、より多くの組織的な良さを紹介することができます。

アドオンを使用すると、ストーリーは複数の章で構成でき、章は複数のセクションで構成されます。各セクションは、通常、1つのコンポーネントまたはコンポーネントの特定の状態を紹介するために使用されるコードブロックをレンダリングできます。

章を使用して、関連するコンポーネントをグループ化したり、コンポーネントのさまざまな状態を表示したりできます。各章には、章のタイトル、章の字幕、章情報、セクションのリストが付属しています。それらのいずれかを省略して、レンダリングから隠すことができます。

各セクションには、セクションタイトル、セクションサブタイトル、セクション情報が付属しています。

このアドオンは、React-Storybook-Addon-INFOから変更され、そこからコンポーネントコードの一部を使用しています。

使用法

次のNPMモジュールをインストールします。

npm install --save-dev react-storybook-addon-chapters

次に、このようなストーリーブックを構成する場所にアドオンを設定します。

 import React from 'react' ;
import { configure , setAddon } from '@storybook/react' ;
import chaptersAddon from 'react-storybook-addon-chapters' ;

setAddon ( chaptersAddon ) ;

configure ( function ( ) {
  ...
} , module ) ;

デフォルトのスタイルをオフにするには、次のことを追加します。

 setDefaults ( { sectionOptions : { useTheme : false } } ) ;

すべてのレンダリングされたコンポーネントには、指定されたクラスがあります。 「usetheme」がfalseに設定されている場合、章をスタイリングするのに問題はないはずです。

次に、 .addWithChapters APIでストーリーを作成します。

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

storiesOf ( 'Addon Chapters' )
  . addWithChapters (
    'Story With Chapters' ,
    {
      subtitle : < Optional story subtitle > ,
      info: < Optional story info > ,
      chapters: [
        // List of chapters. Refer to Configuration Format section.
        {
          title : < Optional chapter title > ,
          subtitle : < Optional chapter subtitle > ,
          info : < Optional chapter info > ,
          sections : [
            // List of sections.
            {
              title : < Optional section title > ,
              subtitle: < Optional section subtitle > ,
              info: < Optional section info > ,
              sectionFn: () = > ( < Button label = "My Button" onClick = { ( ) => { alert ( 'Hello World!' ) ; } } /> ),
              options: {
                showSource : true ,
                allowSourceToggling : true ,
                showPropTables : true ,
                allowPropTablesToggling : true ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

addWithChapters APIの詳細については、この例のストーリーをご覧ください。

グローバルオプション

すべての章のセクション（ section.options ）のデフォルトオプションを構成するには、 .storybook/config.jsでsetDefaults使用します。

 import React from 'react' ;
import { configure , setAddon } from '@storybook/react' ;
import chaptersAddon , { setDefaults } from 'react-storybook-addon-chapters' ;

// optionally override defaults
setDefaults ( {
  sectionOptions : {
    showSource : true ,
    allowSourceToggling : true ,
    showPropTables : false ,
    allowPropTablesToggling : true ,
    decorator : story => ( < div > { story ( ) } </ div > ) ,
  }
} ) ;
setAddon ( chaptersAddon ) ;

configure ( function ( ) {
  ...
} , module ) ; 

構成形式

話

鍵	説明	タイプ	デフォルト
字幕	ストーリーサブタイトル	弦	-
情報	ストーリーの追加情報	文字列（マークダウン）	-
章	チャプターオブジェクトの配列	配列	-

章

鍵	説明	タイプ	デフォルト
タイトル	章のタイトル	弦	-
字幕	章字幕	弦	-
情報	章の追加情報	文字列（マークダウン）	-
セクション	セクションオブジェクトの配列	配列	-

セクション

鍵	説明	タイプ	デフォルト
タイトル	セクションタイトル	弦	-
字幕	セクションサブタイトル	弦	-
情報	セクションの追加情報	文字列（マークダウン）	-
sectionfn	表示する反応コンポーネントを返す関数	関数	-
オプション	このセクションの構成オブジェクト。キーの次の数行を参照してください	物体	-
options.showsource	コンポーネントのソースを表示します	ブール	真実
options.allowsourcetoggling	コンポーネントのソースを表示/隠すことを許可します	ブール	真実
options.showproptables	コンポーネントのプロパティを表示します	ブール	間違い
options.allowproptablestoggling	コンポーネントのプロパティを表示/隠すことを許可します	ブール	真実
options.decorator	セクションでコンポーネントをレンダリングするために使用されるオプションのデコレータ関数	関数	-

FAQ

コンポーネントは、静的ビルドで名前を失います

コンポーネント名は、生産用に構築する際に他のJavaScriptコードで模倣されます。コンポーネントを作成するときは、 displayName staticプロパティを設定して、静的ビルドに正しいコンポーネント名を表示します。