# 実装ルール

wip-ui を使って UI を実装・修正・レビューするときに、常に守るルールです。

## ルールのラベル

各コンポーネントの md のルールには、守る強さを表すラベルが付いています。

- [must]：必ず守る。守らないと、動作やアクセシビリティに問題が出る
- [should]：原則守る。守らなくても動くが、見た目や使い方の一貫性が崩れる。理由があれば例外もありうる
- [avoid]：原則やらない
- ラベルなし：コンポーネントの制約（対応していないこと、できないこと）

## 1. 推測せず、ドキュメントと型定義を確認する

コンポーネント名や props を記憶や推測で書かず、selector.md と各コンポーネントの md、型定義を確認してから使ってください。
ガイドラインと型定義の内容が食い違う場合は、型定義を優先してください（使っている wip-ui のバージョンの違いが原因のことがあります）。

## 2. wip-ui のコンポーネントを優先する

wip-ui に該当するコンポーネントがある場合は、素の HTML で書かずにそれを使ってください。

## 3. できるだけセマンティックな値を使う

見た目は、できるだけ wip-ui のコンポーネントの props で、意味に基づいた値（セマンティックな値）を指定してください。

| 指定したいもの | 使うもの | 例 |
|---|---|---|
| 色 | 各コンポーネントの `color` prop（セマンティックカラー） | `<Button color="negative">`、`<Typography color="low_emphasis">` |
| 要素の間隔 | Stack の `gap`、Grid の `spacing` | `<Stack gap="m">` |
| 文字の大きさ・強調 | Typography の props | `<Typography size="l">` |

<!--
TODO: 装飾の手段が揃ったら、次を禁止ルールにする
- プリミティブカラー（Gray 500 など）を直接使わず、セマンティックカラーを使う
- `style={{ ... }}` や独自の CSS で、見た目やレイアウトを指定しない
- 色コード（`#fff`、`rgb()` など）や px の値を直接書かない
- 独自のクラスで、コンポーネントの見た目を上書きしない
-->

## 4. 選べないとき

使うべきコンポーネントが見つからない・判断できない場合は、独自実装せずに Slack の #hos-wip-ui に連絡してください。