feat: Step 付き FormDialog の新規作成（FormDialogの拡張ではないバージョン）

[schktjm]

関連URL

asana: https://app.asana.com/0/1206535203416259/1208178713972396/f
イメージ図: https://kufuinc.slack.com/archives/CGC58MW01/p1725506017398559?thread_ts=1725505216.026419&cid=CGC58MW01

#4972 で、FormDialog の拡張版を作ったのですが、若干ロジックが複雑になってしまったため独立で作ってみました！
比較用に PR は残しています！

概要

Step を持つ FormDialog の実装をしました。

目的

• Step 付きダイアログの見た目を統一するため
• アクセシビリティの観点で、次ステップへ移動したときのフォーカスをダイアログトップへ移動させるため

使用イメージ

<StepFormDialog>
  <Step />
  <Step />
  <Step />
</StepFormDialog>

type FormDialogに追加したProps = {
  decorators?: DecoratorsType<'nextButtonLabel' | 'backButtonLabel'>
  onClickNext?: () => void  // 次へボタンを押したときのイベントハンドラ
  onClickBack?: () => void  // 前へボタンを押したときのイベントハンドラ
}

変更内容

• feat: Step つき FormDialog の実装 #4972 から路線変更をして、コンポーネントを新しく生成する方法で実装しました
• FormDialog に、戻る・次へボタンなどをデフォルトで設置するようにしました

確認方法

storybook のコンポーネントを作ったのでそこから確認お願いします！
http://localhost:6006/?path=/story/dialog%EF%BC%88%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%EF%BC%89-stepformdialog--default

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@5004

commit: 30b5923

[schktjm]

FormDialog の拡張と比べて、ボタンのラベルの出し分けなどは DialogContentInnner に寄せたため、 hooks は activeStep 関連の処理のみになりました。
いっそ分けなくてもいいかもというレベルです 🤔

[schktjm]

最終ステップのひとつ前のステップで、次へボタンを押すと即座に button の type が submit に更新され、onSubmit が発火するという現象が起きていたため、この step の更新をトランジションとして即座にUI更新されないようにしました。

[schktjm]

基本的な構成は FormDialog からほぼ変えず、次へ、戻るボタンなどをを表示しています！

[schktjm]

eslint のカスタムルールでエラーが出てしまうので、こういう名前 FormDialog$ にしてるのですが、この方法で進めるなら適切な名前に変更して、ルールに付け足していいと思いました！