現在、これを実装する予定はありません。 ナビゲーションが難しくなるからです。 「ui.core」、「ui.app」のようなドットでストーリーの種類に名前空間を付けることができます。 次に、必要に応じてそれらをフィルタリングできます。

ストーリーがたくさんある場合は、いくつかのストーリーブックインスタンスを開始できます。 あなたは2つのストーリーブック設定ディレクトリを持つことによってそれを行うことができます。 しかし、とにかくそれは極端なケースです。

私はこの点を認めたいと思っており、別の構成を作成して別のポートで実行するだけだと思っていました...

しかし、ストーリーブックが複数の構成ファイルを取得できるようにしてから、名前付きの構成ファイルを切り替えて、おそらくリロードする方がはるかに良いと思います...

構成を切り替えるUIに関しては、構成ファイルが他の構成ファイルを「ロード」した場合にのみ表示され、サイドバーナビゲーションの上部または下部にあるサイドバーアイテムである可能性があります。

とにかく-私は、より大きなアプリの場合、構成を分割できない（または分割できない）場合、それはちょっとクレイジーだと思います。

構成を追加するのは非常に複雑なようです。 クラシック/階層ビューの切り替えはどうですか？ 今後数日間で実装が急増することを嬉しく思います。

これは私にとっても非常に価値のある機能ですが、複数のアプリではなく、単一のアプリ内でコンポーネントタイプを整理する場合に役立ちます。

これが前進できれば、両方のユースケースで機能する実装を形成するための支援を提供できれば幸いです。

@traviもう1つのアイデアは、フィルターボックスのすぐ下にドロップダウンメニューを提供して、カテゴリを選択することです。

カテゴリは、config.jsおよびさまざまなファイルセットで割り当てられます。 したがって、グループ化の別のレイヤーを作成できます。

この時点での私のニーズを満たすには、このタイプのソリューションで十分だと思います。 さらに、上記の名前空間の規則は、ドロップダウンの選択肢に解釈できるカテゴリを割り当てるための合理的な方法である可能性があると思います。 このようなソリューションにより、カテゴリ間のリンクもシンプルなままになります。

私が構築しているアプリ（数百のコンポーネント、緩い「柱」領域内に編成）でこれを回避する方法は、現在取り組んでいる領域のストーリーを動的に書き出すスクリプトを使用することです。

find.file(
  /\.story\.js/,
  path.resolve(__dirname, '../src/app/components', targetComponentPath),
  function(files) {
    var requires = files.map(function(file) {
      return "require('" + path.relative(__dirname, file) + "');";
    });
    fs.writeFileSync(path.resolve(__dirname, '../.storybook/stories.js'), requires.join("\n"));
  }
);

これは、Storybookが他のコンポーネントを構築する必要さえないことを意味します。 組み込みオプションとして、これに対するある程度のサポートが必要です。

201はこれを助けることができます。

これに関する更新はありますか？

+1

私は非常に便利な機能です！

+1

+1

+1

+1

+1

+1

ねえ@arunoda 、カテゴリの実装の面で何か進歩はありましたか？

そうでない場合、他の誰かが2つのストーリーブック構成を切り替えるサンプルアプリを持っていますか？

+1私は絶対にもう1つのレベルのネストが必要です：/

+1

+1

+1

+1

+1

+1

アプリが成長する一方で、コンポーネントリストも成長するように見えます。さらに、ネストが必要です。 もう1つのレベルはすでに多くのケースをカバーします

+1

ねえ、みんな！

このような機能は近い将来計画されていないという事実にもかかわらず、これはStorybook AddonsAPIを介してそのような動作を取得できないことを意味するものではありません。

これがそのようなアドオンです：

ストーリーブックの章

（サブ）ストーリーに無制限のレベルのネストを追加します

ネストレベルをもう1つ追加するには、ストーリーに.chapter(name)を追加します。

// stories.js:

storiesOf('React App', module)
    .chapter('Left panel')
        .add('Button 1', fn(1))
        .add('Button 2', fn(2))
        .chapter('Bottom Panel')
            .add('Input 3', fn(3))
            .add('Input 4', fn(4))
            .endOfChapter()
        .chapter('Header Panel')
            .add('Input 5', fn(5))
            .add('Input 6', fn(6))
            .endOfChapter()
        .endOfChapter()
    .chapter('Right panel')
        .add('Button 7', fn(7))
        .add('Button 8', fn(8))
        .endOfChapter()

特徴

• サブストーリーの階層構造
• Knobs 、 addWithInfoおよびその他のアドオンと互換性があります
• storyDecoratorを使用してすべての章を折り返します

デモページ

計画

例

フィードバックは大歓迎です！ :)

@UsulProいいね！

@UsulPro Storybook Chaptersは、すばらしいソリューションです。 ありがとう！

@UsulProはまさに私が探していたもののようです、ありがとう！

こんにちは、みんな！ @UsulPro （ storybook-chapters素晴らしい仕事をした）と競争しようとはしていませんが、 previewボタンでストーリーのさまざまなグループを切り替えることができる小さなわずかに異なるソリューションを思いつきましたrelated components viewとストーリーブックが適しているdetailed components view簡単に切り替えることができるようにしたいからです。自慢できるコンポーネントがたくさんあります。 これは、複数のストーリーブックインスタンスを設定する軽量バージョンだと思います。

役に立つ場合は、こちらで確認できます-https：//github.com/majapw/storybook-addon-toggle

私は@UsulProの素晴らしいstorybook-chaptersに基づいて、コンポーネントファイル階層をストーリーブックの章としてミラーリングするストーリーブックローダーを作成しました： storybook-filepath-chapters

これにより、ストーリーを_storiesファイルまたはフォルダーにコンポーネントとインラインで配置できます。 ローダーはすべてのストーリーファイルを見つけて、対応するナビゲーション構造にマップします。

暖かいフィードバックをありがとう、みんな！

@hadfieldnのstorybook-filepath-chaptersを見るのは本当にクールです！ 👍

例としてstorybook-addon-toggle好きです。深さだけでなく、最上位にも階層を構築できる可能性があることが望ましいということです。 実際には、技術的には可能ですが、最善の方法を選択するのは難しいと思います（アドオンAPI内にとどまる）。 おそらく、これはデコレータ（@majapwなど）を使用するか、アドオンパネルを介して行うことができます。

ストーリーに階層を追加する予定はまだありませんが、 storybook-chaptersアドオンにAPIが追加され、このような階層の構築を簡素化できるようになりました。

enable / disableストーリーを表示/非表示

-

ストーリーにenable() / disable()を追加します。 引数として、制御関数の転送先のコールバックを指定します。

let toLight = () => {};
let toDark = () => {};

storiesOf('Heroes Lightside', module)
    .enable((en) => { toLight = en; })
    .add('Yoda', info('Yoda'))
    .add('Mace Windu', info('Mace Windu'));

storiesOf('Heroes Darkside', module)
    .disable((en) => { toDark = en; })
    .add('Darth Sidious', info('Darth Sidious'))
    .add('Darth Maul', info('Darth Maul'));

あなたが使用することができますtoLight(false)隠すためにHeroes LightsideとtoDark(true)表示するためにHeroes Darkside物語を。 toLightとtoDarkをいくつかのデコレータに入れたり、他のストーリーからコールバックしたりすることをお勧めします。 最も簡単な例を示します。

storiesOf('Choose Your Side', module)
    .add('Lightside', () => {
        toLight();
        toDark(false);
        return (<div>{'Lightside selected'}</div>);
    })
    .add('Darkside', () => {
        toDark();
        toLight(false);
        return (<div>{'Darkside selected'}</div>);
    });

