@cakejp/design-system 0.3.0

package/package.json

@@ -0,0 +1,186 @@
+{
+  "name": "@cakejp/design-system",
+  "version": "0.3.0",
+  "type": "module",
+  "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flashpark/cake-design-system.git"
+  },
+  "homepage": "https://flashpark.github.io/cake-design-system/",
+  "bugs": {
+    "url": "https://github.com/flashpark/cake-design-system/issues"
+  },
+  "keywords": [
+    "cakejp",
+    "design-system",
+    "react",
+    "ui-components",
+    "shadcn",
+    "tailwindcss"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "bin": {
+    "cakejp-ds": "./bin/init.js"
+  },
+  "files": [
+    "AGENTS.md",
+    "CHANGELOG.md",
+    "CLAUDE.md",
+    "CLAUDE_PRODUCTION.md",
+    "MIGRATION.md",
+    "RELEASE.md",
+    "bin",
+    "component-registry.json",
+    "contracts",
+    "dist",
+    "scripts/codemod",
+    "src/preset-standalone.css",
+    "src/preset.css",
+    "src/styles",
+    "templates",
+    "tokens.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json",
+    "./dist/index.css": {
+      "style": "./dist/index.css",
+      "default": "./dist/index.css"
+    },
+    "./preset": "./src/preset.css",
+    "./preset-standalone": "./src/preset-standalone.css",
+    "./styles": "./src/preset.css",
+    "./tokens/primitive": "./src/styles/primitive.css",
+    "./tokens/semantic": "./src/styles/semantic.css",
+    "./tokens/typography": "./src/styles/typography.css"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --config vite.config.lib.ts && tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
+    "prepack": "npm run build:lib",
+    "postinstall": "node ./bin/init.js postinstall",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint:scratch": "bash scripts/lint-scratch.sh",
+    "lint:reuse": "bash scripts/check-story-reuse.sh",
+    "generate:lint-rules": "node scripts/generate-lint-rules.mjs",
+    "check": "tsc --noEmit && bash scripts/check-deps.sh && bash scripts/check-drift.sh && bash scripts/lint-scratch.sh && bash scripts/check-story-reuse.sh && bash scripts/check-responsive.sh",
+    "test": "vitest run --config vitest.config.ts"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "@hookform/resolvers": "^5.0.0",
+    "cmdk": "^1.0.0",
+    "date-fns": "^4.0.0",
+    "iconsax-reactjs": "^0.0.8",
+    "lucide-react": ">=0.400.0",
+    "next-themes": "^0.4.0",
+    "radix-ui": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-day-picker": "^9.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.0.0",
+    "sonner": "^2.0.0",
+    "tailwindcss": "^4.0.0",
+    "vaul": "^1.0.0",
+    "zod": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@hookform/resolvers": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "cmdk": {
+      "optional": true
+    },
+    "next-themes": {
+      "optional": true
+    },
+    "vaul": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.1.1",
+    "@eslint/js": "^9.39.1",
+    "@hookform/resolvers": "^5.2.2",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-mcp": "^0.4.2",
+    "@storybook/addon-onboarding": "^10.3.3",
+    "@storybook/addon-vitest": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@vitest/browser-playwright": "^4.1.0",
+    "@vitest/coverage-v8": "^4.1.0",
+    "@xyflow/react": "^12.10.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "eslint-plugin-storybook": "^10.3.3",
+    "globals": "^16.5.0",
+    "iconsax-reactjs": "^0.0.8",
+    "lucide-react": "^0.577.0",
+    "next-themes": "^0.4.6",
+    "playwright": "^1.58.2",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.2",
+    "shadcn": "^3.8.5",
+    "sonner": "^2.0.7",
+    "storybook": "^10.3.3",
+    "tailwindcss": "^4.2.1",
+    "tsc-alias": "^1.8.16",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vaul": "^1.1.2",
+    "vite": "^7.3.1",
+    "vitest": "^4.1.0",
+    "zod": "^4.3.6"
+  }
+}

