ksk-design-system 1.35.0

package/eslint/deprecated.js

@@ -0,0 +1,104 @@
+/**
+ * ESLint プラグイン: ksk-design-system 非推奨 API 検出
+ *
+ * 段階的廃止のために、特定の identifier / import パスを警告する。
+ * codemod (scripts/codemod/*.mjs) と組み合わせて使う:
+ *   1. 新版リリース時: ここに deprecated エントリを追加 → warning
+ *   2. 利用側に codemod を案内
+ *   3. 次のメジャー: severity を "error" に昇格
+ *   4. 完全削除: ここから削除
+ *
+ * 使い方 (利用側の eslint.config.js):
+ *   import kskDeprecated from "ksk-design-system/eslint/deprecated"
+ *   export default [
+ *     {
+ *       plugins: { "ksk-deprecated": kskDeprecated },
+ *       rules: { "ksk-deprecated/no-deprecated": "warn" },
+ *     },
+ *   ]
+ */
+
+/**
+ * 非推奨エントリ:
+ * - identifier: そのままの名前で使われたら警告
+ * - kind: "import" だと from ksk-design-system からの import のみ警告
+ * - replacement: 置換先（codemod 名と一致させると親切）
+ * - removeIn: 削除予定バージョン
+ *
+ * 例:
+ * {
+ *   identifier: "Banner",
+ *   kind: "import",
+ *   replacement: "Alert (variant=\"warning\")",
+ *   removeIn: "2.0.0",
+ * },
+ */
+const DEPRECATED = [
+  // 現時点で deprecated エントリなし。
+  // 破壊変更時にここに追加し、codemod とセットでリリースする。
+]
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noDeprecated = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Warn on deprecated ksk-design-system APIs",
+    },
+    schema: [],
+    messages: {
+      deprecated:
+        "[ksk-ds] {{name}} は非推奨です。{{replacement}} を使ってください{{removeIn}}。",
+    },
+  },
+  create(context) {
+    const importedDeprecated = new Map()
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== "ksk-design-system") return
+        for (const spec of node.specifiers) {
+          if (spec.type !== "ImportSpecifier") continue
+          const name = spec.imported.name
+          const entry = DEPRECATED.find((d) => d.identifier === name)
+          if (entry) {
+            importedDeprecated.set(spec.local.name, entry)
+            context.report({
+              node: spec,
+              messageId: "deprecated",
+              data: {
+                name: entry.identifier,
+                replacement: entry.replacement || "新 API",
+                removeIn: entry.removeIn ? ` (v${entry.removeIn} で削除予定)` : "",
+              },
+            })
+          }
+        }
+      },
+
+      // identifier として使用された場合（kind === undefined のエントリのみ）
+      Identifier(node) {
+        const entry = DEPRECATED.find(
+          (d) => d.identifier === node.name && d.kind !== "import"
+        )
+        if (entry) {
+          context.report({
+            node,
+            messageId: "deprecated",
+            data: {
+              name: entry.identifier,
+              replacement: entry.replacement || "新 API",
+              removeIn: entry.removeIn ? ` (v${entry.removeIn} で削除予定)` : "",
+            },
+          })
+        }
+      },
+    }
+  },
+}
+
+export default {
+  rules: {
+    "no-deprecated": noDeprecated,
+  },
+}

package/eslint/no-colorless-border.js

