Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@ autofixer-smarthr-ui-migrationルールに新しいバージョン(v[XX]→v[Y
## 参考にするファイル

必ず以下のファイルを読んで、実装パターンを踏襲してください(最新のversionディレクトリを参照):
- rules/autofixer-smarthr-ui-migration/versions/v93-to-v94/REFERENCE.md(実装パターンの詳細説明)
- rules/autofixer-smarthr-ui-migration/versions/v93-to-v94/index.js(実装例)
- rules/autofixer-smarthr-ui-migration/versions/v93-to-v94/README.md(ユーザー向け移行ガイド)
- rules/autofixer-smarthr-ui-migration/versions/v93-to-v94/test.js(テストケース)
- rules/autofixer-smarthr-ui-migration/versions/v94-to-v95/REFERENCE.md(実装パターンの詳細説明)
- rules/autofixer-smarthr-ui-migration/versions/v94-to-v95/index.js(実装例)
- rules/autofixer-smarthr-ui-migration/versions/v94-to-v95/README.md(ユーザー向け移行ガイド)
- rules/autofixer-smarthr-ui-migration/versions/v94-to-v95/test.js(テストケース)
- test/autofixer-smarthr-ui-migration.js(メインテスト)
- libs/common.js(rootPathの取得、tsconfig.jsonのpaths設定読み込み)

Expand Down Expand Up @@ -588,7 +588,7 @@ https://github.com/kufu/smarthr-ui/releases

各versionディレクトリに`REFERENCE.md`があり、実装パターンや注意点が記載されています。

**最新version:** [v93-to-v94/REFERENCE.md](./versions/v93-to-v94/REFERENCE.md)
**最新version:** [v94-to-v95/REFERENCE.md](./versions/v94-to-v95/REFERENCE.md)

このドキュメントには以下が含まれます:
- ファイル構造と各セクションの説明
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,7 @@ export const ActionDialog = (props) => <div>{props.children}</div>
| `91` → `92` | [移行ガイド](./versions/v91-to-v92/README.md) |
| `92` → `93` | [移行ガイド](./versions/v92-to-v93/README.md) |
| `93` → `94` | [移行ガイド](./versions/v93-to-v94/README.md) |
| `94` → `95` | [移行ガイド](./versions/v94-to-v95/README.md) |

## 使用方法

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,15 @@ const v90ToV91 = require('./versions/v90-to-v91/index')
const v91ToV92 = require('./versions/v91-to-v92/index')
const v92ToV93 = require('./versions/v92-to-v93/index')
const v93ToV94 = require('./versions/v93-to-v94/index')
const v94ToV95 = require('./versions/v94-to-v95/index')

// サポートしているバージョン間の移行モジュール
const VERSION_MODULES = {
'v90-v91': v90ToV91,
'v91-v92': v91ToV92,
'v92-v93': v92ToV93,
'v93-v94': v93ToV94,
'v94-v95': v94ToV95,
}

module.exports = {
Expand Down Expand Up @@ -60,6 +62,8 @@ module.exports = {
...v90ToV91.messages,
...v91ToV92.messages,
...v92ToV93.messages,
...v93ToV94.messages,
...v94ToV95.messages,
},
},
create(context) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,309 @@
# smarthr-ui v94 → v95 移行ガイド

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

## 対応する破壊的変更

### 1. LanguageSwitcher: decorators属性の削除

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

#### 変更内容

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

#### 移行方法

**Before (v94):**
```tsx
<LanguageSwitcher decorators={{ triggerLabel: () => 'Language' }} />
```

**After (v95):**
```tsx
<LanguageSwitcher />
```

#### 自動修正可能なパターン

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

```tsx
// 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):**
```tsx
// 固定値の場合
<AppLauncher decorators={{ triggerLabel: () => 'Apps' }} />

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

**After (v95):**
```tsx
// 固定値の場合 → decoratorsを削除してIntlProviderに任せる
<AppLauncher />

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

#### 自動修正可能なパターン

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

```tsx
// 固定値の場合 → 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):**
```tsx
<InputFile decorators={{ deleteButtonLabel: () => '削除' }} />
```

**After (v95):**
```tsx
<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="キャンセル"`で指定

#### 移行方法

**シンプルな使い方(文字列のみ指定):**
```tsx
// Before (v94)
<FormDialog
actionText="保存"
decorators={{ closeButtonLabel: () => 'キャンセル' }}
>

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

**詳細な設定が必要な場合:**
```tsx
// 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`オプションで自動的に修正されます:

```tsx
// 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`で指定

#### 移行方法

**デフォルトラベル使用の場合(省略可能):**
```tsx
// Before (v94)
<MessageDialog heading="確認">
メッセージ本文
</MessageDialog>

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

**カスタムラベルが必要な場合:**
```tsx
// Before (v94)
<MessageDialog
heading="確認"
decorators={{ closeButtonLabel: () => 'OK' }}
>
メッセージ本文
</MessageDialog>

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

#### 自動修正可能なパターン

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

```tsx
// 引数なしの関数から値を抽出
<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 の設定

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

### 自動修正の実行

```bash
# エラーを確認
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`オプションを指定してください。

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

## 参考リンク

- [smarthr-ui v95.0.0 リリースノート](https://github.com/kufu/smarthr-ui/releases/tag/smarthr-ui-v95.0.0)
Loading