package/scripts/codemod/check-migration.mjs

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+/**
+ * Migration progress checker
+ *
+ * 利用側プロジェクトで旧 API 利用箇所を検出してリストアップする。
+ * 実際の変更は行わない（read-only）。
+ *
+ * 使い方:
+ *   npx @cakejp/design-system check-migration ./src
+ */
+
+import fs from "node:fs"
+import path from "node:path"
+
+const DEPRECATED_NAMES = [
+  "TopAppBar",
+  "TopAppBarProps",
+  "TopAppBarAction",
+  "TopAppBarNavItem",
+  "BottomNavigation",
+  "BottomNavigationProps",
+  "BottomNavigationItem",
+  "BottomAction",
+  "Balloon",
+  "BalloonProps",
+  "BalloonDirection",
+  "NavigationRibbon",
+  "NavigationRibbonProps",
+  "NavigationRibbonItem",
+  "CategoryIconStrip",
+  "CategoryIconStripProps",
+  "CategoryIconItem",
+  "MypageSidebar",
+  "MypageSidebarProps",
+  "MypageSidebarItem",
+  "MypageSidebarGroup",
+  "mypageSidebarDefaultGroups",
+]
+
+const targetDir = process.argv[2] || "./src"
+if (!fs.existsSync(targetDir)) {
+  console.error(`✗ Directory not found: ${targetDir}`)
+  process.exit(1)
+}
+
+console.log(`\n🔍 Migration check\n   Target: ${path.resolve(targetDir)}\n`)
+
+function findFiles(dir) {
+  const results = []
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      if (entry.name === "node_modules" || entry.name === "dist" || entry.name.startsWith(".")) continue
+      results.push(...findFiles(full))
+    } else if (/\.(ts|tsx|js|jsx|mjs|cjs)$/.test(entry.name)) {
+      results.push(full)
+    }
+  }
+  return results
+}
+
+const findings = {}
+let totalFindings = 0
+
+for (const file of findFiles(targetDir)) {
+  const text = fs.readFileSync(file, "utf-8")
+  if (!/@cakejp\/design-system/.test(text)) continue
+  for (const name of DEPRECATED_NAMES) {
+    const re = new RegExp(`\\b${name}\\b`, "g")
+    const matches = text.match(re)
+    if (matches) {
+      findings[name] = (findings[name] || 0) + matches.length
+      totalFindings += matches.length
+    }
+  }
+}
+
+if (totalFindings === 0) {
+  console.log("✓ 旧 API の利用は見つかりませんでした。移行完了 🎉")
+  process.exit(0)
+}
+
+console.log(`📊 旧 API 利用箇所: ${totalFindings} 件\n`)
+console.log(`   API                                  Count`)
+console.log(`   ─────────────────────────────────── ─────`)
+
+const sorted = Object.entries(findings).sort((a, b) => b[1] - a[1])
+for (const [name, count] of sorted) {
+  console.log(`   ${name.padEnd(36)} ${count.toString().padStart(5)}`)
+}
+
+console.log("")
+console.log("💡 自動移行コマンド:")
+console.log("   npx @cakejp/design-system codemod v0.2-to-v0.3 " + targetDir)
+console.log("")
+console.log("📖 詳細: https://github.com/flashpark/cake-design-system/blob/main/MIGRATION.md")
+process.exit(1)

package/scripts/codemod/v0.2-to-v0.3.mjs

