NPX Storybook@最新のinitを使用してストーリーブックをインストールすることから始めて、依存関係、構(gòu)成、およびサンプルストーリーをセットアップします。 2.スケーラビリティのために、共同配置されたストーリー、テスト、インデックスファイルを使用して、孤立したフォルダーでコンポーネントを整理します。 3.インタラクティブな小道具操作のためにARGSとコントロールを使用して、さまざまな狀態(tài)（ロード、障害など）をカバーする包括的なストーリーを作成します。 4.リビングスタイルガイドのドキュメントタブ、視覚的コントロール、アクション、およびビューポートの切り替えを生成するためにアドオンエッセンシャルを有効にします。 5.ベストプラクティスに従ってください：一貫した命名（コンポーネント/ボタンなど）を使用し、ストーリーを更新し、タイプスクリプトを採用し、コンポーネントをきれいにエクスポートします。 6. A11Yテストで強(qiáng)化し、視覚回帰のために色を描き、チームアクセスのためにオンラインで公開します。 7.ライブラリを進(jìn)化するシステムとして扱います。コアコンポーネントで小さく開始し、ドキュメント、テスト、設(shè)計(jì)トークンを繰り返し追加して、チーム間で共有された持続可能なUI言語を構(gòu)築します。

それで、あなたはコンポーネントライブラリを構(gòu)築することを考えています - 素晴らしい動(dòng)き。チームや複數(shù)のプロジェクトで作業(yè)している場(chǎng)合、堅(jiān)実なコンポーネントライブラリはUIを一貫性を保ち、開発をスピードアップし、テストを簡(jiǎn)単にします。そのライブラリを構(gòu)築して紹介するのに役立つ最良のツールの1つですか？ストーリーブック。

開始する方法と、セットアップ時(shí)に実際に重要なことは次のとおりです。

コンポーネントライブラリにストーリーブックを使用するのはなぜですか？

ストーリーブックは、UIコンポーネントを単獨(dú)で開発するためのサンドボックスを提供します。つまり、ボタンを微調(diào)整するためだけに完全なアプリをスピンアップする必要はありません?；镜膜水悿胜霠顟B(tài)またはユースケース（読み込みボタン、無効ボタンなど）である各コンポーネントのストーリーを作成します。

開発者だけではありません。デザイナー、QA、および製品の人々は、それを使用して、何が利用できるか、物事がどのように振る舞うかを見ることができます。さらに、テストツール、ドキュメント、設(shè)計(jì)システムと統(tǒng)合します。

ストーリーブックのセットアップ

新鮮なものを開始している場(chǎng)合（または既存のReact、Vue、またはその他のフロントエンドプロジェクトに追加）、最も簡(jiǎn)単な方法は自動(dòng)CLIを使用することです。

 NPXストーリーブック@最新のinit

これは：

• ストーリーブックの依存関係をインストールします
• 基本設(shè)定を構(gòu)成する（ main.js 、 preview.js ）
• サンプルストーリーを追加します
• スクリプトを設(shè)定してローカルに実行します

セットアップ後、実行してください：

 NPMランストーリーブック

また、コンポーネントのサンプルを備えたデフォルトのUIが表示されます。

コンポーネントライブラリの整理

構(gòu)造が重要です。クリーンフォルダーのセットアップにより、ライブラリがスケーラブルになります。

これが実用的なパターンです：

 SRC/
├├）/
│││。8ボタン/
││├。。
││├│。。
││├├│。-button.test.js
││└││。Js
│├·ックス
││││。-odal.jsx
││├││。stories.stories.js
││└││。Js
│└│ク（すべてのコンポーネントをエクスポート）

各コンポーネントには獨(dú)自のフォルダーがあり、そのストーリーファイルのすぐ隣にあります。このコロケーションにより、コンポーネントが進(jìn)化するにつれてストーリーを簡(jiǎn)単に見つけて更新できます。

