デジタル庁デザインシステムのサンプル実装をreact-aria化
デジタル庁デザインシステムのサンプル実装が公開されていたので練習を兼ねてreact-aria化を行なってみました。
デジタル庁デザインシステムのサンプル実装
react-aria化したもの
Storybookはこちら
ベースのサンプル実装でスタイル定義が行われているのと、デザイントークンがtailwindテーマプラグイン化されているためとてもスムーズに移行できました。
主な変更点
スタイルのcva化、tailwind-merge対応
元々はtailwindを単純に文字列として扱っていますが、スタイル管理がしやすくなるcva化を行っています。
またcva化＆任意のclassの指定が可能な形にしているため、tailwind-mergeでクラスのマージが行える仕組みを導入しています。
デジタル庁デザインシステムのサンプル実装では、tailwindのテーマがプラグインとして設定されていたため、プラグイン側の設定値を見つつtailwind-mergeの設定を作成することでクラスのマージができるようになっています。
正直なところ、テーマのプラグイン化はやめてほしい＆tailwind-mergeはもう少し設定をわかりやすくしてほしい。
@digital-go-jp/tailwind-theme-pluginの設定値はこちら
tailwind-mergeの設定値はこちら
Form系や、Button、Linkなどの操作が伴うコンポーネント
独自作成コンポーネントは扱いづらいため、完全にreact-ariaのcomponentベースに置き換え。
各コンポーネントのルールに従うことでidなどの付与を行わずにラベルと入力コンポーネントの紐付けや、description、エラーテキスト表示、紐付け対応が行えます。
Selectは少し特殊でreact-ariaのListBoxがベースになります。この辺は標準の<select>要素でもよかったかも。
form周りをreact-aria化したことでちょっとしたフォームならコンポーネントを配置するだけでアクセシブルなフォームが作れるようになっていると思います。
Dialog、ハンバーガーボタン
元々は<dialog>ですが、扱いやすくするためにDialog、Popoverコンポーネントで置き換え。
Dialogはフォーカス制御はもちろんのこと、alertdialog化やlabelの紐付けなども手軽に行えます。
ハンバーガーボタンはボタンだけではなく、Dialogコンポーネントを利用することで左右上下どこにでも表示が可能です。
Pagination
paginationについては扱いやすさを優先してPaginationの単体コンポーネント化。
左右の＜＞ボタンコンポーネントの表示設定やsiblingsの設定などが行えます。利用箇所やPC、SPなどの画面に合わせて調整可能です。
以上！
実装はすべて独自というわけではなく、以下のreact-aria実装を参考にしています。
- shadcn/ui(Radix-ui)をreact-ariaで置き換えることを目指したコンポーネントコレクション
https://www.jollyui.dev/ - react-aria公式 React Aria Components + Tailwind CSS starter kit
https://react-spectrum.adobe.com/react-aria-tailwind-starter/
次はuikitとhtmlでreactに頼らない実装をしてみたい。
Discussion