# smarthr/best-practice-for-layouts
smarthr-ui/Layoutsに属するコンポーネント(Center,Cluster,Container,Reel,Stack,Sidebar)の利用方法をチェックするルールです。
## チェックする内容
### Cluster, Stackの子要素が単一の場合エラー
Cluster, Stackは子要素が単一の場合エラーになります。
Cluster, Stackは複数要素の間隔を調整するためのコンポーネントのため、子要素が単一である場合は利用する必要がありません。
そのためこのチェックは**ループ処理などで結果単一になる場合**ではなく、**コードとして子要素が単一になる場合**が対象です。
```jsx
// aryのアイテムが一つだけの場合でもOK
{ary.map((i) => i)}
// 仮にMultipleItemsコンポーネントが複数要素を帰す場合でもNG
```
上記例のMultipleItemsコンポーネントが複数要素を帰す場合、StackコンポーネントはMultipleItems内で設置するようにしてください。
例外として下記の条件に合致する場合、UIの変更が起きるためエラーにはなりません
- Stackに `align="end"` もしくは `align="flex-end"` が指定されている場合
- Clusterに `justify="end"` もしくは `justify="flex-end"` が指定されている場合
### Cluster, Stackの子要素が単一であり、かつalign属性・もしくはjustify属性に `center` が指定されている場合エラー
Cluster・Stackのalign・justify属性に`end` `flex-end` を指定した場合、子要素が単一でも許容されますが、`center` の場合は許容されません。
この場合は同じLayoutsに属するコンポーネントのCenterを利用してください。
```jsx
// NG
// OK
```
### Stackに `gap={0}` を指定している場合エラー
Stackに`gap={0}`を指定するとエラーになります。
多くの場合**`gap={0}`を指定したStackはdivに置換可能なため置き換えてください**。
それ以外のパターンとして**Stackが内部的に設定している `display: flex;` を利用したいために使われている場合**が多くありますが、これは**smarthr-uiの内部実装に依存したコードになってしまうため、Stackを利用しない方法に修正することを強く推奨**します。
このチェックも**結果としてgapが0になる**場合ではなく、**gapが0に固定されている**場合が対象です。
```jsx
// gap変数が仮に0にしかならない場合でもOK
{any}
// gap属性に0が直接指定されているためNG
{any}
```
### Headingの子要素、FormControlのlabel属性、Fieldsetのlegend属性にLayoutsに属するコンポーネントを設置するとエラー
Headingの子要素、FormControlのlabel属性、Fieldsetのlegend属性にLayoutsに属するコンポーネントを設置するとエラーになります。
Heading, FormControl, Fieldsetには要素を配置するための属性が用意されています。
チェックに引っかかるパターンとして多くあるのは `見出しの左右にアイコンを設置する` 目的のためClusterを利用する、というものですがこれらはicon属性を利用することで実装可能です。
例外として**見出しの上下にサブ見出しを設置したい**という要求に対応できるようStackは設置することが可能です。
その場合、Stackのas・もしくはforwardedAs属性に `span` を指定してください。
`span` を指定する理由はLayoutsに属するコンポーネントは基本的にdiv要素で出力されるため、デフォルトのままではinvalidなhtmlになってしまうためです。
### Checkbox, RadioButtonの子要素にLayoutsに属するコンポーネントを設置する場合エラー
Checkbox, RadioButtonの子要素にLayoutsに属するコンポーネントを設置する場合エラーになります。
設定したい場合、as・もしくはforwardedAs属性に `span` を指定してください。
`span` を指定する理由はLayoutsに属するコンポーネントは基本的にdiv要素で出力されるため、デフォルトのままではinvalidなhtmlになってしまうためです。
## rules
```js
{
rules: {
'smarthr/best-practice-for-layouts': 'error', // 'warn', 'off',
},
}
```
## ❌ Incorrect
```jsx
// Cluster, Stackは子要素が複数存在する場合に利用するべきもののため
// 要素が単一の場合エラーになる
hoge
```
```jsx
// centerをしたい場合、Centerコンポーネントを利用するべきなのでNG
```
```jsx
// divに置き換え可能 or Stackの内部的なstyleを期待した実装になってしまうためNG
```
```jsx
// Heading, FormControlのlabel, Fieldsetのlegendにsmarthr-ui/Layoutsに属するコンポーネントを設置するとエラー
}>hoge
}} />