@@ -0,0 +1,217 @@
+/**
+ * ESLint プラグイン: ksk-design-system 無色ボーダー検出 (P032)
+ *
+ * Tailwind v4 で border-color の既定が currentColor に変わったため、
+ * `border` / `border-b` 等を色なしで書くと要素の文字色が枠線に透けて出る
+ * （消費側が濃色テキストを敷くと枠線が黒ずむ）。preset.css の base layer に
+ * --border へのフォールバック保険は入れたが、コンポーネントは明示が原則。
+ * このルールはその dev/CI ガード。
+ *
+ * 肝: 1 要素に到達しうる className 文字列を「統合」してからクラス集合に分解し、
+ *     集合内に裸の border 幅トークンがあり、かつ border-color トークンが
+ *     一切無い要素のみ報告する。CVA は base + 全 variant 値、cn()/三項は
+ *     各引数・両枝をまとめて 1 集合とみなす。これにより
+ *       - badge: base に `border`、別 variant に border-transparent / border-[var]
+ *       - 入力系: open/closed 三項で border-[var] を供給
+ *     のような「正当な無色 border」を誤検知しない。
+ *
+ * lint-scratch.sh は ui/patterns を検査対象外にしているため、こちらで補う。
+ *
+ * 使い方 (eslint.config.js):
+ *   import kskNoColorlessBorder from "./eslint/no-colorless-border.js"
+ *   plugins: { "ksk-border": kskNoColorlessBorder }
+ *   rules: { "ksk-border/no-colorless-border": "warn" }
+ */
+
+// 裸の border 幅トークン（色を供給せず currentColor に依存する＝問題の本体）:
+//   border / border-t..y / border-[Npx] / border-b-[3px]
+// マッチしない（＝裸とみなさない）: border-0|2|4|8（幅のみ・色は別管理に委ねる）,
+//   border-[var(...)] 等の色, border-none|collapse|separate|solid|dashed|dotted,
+//   状態接頭辞付き（file:border-0 等は別要素/別 state なので集合判定に乗せない）。
+const NAKED_BORDER_WIDTH = /^border(-[tblrxy])?(-\[\d+(?:\.\d+)?px\])?$/
+
+// border-color トークン（集合内に 1 つでもあれば報告しない）:
+//   border-[var(...)] / border-[#hex] / border-[rgb(...)]（px 幅 [Npx] は除外）,
+//   border-transparent / border-current / border-white|black/inherit,
+//   側指定付き（border-l-[var] / border-t-transparent）,
+//   状態接頭辞付き（hover:/focus*:/aria-*:/data-[...]:/group-*:/peer-*:/[&...]: 等）,
+//   不透明度サフィックス（border-[var(...)]/20 / border-white/10）。
+const BORDER_COLOR =
+  /(^|:)border(-[tblrxy])?-(\[(?!\d+(?:\.\d+)?px\])[^\]]*\]|transparent|current|inherit|white|black)(\/\d+)?$/
+
+// クラス結合ユーティリティ（この呼び出しの引数は className 断片とみなして再帰する）。
+const CLASS_UTILS = new Set([
+  "cn",
+  "clsx",
+  "cx",
+  "cva",
+  "tv",
+  "twMerge",
+  "twJoin",
+  "classNames",
+])
+
+function calleeName(node) {
+  const c = node.callee
+  if (!c) return null
+  if (c.type === "Identifier") return c.name
+  if (c.type === "MemberExpression" && c.property?.type === "Identifier") {
+    return c.property.name
+  }
+  return null
+}
+
+/** スコープを遡って識別子の定義（const x = <init>）の init 式を返す。 */
+function variableInit(scope, name) {
+  let s = scope
+  while (s) {
+    const v = s.variables.find((vv) => vv.name === name)
+    if (v) {
+      for (const def of v.defs) {
+        if (def.node?.type === "VariableDeclarator" && def.node.init) {
+          return def.node.init
+        }
+      }
+      return null
+    }
+    s = s.upper
+  }
+  return null
+}
+
+/**
+ * AST 式を再帰的に辿り、到達しうる className 文字列断片を out へ集める。
+ * - 三項: test を無視し consequent / alternate の両枝を集める
+ * - && / || / ??: 両辺
+ * - cn()/cva() 等: 全引数（cva は base 文字列 + variants オブジェクト値）
+ * - object/array: 値・要素を辿る（cva variants, compoundVariants の class 等）
+ * - 識別子 / メンバ参照: スコープから定義を解決して辿る。
+ *   lookup テーブル（const variantStyles = {...}; styles = variantStyles[variant];
+ *   className={cn("...border...", styles.card)}）経由で色が供給されるケースを拾う。
+ *   メンバの key は動的でありうるので、解決先オブジェクトの全文字列を集める
+ *   （集合に色を足す方向にしか働かないため誤検知＝過剰報告を防ぐ保守側）。
+ */
+function collect(node, out, ctx) {
+  if (!node || ctx.depth > 12) return
+  switch (node.type) {
+    case "Literal":
+      if (typeof node.value === "string") out.push(node.value)
+      break
+    case "TemplateLiteral":
+      for (const q of node.quasis) out.push(q.value.cooked ?? q.value.raw ?? "")
+      for (const e of node.expressions) collect(e, out, ctx)
+      break
+    case "ConditionalExpression":
+      collect(node.consequent, out, ctx)
+      collect(node.alternate, out, ctx)
+      break
+    case "LogicalExpression":
+      collect(node.left, out, ctx)
+      collect(node.right, out, ctx)
+      break
+    case "CallExpression":
+      if (CLASS_UTILS.has(calleeName(node))) {
+        for (const arg of node.arguments) collect(arg, out, ctx)
+      }
+      break
+    case "ArrayExpression":
+      for (const el of node.elements) collect(el, out, ctx)
+      break
+    case "ObjectExpression":
+      for (const prop of node.properties) {
+        if (prop.type === "Property") collect(prop.value, out, ctx)
+      }
+      break
+    case "JSXExpressionContainer":
+      collect(node.expression, out, ctx)
+      break
+    case "SpreadElement":
+      collect(node.argument, out, ctx)
+      break
+    case "TSAsExpression":
+    case "TSNonNullExpression":
+      collect(node.expression, out, ctx)
+      break
+    case "Identifier": {
+      if (ctx.seen.has(node.name)) break
+      const init = variableInit(ctx.scope, node.name)
+      if (init) {
+        ctx.seen.add(node.name)
+        collect(init, out, { ...ctx, depth: ctx.depth + 1 })
+      }
+      break
+    }
+    case "MemberExpression":
+      // key は動的でありうるため、ベースとなるオブジェクト全体を辿る。
+      collect(node.object, out, { ...ctx, depth: ctx.depth + 1 })
+      break
+    default:
+      break
+  }
+}
+
+function hasNakedBorder(classes) {
+  return classes.some((c) => NAKED_BORDER_WIDTH.test(c))
+}
+
+function hasBorderColor(classes) {
+  return classes.some((c) => BORDER_COLOR.test(c))
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noColorlessBorder = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Warn on Tailwind border width classes that omit a border color (P032)",
+    },
+    schema: [],
+    messages: {
+      colorlessBorder:
+        "[ksk-ds] 色を併記しないボーダー幅クラス（border / border-b 等）。Tailwind v4 では border-color の既定が currentColor になり、要素の文字色が枠線に透けて出る（消費側の濃色テキストで黒ずむ）。border-[var(--Border-Low-Emphasis)] 等を併記するか、状態で出し分ける場合は border-transparent を初期色に置き data-[state=active]:border-[var(--Brand-Primary)] 等で上書きする。(P032)",
+    },
+  },
+  create(context) {
+    const filename = context.filename ?? context.getFilename?.() ?? ""
+    if (/\.stories\.[tj]sx?$/.test(filename)) return {}
+
+    const sourceCode = context.sourceCode ?? context.getSourceCode?.()
+
+    function check(node) {
+      const scope = sourceCode?.getScope?.(node)
+      const fragments = []
+      collect(node, fragments, { scope, seen: new Set(), depth: 0 })
+      if (fragments.length === 0) return
+      const classes = fragments
+        .join(" ")
+        .split(/\s+/)
+        .filter(Boolean)
+      if (hasNakedBorder(classes) && !hasBorderColor(classes)) {
+        context.report({ node, messageId: "colorlessBorder" })
+      }
+    }
+
+    return {
+      // 要素単位: 1 つの className 属性に到達する全文字列（cn/三項/テンプレ含む）を統合。
+      JSXAttribute(node) {
+        if (node.name?.name !== "className") return
+        if (!node.value) return
+        check(node.value)
+      },
+
+      // CVA 定義単位: base + 全 variant 値を統合（badge.tsx の base border + variant 色対策）。
+      // cn() が JSX 属性内にある場合は JSXAttribute 側で処理済みなので、ここでは cva のみ扱い二重報告を避ける。
+      CallExpression(node) {
+        if (calleeName(node) !== "cva") return
+        check(node)
+      },
+    }
+  },
+}
+
+export default {
+  rules: {
+    "no-colorless-border": noColorlessBorder,
+  },
+}

