DatePicker/DateRangePicker のリニューアル

[maktak1995]

背景

• momentjs がアプデを終了してしばらく経つのでライブラリの切り替えをしようとした
• ingred-ui の DatePicker 系は react-dates を使っているが、この react-dates と momentjs は依存関係にある
• react-dates の脱momentjsは議論されているが一向に進展がないので両方ともライブラリを切り替えることにした
• その過程で DateRangePicker そのものに不満があるという話が上がってきた
• そもそも現状の DateRangePicker が急ごしらえのもので、理想形ではない
• なので理想形のDateRangePickerをフルスクラッチで作る方向ですすめることに

デザイン

仕様Doc
DateRangePickerとDatePickerは同じデザインを使う

実装要件

momentjs の代わりに dayjs を導入する

• dayjs は momentjs との後方互換性をもっているため
• TC39 の Temporal が仕様として取り込まれた場合、Date オブジェクトが使われなくなる可能性があるので現状では後方互換性を優先してもよいという考え

react-dates の置き換えは自前の実装で行う

• 新デザインに流用できそうなライブラリが存在しない
• dayjsがまだ若いライブラリなので、DatePicker の wrapperライブラリがまだ少ない
• ざっくりとした実装テストはたくりんとんがすでに実施してくれている
  • 実装に関する記事
  • PR

関連issue

• #871
• #856

経過進捗

2022/9 まきたけが仕様策定を開始
2022/11 dayjsをwrapper経由で使うようにする変更をリリース
2022/12 まきたけがDstへの注力と自身の実装力不足を理由にこのタスクから離脱
2022/12 このタスクの補助をよくしてくれていたたくりんとんが後を引き継ぐ

[maktak1995]

まずはデザインを見せてDstメンにユーザーヒアリングする
たぶんDstメンがほしいっていうとみんなほしいと思うので

[noronaoki]

@maktak1995
とりあえずプロトタイプ作ったんだけど、XDの都合上うまく表現できない部分もあるんで口頭で説明しますね

[maktak1995]

プロトタイプの動作補足説明

キーボード入力

• 必要な桁数入力されたら自動で隣にフォーカスが移動する
• Enter押下でも同じ挙動

カレンダー入力

• カレンダー左上に同様の入力欄

• カレンダーは縦スクロール

• スティッキーな日付表示はスクロールすると月が切り替わる

• クリックすると各月へのショートカットが表示される

• 縦スクロールなのは一般的に横スクロールはしづらいものだから

[maktak1995]

仕様Doc: https://docs.google.com/document/d/1xCYGOcgtyQfXsAi0Tv_OW1XrdkyDqE8f2hBI87uRIbc/edit#

[maktak1995]

背景の整理

今回のタスクは複数のやりたいことが絡まっているのでそれを解きほぐした上でタスクをブレイクダウンしたい

momentjs を除去したい

• 公式がサポート終了するから

React-dates を除去したい

• momentjs に依存しているライブラリだから
• 更新が滞っており react v18 への対応が見込めないから

DateRangePicker のデザインをリニューアルしたい

• 現状のデザインは仮のもの
• ちゃんとしたデザイン案に沿ったものとしたい

目的

1. momentjs と react-dates を剥がす

• 現実的な候補として dayjs がある
  • interface が momentjs と同じなので置換をやりやすい
  • 様々なライブラリ候補のなかで一番小さい
• dayjs であれば react-dates の置換先として dayjs ネイティブなものではなくても momentjs 用のライブラリをfolkして置き換えて使うという選択肢も出てくる
• ステップ2を考慮したライブラリでまずはそのままの置換をすすめる？

2. DateRangePicker のデザインを変更する

• デザインと仕様はすでに固まっている
• いいライブラリがなければフルスクラッチもありうるが、難易度は跳ね上がる
• spectrum など参考になりそうな実装はある

[maktak1995]

muiのdateRangePickerがdayjs使っててUIがreact-datesと同じなので最初の置き換えにはいいかもしれない
https://mui.com/x/react-date-pickers/date-range-picker/

[maktak1995]

最初のステップとしてmuiを使った置き換えを検討したが、muiのDateRangePickerは有料版限定のコンポーネントであった。
なのでアウト。

[maktak1995]

他の置き換え候補

react-suite DateRangePicker

• 更新が活発でReact v18への対応も進んでいる
• 中華製で他に比べると利用率は高くない
• デザインシステム全部をインストールする必要があるためバンドルの肥大化が懸念される

