Skip to content

README.md

Latest commit

 

History

History
309 lines (223 loc) · 9.16 KB

README.md

File metadata and controls

309 lines (223 loc) · 9.16 KB

smarthr-ui v94 → v95 移行ガイド

このドキュメントは、smarthr-ui v94からv95への移行に必要な変更をまとめたものです。

対応する破壊的変更

1. LanguageSwitcher: decorators属性の削除

v95では、LanguageSwitcherコンポーネントからdecorators属性が削除されました。翻訳はsmarthr-ui内で自動的に行われます。

変更内容

  • decorators 属性削除
  • トリガーラベルは常に'Language'で固定
  • チェックアイコンのaltはsmarthr-uiの翻訳が自動適用（全9言語対応済み）

移行方法

Before (v94):

<LanguageSwitcher decorators={{ triggerLabel: () => 'Language' }} />

After (v95):

<LanguageSwitcher />

自動修正可能なパターン

以下のパターンは、ESLintの--fixオプションで自動的に修正されます：

// decorators属性を削除
<LanguageSwitcher decorators={{ triggerLabel: () => '言語' }} />
→ <LanguageSwitcher />

1-2. AppLauncher: decorators.triggerLabelをtriggerLabel属性に移行

v95では、AppLauncherコンポーネントからdecorators属性が削除され、triggerLabel属性が追加されました。

変更内容

  • decorators.triggerLabel → triggerLabel 属性に移行
  • triggerLabelが指定されていない場合はsmarthr-uiの翻訳が自動適用（全9言語対応済み）
  • 動的な値（例: featureName）を渡す必要がある場合のみ、triggerLabel属性を使用

移行方法

Before (v94):

// 固定値の場合
<AppLauncher decorators={{ triggerLabel: () => 'Apps' }} />

// 動的な値の場合
<AppLauncher decorators={{ triggerLabel: () => featureName }} />

After (v95):

// 固定値の場合 → decoratorsを削除してIntlProviderに任せる
<AppLauncher />

// 動的な値の場合 → triggerLabel属性に移行
<AppLauncher triggerLabel={featureName} />

自動修正可能なパターン

以下のパターンは、ESLintの--fixオプションで自動的に修正されます：

// 固定値の場合 → decoratorsを削除
<AppLauncher decorators={{ triggerLabel: () => "Apps" }} />
→ <AppLauncher />

<AppLauncher decorators={{ triggerLabel: () => 'アプリ' }} />
→ <AppLauncher />

// 動的な値の場合 → triggerLabel属性に移行
<AppLauncher decorators={{ triggerLabel: () => featureName }} />
→ <AppLauncher triggerLabel={featureName} />

<AppLauncher decorators={{ triggerLabel: () => getLabel() }} />
→ <AppLauncher triggerLabel={getLabel()} />

<AppLauncher decorators={{ triggerLabel: () => labels.app }} />
→ <AppLauncher triggerLabel={labels.app} />

注意: 引数ありの関数（例: (lang) => ...）やBlockStatement形式（例: () => { return "Apps" }）は自動修正できません。手動で対応してください。

2. InputFile: decorators属性の削除

v95では、InputFileコンポーネントからdecorators属性が削除されました。削除ボタンのラベルはsmarthr-uiが提供する翻訳が自動的に適用されます（IntlProvider経由）。

移行方法

Before (v94):

<InputFile decorators={{ deleteButtonLabel: () => '削除' }} />

After (v95):

<InputFile />

3. FormDialog: ボタン属性をObject形式に統合

v95では、FormDialogのボタン関連の属性がObject形式に統合されました。

変更内容

以下のpropsが削除されました：

  • actionText → actionButtonで指定
  • actionTheme → actionButton={{ text: "...", theme: "..." }}で指定
  • actionDisabled → actionButton={{ text: "...", disabled: true }}で指定
  • closeDisabled → closeButton={{ text: "...", disabled: true }}で指定
  • decorators.closeButtonLabel → closeButton="キャンセル"で指定

移行方法

シンプルな使い方（文字列のみ指定）:

// Before (v94)
<FormDialog
  actionText="保存"
  decorators={{ closeButtonLabel: () => 'キャンセル' }}
>

// After (v95)
<FormDialog
  actionButton="保存"
  closeButton="キャンセル"
>

詳細な設定が必要な場合:

// Before (v94)
<FormDialog
  actionText="削除"
  actionTheme="danger"
  actionDisabled={false}
  closeDisabled={true}
  decorators={{ closeButtonLabel: () => '閉じる' }}
>

// After (v95)
<FormDialog
  actionButton={{ text: "削除", theme: "danger", disabled: false }}
  closeButton={{ text: "閉じる", disabled: true }}
