ingred-ui 25.13.3 → 26.1.0

package/bin/README.md

@@ -0,0 +1,69 @@
+# 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="neutral"`           |
+
+**手動対応が必要なもの:**
+
+以下のパターンは自動置換せず、警告のみ表示します。
+
+- `primaryPale` — 廃止。`palette.primary` の適切なスロットに置き換えてください。
+- `basicDark` — 廃止。`color="neutral"` に置き換えてください。
+- `colors.blue[40]` — 廃止。`colors.blue[50]` に置き換えてください。
+
+## オプション
+
+| オプション  | 説明                                       |
+| ----------- | ------------------------------------------ |
+| `--dry-run` | ファイルを変更せず、変更箇所のみ表示します |
+| `--help`    | ヘルプを表示します                         |
+
+## 対象ファイル
+
+- `.ts` / `.tsx` ファイルのみ
+- `node_modules`、`dist`、`build` ディレクトリは自動的に除外されます
+
+## 実行後の確認
+
+1. TypeScript のビルドを実行して型エラーがないか確認
+2. 見た目に変化がないか Storybook や画面で確認

package/bin/codemods/palette-v2.mjs

@@ -0,0 +1,315 @@
+import { readFileSync, writeFileSync, readdirSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+
+// ----------------------------------------------------------
+// ファイル探索
+// ----------------------------------------------------------
+
+const EXTENSIONS = new Set([".ts", ".tsx"]);
+const EXCLUDE_DIRS = new Set(["node_modules", "dist", "build"]);
+
+function findFiles(dir) {
+  const results = [];
+
+  function walk(current) {
+    for (const entry of readdirSync(current, { withFileTypes: true })) {
+      if (entry.isDirectory()) {
+        if (!EXCLUDE_DIRS.has(entry.name)) {
+          walk(join(current, entry.name));
+        }
+      } else if (entry.isFile()) {
+        const name = entry.name;
+        const dotIdx = name.lastIndexOf(".");
+        if (dotIdx !== -1 && EXTENSIONS.has(name.slice(dotIdx))) {
+          results.push(join(current, name));
+        }
+      }
+    }
+  }
+
+  walk(dir);
+  return results;
+}
+
+// ----------------------------------------------------------
+// 置換ルール（順序が重要: 特殊 → 汎用）
+// ----------------------------------------------------------
+
+const STEPS = [
+  {
+    label: "[1/6] palette.gray → palette.neutral（段名変更含む）",
+    replacements: [
+      {
+        pattern: /palette\.gray\.deepDark/g,
+        replacement: "palette.neutral.dark",
+        description: "gray.deepDark → neutral.dark",
+      },
+      {
+        pattern: /palette\.gray\.dark/g,
+        replacement: "palette.neutral.base",
+        description: "gray.dark → neutral.base",
+      },
+      {
+        pattern: /palette\.gray\.main/g,
+        replacement: "palette.neutral.lighter",
+        description: "gray.main → neutral.lighter",
+      },
+      {
+        pattern: /palette\.gray\.light/g,
+        replacement: "palette.neutral.softLight",
+        description: "gray.light → neutral.softLight",
+      },
+      {
+        pattern: /palette\.gray\./g,
+        replacement: "palette.neutral.",
+        description: "gray.* → neutral.*（残りの段名はそのまま）",
+      },
+      {
+        pattern: /palette\.gray(?![.\w])/g,
+        replacement: "palette.neutral",
+        description: "palette.gray → palette.neutral（プロパティアクセスなし）",
+      },
+    ],
+  },
+  {
+    label: "[2/6] colors.basic → colors.gray",
+    replacements: [
+      {
+        pattern: /colors\.basic/g,
+        replacement: "colors.gray",
+        description: "colors.basic → colors.gray",
+      },
+    ],
+  },
+  {
+    label: "[3/6] palette.*.main → palette.*.base",
+    replacements: [
+      {
+        pattern: /palette\.primary\.main/g,
+        replacement: "palette.primary.base",
+        description: "primary.main → primary.base",
+      },
+      {
+        pattern: /palette\.success\.main/g,
+        replacement: "palette.success.base",
+        description: "success.main → success.base",
+      },
+      {
+        pattern: /palette\.warning\.main/g,
+        replacement: "palette.warning.base",
+        description: "warning.main → warning.base",
+      },
+      {
+        pattern: /palette\.danger\.main/g,
+        replacement: "palette.danger.base",
+        description: "danger.main → danger.base",
+      },
+      {
+        pattern: /palette\.neutral\.main/g,
+        replacement: "palette.neutral.base",
+        description: "neutral.main → neutral.base",
+      },
+    ],
+  },
+  {
+    label: "[4/6] 段名の修正（旧色値を維持するための付け替え）",
+    replacements: [
+      {
+        pattern: /palette\.primary\.light/g,
+        replacement: "palette.primary.softLight",
+        description: "primary.light → primary.softLight",
+      },
+      {
+        pattern: /palette\.primary\.deepDark/g,
+        replacement: "palette.primary.darker",
+        description: "primary.deepDark → primary.darker",
+      },
+      {
+        pattern: /palette\.success\.light/g,
+        replacement: "palette.success.lighter",
+        description: "success.light → success.lighter",
+      },
+      {
+        pattern: /palette\.success\.deepDark/g,
+        replacement: "palette.success.darker",
+        description: "success.deepDark → success.darker",
+      },
+      {
+        pattern: /palette\.warning\.deepDark/g,
+        replacement: "palette.warning.ultraDark",
+        description: "warning.deepDark → warning.ultraDark",
+      },
+      {
+        pattern: /palette\.danger\.light/g,
+        replacement: "palette.danger.lighter",
+        description: "danger.light → danger.lighter",
+      },
+      {
+        pattern: /palette\.danger\.deepDark/g,
+        replacement: "palette.danger.darker",
+        description: "danger.deepDark → danger.darker",
+      },
+    ],
+  },
+  {
+    label: "[5/6] Button color prop",
+    replacements: [
+      {
+        pattern: /color="gray"/g,
+        replacement: 'color="neutral"',
+        description: 'color="gray" → color="neutral"',
+      },
+      {
+        pattern: /color='gray'/g,
+        replacement: "color='neutral'",
+        description: "color='gray' → color='neutral'",
+      },
+    ],
+  },
+];
+
+const WARNING_PATTERNS = [
+  {
+    pattern: /primaryPale/,
+    description:
+      "primaryPale は廃止されました。palette.primary の適切なスロットに置き換えてください。",
+  },
+  {
+    pattern: /basicDark/,
+    description:
+      "basicDark は廃止されました。color=\"neutral\" に置き換えてください。",
+  },
+  {
+    pattern: /blue\[40\]/,
+    description:
+      "colors.blue[40] は廃止されました。colors.blue[50] に置き換えてください。",
+  },
+];
+
+// ----------------------------------------------------------
+// メイン処理
+// ----------------------------------------------------------
+
+export async function run(targetDir, options = {}) {
+  const { dryRun = false } = options;
+
+  console.log("");
+  console.log("==========================================");
+  console.log(" INGRED UI パレット v2 移行");
+  console.log("==========================================");
+  console.log("");
+  console.log(`対象: ${targetDir}`);
+  if (dryRun) {
+    console.log("モード: dry-run（ファイルを変更しません）");
+  }
+  console.log("");
+
+  const files = findFiles(targetDir);
+  let totalModified = 0;
+
+  for (const step of STEPS) {
+    console.log(step.label);
+
+    for (const rule of step.replacements) {
+      let matchCount = 0;
+      const matchedFiles = [];
+
+      for (const filePath of files) {
+        const content = readFileSync(filePath, "utf8");
+
+        if (rule.pattern.test(content)) {
+          // Reset lastIndex after test() for global regex
+          rule.pattern.lastIndex = 0;
+          const newContent = content.replace(rule.pattern, rule.replacement);
+
+          if (newContent !== content) {
+            matchCount++;
+            matchedFiles.push(filePath);
+
+            if (!dryRun) {
+              writeFileSync(filePath, newContent, "utf8");
+            }
+          }
+        }
+
+        // Reset lastIndex for next file
+        rule.pattern.lastIndex = 0;
+      }
+
+      if (matchCount === 0) {
+        console.log(`  ✓ ${rule.description} — 該当なし`);
+      } else {
+        console.log(
+          `  ✓ ${rule.description} — ${matchCount} ファイル${dryRun ? "（変更予定）" : "置換"}`,
+        );
+        if (dryRun) {
+          for (const f of matchedFiles) {
+            console.log(`    ${relative(targetDir, f)}`);
+          }
+        }
+      }
+    }
+
+    console.log("");
+  }
+
+  // --- 警告パターン ---
+  console.log("[6/6] 手動対応が必要な箇所の検出");
+
+  let warningCount = 0;
+
+  for (const warn of WARNING_PATTERNS) {
+    const matches = [];
+
+    for (const filePath of files) {
+      const content = readFileSync(filePath, "utf8");
+      const lines = content.split("\n");
+
+      for (let i = 0; i < lines.length; i++) {
+        if (warn.pattern.test(lines[i])) {
+          matches.push({
+            file: relative(targetDir, filePath),
+            line: i + 1,
+            content: lines[i].trim(),
+          });
+        }
+      }
+    }
+
+    if (matches.length > 0) {
+      warningCount += matches.length;
+      console.log("");
+      console.log(`  ⚠ ${warn.description}`);
+      for (const m of matches) {
+        console.log(`    ${m.file}:${m.line}: ${m.content}`);
+      }
+    }
+  }
+
+  if (warningCount === 0) {
+    console.log("  手動対応が必要な箇所はありません。");
+  }
+
+  // --- 完了 ---
+  console.log("");
+  console.log("==========================================");
+  console.log(" 完了");
+  console.log("==========================================");
+  console.log("");
+
+  if (dryRun) {
+    console.log("dry-run モードで実行しました。ファイルは変更されていません。");
+    console.log("実際に置換するには --dry-run を外して再実行してください。");
+  } else {
+    console.log("自動置換が完了しました。");
+    if (warningCount > 0) {
+      console.log("上記で ⚠ が表示された箇所は手動での対応が必要です。");
+    }
+  }
+
+  console.log("");
+  console.log("置換後の確認:");
+  console.log("  1. TypeScript のビルドを実行して型エラーがないか確認");
+  console.log("  2. 見た目に変化がないか Storybook や画面で確認");
+  console.log("");
+}

package/bin/ingred-ui-codemod.mjs

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+
+import { existsSync, statSync, readdirSync } from "node:fs";
+import { resolve, join, basename } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const codemodsDir = join(__dirname, "codemods");
+
+function listCodemods() {
+  try {
+    return readdirSync(codemodsDir)
+      .filter((f) => f.endsWith(".mjs"))
+      .map((f) => f.replace(/\.mjs$/, ""));
+  } catch {
+    return [];
+  }
+}
+
+function printHelp() {
+  const codemods = listCodemods();
+
+  console.log(`
+Usage: ingred-ui-codemod <codemod> <target-dir> [options]
+
+Options:
+  --dry-run   変更を書き込まず、変更箇所のみ表示します
+  --help      このヘルプを表示します
+
+利用可能な codemod:
+${codemods.length > 0 ? codemods.map((c) => `  - ${c}`).join("\n") : "  (なし)"}
+
+例:
+  npx ingred-ui-codemod palette-v2 ./src
+  npx ingred-ui-codemod palette-v2 ./src --dry-run
+`);
+}
+
+// --- Parse arguments ---
+const args = process.argv.slice(2);
+
+if (args.includes("--help") || args.length === 0) {
+  printHelp();
+  process.exit(0);
+}
+
+const flags = args.filter((a) => a.startsWith("--"));
+const positional = args.filter((a) => !a.startsWith("--"));
+
+const codemodName = positional[0];
+const targetDir = positional[1];
+
+if (!codemodName) {
+  console.error("エラー: codemod 名を指定してください。\n");
+  printHelp();
+  process.exit(1);
+}
+
+if (!targetDir) {
+  console.error("エラー: 対象ディレクトリを指定してください。\n");
+  printHelp();
+  process.exit(1);
+}
+
+const resolvedTarget = resolve(targetDir);
+
+if (!existsSync(resolvedTarget) || !statSync(resolvedTarget).isDirectory()) {
+  console.error(`エラー: ディレクトリが見つかりません: ${resolvedTarget}`);
+  process.exit(1);
+}
+
+const codemodPath = join(codemodsDir, `${codemodName}.mjs`);
+
+if (!existsSync(codemodPath)) {
+  const available = listCodemods();
+  console.error(`エラー: 不明な codemod "${codemodName}"\n`);
+  if (available.length > 0) {
+    console.error("利用可能な codemod:");
+    available.forEach((c) => console.error(`  - ${c}`));
+  }
+  process.exit(1);
+}
+
+const dryRun = flags.includes("--dry-run");
+
+try {
+  const mod = await import(codemodPath);
+  await mod.run(resolvedTarget, { dryRun });
+} catch (err) {
+  console.error(`エラー: codemod "${codemodName}" の実行に失敗しました。`);
+  console.error(err);
+  process.exit(1);
+}

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Theme } from "../../themes";
 export type ButtonSize = "small" | "medium" | "large";