これで、 Choose Your Side 、 Heroes Lightside 、 Heroes Darkside 3セットのストーリーができました。 最後の2つのうち、1つだけが表示され、最初の1つで切り替えることができます。

次のリリースでは、カスタマイズ可能なアドオンパネルを介してストーリーの可視性を制御する機能を追加する予定です。

-

有効化/無効化機能を使用すると、好みのロジックでカスタムナビゲーションを構築できます。

ここに完全な例

階層型ブラウザーを実装しますが、コミュニティがそれを実行する必要があると考える方法の概念が必要です。

• UXワイズ
• グループを構成する方法

UXに関しては、私はこのアイデアが好きです： http ：

構成まだわかりません。ファイル探索を使用してファイルシステムをミラーリングするか、次のようにすることができます： https ：

@ndelangen （少なくともオプションで？）ナビゲーションをストーリーの外で定義できるようにすることを考えましたか？ ストーリーがどのように見えるか（プレビュー領域/ iframe）と、ブラウジングをどのように整理するか（マネージャー）を個別の関心事として扱うことには価値があるように思われます。

@jackmccloy興味がありますが、どういう意味か詳しく教えていただけますか？

別の問題で言及しましたが、カテゴリの私の目標は、主にアトミックデザインと整合することです。 パターンラボはアトミックデザインの公式スタイルガイドアプローチですが、ストーリーブックにカテゴリを追加すると、最後に残ったギャップを埋めることができます。

私はすでにコンポーネントをそれらのカテゴリのトップレベルフォルダに配置しているので、トップレベルフォルダに基づいてコンポーネントをカテゴリにロードできることも素晴らしいことです。

@traviフォルダレイアウトのプリントを教えていただけますか？

私はこの正確な目的のためにストーリーブックを改善することに間違いなく興味がありますが、フォルダー構造からこの分類を読み取るために技術的に必要なものに興味があります。

その本質的に

project root
|
+--
|  +-- atoms
|  |  +-- foo
|  |    +-- index.js // the component
|  |    +-- stories.js
...
|  +-- molecules
|  |  +-- bar
|  |    +-- index.js
|  |    +-- stories.js
...
|  +-- organisms
|  |  +-- baz
|  |    +-- index.js
|  |    +-- stories.js

それは役に立ちますか？ 各トップレベルフォルダの下に複数のコンポーネントがあり、別のフォルダレベルでさらにグループ化されることもあります。 役立つ場合は、詳細をお知らせください。

さて、私たちにできることはconfig.jsフラグを設定することです。 autoDiscoverStoriesかそこらのようなもの。 つまり、ストーリーを手動でインポートする必要はなく、ファイルシステムフォルダーがカテゴリとして使用されます。

@ndelangen私が考えているのはこれだと思います。今のところ、私たちの会話は「ナビゲーションを改善する方法」に関するものですが、誰もが使用する単一のナビゲーションがあることを前提としています。 アドオンがストーリー自体の機能を拡張するのと同じように、ナビゲーションを拡張可能にする方法について話す価値があると思います。

1つの可能性：
現在、各ストーリーは2つのステップで追加されています。最初のステップではカテゴリが割り当てられ、2番目のステップではタイトルが割り当てられます。

storiesOf('storyCategory', module).add('storyTitle', () => <Component />)

同じカテゴリに複数のストーリーをチェーンで追加することはできますが、構造によって柔軟性がある程度制限されます。すべてのストーリーにはカテゴリとタイトルが必要であり、カテゴリはタイトルよりも「上位レベル」です。

しかし、ストーリーをわずかに異なる方法で定義できる場合、つまり

const storyData = {
  category: "category",
  title: "storyTitle",
}
stories.add(() => <Component />, storyData)

さまざまなナビゲーションオプションをより簡単に試すことができます。

