NextUIを眺める

githubのトレンドにあがってたから軽く眺める
https://github.com/nextui-org/nextui
https://nextui.org/

パッと見た感じChakraUIに似ているけど、ChakraUIよりも少ないコードでUIを構築できそう。
一つのUIに対して複数のコンポーネントを組み合わせるのではなくて、ある程度のニーズがある拡張されたUIをあらかじめ、<Input.Password />のように用意している。

ラベルやアイコンもChildrenではなく、Propsで渡すことができる。
Inputコンポーネントの場合は下記のようになる。

// NextUIのInputコンポーネント
<Input
    labelLeft="https://"
    labelRight=".com"
    placeholder="mysite"
/>

ChakraUIの場合は複数のコンポーネントを組み合わせる必要がある。

// ChakraUIのInputコンポーネント
<InputGroup size='sm'>
    <InputLeftAddon children='https://' />
    <Input placeholder='mysite' />
    <InputRightAddon children='.com' />
</InputGroup>

https://nextui.org/docs/theme/override-styles
CSSは Stitches が利用されており、コンポーネントをカスタマイズしたい場合も Stichesの styled メソッドや css プロパティを利用できる。

Radix でも Stiches が使われていたし、emotionに続いて人気があるCSSinJSらしい。

Propsで渡せる真偽値の属性は bordered や zoomed のように形容詞ひとつに統一されていて、
required や disabled のようなHTMLの標準的な命名ルールに準拠しているよう。

自分でコンポーネントを作る場合、ここらへんの命名は結構迷うので参考にしていきたい。

逆にChakraUIは is + 単語 に統一されていて、真偽値であることが一目でわかるようになっている。
モーダルのopenとかは英語に馴染みがないとメソッドか真偽値か分かりづらいので、ChakraUIのほうが日本人に優しいように感じる。
ただ、HTMLの属性の命名規則と統一できないのでここは迷うところだなと思う。

ファイルの命名はケバブケース。
一つのUIに対してディレクトリを作り、その中でindex、分割したコンポーネント、スタイル、カスタムフック、テスト、Storybookのstoriesファイルを格納している。

場合によってはpropsも別ファイルに分けている。

ボタンやインプットコンポーネントには React Aria が使われているのでアクセシビリティも考慮されている。
React Aria を使ったことがないのでどこまでありがたみがあるかわからないけど、今後アクセシビリティに関する技術選定が必要になった際にはにReact Ariaを使っている実装の部分を参考にしたい。