daterangepicker-dayjs

• momentjsを利用したdaterangepickerを個人でフォークしてdayjsに対応させたもの。
• jqueryを使用しておりレガシーな実装
• Reactでの利用は考慮されていない
• 更新が1年前で止まっている

momentjsを使っている他の開発が活発なDateRangePicker

• react-datesしか見つからなかった

[maktak1995]

date-fns だと react-date-range といういい感じのライブラリがある

[maktak1995]

案1: react-suite をインストールして使用する

• 活発なライブラリなので安定した利用が見込める
• ライブラリのコンポーネント全部インストールしないといけないのでバンドルが肥大化する

案2: react-date-range を使う

• かなり柔軟なライブラリなので今後来る新しいデザインにもそのまま使い回せるかも
• dayjsでもmomentjsでもないのでingred-uiを導入しているプロダクト側の大規模な対応が必要になる

案3: react-datesをfolkしてきてdayjsとReact18に対応できるよう改修して使う

• ぱっとコードを見た感じそこまで難しいことでもまあなさそう
• 完全に自分たちで管理することにはなる
• うまくいけばingred-ui側の変更を最小限にして置き換えることが可能になる

[maktak1995]

案3かなー
結局デザインは(いつ変えるかはわからないが) あとから変わるんだし、応急手当的な処理でもまあいいんじゃないか、という気はする

[maktak1995]

いろいろしてみたがやっぱりreact-datesの手直しは全体的に古くなってるせいで余計に難しく、現実的ではなかった
date-fnsであれば使えるライブラリがいくつか存在しているので、移行先をdayjsからdate-fnsに変えられないか、変えた場合はどんな影響が出るのかを調査して可能そうであればdate-fnsに変える方向に倒したい。

[maktak1995]

@takurinton がdayjsでのカレンダー自作の検証をしてくれた。良さそうなので最終的にはdayjsでフルスクラッチする方針とする。
https://dev.takurinton.com/tech/frontend/calender-ui-prototype.html
takurinton/calendar#2

[maktak1995]

最終的な実装方針は以下の通り。

1. react-dates の moment.js の部分を dayjs に変換するラッパーを作る
2. 一旦リリースして各プロダクト置き換え
3. 置き換えてる間に新しいカレンダーをフルスクラッチ + dayjs で実装
4. なんかこれ用のリリースブランチ（v11.0.0-beta-1 とか）作るか、コンポーネントの名前を <DatePickerNext /> とかに変えて試験運用してみる
5. 良さそうだったらいよいよ置き換え

[youchann]

@maktak1995

どのように誰に引き継いだのかを書いておいてもらえると:pray:

[takurinton]

上から順にやります。
それぞれのコンポーネントを export して、使う側で組み合わせることも可能な状態にする（実際、社内でそういうユースケースがありそうなので）

• Calendar コンポーネントの追加 feat <Calendar /> component #1361
• DateField コンポーネントの追加 feat <DateField /> component #1362
• DatePicker の追加 feat <NewDatePicker /> #1363
• CalendarRange コンポーネントの追加 feat <CalendarRange /> #1365
• DateRangeField コンポーネントの追加 feat <DateRangeField /> #1367
• DateRangePicker コンポーネントの追加 feat <DateRangePicker />  #1369
• スタイルの細かい修正
• インターフェイスの整理 DatePicker/DateRangePicker のリニューアル #975 (comment)
• 年選択の実装 DatePicker/DateRangePicker のリニューアル #975 (comment)
• （リファクタ） Refactor datepicker #1372

[takurinton]

snapshot テストは style やインターフェイス調整するタイミングで入れる（Calendar と DateField を組み合わせて DatePicker 作るし、その段階で都度更新するのは疲れるので）

[takurinton]

年選択のスクロールについてやる。
これは

• カレンダーの無限スクロールを担っている useScroll を useScrollCalendar にリネーム Rename useScroll to useScrollCalendar #1384
• 年選択の無限スクロールを担う useScrollYear を追加 Feat year and month select component #1385
• Intersection Observer API を扱う部分を抽象化した useIntersecion の定義 → 一旦不要

という流れでやる。

[takurinton]

年選択のスクロールの前に一旦リリースかけてもいいかもな。プロダクト側で使う期間が欲しい。
最低限のインターフェイスさえ揃えば問題なく使えるので（現在追加してるインターフェイスはプロダクト側のコードをベースに定義してるので特段困らないはず）