>

自動修正可能なパターン

以下のパターンは、ESLintの--fixオプションで自動的に修正されます：

// actionText のみの場合は自動でリネーム
<FormDialog actionText="保存">
→ <FormDialog actionButton="保存">

// 複数の属性がある場合は自動でObject形式に変換
<FormDialog actionText="削除" actionTheme="danger">
→ <FormDialog actionButton={{ text: "削除", theme: "danger" }}>

<FormDialog actionText="保存" actionDisabled={true}>
→ <FormDialog actionButton={{ text: "保存", disabled: true }}>

// decorators.closeButtonLabel（引数なしの関数の場合）
<FormDialog decorators={{ closeButtonLabel: () => "キャンセル" }}>
→ <FormDialog closeButton="キャンセル">

<FormDialog decorators={{ closeButtonLabel: () => buttonLabel }}>
→ <FormDialog closeButton={buttonLabel}>

<FormDialog decorators={{ closeButtonLabel: () => getLabel() }}>
→ <FormDialog closeButton={getLabel()}>

<FormDialog decorators={{ closeButtonLabel: () => labels.close }}>
→ <FormDialog closeButton={labels.close}>

注意: 引数ありの関数（例: (lang) => ...）やBlockStatement形式（例: () => { return "OK" }）は自動修正できません。手動で対応してください。

4. ActionDialog: ボタン属性をObject形式に統合

ActionDialogもFormDialogと同様に、ボタン関連の属性がObject形式に統合されました。

変更内容と移行方法

FormDialogと同じです。詳細は「3. FormDialog」セクションを参照してください。

5. MessageDialog: decorators削除とcloseButton属性への統一

v95では、MessageDialogのdecorators.closeButtonLabelがcloseButton属性に統一されました。

変更内容

以下のpropsが削除されました：

  • decorators.closeButtonLabel → closeButtonで指定

移行方法

デフォルトラベル使用の場合（省略可能）:

// Before (v94)
<MessageDialog heading="確認">
  メッセージ本文
</MessageDialog>

// After (v95) - 変更なし
<MessageDialog heading="確認">
  メッセージ本文
</MessageDialog>

カスタムラベルが必要な場合:

// Before (v94)
<MessageDialog
  heading="確認"
  decorators={{ closeButtonLabel: () => 'OK' }}
>
  メッセージ本文
</MessageDialog>

// After (v95)
<MessageDialog heading="確認" closeButton="OK">
  メッセージ本文
</MessageDialog>

自動修正可能なパターン

以下のパターンは、ESLintの--fixオプションで自動的に修正されます：

// 引数なしの関数から値を抽出
<MessageDialog decorators={{ closeButtonLabel: () => "OK" }} />
→ <MessageDialog closeButton="OK" />

<MessageDialog decorators={{ closeButtonLabel: () => buttonLabel }} />
→ <MessageDialog closeButton={buttonLabel} />

<MessageDialog decorators={{ closeButtonLabel: () => getLabel() }} />
→ <MessageDialog closeButton={getLabel()} />

<MessageDialog decorators={{ closeButtonLabel: () => labels.close }} />
→ <MessageDialog closeButton={labels.close} />

注意: 引数ありの関数（例: (lang) => ...）やBlockStatement形式（例: () => { return "OK" }）は自動修正できません。手動で対応してください。

ESLintルールの使用方法

.eslintrc.js の設定

module.exports = {
  rules: {
    'smarthr/autofixer-smarthr-ui-migration': ['error', { from: '94', to: '95' }],
  },
}

自動修正の実行

# エラーを確認
pnpm run lint

# 自動修正を実行
pnpm run lint --fix

注意事項

  • 以下のパターンは自動修正できません。エラーメッセージを確認して、手動で修正してください：
    • closeDisabled属性の移行（closeButtonのObject形式への変換が必要）
    • 引数ありの関数: decorators={{ closeButtonLabel: (lang) => ... }}、decorators={{ triggerLabel: (lang) => ... }}
    • BlockStatement形式の関数: decorators={{ closeButtonLabel: () => { return "OK" } }}、decorators={{ triggerLabel: () => { return "Apps" } }}

smarthrUiAlias オプション

プロジェクト固有のsmarthr-ui aliasパスを使用している場合は、smarthrUiAliasオプションを指定してください。

module.exports = {
  rules: {
    'smarthr/autofixer-smarthr-ui-migration': [
      'error',
      {
        from: '94',
        to: '95',
        smarthrUiAlias: '@/components/parts/smarthr-ui', // プロジェクト固有のalias
      },
    ],
  },
}

参考リンク