デフォルトのナビゲーションはそのままにしておくことができます。 これは適切なデフォルトであり、おそらく私たちのほとんどにとって十分に機能します。 storyDataはオプションの場合もあります。カテゴリのないストーリーがトップレベルに表示され、タイトルのないストーリーはデフォルトでコンポーネントのdisplayNameになります。

ただし、コミュニティは、（a）メタデータフィールドをstroyData追加したり、（b）メタデータフィールドに基づいてナビゲーションパネルのレンダリング方法を変更したりすることで、ストーリーを整理するさまざまな方法を試すことができます。

いくつかのアイデア：

// add an additional level to the hierarchy called subCategory
const stroyData = {
  category: "Buttons",
  subCategory: "Blue",
  title: "BlueButton",
}
stories.add(() => <BlueButton />, storyData)

// add tags to a story that you could then filter by
const stroyData = {
  category: "Buttons",
  tags: ["button", "homepage"],
  title: "HomepageButton",
}
stories.add(() => <HomepageButton />, storyData)

// have a story to appear in multiple categories
const stroyData = {
  categories: ["Buttons", "Homepage Elements"],
  title: "HomepageButton",
}
stories.add(() => <HomepageButton />, storyData)

良い！ それは箱から出してすぐに使用でき、実際に拡張可能です。 これについて少し考えてみます。 🤔

素晴らしい。 あなたが何を決めるか教えてください-あなたがどの方向に進むかに関わらず、私はできるところに売り込みます-プロジェクトの大ファン

@jackmccloyの提案は素晴らしいです、クールなアイデアに感謝します！

ただし、UIを一連の「ビジュアルテストケース」と見なし、状態ごとにadd()呼び出しを使用して、UI状態を個々のストーリーとして簡単に定義する、ストーリーブックの1つの強力なユースケースを思いとどまらせるようです。

add()呼び出しにストーリーのメタデータを登録すると、カテゴリが間違ったレベルで追加されているように感じます。 同じ提案を見たいのですが、 storiesOf()関数を使用しています。

storiesOf({
  title: Component,
  category: "My Category"
}, module)
  .add("when empty", () => <List items=[] />)
  .add("with items", () => <List items=["one", "two", "three"] />)
  .add("etc.", () => <List items={etc} />);

Component.displayNameからタイトルを取得できるというアイデアや、サブカテゴリに関する他のすべてのアイデア、またはコンポーネントを複数のカテゴリに追加できるというアイデアが好きです。状態を追加するという単純さを維持したいと思います。

カテゴリが定義されている場所に関係なく、覚えておくべきことの1つは、別のファイルをカテゴリに追加できる必要があるということです。 カテゴリを単一のファイルからしか定義できない場合、それは非常に制限されると思います

@traviに同意し

次のようなタイプミスを防ぐために、カテゴリを1か所で定義することを想像しています。

// categories.js
export const Layouts = "Layouts";
export const Components = "Components";
export const Styles =  "Styles";

// DashboardLayout.story.js
import { Layouts } from "../categories";
import DashboardLayout from "./DashboardLayout";

storiesOf({
  title: DashboardLayout,
  category: Layouts
}, module)
  .add("default", () => <DashboardLayout />);

しかし、それは私のアプリに任されている実装の詳細になります。

@ theinterned @ jackmccloy私はあなたの提案が好きです。

任意の深さの階層で提案をどのように使用できるかを考えています。 おそらくcategory / subCategory代わりに、パスコンポーネントの配列を持つpathである可能性があります。 （私はあなたが必ずしもそこに詳細を意図していなかったことを知っています、ただあなたの考えをリフします。）

また、ファイルシステムを使用してナビゲーション階層を作成する構成オプションのアイデアも気に入っています。 このオプションを有効にすると、 path引数はオプションになります。

これはより難しい目標ですが、階層内のストーリーの各ページを個別のチャンクとしてロードして、ストーリーブックが大きくなっても軽量に保つのがよい場合があります。 また、ストーリーブックローダーを特定のファイルシステムフォルダーをルートコンテキストとして実行できるようにして、プロジェクト全体のすべてのストーリーではなく、そのフォルダーで定義されたストーリーのみを使用してストーリーブックを構築できるようにするのもよいでしょう。

