Storybook: キャンバスタブを非表示にする機能

addon-docs一部として、かなりハードコードされた方法でこれを行います。 @ndelangenこれをもっと構成可能にすべきかどうか疑問に思います。

「非表示」にすることもできますが、ストーリーブックが機能するためには、少なくとも＃4169までは存在している必要があります。

いくつかのオプションを介してそれを非表示にする可能性があります。

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間がありません。 私たちはいつでも寄付を受け付けていますので、サポートが必要な場合はプルリクエストを送信してください。 非アクティブな問題は30日後にクローズされます。 ありがとう！

私は現在同じ問題に直面しています。 理想的には、必要に応じてタブを並べ替えるオプションがあり、たとえば私の場合、Notesが最初に来て、Canvasが後で来るようにすることができます。

@eduina @ B3Kay FYI現在、 --docsフラグを使用して、ドキュメント以外のすべてのタブを非表示にできます（例： yarn storybook --docsまたはyarn build-storybook --docs

順序やデフォルトの選択を変更するオプションはありますか？ Storybookは主にドキュメント機能に使用したいのですが、それでもキャンバスを表示する機能はあります。 ただし、Canvasが最初の位置にあり、デフォルトで選択されている場合、新しいユーザーはMDXファイルに含まれている実際のドキュメントを見逃すことがあります。

@bmayenこれはキャンバスタブを非表示にするのと同じ機能バケットに入ると思います。

特定のストーリーのキャンバスタブを非表示にする機能と、ストーリーを非表示にして、コンポーネントの高レベルのドキュメントタブを作成できる機能が欲しいのですが、それだけです。

これに対する私の現在の修正は、ドキュメントに「ストーリー」タグがないことですが、「コードを表示」ボタンの機能が失われます。 ストーリーなしでプレビュー+コードを作成する方法はありますか？ ありがとう

@sanchezhttps ： //github.com/storybookjs/storybook/pull/7966を参照

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間がありません。 私たちはいつでも寄付を受け付けていますので、サポートが必要な場合はプルリクエストを送信してください。 非アクティブな問題は30日後にクローズされます。 ありがとう！

いいえ、これが欲しいです！

2019年10月24日木曜日、午前3時44分stale [bot] [email protected]は次のように書いています。

皆さんこんにちは！ この号ではあまり進んでいないようです
近々。 それでも質問、コメント、バグがある場合は、お気軽にどうぞ
議論を続ける。 残念ながら、私たちはに到達する時間がありません
すべての問題。 私たちはいつでも寄付を受け付けていますので、プルを送ってください
あなたが助けたい場合はリクエストしてください。 非アクティブな問題は30日後にクローズされます
日々。 ありがとう！

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/storybookjs/storybook/issues/7066?email_source=notifications&email_token=AANLY2QVSW7PDJJVUFLOR2DQQFG5BA5CNFSM4HXKFNS2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXH
または購読を解除する
https://github.com/notifications/unsubscribe-auth/AANLY2VIMIOVBIAWI6SL4WLQQFG5BANCNFSM4HXKFNSQ
。

私の会社では、ストーリーブックの主な用途が2つあります。

1. 設計システムの文書化-このユースケースは、設計部門と製品部門を対象としています
2. Webコンポーネントの文書化-このユースケースはエンジニアリング部門を対象としています

前者の場合、コンポーネントの一般的なコンテンツとプロパティを含む「実際の例」のみを紹介することをお勧めします。 ただし、後者の場合、最小限のプレースホルダーコンテンツを使用して、デフォルトを保持したまま、すべてのコンポーネントプロパティを徹底的に文書化することをお勧めします。

デザイン指向のケースはドキュメントモードに最適ですが、エンジニアが必要に応じて操作できるようにキャンバスを保持したいと思います。

ただし、「最善の足を前に出す」には、かなりのドキュメントモードをより目立つように表示する必要があることに同意します。

そのために、ストーリーブックを構成して、左端に「Docs」タブを表示し、右に「Canvas」を表示できるようにしたいと思います。

こことチャットの両方で、これに対する多くのリクエストがあります。 これはおそらく一般的なSBUIの問題であり、ドキュメント固有の問題ではありませんが、何らかの方法で解決策を見つけます。 cc @ndelangen