[takurinton]

memo
errorText prop の必要性とデザインを野呂さんに確認する。
#1377 (comment)

[takurinton]

一旦リリースかける。
残タスクは以下。

• errorText prop の相談 → （追記）確認の結果、現行のまま行く
• 年選択 → DatePicker/DateRangePicker のリニューアル #975 (comment) で対応
• スタイルの細かい修正 → Fix style of DatePicker and DateRangePicker #1395

[takurinton]

ひとまず v14.5.0 リリース。
https://github.com/voyagegroup/ingred-ui/releases/tag/v14.5.0

今後の流れとしては、

• 14.6.0 → 残タスク（errorText の相談、style の修正（デザイナーレビュー）、年選択）の実装
• （追記） 14.7.0 → i18n 対応
• 15.0.0 → DatePicker を完全に新しいものにする

という形でやっていく。v14.6.0 と v15.0.0 の間で小さいバグであったり、運用上の不具合の修正はしていく。

[takurinton]

デザインレビューと擦り合わせをした。
出てきた課題のメモ。https://cartaholdings.slack.com/archives/C02Q8F3FQBC/p1693276818915679

• カレンダー開いたらフォーカス？の青い線が出てる
  • タイミングがよくわからない
  • 消していい
• 閉じるボタンの色を basic[900] にする
• 閉じるボタンの余白は16pxに
• 白に統一感がないので、合わせる
  • 真っ白に合わせる
  • theme.palette.background.default かな？
• calendar の外枠は border ではなく dropshadow にする
• calendar の曜日部分は theme.gray.deepDark を使う
• 年月選択の hover を追加する
  • 四角に少し角丸をつける（actions のイメージが近い）
  • 色は水色
  • actions の背景も水色にする
• disable の calendar icon は日付と同じ色
• disable の calendar icon は disable にする
• is outside range の hover はなし（できたら）
• date range picker の日付 hover をした時の色を水色に修正
• date range picker の storybook、with actions に今日はいらない
• calendar icon は theme.palette.primary.main にする
• DateRangePicker でカレンダーの日付が上（z-index）にきてしまう問題の修正
• 英語対応も視野に入れる

上記の英語対応以外の部分を解消したら v14.6.0 をリリースする。

（追記）
デザインレビュー後の修正実装
#1395

[takurinton]

v14.6.0 としてリリースした。https://github.com/voyagegroup/ingred-ui/releases/tag/v14.6.0

[takurinton]

i18n 対応を v14.7.0 として出す #1398

format prop もi18n の対象にしようと思ったけど、ひとまずこのまま行く。
理由としては

• YYYY-MM-DD と YYYY年MM月DD日の表記ぶれが発生する
• MM/DD/YYYY をデフォルトにする需要が今のところあまり見えていない
• DateTimePicker として使いたい場合に、結局のところ各々の対応が必要になる

らへんがある。いずれ対応するつもりはあるが、ここでは対応しない。

[takurinton]

v14.7.0 としてリリースした
https://github.com/voyagegroup/ingred-ui/releases/tag/v14.7.0

[takurinton]

v15 リリースしたらこの issue はとじる。
v15 は各プロダクトで適用してしばらく運用してから出すつもりで、その間にバグ等が発生したら都度回収する。

[takurinton]

日付を選択すると、カレンダーが viewport の先頭に行ってしまう問題を修正する

[takurinton]

React v17 以下でスクロール周りの不備が見つかった。そのため、ingred-ui を使ってる全てのプロダクトを React v18 に引き上げた。

[takurinton]

memo
Action の部分の max-width を 130px にする。
溢れた部分は3点リーダーで省略

追記

done #1428

[takurinton]

memo
Actions の部分が縦に溢れたら、スクロール可能な領域にする

追記
done #1426

[takurinton]

そろそろデザインの修正も落ち着いてきたし、snapshot テスト追加してもいいかもしれない

[takurinton]

memo
Actions とカレンダーを分けてる線の色を Basic[200] に修正する

追記

done #1429

[takurinton]

DateRangeField、今だと Input を2つ横並びにしておいてるけど、せっかく format の仕組み作ったので1つの Input で賄えるようにしたい。
開始日と終了日を判定するロジックを考えてないのですぐできるものではないけど、そのほうが利便性が高まるのは自明なので取り組むぞー
https://ingred-ui.netlify.app/?path=/story/components-inputs-daterangefield--example

[takurinton]

一旦一区切り
#1462