ストーリーブックと反応でデザインシステムを構築します

まず、NPX Storybook Initを使用して、React ProjectにStoryBookをインストールおよび構成し、NPM Run StoryBookを実行してローカル開発サーバーを開始します。 2.関数またはタイプごとにコンポーネントファイル構造を整理し、対応する.stories.jsファイルを作成して、各コンポーネントディレクトリに異なる状態を定義します。 3.ストーリーブックのARGSおよび制御システムを使用して、さまざまなインタラクティブ状態のテストを容易にする動的属性調整を実現します。 4. MDXファイルを使用して、設計仕様、アクセシビリティの指示などを含むリッチなテキストドキュメントを記述し、構成を介したMDXの読み込みをサポートします。 5.テーマを介してデザイントークンを定義し、themeproviderを使用してPreview.jsにグローバルにテーマスタイルを注入します。 6. JESTおよびREACTテストの統合ライブラリは、単位テスト、Chromaticを使用した視覚回帰テストを実行し、 @StoryBook/Addon-A11yを介してアクセシビリティの問題をチェックします。最後に、独立した開発、視覚文書、自動テストをサポートし、設計と開発のコラボレーションを促進するスケーラブルな設計システム。このシステムは、コンポーネントを徐々に繰り返すことにより、チーム間で効率的な再利用を実現でき、UIの一貫性と開発効率を改善するための必要なツールになります。

ストーリーブックとReactを使用して設計システムを構築することは、チームや製品を拡張する一貫した再利用可能なUIコンポーネントを作成するための強力な方法です。 Storybookは、UIコンポーネントの孤立した開発環境を提供し、完全なアプリに依存することなく、それらを単独で構築、テスト、文書化しやすくします。 Reactと組み合わせると、このコンボは最新の設計システムのための頼りになるセットアップになります。

効果的にアプローチする方法は次のとおりです。

1. Reactでストーリーブックを設定します

React Projectにストーリーブックを追加することから始めます。 Create Reactアプリまたは標準のReactセットアップを使用している場合、最も簡単な方法は、自動CLIを使用することです。

 NPXストーリーブックInit

このコマンドは、ストーリーブックをインストールし、必要な構成ファイルを追加し、サンプルストーリーを設定します。完了したら、実行してください：

 NPMランストーリーブック

これにより、通常はhttp://localhost:6006でストーリーブック開発サーバーが開始されます。ここでは、コンポーネントをリアルタイムで表示できます。

ヒント： initコマンドは、Viteやnext.jsを含むほとんどのReact設定でうまく機能します。カスタムWebpack構成を使用している場合は、それに応じて.storybook/main.jsを調整する必要がある場合があります。

2。コンポーネントとストーリーを構成します

よく組織されたファイル構造は、保守性の鍵です。グループコンポーネント論理的には、特徴またはタイプ（原子、 atoms 、 organisms ）、またはButton 、 Form 、 Navigation moleculesのカテゴリによるグループコンポーネント。

構造の例：

 SRC/
├├）/
│││。8ボタン/
││├。。
││├│。。
putton.module.css
│├··ックス/入力/
purt.Jsx
purtion.stories.js
├├）/スタイル/
│└ク

各.stories.jsファイルで、異なる状態でコンポーネントをレンダリングする方法を定義します。

 // button.stories.js
'./button'から{button}をインポートします。

デフォルトのエクスポート{
  タイトル：「コンポーネント/ボタン」、
  コンポーネント：ボタン、
  argtypes：{
    バリアント：{control： 'select'、options：['primary'、 'secondary']}、
  }、
};