@eduina @ B3Kay FYI現在、 --docsフラグを使用して、ドキュメント以外のすべてのタブを非表示にできます（例： yarn storybook --docsまたはyarn build-storybook --docs

アドオンが消える場合、アドオンを表示する方法はありますか？

@matiasmenker現在https://github.com/storybookjs/storybook/issues/6700ではありません

私自身もこれに遭遇します。 PRに取り組み始めることができる指針はありますか？

ラースそれは超簡単ではありません。 preview.js仕組み： https ：

タブはそこに注入されます。

iframeのレンダリングからタブの追加を切り離す必要があります。

iframeはドキュメントもレンダリングし、実際にエクスプローラーに表示するストーリーをマネージャーに指示するため、iframeを挿入することはできません。

@ LarsDenBakker-実際に実装されて待機している＃9095、レビューとマージプロセスをスピードアップするために親指を立ててください:)

Ermahgerd !! この問題を参照するPR＃9095を含むhttps://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2をリリースしました。 今すぐアップグレードしてお試しください！

このプレリリースは@next NPMタグにあります。

この問題を解決します。 まだまだやることがあると思われる場合は、再度開いてください。

PR＃9005は素晴らしいですが、デフォルトのタブを設定する機能がまだありません。たとえば、[ドキュメント]タブが最初の位置に配置されていても、ストーリーを開くときに[キャンバス]タブがアクティブになります。

@eduina @ B3Kay FYI現在、 --docsフラグを使用して、ドキュメント以外のすべてのタブを非表示にできます（例： yarn storybook --docsまたはyarn build-storybook --docs

@shilman
5.3.7および5.3.14で機能していないことを確認しました。 キャンバスタブは引き続き表示されます

今必死にこのリリースを待っています。 このアップデートを長期間保持した後、アップグレードはほぼ完了しました。 @shilmanは、 addon-infoで発生したバグの履歴を知っているかもしれません。 それは私のプロジェクトからのものです。
正常に更新されました。 CSFとdocspage美しい使い方。 楽しかった！

可能であれば、このリリースをスピードアップしてください。 それに依存します。

また、GitHubの問題や中程度の記事について、すべてのサポートに感謝します。 とても有難い。

ここでリリースステータスを追跡できますhttps://github.com/storybookjs/storybook/issues/9311

@ B3Kay同じ問題があります。 ストーリーブックのURL /?path=/story/を/?path=/docs/に置き換えると、ストーリーブックを開くたびにドキュメントが選択されます。

ボタンを非表示にするために（理想的な修正ではありません）、CSSを挿入するブラウザー拡張機能に次のCSSを追加しています（もちろん、これはあなただけに機能します。他の会社のメンバーには引き続き表示されます）。

#root > div > div.css-sqdry3 > div > div.css-sqdry3 > div:nth-child(1) > div > div.simplebar-wrapper > div.simplebar-mask > div > div > div > div > div.css-11sh1n2 > div.css-1tgscux > a:nth-child(1) > button {
    display: none;   
}

理想的ではありませんが、おそらくそれは誰かにとって有用です。

誰かが興味を持っているなら、私は私のためにうまく機能している解決策を持っています。

これで超シンプルなプラグインを作りました。 register.jsはこれです：

import { addons } from '@storybook/addons';
import { STORY_RENDERED, DOCS_RENDERED } from '@storybook/core-events';

const ADDON_ID = 'YOUR_PLUGIN_ID';

addons.register(ADDON_ID, api => {

    // Check whether we are on a docsOnly page and add a corresponding body class for styling
    const setBodyClass = () => {

        // Needs animation frame to make sure story component has been mounted
        window.requestAnimationFrame(() => {

            // You can change the logic of when to hide the canvas button of course.
            // you have full access to the storybook API, so you can also configure it per-story etc.
            const isDocsOnly = api.getCurrentStoryData().parameters.docsOnly === true;

            if (isDocsOnly) {
                document.body.classList.add('is-docs-only');
            } else {
                document.body.classList.remove('is-docs-only');
            }
        });
    };

    api.on(STORY_RENDERED, setBodyClass);
    api.on(DOCS_RENDERED, setBodyClass);
});

私のmanager-head.html

.is-docs-only .os-content a:not([id])[href*="?path=/story"] {
    display: none !important;
}

docsOnlyページで、ナビゲーションが適切に機能するようにviewMode: 'docs'を設定しました。