設定でカテゴリを事前に定義/登録することについて、人々はどう思いますか？

// config.js
import { configure, addCategory } from '@kadira/storybook';

function init() {
  require('../src/stories');
  addCategory({
    id: 'atom',
    name: 'Atoms',
    index: 0
  });
  addCategory({
    id: 'molecule',
    name: 'Molecules',
    index: 1
  })
}

configure(init, module);

// component.story.js
import Component from "./Component";

storiesOf({
  title: Component,
  category: 'atom'
}, module)
  .add("default", () => <DashboardLayout />);

配列をサポートすることもできます： category: ['atom', 'deprecated'] 、なぜですか？

これは、カテゴリが正しい順序で配置されていることを確認するのに役立ちます。これは、アトミックデザインでは重要です。

設定からカテゴリを取得するのは良いことですが、マジックストリングは悪いです👎

それは私には理にかなっています。

また、文字列と一致することを期待するのではなく、構成で定義されたものからストーリーのカテゴリをプルするための+1

@ndelangenでカテゴリを困難です。 ただし、カテゴリを設定で定義できるようにすることが重要だと思います。カテゴリを設定で定義する必要はありません。

Storybookで気に入っているのは、コンポーネントと同じ場所にstory.jsxファイルがあるかどうかを確認するだけで、コンポーネントがStorybookにあるかどうかを判断できることです。 その保証-
story.jsxファイルが存在する場合、ストーリーが存在します。これは、カテゴリimoを事前に定義することによって元に戻してはならない重要なファイルです。

その観点からすると、構成内のカテゴリにidとindexが必要なことすら必要ないかもしれません-このようなもの（オプションプラグインを使用していると仮定）は機能する可能性があります