constプライマリ= {{{
  args：{
    ラベル：「私をクリックして」、
    バリアント：「プライマリ」、
  }、
};

const disabledをエクスポート= {
  args：{
    ラベル：「無効」、
    無効：本当、
  }、
};

これにより、インタラクティブなコントロール（小道具のドロップダウンなど）が作成され、デザイナーと開発者が視覚的にバリエーションを探索できます。

3.動的テストのためにARGSとコントロールを使用します

StoryBookのARGSシステムを使用すると、その場でコンポーネント入力を変更できます。コントロールと組み合わせることで、ユーザーはUIでプロップを直接調整できます。これは、エッジケースをテストし、柔軟性を紹介するのに大きくなります。

例：

 argtypes：{
  サイズ：{control： 'radio'、option：['small'、 'medium'、 'large']}、
  onclick：{action： 'clicked'}、// logs clicks
}

これは、QA、PMS、またはデザイナーがボタンと対話し、クリックまたはサイズ変更時にどのように動作するかを確認できることを意味します。

プロのヒント： controls: { exclude: ['id', 'className'] }使用して、コントロールパネルから内部または非視覚小道具を非表示にします。

4. MDXを使用して文書化し、設計ガイドラインを追加します

コードの例を超えてください。 MDX （Markdown JSX）を使用して、デザイントークン、使用ガイドライン、アクセシビリティノート、さらにはFigmaリンクを含むリッチなドキュメントを作成します。

Button.stories.mdxファイルを作成します：

 '@storybook/blocks'から{meta、story、canvas}をimport;
'./button.stories.js'からbuttonstoriesとしてインポート *;

<Meta Title = "Components /Button" component = {button} />

＃ ボタン

ボタンを使用してアクションをトリガーします。メインアクションにはプライマリボタンを好み、代替案にはセカンダリを使用します。

<canvas>
  <Story of = {buttonStories.primary} />
</canvas>

##アクセシビリティ

常に記述ラベルを含めます。 「aria-label」で適切にラベル付けされていない限り、アイコンのみのボタンを避けてください。

次に、 .storybook/main.jsを更新して、MDXファイルをロードするようにストーリーブックを構成します。

 module.exports = {
  ストーリー：['../src/**/*.stories.@(js|jsx|ts|tsx|mdx）']、
  // ...
};

これで、デザインシステムはリビングスタイルガイドになります。

5.デザイントークンとテーマを統合します

多くの場合、 styled-components 、 emotion 、またはCSS-in-JSを使用して、テーマオブジェクトを介してビジュアルスタイル（色、タイポグラフィ、間隔）を共有します。

例のテーマ：

 // theme.js
constテーマをエクスポート= {{
  色：{
    プライマリ： '＃007bff'、
    セカンダリー： '＃6c757d'、
  }、
  間隔：（factor）=> `$ {0.5 * factor} rem`、
  タイポグラフィ：{
    見出し：「Bold 1.5Rem System-UI」、
  }、
};

ストーリーをデコレーターで包み、テーマをグローバルに.storybook/preview.jsで適用します：

 「スタイルコンポーネント」から{themeprovider}をインポートします。
'../src/styles/theme'から{theme}をインポートします。

constデコレーターをエクスポート= [
  （ストーリー）=>（
    <themeprovider theme = {theme}>
      <story />
    </themeprovider>
  ）、、
];

これで、すべてのコンポーネントが一貫したスタイリングでレンダリングされます。

6.テストと自動化を追加します

堅牢な設計システムにはテストが必要です。組み合わせる：

• ユニットおよび行動テストのためのJest React Testingライブラリ。
• 視覚回帰テスト用のクロマティック（ストーリーブックアドオン）。

Chromaticのインストール：

 npx Chromatic -Project-Token = <YourToken>

CIで実行され、すべてのストーリーを以前のバージョンと比較し、意図しない視覚的な変更をキャッチします。

また、アクセシビリティの問題をキャッチするためにA11yアドオンを追加することも検討してください。

 NPMインストール @StoryBook/Addon-A11y

次に、 .storybook/main.jsで有効にします：

アドオン：['@storybook/addon-a11y'];

これで、自動チェックを備えたUIにアクセシビリティタブが表示されます。

最終的な考え

ストーリーブックとReactでデザインシステムを構築するだけでなく、コンポーネントだけでなく、デザインと開発の間に共有言語を作成することです。適切なセットアップで、あなたは取得します：

• 孤立したコンポーネント開発
• インタラクティブなドキュメント
• 視覚テストと一貫性
• コラボレーションに優しいインターフェイス

小さな（ボタン、入力）を開始し、一貫性を早期に強制し、繰り返し増加させます。時間が経つにつれて、設計システムは製品チームの力程度になります。

基本的に、Reactを使用してUIの品質を気にしている場合、ストーリーブックはオプションではありません。それが不可欠です。

以上がストーリーブックと反応でデザインシステムを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。