.stories.jsファイルで：

 // button.stories.js
デフォルトのエクスポート{
  タイトル：「コンポーネント/ボタン」、
  コンポーネント：ボタン、
};

constプライマリ= {{{
  args：{
    ラベル：「私をクリックして」、
    プライマリ：本當(dāng)、
  }、
};

const disabledをエクスポート= {
  args：{
    ラベル：「無効」、
    無効：本當(dāng)、
  }、
};

これで、ストーリーブックのサイドバーに「コンポーネント」の下に「ボタン」が表示され、2つの州が表示されます。

便利な物語を書く

ただ幸せな道を見せないでください。考えてみてください：

• さまざまな小道具
• 狀態(tài)の読み込み
• エラー條件
• 応答性のある動(dòng)作（該當(dāng)する場(chǎng)合）

非DevsがUIで小道具を調(diào)整できるように、 argsとコントロールを使用してください。

デフォルトのエクスポート{
  タイトル：「コンポーネント/入力」、
  コンポーネント：入力、
  argtypes：{
    変異體： {
      コントロール：「Select」、
      オプション：['outlined'、 'fill'、 'Standard']、
    }、
  }、
};

const defaultをエクスポート= {
  args：{
    ラベル：「名前」、
    プレースホルダー：「あなたの名前を入力」、
  }、
};

これで、ストーリーブックコントロールパネルのドロップダウンを取得して、バリアントをライブにしました。

ドキュメントとコントロールを追加します

Storybookは、 MDXまたは組み込みのドキュメント生成を使用して、各コンポーネントの「Docs」タブを自動(dòng)的に生成します。

main.jsで有効にしてください：

 // .storybook/main.js
module.exports = {
  ストーリー：['../src/components/**/*.stories.@(js|jsx|ts|tsx）']、
  アドオン：[
    '@StoryBook/Addon-Essentials'、//コントロール、ドキュメント、アクションなどが含まれます。
  ]、、
};

@storybook/addon-essentialsを使用すると、

• 小道具の視覚的コントロール
• 自動(dòng)生成ドキュメント
• イベントを見るためのアクションパネル
• ビューポートスイッチング（モバイル/デスクトップ）
• 背景

これにより、ストーリーブックはリビングスタイルガイドになります。

それを保守可能に保つためのベストプラクティス

• 一貫してストーリーに名前を付ける- Components/ButtonやForms/Inputなどの明確な階層を使用する
• 説明的なストーリー名を使用します- 「アイコン付き」は「例2」よりも優(yōu)れています
• ストーリーをコードと同期させる- 時(shí)代遅れのストーリーはユーザーを誤解させる
• タイプスクリプトを使用- オートコンプリートを改善し、ストーリーのエラーを削減します
• コンポーネントをきれいにエクスポート- 他の場(chǎng)所にライブラリから簡(jiǎn)単にインポートできるようにします

また、考えてみてください：

• @storybook/addon-a11yでアクセシビリティテストを追加します
• 視覚回帰テストのためにクロマティックと統(tǒng)合
• チームアクセスのためにストーリーブックをオンラインで公開する（githubページ、vercelなど）

最終的な考え

ストーリーブックでコンポーネントライブラリを構(gòu)築するだけでなく、ボタンを披露するだけではありません。それはあなたのチームのために共有言語を作成することです。誰もが利用可能なものとそれがどのように機(jī)能するかを見ることができるとき、あなたは重複を減らし、品質(zhì)を改善します。

小さなスタート - 良いストーリーを備えたいくつかのコアコンポーネント。反復(fù)。時(shí)間の経過とともにドキュメント、テスト、デザイントークンを追加します。

覚えておいてください：コンポーネントライブラリは決して「完了していません」。しかし、ストーリーブックを使用すると、持続可能に成長するための適切なツールがあります。

基本的に、構(gòu)築を開始するだけです - 殘りは続きます。

以上がストーリーブックでコンポーネントライブラリを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。