コンポーネントのテンプレート

コンポーネントについて簡潔な説明を書きます。

複数行に渡っても問題ありません。

使用上の注意

他のコンポーネントとの使い分けの基準、特に注意したいアンチパターンなど使用上の注意があれば書きます。
種類ごとの使いどころは種類に書きます。

{コンポーネント名}を使用したコンポーネント

開発で頻繁に利用する実装を別のコンポーネント化している場合は、子ページへのリンクや説明を書きます。

種類

コンポーネントのバリエーションを小見出しにわけて書きます。もし網羅的な比較が必要な場合、テーブル or previewでコンポーネントを一覧を表示します。

コンポーネント名（種類） 例: Primary

コンポーネント（種類）の説明が入ります。

単品

複数

iframeを使用したくない場合（非推奨）

プロダクト

レイアウト

メインの種類でなく、コンポーネントが持つその他の種類（サイズやアイコン付きなど）がある場合に書きます。

プレビューを埋め込む際の注意点

次のようなReactのAPIを使っていたり、PropsでReactコンポーネントを受け取るコンポーネントはMDX内で定義できません。

修正前：

このようなコンポーネントのプレビューを埋め込みたい場合は、別ファイルに切り出して import してください。

この際、内部でuseStateなどを使っている場合はclient:loadやclient:only="react"を付与してクライアントで動作するようにしてください。

修正後：

状態

コンポーネントが持つ（hoverやdisabledなど）状態がある場合に書きます。

ライティング

主題に種類がなく、ライティングルールを書きたい場合はここに書きます。〇〇の使い方..などはこのグループに所属させます。AirTableも必要であれば埋め込めます。

アクセシビリティ

主題全体に対するアクセシビリティの考え方として、特段言及したい場合は書きます。

デザインパターン

コンポーネント独自のデザインパターンがあればこのグループ内に書きます、基準サイズなどもこの項目で書きます。

Props

コンポーネントが持つPropsを網羅して書きます。

関連リンク

• link

参考文献

• link