ksk-design-system 1.35.0 → 1.37.1

package/README.md

@@ -14,7 +14,8 @@
 - **アクセシブル** — shadcn/ui（Radix UI ベース）+ `@storybook/addon-a11y` で a11y を担保
 - **Tailwind CSS v4 ネイティブ** — `@theme` ベースのトークン設計
 - **型安全** — React 19 + TypeScript、CVA によるバリアント管理
-- **110 コンポーネント** — 汎用 UI 55 / EC 系 11 / 管理画面系 8 / レイアウトシェル 3 / 汎用パターン 33
+- **110 + 91 コンポーネント** — Web 110（UI 55 / EC 11 / 管理 8 / シェル 3 / パターン 33）+ React Native 91
+- **iOS 26 Liquid Glass 対応** — RN 側 `GlassView` + `Button variant="glass"`、Web 側 `.glass` CSS マテリアル
 
 ## 🎨 テーマ
 
@@ -35,6 +36,12 @@ React 19 + TypeScript / Vite / **Tailwind CSS v4** / shadcn/ui（Radix UI）/ CV
 
 ## 🚀 使い方
 
+### Web (Next.js / Vite / 任意の React 環境)
+
+```bash
+npm install ksk-design-system
+```
+
 ```css
 /* プロジェクトの CSS */
 @import "ksk-design-system/preset";
@@ -47,11 +54,55 @@ import { Button, Card, Input, FormField } from "ksk-design-system"
 
 新規クライアント案件では、テーマファイルで `--Primitive-Brand-500` などブランドカラーの 10 行を定義するだけで、全コンポーネントがそのブランドカラーで動作します。
 
-> **インストールについて**: 現在は npm 未公開です。まずは上のライブ Storybook でコンポーネントと挙動をご確認ください。npm パッケージとしての配布を準備中です。
+### React Native / Expo
+
+`ksk-design-system/native/ui` から直接 RN 用コンポーネント（91 個）を import できます。iOS 26 の **Liquid Glass** にも対応:
+
+```tsx
+import { ThemeProvider, Button, Card, GlassView } from "ksk-design-system/native/ui"
+```
+
+```bash
+# Liquid Glass を本物の UIVisualEffectView で出したい場合
+npx expo install expo-blur
+```
+
+Web は backdrop-filter で擬似、Android は半透明 surface でフォールバックします。
+
+## 🧪 試してみる（1コマンドお試し）
+
+```bash
+npx ksk-design-system demo
+cd ksk-ds-demo
+npm run dev               # → http://localhost:5173 で全プロトタイプ
+# or
+npm run storybook         # → http://localhost:6010 で全コンポーネントカタログ
+```
+
+`npx ksk-design-system demo my-trial` のように引数で名前指定もできます。
+中身は git clone + npm install を自動でやるだけなので、もちろん手動でもOK:
+
+```bash
+git clone https://github.com/ekusiek716/ksk-design-system.git
+cd ksk-design-system && npm install
+```
+
+### Notion 仕様からモック自動生成（オプション）
+
+Claude Code をこのリポで開いて:
+
+```
+/mock https://notion.so/your-spec
+# or
+/mock 「ECサイトの商品詳細画面、カート追加と画像ギャラリー付き」
+```
+
+DS コンポーネントを最大限活用したモックが `src/prototypes/` に生成され、`http://localhost:5173` のプレビューに即反映されます。スクラッチで UI を組まず、既存コンポーネントを組み合わせて作るのでブレません。
 
 ## 📖 ドキュメント
 
 - **ライブ Storybook**: https://ksk-design-system.vercel.app — 全コンポーネントのバリアント・テーマ切り替えを操作可能
+- **npm**: https://www.npmjs.com/package/ksk-design-system
 - 設計思想・トークン体系の詳細は `CLAUDE.md` / `DESIGN.md` を参照
 
 ## 📄 ライセンス

package/bin/init.js

@@ -1,19 +1,21 @@
 #!/usr/bin/env node
 
-// ksk-design-system init
+// ksk-design-system CLI
 // Consumer プロジェクトに AI (Claude / Codex) 向けルールファイルを設置する。
 // AI エージェントは node_modules 配下のファイルを自動で読まないため、
 // プロジェクトルートに AGENTS.md / CLAUDE.md（node_modules 内の DS ルールを
 // 参照する薄いポインタ）を置く必要がある。
 //
 // Usage:
-//   npx ksk-ds init          # AGENTS.md + CLAUDE.md を設置
-//   npx ksk-ds init --force  # 既存ファイルを上書き
-//   npx ksk-ds postinstall   # npm postinstall から呼ばれる silent モード
+//   npx ksk-design-system init          # AGENTS.md + CLAUDE.md を設置
+//   npx ksk-design-system init --force  # 既存ファイルを上書き
+//   npx ksk-design-system demo [dir]    # DS リポを clone + setup（お試し用）
+//   npx ksk-design-system postinstall   # npm postinstall から呼ばれる silent モード
 
 import { copyFileSync, existsSync } from "node:fs"
 import { dirname, join, resolve } from "node:path"
 import { fileURLToPath } from "node:url"
+import { spawnSync } from "node:child_process"
 
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const pkgRoot = resolve(__dirname, "..")
@@ -26,18 +28,78 @@ if (cmd === "help" || cmd === "--help" || cmd === "-h") {
   console.log(`ksk-design-system CLI
 
 使い方:
-  npx ksk-ds init          AI ルールファイルを設置
-  npx ksk-ds init --force  既存ファイルを上書き
+  npx ksk-design-system init          AI ルールファイルを設置
+  npx ksk-design-system init --force  既存ファイルを上書き
+  npx ksk-design-system demo [dir]    DS リポを clone + npm install（お試し）
+                                      dir 省略時は ./ksk-ds-demo
 `)
   process.exit(0)
 }
 
+if (cmd === "demo") {
+  runDemo(args.slice(1))
+  process.exit(0)
+}
+
 if (cmd !== "init" && cmd !== "postinstall") {
   console.error(`未知のコマンド: ${cmd}`)
-  console.error(`npx ksk-ds help を参照してください`)
+  console.error(`npx ksk-design-system help を参照してください`)
   process.exit(1)
 }
 
+function runDemo(rest) {
+  const consumerCwd = process.cwd()
+  const targetDir = rest.find((a) => !a.startsWith("--")) || "ksk-ds-demo"
+  const absDir = resolve(consumerCwd, targetDir)
+
+  if (existsSync(absDir)) {
+    console.error(`\n✗ ${absDir} は既に存在します`)
+    console.error(`  別名を指定するか、既存フォルダを削除してください`)
+    process.exit(1)
+  }
+
+  console.log(`\n📦 KSK Design System Demo を ${targetDir}/ に展開します\n`)
+
+  // git clone --depth=1
+  const cloneRes = spawnSync(
+    "git",
+    [
+      "clone",
+      "--depth=1",
+      "https://github.com/ekusiek716/ksk-design-system.git",
+      targetDir,
+    ],
+    { stdio: "inherit", cwd: consumerCwd },
+  )
+  if (cloneRes.status !== 0) {
+    console.error("\n✗ git clone に失敗しました")
+    process.exit(1)
+  }
+
+  // npm install
+  console.log(`\n→ npm install を実行中（数分かかります）...\n`)
+  const instRes = spawnSync("npm", ["install"], {
+    stdio: "inherit",
+    cwd: absDir,
+  })
+  if (instRes.status !== 0) {
+    console.error("\n✗ npm install に失敗しました")
+    process.exit(1)
+  }
+
+  console.log(`\n✓ セットアップ完了\n`)
+  console.log(`次のステップ:\n`)
+  console.log(`  cd ${targetDir}`)
+  console.log(`  npm run dev          # → http://localhost:5173 で全プロトタイプが触れる`)
+  console.log(`  npm run storybook    # → http://localhost:6010 で全コンポーネントカタログ`)
+  console.log(``)
+  console.log(`💡 Claude Code をこのディレクトリで開くと /mock コマンドが使えます:`)
+  console.log(`   /mock https://notion.so/your-spec`)
+  console.log(`   /mock 「ECサイトの商品詳細画面」`)
+  console.log(`   → DS 準拠のモックが src/prototypes/ に自動生成`)
+  console.log(``)
+}
+
 // ─── postinstall モードのガード ─────────────────────────────
 // INIT_CWD は npm install が実行されたディレクトリ（consumer のルート）。
 // 未設定、または pkgRoot と同じ場合は DS 自身のインストールコンテキストなのでスキップ。