feat(StepFormDialog)!: onSubmitの内部の自由度を向上

[masa0527]

関連URL

https://smarthr.atlassian.net/browse/SHRUI-1350

概要

StepFormDialogのonSubmitコールバックを再設計し、ユーザー側で非同期処理を制御できるようにした

背景: ステップ遷移時にAPIコールを行い、レスポンスに応じて次のステップに進むか現在のステップを維持するかを制御したい

変更内容

StepFormDialog

• BREAKING CHANGE: onSubmit 再設計
• 引数を (closeDialog, e, currentStep) から (e, helpers) に変更
• helpers オブジェクトに以下の関数を提供:
  • goto(nextStep): 次のステップに移動
  • close(): ダイアログを閉じる
  • currentStep: 現在のステップ情報
• 戻り値による制御を廃止し、ヘルパー関数による制御に変更

プロダクト側で対応すること

既存の StepFormDialog を使用している箇所は以下のように書き換えが必要です：

Before

onSubmit={(closeDialog, e, currentStep) => {
  if (currentStep.id === 'step-2') {
    closeDialog()
  } else {
    return { id: 'step-2', stepNumber: 2 }
  }
}}

After

onSubmit={(e, { goto, close, currentStep }) => {
  if (currentStep.id === 'step-2') {
    close()
  } else {
    goto({ id: 'step-2', stepNumber: 2 })
  }
}}

非同期処理の例

onSubmit={async (e, { goto, close, currentStep }) => {
  try {
    const response = await fetch('/api/validate', {
      method: 'POST',
      body: new FormData(e.currentTarget)
    })
    
    if (response.ok) {
      goto({ id: 'step-2', stepNumber: 2 })
    } else {
      // エラー時は何もしない（現在のステップを維持）
      console.error('Validation failed')
    }
  } catch (error) {
    console.error('API error:', error)
  }
}}

確認方法

• Storybookの AsyncSubmitSuccess と AsyncSubmitError ストーリーで動作確認

[pkg-pr-new]

Open in StackBlitz

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

commit: 3dd1719

[Qs-F]

LGTM!

[Qs-F]

他のダイアログの修正と合わせたタイミングでmergeするので待ってね

[AtsushiM]

👍