# ingred-ui-codemod

INGRED UI のメジャーバージョンアップに伴う破壊的変更を、利用側プロジェクトのコードに自動適用するための CLI ツールです。

## インストール不要

`npx` で直接実行できます（`ingred-ui` がインストールされていれば利用可能）。

```bash
npx ingred-ui-codemod <codemod名> <対象ディレクトリ> [オプション]
```

## 利用可能な codemod

### `palette-v2`

カラーパレット v2 への移行を自動化します。`.ts` / `.tsx` ファイルを対象に、旧パレット参照を新しい命名体系に一括置換します。

**実行例:**

```bash
# まず dry-run で変更箇所を確認
npx ingred-ui-codemod palette-v2 ./src --dry-run

# 問題なければ実行
npx ingred-ui-codemod palette-v2 ./src
```

**主な置換内容:**

| 旧                         | 新                          |
| -------------------------- | --------------------------- |
| `palette.gray.*`           | `palette.neutral.*`         |
| `palette.*.main`           | `palette.*.base`            |
| `palette.gray.light`       | `palette.neutral.softLight` |
| `palette.gray.dark`        | `palette.neutral.base`      |
| `palette.gray.deepDark`    | `palette.neutral.dark`      |
| `palette.primary.light`    | `palette.primary.softLight` |
| `palette.primary.deepDark` | `palette.primary.darker`    |
| `palette.success.light`    | `palette.success.lighter`   |
| `palette.danger.light`     | `palette.danger.lighter`    |
| `palette.warning.deepDark` | `palette.warning.ultraDark` |
| `colors.basic`             | `colors.gray`               |
| `color="gray"`             | `color="secondaryDark"`（Button 等） |

後続ステップで **Button / Badge の旧 `color` 文字列**も置換します（`palette-v2` 内の [5/7]〜[7/7]）。

| 対象（例） | 新 |
| --- | --- |
| `color="gray"`（Button） | `color="secondaryDark"` |
| `color="primaryPale"` | `color="primarySubtle"` |
| `color="basicLight"` | `color="secondaryLight"` |
| `color="neutral"`（Button 等） | `color="secondaryDark"` |
| `<Badge color="secondary"` | `<Badge color="secondaryDark"` |
| `<Badge color="basic"` | `<Badge color="inverse"` |

**注意:** `color="neutral"` の置換は **Typography の `color` や styled-components の CSS 値**にもマッチする可能性があります。置換後は必ず型チェックと差分確認を行ってください。

**手動対応が必要なもの:**

以下のパターンは自動置換せず、警告のみ表示します。

- `primaryPale`（palette 等の **パレット参照**）— 廃止。`palette.primary` の適切なスロットに置き換えてください。
- `basicDark` — 廃止。Button 等は `color="secondaryDark"` に置き換えてください。
- `colors.blue[40]` — 廃止。`colors.blue[50]` に置き換えてください。

## オプション

| オプション  | 説明                                       |
| ----------- | ------------------------------------------ |
| `--dry-run` | ファイルを変更せず、変更箇所のみ表示します |
| `--help`    | ヘルプを表示します                         |

## 対象ファイル

- `.ts` / `.tsx` ファイルのみ
- `node_modules`、`dist`、`build` ディレクトリは自動的に除外されます

## 実行後の確認

1. TypeScript のビルドを実行して型エラーがないか確認
2. 見た目に変化がないか Storybook や画面で確認