-export type ButtonColor = "primary" | "primaryPale" | "basicLight" | "basicDark" | "danger" | "clear";
+export type ButtonColor = "primary" | "primaryPale" | "basicLight" | "neutral" | "danger" | "clear";
 export type ButtonColorStyle = {
     normal: {
         background: string;

package/dist/components/DataTable2/types/tableActions.d.ts

@@ -11,7 +11,7 @@ export type TableAction = {
     label: string;
     icon?: React.ReactNode;
     onClick: (selectedRows: string[]) => void;
-    color?: "danger" | "primary" | "primaryPale" | "basicLight" | "basicDark" | "clear";
+    color?: "danger" | "primary" | "primaryPale" | "basicLight" | "neutral" | "clear";
     displayIn?: "toolbar" | "dropdown";
     enabledWhen?: "checked" | "unchecked" | "custom";
     /** 追加の無効化条件。enabledWhenの基本条件に加えて評価される（customの場合はこの関数の結果のみで決定） */
@@ -28,7 +28,7 @@ export type TableAction = {
         label: string;
         icon?: React.ReactNode;
         onClick: (selectedRows: string[]) => void;
-        color?: "danger" | "primary" | "primaryPale" | "basicLight" | "basicDark" | "clear";
+        color?: "danger" | "primary" | "primaryPale" | "basicLight" | "neutral" | "clear";
         enabledWhen?: "checked" | "unchecked" | "custom";
         /** 追加の無効化条件。enabledWhenの基本条件に加えて評価される（customの場合はこの関数の結果のみで決定） */
         disabled?: (checkedRows: string[]) => boolean;

package/dist/components/FilterTagInput/FilterTagInput.stories.d.ts

@@ -22,7 +22,7 @@ export default meta;
  * selectOptions={ [
  *   {
  *     icon: (
- *       <Icon name="operator_match" type="line" color={colors.basic[900]} />
+ *       <Icon name="operator_match" type="line" color={colors.gray[900]} />
  *     ),
  *     label: "含む",
  *   },
@@ -31,7 +31,7 @@ export default meta;
  *       <Icon
  *         name="operator_does_not_match"
  *         type="line"
- *         color={colors.basic[900]}
+ *         color={colors.gray[900]}
  *       />
  *     ),
  *     label: "含まない",

package/dist/components/Select2/styled.d.ts

@@ -30,7 +30,7 @@ export declare const SelectLabelIcon: import("styled-components").StyledComponen
 export declare const TagContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     $tagOverflow?: "wrap" | "truncate" | undefined;
 }, never>;
-export declare const StyledTag: import("styled-components").StyledComponent<({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, }: import("../Tag").TagProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: import("../Tag").TagProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const Placeholder: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
     $variant?: Select2Props["variant"];
     $disabled?: boolean | undefined;

package/dist/components/Tag/Tag.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { TagProps } from "./types";
-export declare const Tag: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, }: TagProps) => JSX.Element;
+export declare const Tag: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: TagProps) => JSX.Element;

package/dist/components/Tag/Tag.stories.d.ts

@@ -2,7 +2,7 @@
 import { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, }: import("./types").TagProps) => JSX.Element;
+    component: ({ label, size, variant, onRemove, className, disabled, boldText, onClick, "aria-label": ariaLabel, "data-tag": dataTag, prepend, }: import("./types").TagProps) => JSX.Element;
     argTypes: {};
 };
 export default meta;