package/package.json

@@ -0,0 +1,215 @@
+{
+  "name": "ksk-design-system",
+  "version": "1.35.0",
+  "type": "module",
+  "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
+  "license": "MIT",
+  "homepage": "https://ksk-design-system.vercel.app",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ekusiek716/ksk-design-system.git"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "bin": {
+    "ksk-ds": "./bin/init.js"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "templates",
+    "contracts",
+    "tokens.json",
+    "AGENTS.md",
+    "CLAUDE.md",
+    "DESIGN.md",
+    "src/preset.css",
+    "src/styles",
+    "src/themes",
+    "src/components/COMPONENT_LOOKUP.md",
+    "scripts/codemod",
+    "eslint",
+    "MIGRATION.md",
+    "PUBLISHING.md",
+    "RELEASE.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./class-names": {
+      "types": "./dist/types/class-names.d.ts",
+      "import": "./dist/class-names.js",
+      "default": "./dist/class-names.js"
+    },
+    "./native": {
+      "types": "./dist/types/tokens/native/index.d.ts",
+      "import": "./dist/native.js",
+      "default": "./dist/native.js"
+    },
+    "./native/ui": {
+      "types": "./dist/types/native/index.d.ts",
+      "import": "./dist/native/ui.js",
+      "default": "./dist/native/ui.js"
+    },
+    "./package.json": "./package.json",
+    "./preset": {
+      "import": "./src/preset.css",
+      "default": "./src/preset.css"
+    },
+    "./styles": {
+      "import": "./src/preset.css",
+      "default": "./src/preset.css"
+    },
+    "./styles.css": {
+      "import": "./src/preset.css",
+      "default": "./src/preset.css"
+    },
+    "./tokens/primitive": {
+      "import": "./src/styles/primitive.css",
+      "default": "./src/styles/primitive.css"
+    },
+    "./tokens/semantic": {
+      "import": "./src/styles/semantic.css",
+      "default": "./src/styles/semantic.css"
+    },
+    "./tokens/typography": {
+      "import": "./src/styles/typography.css",
+      "default": "./src/styles/typography.css"
+    },
+    "./tokens/categorical": {
+      "import": "./src/styles/categorical.css",
+      "default": "./src/styles/categorical.css"
+    },
+    "./glass": {
+      "import": "./src/styles/glass.css",
+      "default": "./src/styles/glass.css"
+    },
+    "./themes/default": {
+      "import": "./src/themes/default.css",
+      "default": "./src/themes/default.css"
+    },
+    "./themes/blue": {
+      "import": "./src/themes/blue.css",
+      "default": "./src/themes/blue.css"
+    },
+    "./themes/orange": {
+      "import": "./src/themes/orange.css",
+      "default": "./src/themes/orange.css"
+    },
+    "./themes/green": {
+      "import": "./src/themes/green.css",
+      "default": "./src/themes/green.css"
+    },
+    "./themes/violet": {
+      "import": "./src/themes/violet.css",
+      "default": "./src/themes/violet.css"
+    },
+    "./eslint/deprecated": {
+      "import": "./eslint/deprecated.js",
+      "default": "./eslint/deprecated.js"
+    }
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.config.lib.ts && tsc --project tsconfig.lib.json || true",
+    "prepack": "npm run build:lib",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6010",
+    "build-storybook": "storybook build",
+    "lint:scratch": "bash scripts/lint-scratch.sh",
+    "lint:deps": "bash scripts/check-deps.sh",
+    "lint:responsive": "bash scripts/check-responsive.sh",
+    "lint:story-reuse": "bash scripts/check-story-reuse.sh",
+    "lint:contrast": "node scripts/check-contrast.mjs",
+    "lint:tailwind": "node scripts/check-tailwind-v4.mjs",
+    "lint:prefix-order": "node scripts/check-prefix-order.mjs",
+    "generate:lookup": "node scripts/generate-component-lookup.mjs",
+    "generate:tokens": "node scripts/generate-platform-tokens.mjs",
+    "lint:tokens": "node scripts/generate-platform-tokens.mjs --check",
+    "check:native": "tsc -p tsconfig.native.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "check": "tsc -p tsconfig.app.json --noEmit && bash scripts/lint-scratch.sh && bash scripts/check-deps.sh && bash scripts/check-drift.sh && node scripts/check-contrast.mjs && node scripts/check-tailwind-v4.mjs && node scripts/check-prefix-order.mjs && node scripts/generate-component-lookup.mjs --check && node scripts/generate-platform-tokens.mjs --check && tsc -p tsconfig.native.json --noEmit",
+    "check:agent": "npm run lint && npm run check && npm test && npm run lint:story-reuse",
+    "postinstall": "node bin/init.js postinstall",
+    "mcp:build": "cd mcp-server && npm install && npm run build",
+    "mcp:start": "node mcp-server/dist/index.js"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.75.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "@radix-ui/react-slot": "^1.0.0",
+    "expo-blur": "*",
+    "iconsax-reactjs": "^0.0.8",
+    "radix-ui": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-native": ">=0.74.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@radix-ui/react-slot": {
+      "optional": true
+    },
+    "expo-blur": {
+      "optional": true
+    },
+    "iconsax-reactjs": {
+      "optional": true
+    },
+    "radix-ui": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@hookform/resolvers": "^5.2.2",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-storybook": "^10.3.3",
+    "globals": "^16.5.0",
+    "iconsax-reactjs": "^0.0.8",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-native": "^0.86.0",
+    "storybook": "^10.3.3",
+    "tailwindcss": "^4.2.1",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.1.7",
+    "zod": "^4.4.2"
+  }
+}