@@ -0,0 +1,192 @@
+#!/usr/bin/env node
+/**
+ * Codemod: @cakejp/design-system v0.2.x → v0.3.0
+ *
+ * 利用側プロジェクトで実行して、旧 API 名を新 API 名に自動置換する。
+ *
+ * 使い方:
+ *   npx @cakejp/design-system codemod v0.2-to-v0.3 ./src
+ *   または
+ *   node node_modules/@cakejp/design-system/scripts/codemod/v0.2-to-v0.3.mjs ./src
+ *
+ * 対象:
+ *   - import { TopAppBar } from '@cakejp/design-system'  → import { Header }
+ *   - <TopAppBar ... />                                   → <Header ... />
+ *   - type X = TopAppBarProps                             → type X = HeaderProps
+ *   - 全 7 個の rename + MypageSidebar
+ *
+ * 注意:
+ *   - 正規表現ベースなので 100% 正確ではない（複雑なケースは手動確認推奨）
+ *   - --dry オプションで事前確認可能
+ *   - 必ずコミット済みの状態で実行すること（git diff で変更確認）
+ */
+
+import fs from "node:fs"
+import path from "node:path"
+
+// ============================================================
+// 置換ルール
+// ============================================================
+
+/** 完全な単語境界マッチ（識別子の一部にならないよう） */
+const RENAMES = [
+  // [old, new]
+  ["TopAppBar", "Header"],
+  ["TopAppBarProps", "HeaderProps"],
+  ["TopAppBarAction", "HeaderAction"],
+  ["TopAppBarNavItem", "HeaderNavItem"],
+
+  ["BottomNavigation", "BottomTabBar"],
+  ["BottomNavigationProps", "BottomTabBarProps"],
+  ["BottomNavigationItem", "BottomTabBarItem"],
+
+  ["BottomAction", "StickyActionBar"],
+
+  ["Balloon", "CoachMark"],
+  ["BalloonProps", "CoachMarkProps"],
+  ["BalloonDirection", "CoachMarkDirection"],
+
+  ["NavigationRibbon", "SubNav"],
+  ["NavigationRibbonProps", "SubNavProps"],
+  ["NavigationRibbonItem", "SubNavItem"],
+
+  ["CategoryIconStrip", "CategoryShortcuts"],
+  ["CategoryIconStripProps", "CategoryShortcutsProps"],
+  ["CategoryIconItem", "CategoryShortcutsItem"],
+
+  ["mypageSidebarDefaultGroups", "mypageMenuGroups"],
+
+  // MypageSidebar の関連型は SideNav* に移行
+  ["MypageSidebarProps", "SideNavProps"],
+  ["MypageSidebarItem", "SideNavItem"],
+  ["MypageSidebarGroup", "SideNavGroup"],
+]
+
+// 長い名前から順にマッチさせる（部分マッチ防止）
+RENAMES.sort((a, b) => b[0].length - a[0].length)
+
+// ============================================================
+// CLI 引数
+// ============================================================
+
+const args = process.argv.slice(2)
+const dry = args.includes("--dry")
+const targetDir = args.find((a) => !a.startsWith("--")) || "./src"
+
+if (!fs.existsSync(targetDir)) {
+  console.error(`✗ Directory not found: ${targetDir}`)
+  process.exit(1)
+}
+
+console.log(`\n🔧 Codemod v0.2 → v0.3`)
+console.log(`   Target: ${path.resolve(targetDir)}`)
+console.log(`   Mode:   ${dry ? "DRY RUN (no changes written)" : "APPLY"}`)
+console.log("")
+
+// ============================================================
+// ファイル探索
+// ============================================================
+
+/** @returns {string[]} */
+function findFiles(dir) {
+  const results = []
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      if (entry.name === "node_modules" || entry.name === "dist" || entry.name.startsWith(".")) continue
+      results.push(...findFiles(full))
+    } else if (/\.(ts|tsx|js|jsx|mjs|cjs)$/.test(entry.name)) {
+      results.push(full)
+    }
+  }
+  return results
+}
+
+// ============================================================
+// 変換
+// ============================================================
+
+let totalFiles = 0
+let totalChanges = 0
+const fileChanges = []
+
+for (const file of findFiles(targetDir)) {
+  const original = fs.readFileSync(file, "utf-8")
+  let updated = original
+  let fileChangeCount = 0
+
+  // @cakejp/design-system からの import がある or 単純に旧名を含むファイルのみ対象
+  // (誤爆防止: 関係ない identifier は触らない)
+  const usesPackage = /@cakejp\/design-system/.test(original)
+  if (!usesPackage) continue
+
+  for (const [oldName, newName] of RENAMES) {
+    // \b は識別子境界
+    const re = new RegExp(`\\b${oldName}\\b`, "g")
+    const matches = updated.match(re)
+    if (matches) {
+      updated = updated.replace(re, newName)
+      fileChangeCount += matches.length
+    }
+  }
+
+  // MypageSidebar コンポーネント自体は wrapper があるが、
+  // 利用側に SideNav + mypageMenuGroups への明示的な書き換えを促す
+  // （ここは正規表現では難しいので警告のみ）
+  if (/\bMypageSidebar\b/.test(original)) {
+    console.log(`  ⚠ ${file}: MypageSidebar の利用が見つかりました。`)
+    console.log(`     SideNav + mypageMenuGroups への手動移行を推奨します。`)
+    console.log(`     詳細: MIGRATION.md`)
+  }
+
+  // Banner は Alert (variant="notice-*") に統合。
+  // variant 値の変換が必要なため警告のみ（自動置換は誤爆リスク高）
+  if (/\bBanner\b/.test(original) && !/\bBannerCarousel\b/.test(original.replace(/\bBanner\b/g, ''))) {
+    console.log(`  ⚠ ${file}: Banner の利用が見つかりました。`)
+    console.log(`     Alert (variant="notice-*") への手動移行を推奨します。`)
+    console.log(`     例: <Banner variant="caution" ... /> → <Alert variant="notice-caution" ... />`)
+    console.log(`     詳細: MIGRATION.md`)
+  }
+
+  if (fileChangeCount > 0) {
+    totalFiles++
+    totalChanges += fileChangeCount
+    fileChanges.push({ file, count: fileChangeCount })
+    if (!dry) {
+      fs.writeFileSync(file, updated, "utf-8")
+    }
+  }
+}
+
+// ============================================================
+// 結果
+// ============================================================
+
+console.log("")
+if (totalFiles === 0) {
+  console.log("✓ 旧 API の利用箇所は見つかりませんでした。移行は完了しています。")
+  process.exit(0)
+}
+
+console.log(`📊 結果`)
+console.log(`   変換対象ファイル: ${totalFiles}`)
+console.log(`   置換箇所合計:    ${totalChanges}`)
+console.log("")
+console.log(`📝 ファイル別変更箇所:`)
+for (const { file, count } of fileChanges.sort((a, b) => b.count - a.count)) {
+  console.log(`   ${count.toString().padStart(3)}× ${file}`)
+}
+
+if (dry) {
+  console.log("")
+  console.log(`💡 DRY RUN 完了。実際に適用するには '--dry' を外して再実行:`)
+  console.log(`   node scripts/codemod/v0.2-to-v0.3.mjs ${targetDir}`)
+} else {
+  console.log("")
+  console.log(`✓ 変換完了。'git diff' で変更内容を確認し、テストを実行してください。`)
+  console.log(`   git diff`)
+  console.log(`   npm test`)
+  console.log("")
+  console.log(`💡 残作業: MypageSidebar 利用箇所があれば、SideNav + mypageMenuGroups への手動移行を推奨。`)
+  console.log(`   詳細: MIGRATION.md`)
+}

