fix(InputFile): InputFileをinputの挙動に寄せ、フォーム内でデータが適切に処理できるように修正

[Qs-F]

関連URL

• https://smarthr.atlassian.net/browse/SHRUI-1303
• fix: Temporary fix for inputfile #5805
• fix(InputFile): inputの挙動に寄せる #5786

概要

• InputFileの中身をネイティブのinputとmultiplyAppendableの挙動をするものに分割した。
• multiplyAppendableが再度ファイルを選択できない問題を解消した。
• 自動テストで担保できない部分を担保するため、マニュアルテスト用のStorybookを作成した。

変更内容

• InputFileの中身をネイティブのinputとmultiplyAppendableの挙動をするものに分割した。
  • 共通化できるコンポーネントもあるが、そもそもrefなどが入り組んでおりメンテナンスするたびに壊れるような状態のため分割してメンテナビリティの向上を期待している。
  • 共通化やhooks化は気持ちのある人に任せます。
• multiplyAppendableが再度ファイルを選択できない問題を解消した。
  • こちらのPRを参考に修正した fix: Temporary fix for inputfile #5805 @misako0927 さんのありがたい成果です！！
• 自動テストで担保できない部分を担保するため、マニュアルテスト用のStorybookを作成した。
  • 自動テストにはDataTransferが実装されていないため、ファイルを扱うようなテストがほぼ書けない

確認方法

@misako0927 さんとモブプロで修正しています。

以下の4つをInformationPanelの説明に従って操作してみる

• https://63d0ccabb5d2dd29825524ab-qaulfnjuwp.chromatic.com/?path=/story/components-inputfile-test--manual-test-1
• https://63d0ccabb5d2dd29825524ab-qaulfnjuwp.chromatic.com/?path=/story/components-inputfile-test--manual-test-2
• https://63d0ccabb5d2dd29825524ab-qaulfnjuwp.chromatic.com/?path=/story/components-inputfile-test--manual-test-3
• https://63d0ccabb5d2dd29825524ab-qaulfnjuwp.chromatic.com/?path=/story/components-inputfile-test--manual-test-4

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5864

commit: 2741e97

[masa0527]

手動のstoryも確認して動作的に良さそうかと思いました！