@@ -16,3 +16,5 @@ export declare const BoldText: Story;
 export declare const Clickable: Story;
 export declare const BoldAndClickable: Story;
 export declare const AllFeatures: Story;
+export declare const PrependSizes: Story;
+export declare const PrependWithClickable: Story;

package/dist/components/Tag/styled.d.ts

@@ -5,7 +5,14 @@ type StyledTagProps = {
     $disabled?: boolean;
     $clickable?: boolean;
 };
+type PrependSlotProps = {
+    $size: TagSize;
+};
 export declare const Tag: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTagProps, never>;
-export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTagProps, never>;
+export declare const PrependSlot: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, PrependSlotProps, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTagProps & {
+    /** 削除ボタンなど後続要素があるとき、itemGap を付与 */
+    $hasTrailing?: boolean | undefined;
+}, never>;
 export declare const RemoveButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledTagProps, never>;
 export {};

package/dist/components/Tag/types.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 export type TagSize = "small" | "medium" | "large";
 export type TagVariant = "light" | "dark";
 export type TagProps = {
@@ -11,28 +12,37 @@ export type TagProps = {
     onClick?: () => void;
     "aria-label"?: string;
     "data-tag"?: string;
+    prepend?: ReactNode;
 };
 export declare const TAG_SIZES: {
     readonly small: {
         readonly height: "20px";
         readonly fontSize: "11px";
-        readonly padding: "2px 6px";
-        readonly iconSize: "14px";
-        readonly borderRadius: "2px";
+        readonly padding: "2px 4px";
+        readonly iconSize: "12px";
+        readonly borderRadius: "4px";
+        /** prepend とラベルテキストの間 */
+        readonly prependGap: "2px";
+        /** ラベルと削除ボタンなど、従来ルート gap で取っていた間隔 */
+        readonly itemGap: "4px";
     };
     readonly medium: {
         readonly height: "22px";
         readonly fontSize: "12px";
-        readonly padding: "2px 7px";
-        readonly iconSize: "16px";
+        readonly padding: "2px 4px";
+        readonly iconSize: "14px";
         readonly borderRadius: "4px";
+        readonly prependGap: "2px";
+        readonly itemGap: "6px";
     };
     readonly large: {
         readonly height: "26px";
         readonly fontSize: "13px";
-        readonly padding: "3px 8px";
-        readonly iconSize: "18px";
+        readonly padding: "4px 6px";
+        readonly iconSize: "16px";
         readonly borderRadius: "4px";
+        readonly prependGap: "4px";
+        readonly itemGap: "8px";
     };
 };
 export declare const TAG_VARIANTS: {