Open7
UIライブラリを作るためのライブラリを作りたい
mUIライブラリを作るためのライブラリを作りたい。
UIライブラリのコンポーネントの実装は大変
Selectのコンポーネントであれば、どのような実装が必要であるか考えてみる（optionsも自前で実装する場合）。
・defaultValueが設定されている場合、valueにdefaultValueを設定
・fullWidthなどのサイズの調整
・defaultValueがある場合のvalueの設定
・classの設定
・disabled時の挙動（pointerEvents, 背景色など）
・hover時のcolor, border, backgroundなどの変更
・focus時のcolor, border, backgroundなどの変更
・autoFocus時の挙動（レンダリング後にfocus()を実行）
・stopPropagation()で親要素のクリックイベント無効
・placeholderの表示
・helperTextの表示（エラーの場合の文字色変更）
・Selectを開いた時のoptionsの表示制御（createPortalを使うなど）
・Selectが画面の端に置かれている時の、optionsの表示位置の調整（react-popperを使うなど）
・本来のselect, optionを隠す（visuallyHidden）
・option選択時にvisuallyHiddenで隠された本来のselectタグのeventの取得
・キーボード操作（Tabでfocus, 十字キーで移動, スペースorエンターで選択など）
・optionsを開いている間はスクロールを無効にする
・aria-expanded, aria-selectedなどのアクセシビリティ
・optionを別コンポーネントで実装する場合は、cloneElementで子要素のpropsに値を渡す
AutoCompleteも実装する場合は、debounceとthrottleなどで実装する必要も出てくるかもしれない。
このように１つのコンポーネントを実装するだけでも考えることが多いが、似たコンポーネントであれば、共通する処理は変わらないだろう。
UIライブラリは、デザインとロジックが一体となっているため、複雑になるにつれて、改善するのが難しくなる。
また、UIライブラリを作るにあたって、外部ライブラリと切り離せない実装になることが多い。
特に、CSS（sass, emotion, ゼロランタイム系など）やモジュールバンドラ（webpack, Vite）など技術のアップデートが早いライブラリに依存した実装になっていると、保守運用が大変になる。
UIライブラリを作るためのライブラリを作りたい
そこで、コンポーネントで使用する共通のロジックを関数化し、コンポーネントの実装に必要な機能の一部をimportして使えるようなライブラリを作りたい。
主なメリット
- 誰もが簡単にUIライブラリを実装できるコアライブラリのようなものができたら、ライブラリ依存の少ない独自のUIライブラリが作りやすくなるだろう。
- 各コンポーネントに必要なprops、event、その他ロジック、カスタマイズ例など、挙動や実装について詳細に記載したドキュメントができる
- ドキュメントを作ることによって、HTML Living Standardに取り入れるべき仕様としての貢献もできると思う。
mこのようなライブラリのアイデアや、似たライブラリがあるかなど、情報を集めています。
また、一緒に開発をしてくれる方も募集しています。
m'package:flutter/material.dart'からReactコンポーネントに変換できる仕組みが作れたらいいかも
mReact NativeってFlutterほどMaterial Componentが充実してなさそうなので、React Nativeの実装を先にすすめて、Webに変換（通女のReactコンポーネントとしても使えるようにする）のがいいのかな
これに関しては、React Nativeに詳しくないので的外れなこと言っているかも
m愚直にMUIを再開発するしかないのかな、Rustとか使って