package/scripts/codemod/README.md

@@ -0,0 +1,51 @@
+# Codemod
+
+`ksk-design-system` で破壊変更を入れる際の自動移行スクリプト置き場。
+
+## 使い方（利用側プロジェクトで）
+
+```bash
+# 事前確認（変更を書き込まない）
+npx ksk-design-system codemod v1-to-v2 ./src --dry
+
+# 実行
+npx ksk-design-system codemod v1-to-v2 ./src
+```
+
+## 新しい codemod の作り方（メンテナ向け）
+
+1. `template.mjs` を複製
+   ```bash
+   cp scripts/codemod/template.mjs scripts/codemod/v1-to-v2.mjs
+   ```
+
+2. 編集ポイント:
+   - `RENAMES` — 単純な識別子 rename: `[["OldComp", "NewComp"], ...]`
+   - `PROP_RENAMES` — JSX prop rename: `[["Button", "kind", "variant"], ...]`
+   - `WARNINGS` — 自動置換が危険な箇所の人向け警告
+   - `PACKAGE_PATTERN` — 対象パッケージ名（通常そのまま）
+
+3. ローカル動作確認
+   ```bash
+   node scripts/codemod/v1-to-v2.mjs --dry path/to/consumer/src
+   ```
+
+4. `MIGRATION.md` に変更点を文書化（before/after 例・自動置換できない警告）
+
+5. リリースノートで案内
+   - codemod ファイル名（例: `v1-to-v2`）
+   - --dry 推奨
+   - 必ずコミット済みで実行
+
+## 注意
+
+- 正規表現ベースで 100% 正確ではない
+- 必ず利用側プロジェクトをコミット済み状態にしてから実行する
+- 適用後は `git diff` で必ず変更箇所を確認すること
+- 複雑な書き換え（型推論を伴うもの、template literal 内の参照等）は手動対応推奨
+
+## 関連ドキュメント
+
+- `MIGRATION.md` — メジャーバージョン毎の移行ガイド
+- `RELEASE.md` — リリースサイクル
+- `eslint/deprecated.js` — 旧 API 検出用 ESLint ルール