setOptions({
  categoryOrder: [
    "First Category",
    "Second Category",
    "Third Category",
});

ここで、 First Category 、 Second Category 、およびThird Categoryは、1番目、2番目、および3番目に表示されることが保証され、ストーリーで宣言された他のカテゴリは、これら3つの後にアルファベット順に表示されます。

このアプローチは、次のようなことを行うことで、任意の深さのネストを制御するための賢い方法でもあります。

categoryOrder: [
  {
    "Atoms": [
      {
        "Buttons": []
      }
    ],
  }, {
    "Molecules": [],
}],

カテゴリ「ボタン」のストーリーは、 Atoms -> Buttons内に表示されます。 カテゴリ「Atoms」のストーリーは、 Atoms 、 Buttons （ただし、その中ではない）などに表示されます。

ユーザーは、（今のように）構成なしで1レベルの深さを取得し、最小限の構成で任意のレベルの深さを取得します。 重要なのは、ストーリー自体ではなく、深さ（構成レベルで設定）を持つカテゴリになることです（つまり、ストーリーはカテゴリを設定するだけで、そのカテゴリが階層のどこに表示されるかは定義されません）。

@theinterned私はあなたに同意します：状態を追加する単純さを維持する必要があります。 私はそれについて考えていませんでした、おそらくb / c私はノブアドオンを多用しています。 ですから、私にとっては、コンポーネントとストーリーの間に1対1の関係を持たせようとしています。ストーリーのタイトルは、コンポーネントの状態を説明するのではなく、コンポーネントを説明しています。

両方のユースケースで機能する可能性のある1つの解決策は、次のようなことです。

const storyData = {
  category: "category",
  title: "first item",
}
stories.add(() => <Component />, storyData)
  .add(() => <Component />, {title: "second item"})
  .add(() => <Component />, {title: "third item"})

ここで、（a）ストーリーの順序は、宣言された場所から制御でき（外部構成は必要ありません）、（b） storyDataパラメーターは前のオブジェクトを保持し、次の値のみを上書きします。明示的に渡されます。

ちょっとした考え。

トップレベルのカテゴリだけでもワクワクしますが、ネストされたカテゴリをサポートするのに十分な場合は、カテゴリ名が異なるカテゴリ間で一意であると想定するのは安全ではないことに注意してください。

原子設計の例を続けると、原子、分子、および生物のトップレベルの各カテゴリに同じ名前のサブカテゴリが存在するのが一般的です。 パターンラボのデモでは、フォームがその良い例です。 個々のフィールド要素は原子の下にリストされ、フィールドとラベルの組み合わせは分子の下にリストされ、完全なフォームとしてグループ化された複数のフィールドは生物の下に表示されます。

興味深い考えは、タイトル、ストーリー、ストーリーファイルへのパスを取得するコールバックと、ユーザーがコールバックを構成するために渡すことができるメタデータを使用してカテゴリを定義できるかどうかを検討することです。

storyData = {
  title: Component,
  category: ({ title, story, storyPath, meta }) => someCategoryPath,
  meta: { ..whateverMeta }
}

唯一の要件は、コールバックがストーリーへのカテゴリパスを定義するオブジェクトを返す必要があることです。

storyData.category() //=> returns the below array

// a simple category path might look like:
[ "One category" ];

// The path for a story nested three categories deep would look like:
[ "Parent Category",  "Child Category", "Grandchild category where the story lives" ];

これにより、人々は好きなカテゴリシステムを書くことができます。

グローバル設定が必要な場合は、コールバック内に登録し、カスタムメタデータを使用して、ストーリーを登録するカテゴリ/サブカテゴリを設定できます。

categories: [
  {
    "Atoms": [
      {
        "Buttons": []
      }
    ],
  }, {
    "Molecules": [],
}];

function setCategory({ meta }) {
  const { categroyPath } = meta; // maybe a dot path string like "Atoms.Buttons" ?
  const category = categroyPath.split('.'); // [ "Atoms", "Buttons" ]
  return validatePath(category, categories); // categories["Atoms"]["Buttons"] is a valid path
}

ファイル構造に基づいてカテゴリ構造を設定する場合は、それを行うためのパス情報があります。

function setCategory({ storyPath }) {
  // for story path `src/components/Atoms/MyComponent.story.js`
  let folders =storyPath.split('/'); // [ "src", "components", "Atoms", "MyComponent.story.js" ];
  folders = without(folders, 'src'); // ["components", "Atoms", "MyComponent.story.js" ];
  folders.pop(); // [ "components", "Atoms" ]
  return folders;
}

単純なカテゴリ名を使用したい場合は、1つだけ使用できます。 （おそらく、categoryは、単純な文字列、カテゴリパスを説明する配列、またはカテゴリパスを返すコールバックのいずれかを取ることができます）。

今、空は限界です！

同様に、並べ替え順序を定義するために、すべてのストーリーを読み込んで並べ替えることによって生成されたツリーカテゴリ構造を取得する登録可能なaddCategorySort関数をお勧めします。

import { configure, addCategorySort } from "@kadira/storybook";

addCategorySort( categories => /* sort logic here */ );

configure(loadStories, module);

@travi重複した名前のカテゴリの必要性については考えていませんでしたが、それが重要であることに同意します。 解決策について何か考えはありますか？ これが私にとって頭に浮かぶことですが、もっと良い解決策があるかもしれません：

const storyData = {
  categories: ["Buttons"],  // any category with the title "buttons"
}

const storyData = {
  categories: ["Atoms.Buttons"],  // any category with the title "buttons" that also has the parent category "atoms"
}

@theinterned私はアプローチを掘り下げますが、パワーユーザー（完全に機能するものが必要なもの）の利益のために、一般的なユーザー（箱から出してすぐに機能するものが必要/必要なもの）にとって、物事が難しく/直感的でなくなる可能性があることを心配しています少しの努力）。

@jackmccloyええ...私は関数の実装がすべての人の要件であってはならないことに同意します。 しかし、人々がサポートしようとしているさまざまなユースケースがいくつかあるように思われるため、コールバックシステムは、すべての人が独自のユースケースをカスタマイズするための拡張性を提供するための優れた方法のようです。

それが「幸せな道」を難しくするという心配を和らげるために、私は以下をお勧めします：

1. storydData.categoryが文字列を受け入れるようにします。その場合、カテゴリは最上位のカテゴリになります。
2. storydData.categoryが配列を受け入れ、配列内の要素がカテゴリへのパスであるとします。

// given
storydData.category = ["grand parent", "parent", "story category"];
// category tree would look like:
categories = {
  "grand parent": {
    "parent": {
      "story category": /* the story lives here */
    }
  }
};

1. ストーリーデータに上記の機能を受け入れさせます（https://github.com/storybooks/react-storybook/issues/151#issuecomment-292689536）。
2. 実際には、ここにある一般的なユースケースのいくつかをカバーするいくつかのカテゴリハンドラーを作成できます（アトミックデザイン、フォルダーベース...）。

同様に、並べ替えについては、デフォルトでデフォルトの戦略（間違いなくアルファ）を​​サポートできます。必要に応じて、他の事前に作成された並べ替え戦略（オブジェクトの形状に基づく並べ替え、メタデータの並べ替えインデックスなど）を提供できます。

@ndelangenこれを前進させる道として何を見ていますか？ 誰かがそれに取り組んでいますか？ そうでない場合は、週末にそれを試してみてください

誰かが作業を開始し、その解決策が実行可能であることに気付いたら、 PR neededラベルを削除します。 したがって、これは現在ロードマップ上にありますが、まだ作業は行われていません。

あなたがそれを始めたいのなら、それは大歓迎です！

@jackmccloyよろしければ、この作品にも参加して

@UsulPro 100％、私はそれについて興奮しているでしょう。 日曜日の午後（ニューヨーク時間）に実際に見てみる予定です。 同時にオンラインになる場合は、lmkとコンボをSlackに移動できます。 それ以外の場合は、少し掘り下げた後、いくつかの考えをここに投稿します

@ jackmccloy @ usulpro私もこれに取り組むことに間違いなく興味があります。

@theinternedそれは素晴らしいことです！ たるんで接続しますか？

@UsulPro申し訳ありません—悪い胃のインフルエンザが私の家庭を襲いました。

金曜日に仕事でハックの日が近づいています。それからこれに取り組む予定です。 始める機会はありましたか？ Slackで同期できれば幸いです。 私はSBチャンネルにいます。

1レベルのネストだけが必要な場合は、 React Storybook AddonChaptersがニーズに合う可能性があります。

@ igor-dvのストーリー階層の優れた実装の最初のバージョンをリリースしました。より広いコミュニティにリリースする前にアルファ版を改善できるように、アルファ版に関するフィードバックをお待ちしています。

https://gist.github.com/shilman/947a3d1d4cfdf5c3a8bb06d3d4eb84cf

@ 1i1it @andrubot @arunoda @atnovember @danielbartsch @franzihubrick @hadfieldn @iaanvn @imsnif @isuvorov @jackmccloy @joeruello @johnnyghost @lnmunhoz @majapw @markopavlovic @mystetskyivlad @mzedeler @ndelangen @nirhart @ noahprince22 @revolunet @sethkinast @theinterned @thesisb @travi @usulpro @yangshun @zeroasterisk @zvictor

ストーリーの階層で気付いたちょっとした癖：
ディレクトリにサブディレクトリがあるかどうかに応じて、ディレクトリをクリックした結果が変わります。
サブディレクトリがある場合、フォルダは展開されますが、ストーリーレベルでダウンしている場合、ストーリーは自動的に選択されます。
ユーザーは、内部のストーリーを選択せず​​にdirの内容を表示したい場合があります。

アップデート：

react-treebeardこの問題に関連している可能性があります
https://github.com/alexcurtis/react-treebeard/issues/33
storybooks/react-treebeardレポのPRを調べる価値があるかもしれません

以前の実装では、 kind選択すると、最初のストーリーが自動選択されました。 したがって、この機能は保持したかったのです。 しかし、階層を使用すると、すでにバグのように見えます。

写真では、 Component 5はディレクトリではなく、 kindです。

実際、私もこの振る舞いが好きではありません...

長い話の名前は奇妙に折り返されます

サイドバーのサイズを非常に小さくすると、プレビューペインがオーバーフローします。

階層フォルダを個々のストーリーと組み合わせることができますか？ トップレベルに欲しいストーリーがいくつかあります。それ以外の場合は、単一のアイテムを含むフォルダーがあります。

現在これを行う場合

storiesOf('Something', module).add('top story');
storiesOf('Something.Chapter', module).add('substory');

次に、「Something」の2つのエントリを作成します。1つはフォルダを持ち、もう1つはアイテムを持ちます。

@TheSisb 、ありがとう、公式リリースで修正されます。

@psimyn 、現在の実装では不可能ですが、変更される可能性があります。 @ UsulProは最初のPRでもこれについて言及しました。
IMOこれは良い動作ではありません（そしてより複雑になります）。 すべてのIDEと比較すると、名前空間（dirs / folder / packages）があり、それらの名前空間（またはその近く）に同じ名前のアイテムが含まれている可能性があります。
とにかく、これがコミュニティの望ましい振る舞いであるならば、それは変更されるべきです、しかし私はそれがリリースのストッパーになることを望まない=）

これは私が必要とした正確な解決策です!!! ありがとう+1

@psimyn機能を説明する新しい問題を開いてください。 この問題は、 3.2.0リリースにより、まもなく終了します。

新しいCSFフォーマットで複数レベルのネストが可能になりましたか？

@ gaurav5430しばらくの間可能でした、ここで私たちの例を見てください：

CSF：

import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';

export default {
  title: 'Other/Demo/Welcome',
  component: Welcome,
};

export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
ToStorybook.storyName = 'to Storybook';

ねえ@ndelangen
おかげで私はここからそれを取得します： https ：//storybook.js.org/docs/basics/writing-stories/#story -hierarchy

私が欲しいのは、デフォルトのエクスポートタイトルだけでなく、 story.name基づいてサブフォルダーを作成する機能だと思います。

export default {
  title: 'Other/Demo/Welcome',
  component: Welcome,
};

export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
ToStorybook.story = { name: 'to/Storybook' };

Other/Demo/Welcome/To/Storybookとして表示されます

上記の問題の回避策は、複数のストーリーファイルを作成し、それぞれに正しい階層を使用してデフォルトをエクスポートすることだと思います。

one.stories.js ：

export default {
  title: 'Other/Demo/Welcome/One',
  component: Welcome,
};

export const ToStorybookOne = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;

そしてtwo.stories.js

export default {
  title: 'Other/Demo/Welcome/Two',
  component: Welcome,
};

export const ToStorybookTwo = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;

そうすれば、両方のストーリーがストーリーブックのフォルダー構造に期待どおりに表示されます。

@ gaurav5430は推奨される使用法であり、回避策ではありません。 😄

@ gaurav5430は推奨される使用法であり、回避策ではありません。 😄

はい、これらのファイルは両方とも同じコンポーネントの異なる状態用であるため、私はそれを行うのをためらっていました。 私の場合、コンポーネントには2つのメイン状態と、それらの2つのメイン状態に基づく複数のサブ状態があります。 通常、コンポーネントのすべての状態を同じファイルに保持しますが、この場合、ストーリーの階層用に別のファイルが必要になります。