package/src/preset-standalone.css

@@ -0,0 +1,109 @@
+/* ============================================
+ * Cake.jp Design System — Standalone Preset
+ * ============================================
+ *
+ * Tailwind CSS を使わないプロジェクト（CakePHP本番等）向けの
+ * スタンドアロン版トークンファイル。
+ *
+ * CSS変数のみを定義し、技術スタックに依存しない。
+ * CakePHP, Next.js, Flutter(値のみ), 素のHTML で使用可能。
+ *
+ * 使い方:
+ *   <link rel="stylesheet" href="preset-standalone.css">
+ *   または
+ *   @import url("preset-standalone.css");
+ *
+ * これで以下が有効になる:
+ *   - Primitive カラートークン（--Primitive-*）
+ *   - Semantic カラートークン（--Text-*, --Surface-*, --Border-* 等）
+ *   - ダークモード自動切替（.dark クラス）
+ *   - shadcn bridge トークン（--primary, --foreground 等）
+ *   - シャドウ・角丸トークン
+ *
+ * タイポグラフィ（typo-*）は Tailwind v4 の @utility に依存するため、
+ * このファイルには含まれない。代わりに typo-* と同等のクラス定義を
+ * 以下の「Typography Helper」セクションで提供する。
+ * ============================================ */
+
+/* --- Layer 1: Primitive Colors --- */
+@import "./styles/primitive.css";
+
+/* --- Layer 2: Semantic Colors (+ dark mode) --- */
+@import "./styles/semantic.css";
+
+/* --- Bridge: Semantic → shadcn tokens --- */
+:root {
+  --radius: 0.625rem;
+
+  --background: var(--Surface-Primary);
+  --foreground: var(--Text-High-Emphasis);
+  --card: var(--Surface-Secondary);
+  --card-foreground: var(--Text-High-Emphasis);
+  --popover: var(--Surface-Primary);
+  --popover-foreground: var(--Text-High-Emphasis);
+  --primary: var(--Brand-Cake-Orange);
+  --primary-foreground: var(--Text-on-Inverse);
+  --secondary: var(--Surface-Secondary);
+  --secondary-foreground: var(--Text-Medium-Emphasis);
+  --muted: var(--Surface-Tertiary);
+  --muted-foreground: var(--Text-Low-Emphasis);
+  --accent: var(--Surface-Secondary);
+  --accent-foreground: var(--Text-High-Emphasis);
+  --destructive: var(--Object-Caution);
+  --border: var(--Border-Medium-Emphasis);
+  --input: var(--Border-Medium-Emphasis);
+  --ring: var(--Focus-High-Emphasis);
+}
+
+.dark {
+  --background: var(--Surface-Primary);
+  --foreground: var(--Text-High-Emphasis);
+  --card: var(--Surface-Secondary);
+  --card-foreground: var(--Text-High-Emphasis);
+  --popover: var(--Surface-Primary);
+  --popover-foreground: var(--Text-High-Emphasis);
+  --primary: var(--Brand-Cake-Orange);
+  --primary-foreground: var(--Text-on-Inverse);
+  --secondary: var(--Surface-Tertiary);
+  --secondary-foreground: var(--Text-Medium-Emphasis);
+  --muted: var(--Surface-Tertiary);
+  --muted-foreground: var(--Text-Low-Emphasis);
+  --accent: var(--Surface-Secondary);
+  --accent-foreground: var(--Text-High-Emphasis);
+  --destructive: var(--Object-Caution);
+  --border: var(--Border-Medium-Emphasis);
+  --input: var(--Border-Medium-Emphasis);
+  --ring: var(--Focus-High-Emphasis);
+}
+
+/* --- Shadow tokens --- */
+:root {
+  --shadow-md: 0px 7px 7px 0px rgba(0, 0, 0, 0.07), 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0px 12px 32px -4px rgba(24, 39, 75, 0.12), 0px 8px 16px -6px rgba(24, 39, 75, 0.12), 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
+  --shadow-tooltip: 0px 8px 8px -4px rgba(24, 39, 75, 0.08), 0px 4px 6px -4px rgba(24, 39, 75, 0.12);
+}
+
+/* --- Typography Helper Classes ---
+ * Tailwindのtypo-*と同等のCSSクラス。
+ * 本番CSSでこれらのクラスを使えば、DSと同じタイポグラフィが適用される。
+ */
+
+/* Heading */
+.typo-heading-3xl { font-size: 28px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
+.typo-heading-2xl { font-size: 24px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
+.typo-heading-xl  { font-size: 21px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
+.typo-heading-lg  { font-size: 18px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
+.typo-heading-md  { font-size: 16px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
+.typo-heading-sm  { font-size: 14px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
+
+/* Body */
+.typo-body-lg { font-size: 16px; line-height: 1.75; font-weight: 400; }
+.typo-body-md { font-size: 14px; line-height: 1.75; font-weight: 400; }
+.typo-body-sm { font-size: 12px; line-height: 1.5;  font-weight: 400; }
+.typo-body-xs { font-size: 10px; line-height: 1.5;  font-weight: 400; }
+
+/* Label */
+.typo-label-lg { font-size: 16px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
+.typo-label-md { font-size: 14px; line-height: 1.5; letter-spacing: 0.04em; font-weight: 700; }
+.typo-label-sm { font-size: 12px; line-height: 1.5;  font-weight: 500; }
+.typo-label-xs { font-size: 10px; line-height: 1.5;  font-weight: 500; }