{"_id":"@degel_lc/global-header","name":"@degel_lc/global-header","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@degel_lc/global-header","version":"0.1.0","description":"phsk-nexusと連携するマイクロサービス向けグローバルヘッダーReact SDKコンポーネント","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./styles.css":"./dist/styles.css"},"sideEffects":["*.css"],"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest run","test:watch":"vitest","lint":"biome check ./src","lint:fix":"biome check --write ./src","format":"biome format --write ./src","check":"pnpm lint && pnpm tsc --noEmit","check:fix":"pnpm lint:fix && pnpm tsc --noEmit","prepublishOnly":"pnpm build"},"keywords":["react","header","phsk","radix-ui","typescript"],"author":"","license":"MIT","repository":{"type":"git","url":""},"engines":{"node":">=18.0.0"},"peerDependencies":{"@radix-ui/themes":"^3.0.0","react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@radix-ui/themes":"^3.2.1","lucide-react":"^0.474.0"},"devDependencies":{"@biomejs/biome":"^1.9.4","@testing-library/jest-dom":"^6.6.3","@testing-library/react":"^16.2.0","@types/node":"^22.12.0","@types/react":"^19.0.8","@types/react-dom":"^19.0.3","autoprefixer":"^10.4.20","happy-dom":"^16.6.1","postcss":"^8.5.1","react":"^19.0.0","react-dom":"^19.0.0","tailwindcss":"^4.0.3","tsup":"^8.3.6","typescript":"^5.7.3","vitest":"^3.0.4"},"packageManager":"pnpm@10.26.2","_id":"@degel_lc/global-header@0.1.0","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-HU6lnh67XV5SkOv8+m8x6tm/jlFUhADX1trDfqSe/HFSmYcIdfdcGEcqGnbquR8pLn896+X2NbPzf+Vb1ilVbA==","shasum":"083c8325ad37e73bf29bfd1bca678cad07c51bde","tarball":"https://registry.npmjs.org/@degel_lc/global-header/-/global-header-0.1.0.tgz","fileCount":8,"unpackedSize":49064,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBu4g/wti1i32BNr5gyK4aHDqmoqqyGRYI6jSLz2eihIAiAfsTdbgMM6rtSJC619kJxdzZRMVnNfDUkIYOjaIkOmUw=="}]},"_npmUser":{"name":"degel_lc","email":"degel.sagittarius@gmail.com"},"directories":{},"maintainers":[{"name":"degel_lc","email":"degel.sagittarius@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/global-header_0.1.0_1768729170271_0.9954915322365696"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-18T09:39:30.145Z","0.1.0":"2026-01-18T09:39:30.407Z","modified":"2026-01-18T09:39:30.638Z"},"maintainers":[{"name":"degel_lc","email":"degel.sagittarius@gmail.com"}],"description":"phsk-nexusと連携するマイクロサービス向けグローバルヘッダーReact SDKコンポーネント","keywords":["react","header","phsk","radix-ui","typescript"],"repository":{"type":"git","url":""},"license":"MIT","readme":"# @phsk/global-header\n\nphsk-nexusと連携するマイクロサービス向けグローバルヘッダーReact SDKコンポーネント。\n\n## 特徴\n\n- サービス間のシームレスな移動\n- 認証状態の一元表示\n- 統一されたUI/UX\n- Light/Dark テーマ対応\n- React 18/19 + Next.js 15/16 対応\n\n## インストール\n\n```bash\npnpm add @phsk/global-header @radix-ui/themes\n```\n\n## 使用方法\n\n### 基本的な使用法\n\n```tsx\nimport { PhskGlobalHeader } from '@phsk/global-header';\nimport '@phsk/global-header/styles.css';\nimport '@radix-ui/themes/styles.css';\n\nexport default function Layout({ children }) {\n  return (\n    <>\n      <PhskGlobalHeader\n        currentServiceId=\"treree\"\n        authEndpoint=\"https://your-phsk-nexus.example.com/api\"\n      />\n      <main>{children}</main>\n    </>\n  );\n}\n```\n\n### サービス切替コールバック付き\n\n```tsx\n<PhskGlobalHeader\n  currentServiceId=\"treree\"\n  authEndpoint=\"https://your-phsk-nexus.example.com/api\"\n  onServiceChange={(serviceId, service) => {\n    // カスタム処理（例：ローディング表示など）\n    console.log(`Switching to ${service.name}`);\n    if (service.url) {\n      window.location.href = service.url;\n    }\n  }}\n/>\n```\n\n### JWT認証モード\n\n```tsx\n<PhskGlobalHeader\n  currentServiceId=\"treree\"\n  authEndpoint=\"https://your-phsk-nexus.example.com/api\"\n  authMode=\"jwt\"\n  getToken={() => localStorage.getItem('phsk_token')}\n/>\n```\n\n### テーマ指定\n\n```tsx\n<PhskGlobalHeader\n  currentServiceId=\"treree\"\n  authEndpoint=\"https://your-phsk-nexus.example.com/api\"\n  theme=\"dark\" // 'light' | 'dark' | 'system'\n/>\n```\n\n## Props\n\n| Prop | 型 | 必須 | デフォルト | 説明 |\n|------|-----|------|-----------|------|\n| `currentServiceId` | `string` | ✓ | - | 現在のサービスID |\n| `authEndpoint` | `string` | ✓ | - | phsk-nexus APIエンドポイント |\n| `onServiceChange` | `(id: string, service: Service) => void` | - | - | サービス切替コールバック |\n| `theme` | `'light' \\| 'dark' \\| 'system'` | - | `'system'` | テーマ設定 |\n| `authMode` | `'cookie' \\| 'jwt'` | - | `'cookie'` | 認証モード |\n| `getToken` | `() => string \\| null \\| Promise<string \\| null>` | - | - | JWTトークン取得関数 |\n| `className` | `string` | - | - | カスタムCSSクラス |\n| `nexusDashboardUrl` | `string` | - | `authEndpoint`から導出 | phsk-nexusダッシュボードURL |\n\n## APIエンドポイント\n\nこのコンポーネントは以下のAPIエンドポイントを使用します：\n\n### GET /api/user/services\n\nユーザーが利用可能なサービス一覧を返します。\n\n**リクエスト:**\n```http\nGET /api/user/services\nAuthorization: Bearer <JWT>  # authMode='jwt'の場合\n```\n\n**レスポンス:**\n```json\n{\n  \"services\": [\n    {\n      \"id\": \"treree\",\n      \"name\": \"Treree\",\n      \"description\": \"ツリー管理サービス\",\n      \"url\": \"https://treree.example.com\",\n      \"iconUrl\": \"/services/treree/icon.svg\",\n      \"status\": \"active\"\n    }\n  ],\n  \"currentUser\": {\n    \"id\": \"user-123\",\n    \"name\": \"山田 太郎\",\n    \"email\": \"yamada@example.com\",\n    \"tenantId\": \"tenant-123\",\n    \"tenantName\": \"Acme Corp\",\n    \"role\": \"member\"\n  }\n}\n```\n\n## 型定義\n\n```typescript\ninterface Service {\n  id: string;\n  name: string;\n  description: string | null;\n  url: string | null;\n  iconUrl: string | null;\n  status: 'active' | 'trial' | 'trialing';\n}\n\ninterface User {\n  id: string;\n  name: string;\n  email: string;\n  tenantId: string;\n  tenantName: string | null;\n  role: 'member' | 'tenant_admin' | 'system_admin';\n}\n\ninterface PhskGlobalHeaderProps {\n  currentServiceId: string;\n  authEndpoint: string;\n  onServiceChange?: (serviceId: string, service: Service) => void;\n  theme?: 'light' | 'dark' | 'system';\n  authMode?: 'cookie' | 'jwt';\n  getToken?: () => string | null | Promise<string | null>;\n  className?: string;\n  nexusDashboardUrl?: string;\n}\n```\n\n## フック\n\n### useUserServices\n\nカスタムUIを構築する場合に使用できるフックです。\n\n```tsx\nimport { useUserServices } from '@phsk/global-header';\n\nfunction CustomHeader() {\n  const { services, currentUser, isLoading, error, refetch } = useUserServices({\n    authEndpoint: 'https://your-phsk-nexus.example.com/api',\n    authMode: 'cookie',\n  });\n\n  if (isLoading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error.message}</div>;\n\n  return (\n    <div>\n      <p>Welcome, {currentUser?.name}</p>\n      <ul>\n        {services.map(service => (\n          <li key={service.id}>{service.name}</li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n```\n\n## スタイルカスタマイズ\n\nCSS変数を使用してスタイルをカスタマイズできます。テーマクラスは `:root`、`.light`、`.light-theme`（ライト）と `.dark`、`.dark-theme`（ダーク）に対応しています：\n\n```css\n:root,\n.light,\n.light-theme {\n  --phsk-header-bg: #ffffff;\n  --phsk-header-border: #e2e8f0;\n  --phsk-header-text: #0f172a;\n}\n\n.dark,\n.dark-theme {\n  --phsk-header-bg: #0f172a;\n  --phsk-header-border: rgba(255, 255, 255, 0.1);\n  --phsk-header-text: #ffffff;\n}\n```\n\n## 環境別設定\n\n### 開発環境（Docker）\n\nphsk-nexusとtreree等をDocker Composeで連携する場合：\n\n```tsx\n<PhskGlobalHeader\n  currentServiceId=\"treree\"\n  authEndpoint=\"http://phsk-nexus-app:3000/api\"\n  nexusDashboardUrl=\"http://localhost:3000\"\n/>\n```\n\n**前提条件**:\n- phsk-nexusが`phsk-network`を作成済み\n- trereeが`phsk-network`に`external: true`で参加\n- 詳細は `phsk-nexus/docs/02_アーキテクチャ/環境構成図_開発.md` を参照\n\n### 本番環境（Vercel）\n\n```tsx\n<PhskGlobalHeader\n  currentServiceId=\"treree\"\n  authEndpoint=\"https://phsk-nexus.vercel.app/api\"\n/>\n```\n\n### 環境変数で切り替え（推奨）\n\n```tsx\n<PhskGlobalHeader\n  currentServiceId=\"treree\"\n  authEndpoint={process.env.NEXT_PUBLIC_PHSK_NEXUS_URL + '/api'}\n/>\n```\n\n`.env.local`:\n```bash\n# 開発環境（Docker）\nNEXT_PUBLIC_PHSK_NEXUS_URL=http://phsk-nexus-app:3000\n\n# 本番環境（Vercel）\nNEXT_PUBLIC_PHSK_NEXUS_URL=https://phsk-nexus.vercel.app\n```\n\n## 開発\n\n```bash\n# 依存関係インストール\npnpm install\n\n# 開発モード（watchモード）\npnpm dev\n\n# ビルド\npnpm build\n\n# テスト\npnpm test\npnpm test:watch  # ウォッチモード\n\n# リント＆フォーマット\npnpm lint:fix    # リント自動修正\npnpm format      # フォーマットのみ\n\n# 型チェック＆リント\npnpm check       # lint + tsc\npnpm check:fix   # lint:fix + tsc\n```\n\n## 必要な依存関係\n\n- React 18+ または 19+\n- @radix-ui/themes ^3.0.0\n\n## ライセンス\n\nMIT\n","readmeFilename":"README.md","_rev":"1-ced6ae17b380032c911e45220e6f6146"}